/* Keep the viewport, tables and panels in the same palette. */
:root {
  --scroll-thumb: #626871;
  --scroll-hover: #828c99;
  --scroll-active: #a5afbb;
}
:root.light, :root:has(body.light) {
  --scroll-thumb: #7c8897;
  --scroll-hover: #606e80;
  --scroll-active: #49576b;
}

@media (forced-colors: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }

  @supports selector(::-webkit-scrollbar) {
    /* Chromium uses its native scrollbar when either standard property is non-auto. */
    *, .\[scrollbar-width\:thin\] { scrollbar-width: auto; }
    *, .\[scrollbar-color\:rgb\(var\(--color-bg-additional-3\)\)_rgb\(var\(--color-bg-app\)\)\] { scrollbar-color: auto; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background-color: var(--scroll-thumb);
      border: 2px solid transparent;
      border-radius: 999px;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
    ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-active); }
    ::-webkit-scrollbar-button { display: none; }
  }
}