// Any cross browser resets should occur here
import { createGlobalStyle, DefaultTheme, GlobalStyleComponent } from 'styled-components';
import { ThemeMap } from './types';
import { Breakpoint } from '../../tokens';

export const GlobalStyle: GlobalStyleComponent<{ theme: ThemeMap }, DefaultTheme> = createGlobalStyle`
  html {
    box-sizing: border-box;
    font-size: 100%;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    color: ${({ theme }) => theme.color.text.main};
    font-family: ${({ theme }) => theme.asset.font.body.family};
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: ${({ theme }) => theme.asset.font.heading.family};
    font-weight: ${({ theme }) => theme.asset.font.heading.weight};
  }

  input::-ms-clear {
    display: none;
  }

  :root {
    --lendi-ui-size: 14px;
  }

  /* For Tablet & up, we use 16px as base --lendi-ui-size. */
  @media (min-width: ${Breakpoint.sm}) {
    :root {
      --lendi-ui-size: 16px;
    }
  }

  .sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }

  .sr-only-focusable:focus,
  .sr-only-focusable:active {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
  }
`;