import styled from 'styled-components';

export const TabComponent = styled.div<{
  isActive: boolean | undefined;
  fontSize: number;
}>`
  padding: 16px 0px;
  cursor: pointer;
  align-items: center;

  border-bottom: 2px solid
    ${({ isActive, theme }) =>
      isActive ? theme.colors.neutral[900] : 'transparent'};
  margin-right: 28px;
  span {
    color: ${({ isActive, theme }) =>
      isActive ? theme.colors.neutral[900] : theme.colors.neutral[500]};
    font-weight: ${({ isActive }) => (isActive ? 500 : 400)};
    ${({ fontSize }) => `font-size: ${fontSize}px;`}
    ${({ fontSize }) => `lineHeight: ${fontSize * 1.25}px;`}
  }

  @media (max-width: ${({ theme }) => theme.screens.mobile}) {
    margin-right: 20px;
    font-size: 18px;
    line-height: 22px;
  }
`;