/* https://stackoverflow.com/a/66050759 */

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

html ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-light);
  background-clip: padding-box;
  border: 2px solid transparent;
}

html:not(.menu) ::-webkit-scrollbar-corner,
html:not(.menu) ::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-light);
}

html:not(.menu) ::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-light);
}

html:not(.menu) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-drag-light);
}

html:not(.menu) ::-webkit-scrollbar-button:single-button {
  background-color: var(--scrollbar-track-light);

  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
}

html:not(.menu) ::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 12px;
  width: 16px;
  background-position: center 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='505050'><polygon points='50,00 0,50 100,50'/></svg>");
}

html:not(.menu) ::-webkit-scrollbar-button:single-button:vertical:increment {
  height: 12px;
  width: 16px;
  background-position: center 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='505050'><polygon points='0,0 100,0 50,50'/></svg>");
}