/*
 * Kilo UI Global Overrides
 *
 * Global design tokens, scrollbar styling, and VS Code extension overrides
 * that are not component-specific.
 */

/* ===== Global design tokens ===== */

:root {
  --kilo-font-size-10: 10px;
  --kilo-font-size-11: 11px;
  --kilo-font-size-12: 12px;
  --kilo-font-size-13: 13px;
  --kilo-font-size-14: 14px;
  --kilo-font-size-15: 15px;
  --kilo-font-size-16: 16px;
  --kilo-font-size-17: 17px;
  --kilo-font-size-18: 18px;
  --kilo-font-size-19: 19px;
  --kilo-font-size-20: 20px;
  --kilo-font-size-21: 21px;
  --kilo-font-size-22: 22px;
  --kilo-font-size-23: 23px;
  --kilo-font-size-24: 24px;
  --kilo-font-scale: 1;
  --font-size-x-small: var(--kilo-font-size-10);
  --font-size-small: var(--kilo-font-size-11);
  --font-size-base: var(--kilo-font-size-13);
  --font-size-large: var(--kilo-font-size-16);

  /* Tight border radius (~2px) */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-xl: 6px;
}

/* ===== Interactive cursors ===== */

:where(
  button:not(:disabled),
  a[href],
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [role="link"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="option"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"])
) {
  cursor: pointer;
}

/* ===== Scrollbar styling ===== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(121, 121, 121, 0.4);
  border-radius: 5px;
  border: 3px solid transparent !important;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.7);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/*
 * Scrollbar utility class + universal scrollable-element styling.
 *
 * `.kilo-scrollbar` — explicit opt-in class for any scrollable element.
 * `[data-scrollable]` — data attribute used by kilo-ui components internally.
 *
 * Both selectors receive identical thin, token-aware scrollbar styling.
 * In the VS Code theme the colors resolve to native VS Code scrollbar tokens.
 *
 * Usage (class):     <div class="kilo-scrollbar" style="overflow-y: auto">
 * Usage (attribute): <div data-scrollable style="overflow-y: auto">
 */
:is(.kilo-scrollbar, [data-scrollable]) {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;

  /* WebKit */
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(121, 121, 121, 0.4);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.7);
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

/* VS Code theme: use native VS Code scrollbar color tokens */
html[data-theme="kilo-vscode"] :is(.kilo-scrollbar, [data-scrollable]) {
  scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;

  &::-webkit-scrollbar-thumb {
    background: var(--vscode-scrollbarSlider-background);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--vscode-scrollbarSlider-hoverBackground);
  }

  &::-webkit-scrollbar-thumb:active {
    background: var(--vscode-scrollbarSlider-activeBackground);
  }
}

/* ===== VS Code extension: inherit native styling ===== */

html[data-theme="kilo-vscode"] {
  code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  --font-family-sans: var(--vscode-font-family);
  --font-family-mono: var(--vscode-editor-font-family, Menlo, Monaco, "Courier New", monospace);
  font-family: var(--vscode-font-family);
  font-size: calc(var(--vscode-font-size, 16px) * var(--kilo-font-scale, 1));
  font-weight: var(--vscode-font-weight);

  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--vscode-scrollbarSlider-background);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--vscode-scrollbarSlider-hoverBackground);
  }

  ::-webkit-scrollbar-thumb:active {
    background: var(--vscode-scrollbarSlider-activeBackground);
  }
}
