import { css } from 'styled-components';
import { eachMedia } from '../../components/utils';

export const CssTypography = css`
  html,
  body {
    font-family: var(--font-base-family, sans-serif);
    line-height: var(--font-base-line-height, 1.5);
    font-weight: var(--font-base-weight, normal);
    font-size: var(--font-base-size, 16px);
    ${props => typeof props.theme.fontBase.size === 'object' && eachMedia(props, (key: string) => `font-size: var(--font-base-size-${key});`)}
  }

  html, body, .negative, .positive {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
  }

  ::selection {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-100);
  }
`;