@use '../variables' as *;

@font-face {
  font-family: 'Iskry';
  src:
    url('https://cdn.vev.design/font/tWK-oVG0VI/Iskry-Regular.woff2') format('woff2'),
    url('https://cdn.vev.design/font/tWK-oVG0VI/Iskry-Regular.woff') format('woff');
}

:global {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    display: none;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    border-right: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    background-color: transparent;
  }
  *:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
  }

  @media (hover: none) {
    ::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  ::-webkit-clear-button {
    display: none;
  }

  ::-webkit-inner-spin-button {
    background-color: rgba(var(--color-neutral-100-rgb), var(--opacity-level-light));
    color: var(--color-neutral-100);
    display: none;
  }

  ::-webkit-calendar-picker-indicator:hover {
    color: var(--color-brand-primary-60);
    background: none;
    background-color: none;
  }

  html {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--color-neutral-0);
    overflow: hidden;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
  }

  body,
  button,
  input {
    @include font($font-base);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: #{unquote($font-variation-settings)};
  }

  svg {
    fill: var(--color-neutral-100);
  }

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

  small {
    @include fontSize($font-small);
  }

  strong {
    font-weight: 600;
  }

  hr {
    background-color: rgba(var(--color-neutral-100-rgb), var(--opacity-level-light));
    border-width: 0;
    height: 1px;
    margin: $space-m 0;
  }

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

  a[rel='button'],
  a[rel='button']:hover {
    color: var(--color-neutral-100);
  }

  body {
    --font-family-mono: #{$font-mono};
  }
  pre {
    @include font($font-base, $font-mono);
  }

  //Override autofill color
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition: background-color 500s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    -webkit-text-fill-color: var(--color-neutral-100) !important;
  }

  html span[type='button'] {
    -webkit-appearance: none;
  }

  .fill {
    width: 100%;
    height: 100%;
  }

  dl {
    margin: 0;
    padding: 0;
  }

  dt {
    font-weight: 600;
  }

  dd,
  dt {
    margin: 0;
    padding: 0;
  }

  dd + dt {
    margin-top: $space-l;
  }

  .transparent-bg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4y2P4TwDcv38fL2YYNWBYGEBIASEwasCwMAAAv7rMLvozJBUAAAAASUVORK5CYII=');
    background-position: 50% 50%;
  }

  .small {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.0001em;
  }

  div[data-shadow='level1'] {
    filter: var(--shadow-level-1);
  }

  div[data-shadow='level2'] {
    filter: var(--shadow-level-2);
  }

  div[data-shadow='level3'] {
    filter: var(--shadow-level-3);
  }
  div[data-shadow='level4'] {
    filter: var(--shadow-level-4);
  }

  @each $name, $color in $colors {
    .bg-#{$name},
    .bg-hover-#{$name}:hover {
      background-color: #{$color};
    }

    .color-#{$name},
    .color-hover-#{$name}:hover {
      color: #{$color};
    }
  }

  .bg-blur {
    background: var(--color-neutral-5);
  }
}

:root {
  // opacity
  --opacity-level-10: 0.9;
  --opacity-level-semiopaque: 0.72;
  --opacity-level-intense: 0.64;
  --opacity-level-medium: 0.32;
  --opacity-level-light: 0.16;
  --opacity-level-semitransparent: 0.08;

  /** Creating all the css variables and the rgb variables **/
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
    --color-#{$name}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
  }

  // Font font-variation-settings
  --font-variation-settings: #{unquote($font-variation-settings)};
  --font-variation-settings-brand: #{unquote($font-variation-settings-brand)};

  --color-dynamic: var(--color-brand-primary-30);

  --border-radius-tiny: 4px;
  --border-radius-small: 8px;
  --border-radius-medium: 16px;

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;

  --shadow-level-1: drop-shadow(
      0px 1px 2px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light))
    )
    drop-shadow(0px 2px 6px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light)));
  --shadow-level-2: drop-shadow(
      0px 2px 4px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light))
    )
    drop-shadow(0px 4px 12px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light)));
  --shadow-level-3: drop-shadow(
      0px 4px 8px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light))
    )
    drop-shadow(0px 8px 20px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light)));
  --shadow-level-4: drop-shadow(
      0px 4px 8px rgba(var(--color-neutral-0-rgb), var(--opacity-level-intense))
    )
    drop-shadow(0px 16px 40px rgba(var(--color-neutral-0-rgb), var(--opacity-level-light)));
}