:root {
  --app-scrollbar-size: 6px;
  --app-scrollbar-hover-size: 8px;
  --app-scrollbar-thumb: #9ca3af;
  --app-scrollbar-thumb-rgb: 156 163 175;
  --app-scrollbar-thumb-hover: #7f8895;
  --app-scrollbar-thumb-hover-rgb: 127 136 149;
  --app-scrollbar-horizontal-idle-opacity: 0.5;
  --app-scrollbar-fade-duration: 300ms;
  --app-scrollbar-thickness-duration: 180ms;
}

/* Native color/width overrides bypass Chromium's scrollbar part styling. */
* {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

*::-webkit-scrollbar {
  width: var(--app-scrollbar-hover-size);
  height: var(--app-scrollbar-hover-size);
  background: transparent;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner {
  border: 0;
  background: transparent;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-thumb {
  min-width: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:vertical {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  background-color: transparent;
}

*::-webkit-scrollbar-thumb:horizontal {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background-color: rgb(var(--app-scrollbar-thumb-rgb) / var(--app-scrollbar-horizontal-idle-opacity));
}

.is-scrollbar-fading-v-90::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-90::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 90%); }
.is-scrollbar-fading-v-70::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-70::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 70%); }
.is-scrollbar-fading-v-50::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-50::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 50%); }
.is-scrollbar-fading-v-30::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-30::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 30%); }
.is-scrollbar-fading-v-10::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-10::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 10%); }

.is-scrollbar-fading-h-90::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-90::-webkit-scrollbar-thumb:horizontal { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 95%); }
.is-scrollbar-fading-h-70::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-70::-webkit-scrollbar-thumb:horizontal { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 85%); }
.is-scrollbar-fading-h-50::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-50::-webkit-scrollbar-thumb:horizontal { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 75%); }
.is-scrollbar-fading-h-30::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-30::-webkit-scrollbar-thumb:horizontal { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 65%); }
.is-scrollbar-fading-h-10::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-10::-webkit-scrollbar-thumb:horizontal { background-color: rgb(var(--app-scrollbar-thumb-rgb) / 55%); }

.is-scrollbar-fading-v-hover-90::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-90::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 90%); }
.is-scrollbar-fading-v-hover-70::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-70::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 70%); }
.is-scrollbar-fading-v-hover-50::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-50::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 50%); }
.is-scrollbar-fading-v-hover-30::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-30::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 30%); }
.is-scrollbar-fading-v-hover-10::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-10::-webkit-scrollbar-thumb:vertical { background-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 10%); }

/* Blend hover gray into the 50% idle gray without flashing the solid idle color. */
.is-scrollbar-fading-h-hover-90::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-90::-webkit-scrollbar-thumb:horizontal { background-color: rgb(130 139 152 / 95%); }
.is-scrollbar-fading-h-hover-70::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-70::-webkit-scrollbar-thumb:horizontal { background-color: rgb(136 144 157 / 85%); }
.is-scrollbar-fading-h-hover-50::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-50::-webkit-scrollbar-thumb:horizontal { background-color: rgb(142 150 162 / 75%); }
.is-scrollbar-fading-h-hover-30::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-30::-webkit-scrollbar-thumb:horizontal { background-color: rgb(147 155 167 / 65%); }
.is-scrollbar-fading-h-hover-10::-webkit-scrollbar-thumb,
.is-scrollbar-fading-b-hover-10::-webkit-scrollbar-thumb:horizontal { background-color: rgb(153 160 172 / 55%); }

.is-scrollbar-hovering::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb-hover);
}

.is-scrollbar-thickness-25::-webkit-scrollbar-thumb { border-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 25%); }
.is-scrollbar-thickness-50::-webkit-scrollbar-thumb { border-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 50%); }
.is-scrollbar-thickness-75::-webkit-scrollbar-thumb { border-color: rgb(var(--app-scrollbar-thumb-hover-rgb) / 75%); }

.is-scrollbar-active::-webkit-scrollbar-thumb,
.is-scrollbar-hovered::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb);
}

.is-scrollbar-hovered::-webkit-scrollbar-thumb,
.is-scrollbar-hovered::-webkit-scrollbar-thumb:vertical,
.is-scrollbar-hovered::-webkit-scrollbar-thumb:horizontal {
  border-color: var(--app-scrollbar-thumb-hover);
  background-color: var(--app-scrollbar-thumb-hover);
}