@import 'antd.css';
@import 'reset';
@import 'flex';
@import 'grid';
@import 'box';
@import 'text';
@import 'utils';
@import 'button';
@import 'rechart';
@import 'table';

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  background: var(--theme-body-color);
  color: var(--theme-primary-color);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-block-size: 100%;
  min-inline-size: 100%;
  font-feature-settings: 'tnum';
}

#root {
  min-height: 100vh;
}

body.mobile-menu-open {
  overflow: hidden;
}

.ant-notification-notice {
  word-break: break-word;

  .ant-notification-notice-message {
    min-height: 24px;
  }
}

:root {
  --font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-p1: 16px;
  --font-size-p2: 14px;
  --font-size-lb1: 14px;
  --font-size-lb2: 12px;
  --font-size-sm: 12px;

  --font-h1: var(--font-size-h1) / 1.25 var(--font-family);
  --font-h1-bold: bold var(--font-h1);
  --font-h1-semibold: 600 var(--font-h1);
  --font-h2: var(--font-size-h2) / 1.3333333333 var(--font-family);
  --font-h2-bold: bold var(--font-h2);
  --font-h2-semibold: 600 var(--font-h2);
  --font-h3: var(--font-size-h3) / 1.3333333333 var(--font-family);
  --font-h3-bold: bold var(--font-h3);
  --font-h3-semibold: 600 var(--font-h3);
  --font-p1: var(--font-size-p1) / 1.5 var(--font-family);
  --font-p1-bold: bold var(--font-p1);
  --font-p1-semibold: 600 var(--font-p1);
  --font-p2: var(--font-size-p2) / 1.7142857143 var(--font-family);
  --font-p2-bold: bold var(--font-p2);
  --font-p2-semibold: 600 var(--font-p2);
  --font-lb1: var(--font-size-lb1) / 1.7142857143 var(--font-family);
  --font-lb1-bold: bold var(--font-lb1);
  --font-lb1-semibold: 600 var(--font-lb1);
  --font-lb2: var(--font-size-lb2) / 1.3333333333 var(--font-family);
  --font-lb2-bold: bold var(--font-lb2);
  --font-lb2-semibold: 600 var(--font-lb2);
  --font-sm: var(--font-size-sm) / 1.3333333333 var(--font-family);
  --font-sm-bold: bold var(--font-sm);
  --font-sm-semibold: 600 var(--font-sm);

  --theme-body-color: #f8f8f9; // grey50
  --theme-card-color: #fff;
  --theme-overlay-color: #fff;
  --theme-mask-color: rgba(19, 32, 43, 0.8);
  --theme-border-color: #e3e4e6; // grey100
  --theme-border-color-rgb: 227, 228, 230;
  --theme-icon-color: #aaafb3; // grey300
  --theme-icon-hover-color: #060a0d; // grey900

  --theme-primary-color: #060a0d; // grey900
  --theme-secondary-color: #717980; // grey500
  --theme-secondary-color-rgb: 113, 121, 128; // grey500
  --theme-default-color: #aaafb3; // grey300

  --theme-card-shadow: 0px 0px 0px 1px rgba(6, 10, 13, 0.03), 0px 2px 4px rgba(6, 10, 13, 0.04);
  --theme-modal-shadow: 0 0 0.5px rgba(6, 10, 13, 0.4), 0 16px 32px rgba(19, 32, 43, 0.4);
  --theme-overlay-shadow: 0 0 0.5px rgba(0, 0, 0, 0.4), 0 32px 64px rgba(113, 121, 128, 0.32);

  --theme-input-background: #fff;
  --theme-input-placeholder: #aaafb3;

  --theme-red-color: #ff4339; // red500
  --theme-red-color-rgb: 255, 67, 57; // red500
  --theme-red400-color: #ff6961;
  --theme-red400-color-rgb: 255, 105, 97;
  --theme-red600-color: #cc362e;
  --theme-red600-color-rgb: 204, 54, 46;

  --theme-green-color: #00d395; // green500
  --theme-green-color-rgb: 0, 211, 149; // green500

  --theme-green700-color: #007f59;

  --theme-blue-color: #4f6ae5; // blue500
  --theme-blue-color-rgb: 79, 106, 230; // blue500
  --theme-blue400-color: #7288ea;

  --theme-yellow-color: #cca74d; // yellow600
  --theme-yellow-color-rgb: 204, 167, 77; // yellow600

  --theme-purple-color: #a26ee3; // purple500
  --theme-purple-color-rgb: 162, 110, 227; // purple500
  --theme-purple700-color: #614288;

  --theme-grey-color: #c6c9cc;
  --theme-grey-color-rgb: 198, 201, 204;
  --theme-grey200-color: #c6c9cc;
  --theme-grey300-color: #aaafb3;
  --theme-grey900-color: #060a0d;

  --theme-white-color: #fff;

  --horizontal-padding: 64px;
}

@media (max-width: 768px) {
  :root {
    --horizontal-padding: 24px;
  }
}

[data-theme='dark'] {
  --theme-body-color: #202529;
  --theme-card-color: #282c30;
  --theme-overlay-color: #36393d;
  --theme-mask-color: rgba(32, 37, 41, 0.8);
  --theme-border-color: #43484d;
  --theme-icon-color: #606268;
  --theme-icon-hover-color: #fff;

  --theme-primary-color: #fff;
  --theme-secondary-color: #939496;
  --theme-default-color: #939496;

  --theme-card-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.16);
  --theme-modal-shadow: 0 0 0.5px #fff, 0 32px 64px rgba(0, 0, 0, 0.32);
  --theme-overlay-shadow: 0 0 0.5px #fff, 0 32px 64px rgba(0, 0, 0, 0.32);

  --theme-input-background: #202529;
  --theme-input-placeholder: #606268;

  --theme-grey-color: #606268;
}

:focus:not(:focus-visible) {
  outline: 0;
}

body.using-mouse :focus {
  outline: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#root[inert] {
  filter: blur(2px);
}

#notifications-root {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;

  &:empty {
    display: none;
  }
}
