/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';

import {Link} from 'components/ui';
import {theme, paddings} from 'components/shared/theme';

const {colors} = theme;

export const InnerLinksContainer = styled.default.div`
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
`;

export const InnerLink = styled.default(Link)`
  padding: 0 0;
  background-color: transparent;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  border: none;
  text-decoration: none;
  color: white;
  margin: ${paddings.small};
  border-bottom: 2px solid ${(props: {selected: boolean}): string => (props.selected ? colors.lightRed : 'none')};
  &:active {
    border-bottom: 2px solid ${(props: {selected: boolean}): string => (props.selected ? colors.lightRed : 'none')};
  }
`;
