@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* https://m3.material.io/styles/color/roles */
  :root {
    --color-primary: rgb(83 90 146);
    --color-surface-tint: rgb(83 90 146);
    --color-on-primary: rgb(255 255 255);
    --color-primary-container: rgb(223 224 255);
    --color-on-primary-container: rgb(13 21 75);
    --color-secondary: rgb(91 93 114);
    --color-on-secondary: rgb(255 255 255);
    --color-secondary-container: rgb(224 225 249);
    --color-on-secondary-container: rgb(24 26 44);
    --color-tertiary: rgb(66 104 51);
    --color-on-tertiary: rgb(255 255 255);
    --color-tertiary-container: rgb(195 239 173);
    --color-on-tertiary-container: rgb(4 33 0);
    --color-error: rgb(186 26 26);
    --color-on-error: rgb(255 255 255);
    --color-error-container: rgb(255 218 214);
    --color-on-error-container: rgb(65 0 2);
    --color-background: rgb(251 248 255);
    --color-on-background: rgb(27 27 33);
    --color-surface: rgb(251 248 255);
    --color-on-surface: rgb(27 27 33);
    --color-surface-variant: rgb(227 225 236);
    --color-on-surface-variant: rgb(70 70 79);
    --color-outline: rgb(119 118 128);
    --color-outline-variant: rgb(199 197 208);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(48 48 54);
    --color-inverse-on-surface: rgb(242 239 247);
    --color-inverse-primary: rgb(188 195 255);
    --color-primary-fixed: rgb(223 224 255);
    --color-on-primary-fixed: rgb(13 21 75);
    --color-primary-fixed-dim: rgb(188 195 255);
    --color-on-primary-fixed-variant: rgb(59 66 121);
    --color-secondary-fixed: rgb(224 225 249);
    --color-on-secondary-fixed: rgb(24 26 44);
    --color-secondary-fixed-dim: rgb(196 197 221);
    --color-on-secondary-fixed-variant: rgb(67 69 89);
    --color-tertiary-fixed: rgb(195 239 173);
    --color-on-tertiary-fixed: rgb(4 33 0);
    --color-tertiary-fixed-dim: rgb(168 210 147);
    --color-on-tertiary-fixed-variant: rgb(43 79 30);
    --color-surface-dim: rgb(219 217 224);
    --color-surface-bright: rgb(251 248 255);
    --color-surface-container-lowest: rgb(255 255 255);
    --color-surface-container-low: rgb(245 242 250);
    --color-surface-container: rgb(239 237 244);
    --color-surface-container-high: rgb(233 231 239);
    --color-surface-container-highest: rgb(228 225 233);
  }

  .dark,
  [data-theme="dark"] {
    --color-primary: rgb(188 195 255);
    --color-surface-tint: rgb(188 195 255);
    --color-on-primary: rgb(36 43 97);
    --color-primary-container: rgb(59 66 121);
    --color-on-primary-container: rgb(223 224 255);
    --color-secondary: rgb(196 197 221);
    --color-on-secondary: rgb(45 47 66);
    --color-secondary-container: rgb(67 69 89);
    --color-on-secondary-container: rgb(224 225 249);
    --color-tertiary: rgb(168 210 147);
    --color-on-tertiary: rgb(21 56 9);
    --color-tertiary-container: rgb(43 79 30);
    --color-on-tertiary-container: rgb(195 239 173);
    --color-error: rgb(255 180 171);
    --color-on-error: rgb(105 0 5);
    --color-error-container: rgb(147 0 10);
    --color-on-error-container: rgb(255 218 214);
    --color-background: rgb(19 19 24);
    --color-on-background: rgb(228 225 233);
    --color-surface: rgb(19 19 24);
    --color-on-surface: rgb(228 225 233);
    --color-surface-variant: rgb(70 70 79);
    --color-on-surface-variant: rgb(199 197 208);
    --color-outline: rgb(144 144 154);
    --color-outline-variant: rgb(70 70 79);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(228 225 233);
    --color-inverse-on-surface: rgb(48 48 54);
    --color-inverse-primary: rgb(83 90 146);
    --color-primary-fixed: rgb(223 224 255);
    --color-on-primary-fixed: rgb(13 21 75);
    --color-primary-fixed-dim: rgb(188 195 255);
    --color-on-primary-fixed-variant: rgb(59 66 121);
    --color-secondary-fixed: rgb(224 225 249);
    --color-on-secondary-fixed: rgb(24 26 44);
    --color-secondary-fixed-dim: rgb(196 197 221);
    --color-on-secondary-fixed-variant: rgb(67 69 89);
    --color-tertiary-fixed: rgb(195 239 173);
    --color-on-tertiary-fixed: rgb(4 33 0);
    --color-tertiary-fixed-dim: rgb(168 210 147);
    --color-on-tertiary-fixed-variant: rgb(43 79 30);
    --color-surface-dim: rgb(19 19 24);
    --color-surface-bright: rgb(57 57 63);
    --color-surface-container-lowest: rgb(13 14 19);
    --color-surface-container-low: rgb(27 27 33);
    --color-surface-container: rgb(33 33 39);
    --color-surface-container-high: rgb(41 41 47);
    --color-surface-container-highest: rgb(52 52 58);
  }

  html {
    /* prevent selecting text, transparent highlight */
    @apply select-none selection:bg-transparent;
  }

  html,
  body {
    /*
     * fill visible viewport
     * https://developers.google.com/web/updates/2016/12/url-bar-resizing
     */
    @apply h-full overflow-hidden;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--color-surface), var(--color-surface-tint) 40%);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklab, var(--color-surface), var(--color-surface-tint) 60%);
  }

  button {
    /* revert user-agent style */
    text-align: unset;
  }
}

