/* ==========================================================================
   Himalayan Trails — scrollbars

   Shared by the public site and the admin panel. Both include this file and
   only override the four tokens below, so a scrollbar never looks like it came
   from a different product than the surface it sits on.

   Two mechanisms, deliberately:

   1. `scrollbar-width` / `scrollbar-color` — the standard properties. Firefox
      has supported them for years, Chromium since 121. Where they apply, they
      are what actually renders.
   2. `::-webkit-scrollbar` — the legacy pseudo-elements, still the only route in
      older Chromium and in Safari.

   A browser that supports neither (or that renders overlay scrollbars, as macOS
   and mobile do) is left completely alone: every rule here is cosmetic, and
   scrolling keeps working untouched. Nothing is sized below 10px — a hairline
   scrollbar looks tidy in a screenshot and is miserable to actually drag.
   ========================================================================== */

:root {
  --sb-size: 10px;
  --sb-size-inset: 8px;          /* nested panels: slightly slimmer */
  --sb-radius: 999px;
  --sb-track: transparent;
  --sb-thumb: rgb(35 69 52 / 0.28);
  --sb-thumb-hover: rgb(35 69 52 / 0.48);
  --sb-thumb-active: rgb(35 69 52 / 0.62);
  --sb-thumb-inverse: rgb(255 255 255 / 0.24);
  --sb-thumb-inverse-hover: rgb(255 255 255 / 0.42);
}

/* ---- Standard properties -------------------------------------------------
   Scoped to browsers WITHOUT the pseudo-elements — in practice, Firefox.
   Chromium honours `scrollbar-width` in preference to `::-webkit-scrollbar`, and
   its `thin` rendering on Windows still draws stepper arrows, which is exactly
   the look we are trying to avoid. Letting Chromium fall through to the
   pseudo-elements gives full control there; Firefox gets the standard ones,
   which is all it supports anyway.

   Applied to the scrolling elements themselves rather than to `*`, so the
   browser is not asked to restyle every box on the page. */

@supports not selector(::-webkit-scrollbar) {
  html,
  body,
  [data-scroll-area],
  .ht-mega,
  .ht-mega__months,
  .ht-drawer__body,
  .ht-batch-list,
  .ht-modal,
  .ht-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }

  /* Dark surfaces need the light thumb, or it vanishes into the background. */
  .ht-header__utility,
  .ht-footer,
  [data-scroll-area="inverse"] {
    scrollbar-color: var(--sb-thumb-inverse) var(--sb-track);
  }
}

/* ---- WebKit / older Chromium --------------------------------------------- */

::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

::-webkit-scrollbar-track {
  background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: var(--sb-radius);
  /* A transparent border painted over the thumb's own background inset it from
     the track, which reads as a floating pill instead of a filled channel. */
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--sb-thumb-active);
}

/* Removes the little square where the two bars meet. */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* The stepper arrows are the single ugliest part of a Windows scrollbar. */
::-webkit-scrollbar-button {
  display: none;
}

/* Nested panels — menus, drawers, the booking batch list — get the slimmer
   size so the bar never competes with the content it belongs to. */
.ht-mega::-webkit-scrollbar,
.ht-mega__months::-webkit-scrollbar,
.ht-drawer__body::-webkit-scrollbar,
.ht-batch-list::-webkit-scrollbar,
.ht-modal::-webkit-scrollbar,
[data-scroll-area]::-webkit-scrollbar {
  width: var(--sb-size-inset);
  height: var(--sb-size-inset);
}

.ht-header__utility::-webkit-scrollbar-thumb,
.ht-footer::-webkit-scrollbar-thumb,
[data-scroll-area="inverse"]::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb-inverse);
}

.ht-header__utility::-webkit-scrollbar-thumb:hover,
.ht-footer::-webkit-scrollbar-thumb:hover,
[data-scroll-area="inverse"]::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-inverse-hover);
}

/*
 * Touch devices draw overlay scrollbars that fade out on their own. Forcing a
 * visible track there would steal horizontal space from a phone screen for no
 * benefit, so the styling is limited to pointer devices with a real cursor.
 */
@media (hover: none) {
  @supports not selector(::-webkit-scrollbar) {
    html,
    body,
    [data-scroll-area],
    .ht-mega,
    .ht-mega__months,
    .ht-drawer__body,
    .ht-batch-list,
    .ht-modal,
    .ht-table-scroll {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
  }
}