/**
 * Overlay scrollbar pills - native bars stay as a no-JS fallback.
 * `html.bp-scrollbars-ready` hides the browser chrome; handles are portaled.
 */

html.bp-scrollbars-ready,
html.bp-scrollbars-ready *{
  scrollbar-width: none !important;
}

html.bp-scrollbars-ready *::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#bp-scrollbars{
  pointer-events: none;
}

.bp-scrollbar-handle{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  border-radius: 999px;
  --bp-scrollbar-fill: var(--scrollbar-thumb);
  --bp-scrollbar-fill-hover: var(--scrollbar-thumb-hover);
  background: var(--bp-scrollbar-fill);
  pointer-events: none;
  opacity: 0;
  transition: none !important;
}

html:has(.dash) .bp-scrollbar-handle,
html:has(.dashboard-stage) .bp-scrollbar-handle{
  --bp-scrollbar-fill: var(--scrollbar-thumb);
  --bp-scrollbar-fill-hover: var(--scrollbar-thumb-hover);
}

html.bp-scrollbars-ready .bp-scrollbar-handle.is-visible{
  display: block;
  opacity: 1;
  pointer-events: auto;
}

html.bp-scrollbars-ready .bp-scrollbar-handle:hover,
html.bp-scrollbars-ready .bp-scrollbar-handle.is-dragging{
  background: var(--bp-scrollbar-fill-hover);
}