/*
 * The product's scrollbar. One look, everywhere something scrolls.
 *
 * The profile page shows two scrollbars at once - the page's and the sidebar nav's -
 * and both were the operating system's: a grey 15px trough with square ends in Chrome,
 * a different one in Firefox, a third on macOS. Two of them side by side is what made
 * it obvious that nothing here was designed.
 *
 * What this defines: a transparent track, a pill thumb in the product's grey, and a
 * hit area wide enough to grab without aiming. That last part is a deliberate rejection
 * of the fashionable 4-6px hairline - a scrollbar is a control, and a control you have
 * to hunt for with the mouse is a worse product, not a cleaner one. 12px of grabbable
 * width with an 6px pill inside it (the thumb's transparent border is what makes the
 * pill look slim while the target stays wide) is the same trade-off Slack, Notion and
 * GitHub landed on.
 *
 * How to make one narrower: set `--scrollbar-size` on the scrolling element. The
 * pseudo-elements below read it through inheritance, so a compact list inside a card
 * changes one line and keeps the same look - it does not get its own scrollbar rules.
 * That is why the three copies that existed in tool-layout-overrides.css and
 * profile.css are gone.
 *
 * Firefox has no ::-webkit-scrollbar, so it gets the standard `scrollbar-color` - but
 * ONLY Firefox, behind a @supports check: in Chrome that property turns the custom
 * styling off entirely. The details are at the rule itself.
 */
:root {
  /* Grabbable width of the whole scrollbar. */
  --scrollbar-size: 12px;
  /* Transparent border on the thumb: the difference between the two is the visible
     pill, so the pill is 12px - 2 * 3px = 6px wide inside a 12px target. */
  --scrollbar-thumb-inset: 3px;
}

/*
 * Firefox only, and it has to be exactly that.
 *
 * `scrollbar-color` is the standard property, but in Chrome setting it switches the
 * element to the standard scrollbar renderer and every ::-webkit-scrollbar rule below
 * is then ignored - which is why the sidebar kept its 15px OS bar with stepper arrows
 * while the custom properties resolved correctly. So the standard property is given
 * only to engines that have no webkit pseudo-elements to style, and Chrome/Safari get
 * the pseudo-elements. Firefox has no custom width beyond auto/thin; it keeps `auto`,
 * because a hairline is the thing this file exists to avoid.
 */
@supports not selector(::-webkit-scrollbar) {
  :root {
    scrollbar-color: var(--color-scrollbar) transparent;
  }
}

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

/* No trough. A visible track next to a card's own border reads as a second border. */
*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar);
  /* Clipped to the padding box so the transparent border becomes breathing room
     around the pill instead of a wider pill. */
  background-clip: padding-box;
  border: var(--scrollbar-thumb-inset) solid transparent;
  border-radius: 999px;
}

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

/* Dragging: the thumb stays at its hover colour, so the grab is acknowledged. */
*::-webkit-scrollbar-thumb:active {
  background-color: var(--color-scrollbar-hover);
}

/* The stepper arrows at each end. Chrome still paints one at the top of a styled bar,
   which reads as a stray glyph next to the pill - and nobody uses them to scroll. */
*::-webkit-scrollbar-button {
  /* display:none alone is not enough on Chrome/Linux, which still reserves and paints
     the stepper; a zero-sized button is what actually removes it. */
  display: none;
  width: 0;
  height: 0;
}

/* Where a vertical and a horizontal bar meet, the default is a grey square. */
*::-webkit-scrollbar-corner {
  background: transparent;
}