@use "../base/color" as cl;
@use "../base/border" as bo;

// Scrollbars
//
// One treatment for every scroll container in the stack. It is lifted verbatim
// from the column chooser's panes, which is the reference the design signed off
// on: a 4px rail, no track, a neutral thumb that darkens on hover.
//
// It lived in `procode-vs-template`'s GridToolBar SCSS in three near-copies
// that had already drifted — the chooser panes used a `$border-radius-md` thumb
// with a hover state, while the export popup used a hard-coded 2px radius and
// no hover — and every scroll container outside that one widget (the grid body,
// the drawers, the dialogs, whole app screens) fell back to the platform
// scrollbar, which is ~15px wide on Windows and a different colour on every OS.
// Owning it here is what makes "all scrollbars look the same" true for every
// consumer rather than for one widget.
//
// `$scrollbar-size` covers both axes: `width` is the rail of a vertical
// scrollbar and `height` the rail of a horizontal one, so a single token keeps
// the two consistent.

$scrollbar-size: 4px !default;
$scrollbar-track: transparent !default;
$scrollbar-thumb: cl.$border-default !default;
$scrollbar-thumb-hover: cl.$border-secondary !default;
$scrollbar-radius: bo.$border-radius-md !default;

// The shared body, so the global rule and the opt-in utility cannot drift.
@mixin scrollbar {
  // `scrollbar-width` is Firefox's only lever — it has no pseudo-element API.
  //
  // It MUST stay behind this guard. Chromium 121+ also implements
  // `scrollbar-width`, and where it is set it takes precedence over
  // `::-webkit-scrollbar`, so declaring it unconditionally silently replaces
  // the 4px rail with Chromium's own `thin` metric — measured at 11px, nearly
  // three times the intended width. The feature query is true only where the
  // pseudo-element is absent, which is exactly Firefox.
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-width: thin;
    scrollbar-color: $scrollbar-thumb $scrollbar-track;
  }

  &::-webkit-scrollbar {
    width: $scrollbar-size;
    height: $scrollbar-size;
  }

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

  &::-webkit-scrollbar-thumb {
    background-color: $scrollbar-thumb;
    border-radius: $scrollbar-radius;

    &:hover {
      background-color: $scrollbar-thumb-hover;
    }
  }

  // Without this the corner where two rails meet paints as an opaque platform
  // square, which is the one piece of native chrome that survives the rest.
  &::-webkit-scrollbar-corner {
    background: $scrollbar-track;
  }
}

// Global: every scrollable element, including the document itself.
//
// Applied through `*` rather than a list of known containers because the
// containers are not all ours — Kendo's grid, its popups and its dropdown lists
// each create their own scroll boxes, and none of them carries a class this
// package can name.
*,
html,
body {
  @include scrollbar;
}

// Opt-in, for a container that needs the treatment at a higher specificity than
// the global rule — a third-party widget that ships its own `::-webkit-scrollbar`
// block will win over `*`, and adding this class beats it back.
.qo-scroll {
  @include scrollbar;
}

// Escape hatch: restore the platform scrollbar where the native affordance is
// the point (a long-form document, an embedded third-party surface).
.qo-scroll-auto {
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  &::-webkit-scrollbar {
    width: initial;
    height: initial;
  }
}