/* Reserve the gutter so revealing a thumb never shifts table columns. */
* {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* Touch devices keep their native scrollbar behavior. */
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-color: transparent transparent; }
    *:hover,
    *:active,
    *:focus-visible,
    *:has(:focus-visible) { scrollbar-color: #a4aab4 transparent; }
  }

  @supports selector(::-webkit-scrollbar) {
    /* Use thumb states on Chromium/WebKit, including dragging outside a panel. */
    * { scrollbar-width: auto; scrollbar-color: auto; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background-color: transparent;
      background-clip: padding-box;
      border: 2px solid transparent;
      border-radius: 8px;
      min-height: 32px;
    }
    :hover::-webkit-scrollbar-thumb,
    :active::-webkit-scrollbar-thumb,
    :focus-visible::-webkit-scrollbar-thumb,
    :has(:focus-visible)::-webkit-scrollbar-thumb { background-color: #a4aab4; }
    ::-webkit-scrollbar-thumb:hover { background-color: #858d9a; }
    ::-webkit-scrollbar-thumb:active { background-color: #687180; }
  }
}

/* Scroll activity stays visible even after the pointer leaves the panel. */
@supports not selector(::-webkit-scrollbar) {
  [data-scrolling] { scrollbar-color: #687180 transparent; }
}
@supports selector(::-webkit-scrollbar) {
  [data-scrolling] { scrollbar-width: auto; scrollbar-color: auto; }
  [data-scrolling]::-webkit-scrollbar { width: 8px; height: 8px; }
  [data-scrolling]::-webkit-scrollbar-track { background: #f0f2f6; }
  [data-scrolling]::-webkit-scrollbar-thumb {
    background-color: #687180;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 8px;
    min-height: 32px;
  }
}

@media (forced-colors: active) {
  *, [data-scrolling] { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb, [data-scrolling]::-webkit-scrollbar-thumb { background-color: CanvasText; }
}