/*
 * gis-scrollbars.css — overlay scrollbars for the GIS viewers.
 *
 * Scrollbars sit permanently visible in the parcel dock, the data table, the modals and the
 * side panels, adding a hard grey rail to every panel edge. On a map application — which is
 * mostly chrome around a picture — that reads as clutter, and it is especially loud on a
 * projector.
 *
 * So: the track is always transparent and the thumb is invisible at rest. It fades in while
 * the element is actually being scrolled (the .pia-scrolling class, set by gis-scrollbars.js
 * and cleared shortly after scrolling stops) and on hover, then fades back out.
 *
 * The gutter is NOT collapsed: the scrollbar still occupies its width, so content does not
 * reflow by a few pixels the moment a thumb appears. Nothing shifts; the thumb simply fades.
 */

/* ── Firefox ─────────────────────────────────────────────────────────────── */
.pia-scroll,
.pia-scroll * {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;   /* thumb, track */
}
.pia-scroll *:hover,
.pia-scroll *.pia-scrolling,
.pia-scroll.pia-scrolling {
  scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
}

/* ── WebKit / Blink ──────────────────────────────────────────────────────── */
.pia-scroll ::-webkit-scrollbar,
.pia-scroll::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.pia-scroll ::-webkit-scrollbar-track,
.pia-scroll::-webkit-scrollbar-track,
.pia-scroll ::-webkit-scrollbar-corner,
.pia-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

/* Invisible at rest. The 3px transparent border + background-clip keeps the thumb inset,
   so when it does appear it reads as a floating pill rather than a full-width rail. */
.pia-scroll ::-webkit-scrollbar-thumb,
.pia-scroll::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
  transition: background-color 160ms ease;
}

.pia-scroll *:hover::-webkit-scrollbar-thumb,
.pia-scroll *.pia-scrolling::-webkit-scrollbar-thumb,
.pia-scroll.pia-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.26);
  background-clip: content-box;
}

.pia-scroll *:hover::-webkit-scrollbar-thumb:hover,
.pia-scroll.pia-scrolling::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.42);
  background-clip: content-box;
}

/* A light-surfaced panel (the data table, some modals) needs a dark thumb to be visible. */
.pia-scroll .pia-scroll-light:hover::-webkit-scrollbar-thumb,
.pia-scroll .pia-scroll-light.pia-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(20, 28, 38, 0.32);
  background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
  .pia-scroll ::-webkit-scrollbar-thumb,
  .pia-scroll::-webkit-scrollbar-thumb { transition: none; }
}