/* Shared scrollbar treatment for every kkRepo UI scroll container. */

:root {
  --ui-scrollbar-size: 6px;
  --ui-scrollbar-thumb: rgba(18, 33, 29, 0.5);
  --ui-scrollbar-thumb-hover: rgba(18, 33, 29, 0.6);
}

@supports (color: color-mix(in srgb, black, transparent)) {
  :root {
    /* Stays translucent while retaining at least 3:1 contrast in bundled themes. */
    --ui-scrollbar-thumb: color-mix(in srgb, var(--ink-1) 50%, transparent);
    --ui-scrollbar-thumb-hover: color-mix(in srgb, var(--ink-1) 60%, transparent);
  }
}

*::-webkit-scrollbar {
  width: var(--ui-scrollbar-size);
  height: var(--ui-scrollbar-size);
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  background-color: var(--ui-scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--ui-scrollbar-thumb-hover);
}

/* Chromium/Safari let the standard properties override the WebKit treatment. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--ui-scrollbar-thumb) transparent;
    scrollbar-width: thin;
  }
}