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

@layer base {
  :root {
    --syntax-blue: #5cbaff;
    --syntax-green: #a4f0c8;
    --syntax-grey: #557294;
    --syntax-pink: #b464cd;
    --syntax-purple: #a4a4f0;
    --syntax-yellow: #dad17e;

    --ink-syntax-atom-color: var(--syntax-blue);
    --ink-syntax-comment-color: var(--syntax-grey);
    --ink-syntax-keyword-color: var(--syntax-pink);
    --ink-syntax-meta-color: var(--syntax-yellow);
    --ink-syntax-name-color: var(--syntax-blue);
    --ink-syntax-name-property-color: var(--syntax-purple);
    --ink-syntax-name-property-definition-color: var(--syntax-purple);
    --ink-syntax-name-variable-color: var(--syntax-blue);
    --ink-syntax-name-variable-definition-color: var(--syntax-blue);
    --ink-syntax-name-variable-local-color: var(--syntax-blue);
    --ink-syntax-number-color: var(--syntax-blue);
    --ink-syntax-operator-color: var(--syntax-purple);
    --ink-syntax-processing-instruction-color: var(--syntax-grey);
    --ink-syntax-punctuation-color: var(--syntax-purple);
    --ink-syntax-string-color: var(--syntax-green);
    --ink-syntax-url-color: var(--syntax-grey);
  }

  :root {
    @apply bg-layer;
    @apply text-layer;

    --colors-brand: 255 102 102;
    --colors-primary: 59 130 246;
  }

  .dark,
  [data-appearance=dark] {
    --layer-0-bg: 18 18 18;
    --layer-0-bg-hover: 39 39 42;
    --layer-0-bg-active: 39 39 42;
    --layer-0-bg-disabled: 20 20 20;
    --layer-0-border: var(--layer-1-bg-hover);
    --layer-0-text: 212 212 216;
    --layer-0-text-hover: 212 212 216;
    --layer-0-text-active: 212 212 216;
    --layer-0-text-disabled: 113 113 122;
    --layer-0-text-muted: 113 113 122;

    --layer-1-bg: 24 24 27;
    --layer-1-bg-hover: 39 39 42;
    --layer-1-bg-active: 39 39 42;
    --layer-1-bg-disabled: 26 26 29;
    --layer-1-border: var(--layer-0-bg-hover);
    --layer-1-text: 212 212 216;
    --layer-1-text-hover: 212 212 216;
    --layer-1-text-active: 212 212 216;
    --layer-1-text-disabled: 113 113 122;
    --layer-1-text-muted: 113 113 122;

    --layer-2-bg: 39 39 42;
    --layer-2-bg-hover: 63 63 70;
    --layer-2-bg-active: 63 63 70;
    --layer-2-bg-disabled: 41 41 44;
    --layer-2-border: var(--layer-2-bg-hover);
    --layer-2-text: 212 212 216;
    --layer-2-text-hover: 212 212 216;
    --layer-2-text-active: 212 212 216;
    --layer-2-text-disabled: 113 113 122;
    --layer-2-text-muted: 113 113 122;

    --layer-3-bg: 63 63 70;
    --layer-3-bg-hover: 82 82 91;
    --layer-3-bg-active: 82 82 91;
    --layer-3-bg-disabled: 65 65 72;
    --layer-3-border: var(--layer-3-bg-hover);
    --layer-3-text: 212 212 216;
    --layer-3-text-hover: 212 212 216;
    --layer-3-text-active: 212 212 216;
    --layer-3-text-disabled: 113 113 122;
    --layer-3-text-muted: 113 113 122;

    --layer-4-bg: 82 82 91;
    --layer-4-bg-hover: 113 113 122;
    --layer-4-bg-active: 113 113 122;
    --layer-4-bg-disabled: 84 84 93;
    --layer-4-border: var(--layer-4-bg-hover);
    --layer-4-text: 212 212 216;
    --layer-4-text-hover: 212 212 216;
    --layer-4-text-active: 212 212 216;
    --layer-4-text-disabled: 113 113 122;
    --layer-4-text-muted: 113 113 122;

    --layer-5-bg: 113 113 122;
    --layer-5-bg-hover: 161 161 170;
    --layer-5-bg-active: 161 161 170;
    --layer-5-bg-disabled: 115 115 124;
    --layer-5-border: var(--layer-5-bg-hover);
    --layer-5-text: 212 212 216;
    --layer-5-text-hover: 212 212 216;
    --layer-5-text-active: 212 212 216;
    --layer-5-text-disabled: 113 113 122;
    --layer-5-text-muted: 113 113 122;
  }

  @media (prefers-color-scheme: dark) {
    .auto,
    [data-appearance=auto] {
      @apply dark;
    }
  }

  .light,
  [data-appearance=light] {
    --syntax-blue: #0066cc;
    --syntax-green: #2e8b57;
    --syntax-grey: #708090;
    --syntax-pink: #9932cc;
    --syntax-purple: #6a5acd;
    --syntax-yellow: #9b870c;

    --layer-0-bg: 244 244 245;
    --layer-0-bg-hover: 228 228 231;
    --layer-0-bg-active: 228 228 231;
    --layer-0-bg-disabled: 242 242 243;
    --layer-0-border: var(--layer-0-bg-hover);
    --layer-0-text: 24 24 27;
    --layer-0-text-hover: 24 24 27;
    --layer-0-text-active: 24 24 27;
    --layer-0-text-disabled: 113 113 122;
    --layer-0-text-muted: 113 113 122;

    --layer-1-bg: 255 255 255;
    --layer-1-bg-hover: 244 244 245;
    --layer-1-bg-active: 244 244 245;
    --layer-1-bg-disabled: 253 253 253;
    --layer-1-border: var(--layer-0-bg-hover);
    --layer-1-text: 24 24 27;
    --layer-1-text-hover: 24 24 27;
    --layer-1-text-active: 24 24 27;
    --layer-1-text-disabled: 113 113 122;
    --layer-1-text-muted: 113 113 122;

    --layer-2-bg: 244 244 245;
    --layer-2-bg-hover: 228 228 231;
    --layer-2-bg-active: 228 228 231;
    --layer-2-bg-disabled: 242 242 243;
    --layer-2-border: var(--layer-2-bg-hover);
    --layer-2-text: 24 24 27;
    --layer-2-text-hover: 24 24 27;
    --layer-2-text-active: 24 24 27;
    --layer-2-text-disabled: 113 113 122;
    --layer-2-text-muted: 113 113 122;

    --layer-3-bg: 228 228 231;
    --layer-3-bg-hover: 212 212 216;
    --layer-3-bg-active: 212 212 216;
    --layer-3-bg-disabled: 226 226 229;
    --layer-3-border: var(--layer-3-bg-hover);
    --layer-3-text: 24 24 27;
    --layer-3-text-hover: 24 24 27;
    --layer-3-text-active: 24 24 27;
    --layer-3-text-disabled: 113 113 122;
    --layer-3-text-muted: 113 113 122;

    --layer-4-bg: 212 212 216;
    --layer-4-bg-hover: 161 161 170;
    --layer-4-bg-active: 161 161 170;
    --layer-4-bg-disabled: 210 210 214;
    --layer-4-border: var(--layer-4-bg-hover);
    --layer-4-text: 24 24 27;
    --layer-4-text-hover: 24 24 27;
    --layer-4-text-active: 24 24 27;
    --layer-4-text-disabled: 113 113 122;
    --layer-4-text-muted: 113 113 122;

    --layer-5-bg: 161 161 170;
    --layer-5-bg-hover: 113 113 122;
    --layer-5-bg-active: 161 161 170;
    --layer-5-bg-disabled: 159 159 168;
    --layer-5-border: var(--layer-5-bg-hover);
    --layer-5-text: 24 24 27;
    --layer-5-text-hover: 24 24 27;
    --layer-5-text-active: 24 24 27;
    --layer-5-text-disabled: 113 113 122;
    --layer-5-text-muted: 113 113 122;
  }

  @media (prefers-color-scheme: light) {
    .auto,
    [data-appearance=auto] {
      @apply light;
    }
  }

  .custom,
  [data-appearance=custom] {
    --layer-0-bg: 10 0 31;
    --layer-0-bg-hover: 21 0 44;
    --layer-0-bg-active: 32 2 58;
    --layer-0-bg-disabled: 15 0 38;
    --layer-0-border: 21 0 44;
    --layer-0-text: 140 113 178;
    --layer-0-text-hover: 140 113 178;
    --layer-0-text-disabled: 76 50 108;
    --layer-0-text-muted: 69 43 101;
    --layer-1-bg: 32 2 58;
    --layer-1-bg-hover: 44 15 72;
    --layer-1-bg-active: 56 29 86;
    --layer-1-bg-disabled: 38 8 65;
    --layer-1-border: 44 15 72;
    --layer-1-text: 170 143 210;
    --layer-1-text-hover: 170 143 210;
    --layer-1-text-disabled: 103 77 139;
    --layer-1-text-muted: 96 70 131;
    --layer-2-bg: 56 29 86;
    --layer-2-bg-hover: 69 43 101;
    --layer-2-bg-active: 82 56 116;
    --layer-2-bg-disabled: 62 36 94;
    --layer-2-border: 69 43 101;
    --layer-2-text: 202 175 244;
    --layer-2-text-hover: 202 175 244;
    --layer-2-text-disabled: 132 106 170;
    --layer-2-text-muted: 125 99 162;
    --layer-3-bg: 82 56 116;
    --layer-3-bg-hover: 96 70 131;
    --layer-3-bg-active: 110 84 146;
    --layer-3-bg-disabled: 89 63 123;
    --layer-3-border: 96 70 131;
    --layer-3-text: 234 207 255;
    --layer-3-text-hover: 234 207 255;
    --layer-3-text-disabled: 162 136 202;
    --layer-3-text-muted: 155 128 194;
    --layer-4-bg: 110 84 146;
    --layer-4-bg-hover: 125 99 162;
    --layer-4-bg-active: 140 113 178;
    --layer-4-bg-disabled: 117 91 154;
    --layer-4-border: 125 99 162;
    --layer-4-text: 255 240 255;
    --layer-4-text-hover: 255 240 255;
    --layer-4-text-disabled: 194 167 235;
    --layer-4-text-muted: 186 159 227;
    --layer-5-bg: 140 113 178;
    --layer-5-bg-hover: 155 128 194;
    --layer-5-bg-active: 170 143 210;
    --layer-5-bg-disabled: 147 121 186;
    --layer-5-border: 155 128 194;
    --layer-5-text: 10 0 31;
    --layer-5-text-hover: 10 0 31;
    --layer-5-text-disabled: 76 50 108;
    --layer-5-text-muted: 69 43 101;
  }

  /* Todo: Make a variable specifically for dividers */
  .layer-0 {
    --layer-bg: var(--layer-0-bg);
    --layer-bg-hover: var(--layer-0-bg-hover);
    --layer-bg-active: var(--layer-0-bg-active);
    --layer-bg-disabled: var(--layer-0-bg-disabled);
    --layer-border: var(--layer-0-border);
    --layer-text: var(--layer-0-text);
    --layer-text-hover: var(--layer-0-text-hover);
    --layer-text-active: var(--layer-0-text-active);
    --layer-text-disabled: var(--layer-0-text-disabled);
    --layer-text-muted: var(--layer-0-text-muted);
  }

  .layer-1 {
    --layer-bg: var(--layer-1-bg);
    --layer-bg-hover: var(--layer-1-bg-hover);
    --layer-bg-active: var(--layer-1-bg-active);
    --layer-bg-disabled: var(--layer-1-bg-disabled);
    --layer-border: var(--layer-1-border);
    --layer-text: var(--layer-1-text);
    --layer-text-hover: var(--layer-1-text-hover);
    --layer-text-active: var(--layer-1-text-active);
    --layer-text-disabled: var(--layer-1-text-disabled);
    --layer-text-muted: var(--layer-1-text-muted);
  }

  .layer-2 {
    --layer-bg: var(--layer-2-bg);
    --layer-bg-hover: var(--layer-2-bg-hover);
    --layer-bg-active: var(--layer-2-bg-active);
    --layer-bg-disabled: var(--layer-2-bg-disabled);
    --layer-border: var(--layer-2-border);
    --layer-text: var(--layer-2-text);
    --layer-text-hover: var(--layer-2-text-hover);
    --layer-text-active: var(--layer-2-text-active);
    --layer-text-disabled: var(--layer-2-text-disabled);
    --layer-text-muted: var(--layer-2-text-muted);
  }

  .layer-3 {
    --layer-bg: var(--layer-3-bg);
    --layer-bg-hover: var(--layer-3-bg-hover);
    --layer-bg-active: var(--layer-3-bg-active);
    --layer-bg-disabled: var(--layer-3-bg-disabled);
    --layer-border: var(--layer-3-border);
    --layer-text: var(--layer-3-text);
    --layer-text-hover: var(--layer-3-text-hover);
    --layer-text-active: var(--layer-3-text-active);
    --layer-text-disabled: var(--layer-3-text-disabled);
    --layer-text-muted: var(--layer-3-text-muted);
  }

  .layer-4 {
    --layer-bg: var(--layer-4-bg);
    --layer-bg-hover: var(--layer-4-bg-hover);
    --layer-bg-active: var(--layer-4-bg-active);
    --layer-bg-disabled: var(--layer-4-bg-disabled);
    --layer-border: var(--layer-4-border);
    --layer-text: var(--layer-4-text);
    --layer-text-hover: var(--layer-4-text-hover);
    --layer-text-active: var(--layer-4-text-active);
    --layer-text-disabled: var(--layer-4-text-disabled);
    --layer-text-muted: var(--layer-4-text-muted);
  }

  .layer-5 {
    --layer-bg: var(--layer-5-bg);
    --layer-bg-hover: var(--layer-5-bg-hover);
    --layer-bg-active: var(--layer-5-bg-active);
    --layer-bg-disabled: var(--layer-5-bg-disabled);
    --layer-border: var(--layer-5-border);
    --layer-text: var(--layer-5-text);
    --layer-text-hover: var(--layer-5-text-hover);
    --layer-text-active: var(--layer-5-text-active);
    --layer-text-disabled: var(--layer-5-text-disabled);
    --layer-text-muted: var(--layer-5-text-muted);
  }
}

