import { css, Global } from '@emotion/react';
import { smoke } from './colors';
import { BELOW_W_1280 } from './dimensions';
import React from 'react';

// Setting EM size to 10px for easy conversion from Figma.
const REM_SIZE_PX = 15;

const GlobalStyles = () => (
  <Global
    styles={css`
      /* ::-webkit-scrollbar {
        display: none;
      } */
      /* DOT DIGITAL-7 */
      @font-face {
        font-family: Dot;
        src: url('/fonts/EnhancedDotDigital-7.eot');
        src:
          url('/fonts/EnhancedDotDigital-7.eot?#iefix') format('embedded-opentype'),
          url('/fonts/EnhancedDotDigital-7.woff2') format('woff2'),
          url('/fonts/EnhancedDotDigital-7.woff') format('woff'),
          url('/fonts/EnhancedDotDigital-7.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
      }

      /* NEUBAU ARCHITEKT STD WEBFONTS EDITION, MMXX */
      @font-face {
        font-family: Architekt;
        src: url('/fonts/nb_architekt_light-webfont.eot');
        src:
          url('/fonts/nb_architekt_light-webfont.eot?#iefix') format('embedded-opentype'),
          url('/fonts/nb_architekt_light-webfont.woff2') format('woff2'),
          url('/fonts/nb_architekt_light-webfont.woff') format('woff'),
          url('/fonts/nb_architekt_light-webfont.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
      }

      @font-face {
        font-family: Architekt;
        src: url('/fonts/nb_architekt_regular-webfont.eot');
        src:
          url('/fonts/nb_architekt_regular-webfont.eot?#iefix') format('embedded-opentype'),
          url('/fonts/nb_architekt_regular-webfont.woff2') format('woff2'),
          url('/fonts/nb_architekt_regular-webfont.woff') format('woff'),
          url('/fonts/nb_architekt_regular-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
      }

      @font-face {
        font-family: Architekt;
        src: url('/fonts/nb_architekt_bold-webfont.eot');
        src:
          url('/fonts/nb_architekt_bold-webfont.eot?#iefix') format('embedded-opentype'),
          url('/fonts/nb_architekt_bold-webfont.woff2') format('woff2'),
          url('/fonts/nb_architekt_bold-webfont.woff') format('woff'),
          url('/fonts/nb_architekt_bold-webfont.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
      }

      /* PP NEUE MONTREAL */
      @font-face {
        font-family: Montreal;
        src:
          url('/fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
          url('/fonts/PPNeueMontreal-Regular.woff') format('woff'),
          url('/fonts/PPNeueMontreal-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
      }

      @font-face {
        font-family: Montreal;
        src:
          url('/fonts/PPNeueMontreal-Italic.woff2') format('woff2'),
          url('/fonts/PPNeueMontreal-Italic.woff') format('woff'),
          url('/fonts/PPNeueMontreal-Italic.ttf') format('truetype');
        font-weight: 400;
        font-style: italic;
      }
      @font-face {
        font-family: Montreal;
        src:
          url('/fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
          url('/fonts/PPNeueMontreal-Medium.woff') format('woff'),
          url('/fonts/PPNeueMontreal-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
      }

      @font-face {
        font-family: Montreal;
        src:
          url('/fonts/PPNeueMontreal-MediumItalic.woff2') format('woff2'),
          url('/fonts/PPNeueMontreal-MediumItalic.woff') format('woff'),
          url('/fonts/PPNeueMontreal-MediumItalic.ttf') format('truetype');
        font-weight: 500;
        font-style: italic;
      }

      @font-face {
        font-family: WavToolMono;
        src: url('/fonts/AzeretMono-VariableFont_wght.ttf');
      }
      html,
      body {
        font-size: ${REM_SIZE_PX}px;
        margin: 0;
        padding: 0;
        font-family: Montreal, 'Helvetica Neue', Helvetica, sans-serif;
        background-color: #fff;
        color: ${smoke};
        line-height: 1.2;
        -webkit-font-smoothing: antialiased;
        -webkit-backface-visibility: hidden;
      }

      @media screen and (${BELOW_W_1280}) {
        html {
          font-size: ${REM_SIZE_PX * 0.9}px;
        }
      }

      .no-select {
        user-select: none;
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }
    `}
  />
);

export const TrackPageStyles = () => (
  <Global
    styles={css`
      /* ::-webkit-scrollbar {
        display: none;
      } */
      /* DOT DIGITAL-7 */
      @font-face {
        font-family: Dot;
        src: url('/fonts/EnhancedDotDigital-7.eot');
        src:
          url('/fonts/EnhancedDotDigital-7.eot?#iefix') format('embedded-opentype'),
          url('/fonts/EnhancedDotDigital-7.woff2') format('woff2'),
          url('/fonts/EnhancedDotDigital-7.woff') format('woff'),
          url('/fonts/EnhancedDotDigital-7.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
      }

      @font-face {
        font-family: Architekt;
        src: url('/fonts/nb_architekt_regular-webfont.eot');
        src:
          url('/fonts/nb_architekt_regular-webfont.eot?#iefix') format('embedded-opentype'),
          url('/fonts/nb_architekt_regular-webfont.woff2') format('woff2'),
          url('/fonts/nb_architekt_regular-webfont.woff') format('woff'),
          url('/fonts/nb_architekt_regular-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
      }

      /* PP NEUE MONTREAL */
      @font-face {
        font-family: Montreal;
        src:
          url('/fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
          url('/fonts/PPNeueMontreal-Regular.woff') format('woff'),
          url('/fonts/PPNeueMontreal-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
      }
      @font-face {
        font-family: Montreal;
        src:
          url('/fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
          url('/fonts/PPNeueMontreal-Medium.woff') format('woff'),
          url('/fonts/PPNeueMontreal-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
      }
      html,
      body {
        font-size: ${REM_SIZE_PX}px;
        margin: 0;
        padding: 0;
        font-family: Montreal, 'Helvetica Neue', Helvetica, sans-serif;
        background-color: white;
        color: ${smoke};
        line-height: 1.2;
        -webkit-font-smoothing: antialiased;
        -webkit-backface-visibility: hidden;
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }
    `}
  />
);

export default GlobalStyles;