:root {
  scrollbar-width: none;
}

:root::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 250;

  width: var(--scrollbar-lane);
  padding: var(--scrollbar-inset) 0;
  box-sizing: border-box;

  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms var(--ease), background-color 200ms var(--ease);
}

.scrollbar.is-visible {
  opacity: 1;
}

.scrollbar.is-near,
.scrollbar.is-dragging {
  background: var(--scrollbar-lane-bg);
  box-shadow: inset 1px 0 0 var(--scrollbar-lane-edge);
}

.scrollbar.is-visible .scrollbar__thumb {
  pointer-events: auto;
}

.scrollbar__thumb {
  position: absolute;
  top: 0;
  right: var(--scrollbar-gap);

  width: var(--scrollbar-thumb-width);
  border-radius: 999px;
  background: var(--scrollbar-thumb);

  transition: width 160ms var(--ease), right 160ms var(--ease),
              background-color 160ms var(--ease);
}

.scrollbar.is-near .scrollbar__thumb,
.scrollbar.is-dragging .scrollbar__thumb {
  width: var(--scrollbar-thumb-wide);
  right: var(--scrollbar-gap-wide);
}

.scrollbar.is-dragging .scrollbar__thumb {
  background: var(--scrollbar-thumb-strong);
}

.is-scrollbar-dragging,
.is-scrollbar-dragging body {
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .scrollbar,
  .scrollbar__thumb {
    transition: none;
  }
}