/* The browser's own scrollbar, in the site's two colours.

   Every page sits on #100f10, so this is a pale thumb on nothing: the track is
   left transparent and the page shows through it. The thumb is painted inside a
   transparent border rather than being made narrow, so it reads as a thin pill
   while staying a full 10px wide to grab.

   The two ways of styling a scrollbar cannot be mixed. Chrome ignores every
   `::-webkit-scrollbar` rule the moment `scrollbar-width` or `scrollbar-color`
   is set on the element - set both and you silently get the standard treatment,
   which cannot round the thumb, inset it, or drop the little stepper arrows
   Windows puts at each end. So the standard properties are kept behind a
   support query, for Firefox, which has no webkit pseudo-elements to use.

   Deliberately global. Anything with its own scrollbar - the sitemap's green
   one, the galleries that hide theirs - is more specific and keeps what it
   has. */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* system chrome we are replacing, not keeping */
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(240, 239, 235, 0.24);
  /* the `background` shorthand would reset this, so the states below set the
     colour only */
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 8px;
  transition: background-color 160ms ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(240, 239, 235, 0.44);
}

*::-webkit-scrollbar-thumb:active {
  background-color: rgba(240, 239, 235, 0.62);
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 239, 235, 0.3) transparent;
  }
}