// @flow
import { css } from 'styled-components';
import type { ThemeProps } from '../../../../types';
import { getPaletteColor } from '../../../../mixins/branding';
import { getFontWeight } from '../../../../mixins/typography';

export const getSelectedStyles = ({
  selected,
  theme,
}: { selected: boolean } & ThemeProps) =>
  selected
    ? css`
        color: ${getPaletteColor('brand-secondary-base')};
        font-weight: ${getFontWeight({ theme, bold: true })};
        border-bottom: 2px solid ${getPaletteColor('brand-secondary-base')};
      `
    : '';
