.theme--dark {
  --scrollbar-background: transparent;
  --scrollbar-button-display: none;
  --scrollbar-thumb: rgb(142 142 142);
}
.theme--light {
  --scrollbar-background: transparent;
  --scrollbar-button-display: none;
  --scrollbar-thumb: rgb(163 179 221);
}
/* The bar/track */
::-webkit-scrollbar {
  background: var(--scrollbar-background);
  width: var(--scrollbar-size, 20px);
  height: var(--scrollbar-size, 20px);
}
/* The thumb/drag/pill */
::-webkit-scrollbar-thumb {
  border: calc(var(--scrollbar-size, 20px) * var(--scrollbar-inset, 0.2)) solid transparent;
  border-radius: calc(var(--scrollbar-size, 20px) / 2);
  background-color: rgb(from var(--scrollbar-thumb) r g b / 0.3);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(from var(--scrollbar-thumb) r g b / 0.7);
}
/* The buttons */
::-webkit-scrollbar-button:single-button {
  display: var(--scrollbar-button-display, block);
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: var(--scrollbar-size, 20px);
  width: var(--scrollbar-size, 20px);
  height: var(--scrollbar-size, 20px);
}
::-webkit-scrollbar-button:single-button:hover {
  background-color: rgb(from var(--scrollbar-thumb) r g b / 0.25);
}
::-webkit-scrollbar-button:not(:single-button) {
  display: none;
}
/* Left button */
.theme--dark ::-webkit-scrollbar-button:horizontal:start {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='12,6 12,14 8,10'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:horizontal:start {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='12,6 12,14 8,10'/></svg>");
}
/* Right button */
.theme--dark ::-webkit-scrollbar-button:horizontal:end {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='8,6 8,14 12,10'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:horizontal:end {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='8,6 8,14 12,10'/></svg>");
}
/* Up button */
.theme--dark ::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='6,12 14,12 10,8'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='6,12 14,12 10,8'/></svg>");
}
/* Down button */
.theme--dark ::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='6,8 14,8 10,12'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='6,8 14,8 10,12'/></svg>");
}