@layer components {
  .state-layer {
    @apply relative before:absolute before:inset-0 before:transition before:opacity-0 before:overflow-hidden sm:before:hover:opacity-[.08] sm:before:focus:opacity-[.12] before:active:opacity-[.12] disabled:before:opacity-0 disabled:before:hover:opacity-0;
  }

  .skeleton-loader {
    @apply relative isolate overflow-hidden;

    &::after {
      @apply absolute inset-0 bg-gradient-to-r from-transparent via-rose-100/10 to-transparent -translate-x-full animate-[shimmer_2s_infinite];
      content: "";
    }
  }

  .elevation-0 {
    box-shadow: none;
  }

  .elevation-1 {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 1px 3px 1px rgba(0, 0, 0, 0.15);
  }

  .elevation-2 {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 2px 6px 2px rgba(0, 0, 0, 0.15);
  }

  .elevation-3 {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.3),
      0 4px 8px 3px rgba(0, 0, 0, 0.15);
  }

  .elevation-4 {
    box-shadow:
      0 2px 3px rgba(0, 0, 0, 0.3),
      0 6px 10px 4px rgba(0, 0, 0, 0.15);
  }

  .elevation-5 {
    box-shadow:
      0 4px 4px rgba(0, 0, 0, 0.3),
      0 8px 12px 6px rgba(0, 0, 0, 0.15);
  }

  .material-symbols-outlined {
    transition: font-variation-settings 0.2s;
    font-variation-settings:
      "FILL" var(--font-filled, 0),
      "OPSZ" var(--font-opsz, 24);

    &.size-20 {
      --font-opsz: 20;
      font-size: 20px;
      max-width: 20px;
    }

    &.size-24 {
      --font-opsz: 24;
      font-size: 24px;
      max-width: 24px;
    }

    &.size-40 {
      --font-opsz: 40;
      font-size: 40px;
      max-width: 40px;
    }

    &.size-48 {
      --font-opsz: 48;
      font-size: 48px;
      max-width: 48px;
    }

    &.icon-outline {
      --font-filled: 0;
    }

    &.icon-filled {
      --font-filled: 1;
    }
  }
}

@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

    &::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
    }
  }
}
