/* ==========================================================================
   EZUI Scroll (ezui-scroll.css)

   A drawn scrollbar for a box that scrolls. The browser's is hidden and this
   one sits over the box, so nothing loses width to it and every browser
   shows the same thing. See EZY UI Scroll.md.
   ========================================================================== */

.ezui-scroll__holder {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
}

/* The browser's own bar, off. Firefox takes the first, the rest the second. */
.ezui-scroll { scrollbar-width: none; }
.ezui-scroll::-webkit-scrollbar { display: none; }

.ezui-scroll__bar {
  --ezui-scroll-size: 2px;
  --ezui-scroll-inset: 3px;
  --ezui-scroll-strength: .65;

  position: absolute;
  z-index: 1;
  border-radius: 999px;
  background: var(--ezui-text-primary);
  opacity: 0;
  transition: opacity .16s ease;
  /* The page does not scroll while the bar is being dragged. */
  touch-action: none;
}

/* Thin to look at, wide enough to hold: the bar is 2px, what a finger or a
   cursor actually catches is 16px. */
.ezui-scroll__bar::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.ezui-scroll__bar[data-way="down"] {
  right: var(--ezui-scroll-inset);
  width: var(--ezui-scroll-size);
}
.ezui-scroll__bar[data-way="across"] {
  bottom: var(--ezui-scroll-inset);
  height: var(--ezui-scroll-size);
}
.ezui-scroll__bar[hidden] { display: none; }

/* Shown while the box is being scrolled, while the bar is held, and, where
   there is a pointer, while it is over the box. */
.ezui-scroll__holder[data-scrolling] .ezui-scroll__bar,
.ezui-scroll__bar[data-holding] { opacity: var(--ezui-scroll-strength); }
@media (hover: hover) {
  .ezui-scroll__holder:hover .ezui-scroll__bar { opacity: var(--ezui-scroll-strength); }
}

/* ---- the page itself ------------------------------------------------------
   The same bar for the window's own scrolling. The browser's is turned off on
   the document and this one is drawn over it, fixed to the right edge. It is
   the one bar that needs a z-index: it is not in a holder, it sits over the
   page, and a page's own furniture can be anything. Menus and panels are in
   the top layer, so they are above it whatever this says. */
html[data-ezui-scroll],
html[data-ezui-scroll] body { scrollbar-width: none; }
html[data-ezui-scroll]::-webkit-scrollbar,
html[data-ezui-scroll] body::-webkit-scrollbar { display: none; }

.ezui-scroll__bar[data-page] {
  position: fixed;
  z-index: 2000;
}
.ezui-scroll__bar[data-page][data-way="down"] { right: var(--ezui-scroll-inset); }
.ezui-scroll__bar[data-page][data-way="across"] { bottom: var(--ezui-scroll-inset); }

/* A page has no edge to hover, so its bar shows while the page is being
   scrolled, and while the bar itself is under the pointer or being held. */
html[data-ezui-scroll][data-scrolling] .ezui-scroll__bar[data-page] {
  opacity: var(--ezui-scroll-strength);
}
@media (hover: hover) {
  .ezui-scroll__bar[data-page]:hover { opacity: var(--ezui-scroll-strength); }
}

@media (prefers-reduced-motion: reduce) {
  .ezui-scroll__bar { transition: none; }
}