/* scrollbars, haiku style: a sunken trough, a raised thumb with grip lines, and an arrow
   button at each end. this is webkit's ::-webkit-scrollbar (chrome, safari, edge). firefox
   only takes two colours, and chrome ignores the webkit styles wherever scrollbar-color is
   set, so that only goes where the webkit ones aren't understood. */

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-corner { background: var(--chrome); }

::-webkit-scrollbar-track {
  background: var(--track);
  box-shadow: inset 1px 1px 0 var(--lo-deep), inset -1px -1px 0 var(--hi);
}

::-webkit-scrollbar-thumb {
  border: 1px solid var(--edge); border-radius: var(--r-box);
  box-shadow: var(--raised);
}
/* three grip lines across the middle, drawn as lit and shaded pairs */
::-webkit-scrollbar-thumb:vertical {
  background:
    repeating-linear-gradient(var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 6px 8px no-repeat,
    linear-gradient(90deg, var(--control), var(--control-mid) 45%, var(--control-end));
}
::-webkit-scrollbar-thumb:horizontal {
  background:
    repeating-linear-gradient(90deg, var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 8px 6px no-repeat,
    var(--grad-control);
}
::-webkit-scrollbar-thumb:hover:vertical {
  background:
    repeating-linear-gradient(var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 6px 8px no-repeat,
    linear-gradient(90deg, var(--control), var(--control-hover-mid) 45%, var(--control-hover-end));
}
::-webkit-scrollbar-thumb:hover:horizontal {
  background:
    repeating-linear-gradient(90deg, var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 8px 6px no-repeat,
    var(--grad-control-hover);
}

/* one arrow button at each end. the arrows are two right triangles drawn with gradients,
   since a url() image couldn't follow the theme's colours */
::-webkit-scrollbar-button {
  display: block; width: 14px; height: 14px;
  background-color: var(--control-mid);
  background-repeat: no-repeat;
  border: 1px solid var(--edge);
  box-shadow: var(--raised);
}
::-webkit-scrollbar-button:active { background-color: var(--control-pressed-mid); box-shadow: var(--sunken); }
::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: linear-gradient(to bottom right, transparent 50%, var(--glyph) 50%), linear-gradient(to bottom left, transparent 50%, var(--glyph) 50%);
  background-size: 4px 4px; background-position: 2px 4px, 6px 4px;
}
::-webkit-scrollbar-button:vertical:end:increment {
  background-image: linear-gradient(to top right, transparent 50%, var(--glyph) 50%), linear-gradient(to top left, transparent 50%, var(--glyph) 50%);
  background-size: 4px 4px; background-position: 2px 4px, 6px 4px;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: linear-gradient(to bottom right, transparent 50%, var(--glyph) 50%), linear-gradient(to top right, transparent 50%, var(--glyph) 50%);
  background-size: 4px 4px; background-position: 4px 2px, 4px 6px;
}
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: linear-gradient(to bottom left, transparent 50%, var(--glyph) 50%), linear-gradient(to top left, transparent 50%, var(--glyph) 50%);
  background-size: 4px 4px; background-position: 4px 2px, 4px 6px;
}
/* chrome also offers a second pair of buttons at each end */
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--control-end) var(--track); }
}