import { css } from "@emotion/react";

const FONT_SIZE = (100 / 780) * 100;

export const mobileAdaptationStyle = css`
  html {
    // when vw doesn't work
    font-size: 41px;
    // vw works
    font-size: ${FONT_SIZE}vw;
    @media screen and (orientation: landscape) {
      font-size: ${FONT_SIZE}vh;
    }
    @media screen and (max-width: 320px) {
      font-size: 41px;
    }
    @media screen and (min-width: 780px) {
      font-size: 16px;
    }
    --dvh: 1dvh;
  }
`;

export const globalStyle = css`
  html,
  body,
  #root {
    min-height: 100vh;
    height: 100vh;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  svg {
    height: 30px;
    width: 30px;
    border: none;
  }

  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC,
      Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
  }

  * {
    outline: none !important;
  }

  /*
  *  Use a more-intuitive box-sizing model.
  */

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

export const LEFT_PANEL_WIDTH = 280;
export const RIGHT_PANEL_WIDTH = 320;
export const MIDDLE_PANEL_WIDTH = 300;
export const NAVBAR_HEIGHT = 48;
