import { createGlobalStyle } from 'styled-components'

type BreakpointsType = 'xs' | 'sm' | 'lg' | 'xl'

const BREAKPOINTS: { [key: string]: string } = {
  xs: `576px`,
  sm: `768px`,
  lg: `992px`,
  xl: '1200px'
}

export const mediaQueries = (key: BreakpointsType) => {
  return (style: string) =>
    `@media (min-width: ${BREAKPOINTS[key]}) { ${style} }`
}

type GlobalStyleProps = { 
  excludeCSSReset?: boolean 
  urlImport?: string
}

export const GlobalStyle = createGlobalStyle<GlobalStyleProps>`

  @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;900&display=swap');

  ${({ urlImport }) => urlImport && `@import url('${urlImport}');`}

  * {
    box-sizing: border-box;
  }

  *:active,
  *:focus {
    outline: none;
  }

  html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    color: ${({ theme }) => theme.palette.bgContrast};
    font-family: 'Raleway', sans-serif;
    background-color: ${({ theme }) => theme.palette.bg};
    overflow: hidden;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: ${({ theme }) => theme.palette.primary};
    border-radius: 8px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: ${({ theme }) => theme.palette.primary};
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all .2s;
    &:active {
      transform: scale(0.95);
    }
  }

`