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

export const getSelectionIndicatorShape = ({ theme }: ThemeProps) => {
  return css`
    font-size: ${getFontSize};
    font-family: ${getFontFamily};
    font-weight: ${getFontWeight({ theme, bold: true })};
    border-radius: 9999px;
    padding: 10px;
  `;
};

export const getForeground = ({
  selected = false,
  theme,
}: { selected?: boolean } & ThemeProps) => {
  return selected
    ? getPaletteColor('white')({ theme })
    : getPaletteColor('greyscale-black')({ theme });
};
