Firefox-like Scrollbar for WebKit in CSS

firefox-like-scrollbar-for-webkit.css

::-webkit-scrollbar {
  width: calc(16px - 2px - 1px);
  height: calc(16px - 2px - 1px);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(128,128,128,0.75);
  background-clip: padding-box;
  border: 4px solid rgba(0, 0, 0, 0);
  border-radius: 9999px;
  display: none;
}
:hover::-webkit-scrollbar-thumb {
  display: initial;
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
  background-clip: padding-box;
  border-left: 0px;
}
::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
  background-color: rgba(90,90,90,0.5);
  background-clip: padding-box;
  border: 4px solid rgba(0, 0, 0, 0);
  border-left: 0px;
  border-radius: 9999px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-corner {
  background: none;
}

Differences to Firefox 135.0~:

1. No transitions -- it doesn't seem possible.
2. Not overlay scrollbars -- still kept as 'classic' style scrollbars but again not by choice.
3. The thumb-enlarge-on-hover effect uses border tricks to change size without causing page shift/CLS.

Benefits of this CSS:

1. Scrollbars don't look massive and ugly. Thinner bars without the track background and nice rounding.
2. The buttons to go up/down are removed -- generally considered outdated design wise.
3. Scrollbar hides itself until the element the scroll bar is for is hovered over.
4. Scrollbar thumb gets thicker when you hover over it.