@layer components {
  *, *::before, *::after {
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 0.5))
  }

  .button {
    @apply inline-flex items-center rounded cursor-pointer focus-visible:outline-none focus-visible:ring has-[:focus-visible]:ring;
  }

  .core-button {
    @apply core-button-shape;
    @apply cursor-pointer;
    @apply outline-none;
    @apply focus-visible:ring has-[:focus-visible]:ring;
    @apply bg-layer;
    @apply disabled:bg-layer-disabled ui-disabled:bg-layer-disabled;
    @apply disabled:text-layer-disabled ui-disabled:text-layer-disabled;
    @apply disabled:hover:bg-layer-disabled;
    @apply disabled:cursor-default ui-disabled:cursor-default disabled-within:cursor-default;
    @apply disabled-within:bg-layer-disabled disabled-within:text-layer-disabled;
    @apply disabled-within:hover:bg-layer-disabled disabled-within:hover:text-layer-disabled;
    @apply hover:bg-layer-hover ui-active:bg-layer-hover;
    @apply whitespace-nowrap;
  }

  .core-button-shape {
    @apply px-2 py-1 rounded inline-flex gap-2 items-center justify-center;
  }

  /* utils */
  .ligatures-none {
    font-variant-ligatures: none;
  }

  .ligatures-normal {
    font-variant-ligatures: normal;
  }

  .has-tooltip {
    @apply relative cursor-pointer;
  }

  .has-tooltip:hover .tooltip {
    @apply visible;
  }

  .tooltip {
    @apply invisible absolute z-50 ml-2 w-48 text-xs;
  }

  .unset-all {
    all: unset;
  }

  /* vue router */
  .allow-link-active.router-link-active,
  .sidebar-link.router-link-exact-active {
    @apply bg-layer-active hover:bg-layer-active;
  }

  /* form */

  .radio {
    @apply appearance-none outline-none rounded-full cursor-pointer outline-2 outline-layer-text-muted checked:bg-primary checked:disabled:bg-layer-text-muted sq-2 m-1;
  }

  .checkbox {
    @apply appearance-none outline-none rounded-sm cursor-pointer outline-2 outline-layer-text-muted checked:bg-primary checked:disabled:bg-layer-text-muted sq-2 m-1;
  }

  /* sidebar */

  .sidebar-label {
    @apply flex items-center justify-between text-sm p-6 md:px-2 text-layer-muted;
  }

  .sidebar-link {
    @apply flex items-center justify-between rounded px-2 py-1 hover:bg-layer-hover focus-visible:outline-none focus-visible:ring;
  }
}

@layer utilities {
  .contain-layout {
    contain: layout;
  }

  .contain-strict {
    contain: strict;
  }

  .flex-direction-inherit {
    flex-direction: inherit;
  }

  .flex-inherit {
    align-items: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    gap: inherit;
    justify-content: inherit;
  }

  .flex-wrap-inherit {
    flex-wrap: inherit;
  }

  .gap-inherit {
    gap: inherit;
  }

  .items-inherit {
    align-items: inherit;
  }

  .justify-inherit {
    justify-content: inherit;
  }
}
