.site-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 20px;
  height: 100%;
}
.site-scrollbar__track {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
}
.site-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  z-index: 3;
  width: 6px;
  height: var(--scrollbar-height, 0);
  border-radius: 999em;
  cursor: grab;
  translate: 0 var(--scrollbar-top) 0;
  scale: 1 1;
  transition: scale 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.07s linear;
  will-change: opacity, scale, transform;
}
.is-transitioning .site-scrollbar__thumb {
  scale: 0 1;
}
.site-scrollbar__thumb:before {
  position: absolute;
  top: -12px;
  left: calc(50% - 12px);
  width: 24px;
  height: calc(100% + 24px);
  content: "";
}
.site-scrollbar__thumb:after {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(77, 77, 77, 0.5333333333);
  border-radius: inherit;
  transition: top 0.1s cubic-bezier(0.215, 0.61, 0.355, 1),
    bottom 0.1s cubic-bezier(0.215, 0.61, 0.355, 1),
    background-color 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  content: "";
  will-change: background, top, bottom;
}
.site-scrollbar__thumb:hover:after {
  top: 6px;
  bottom: 6px;
  background-color: rgba(0, 0, 0, 0.8666666667);
}
.site-scrollbar.is-dragging {
  cursor: grabbing;
}
.site-scrollbar.is-dragging .site-scrollbar__thumb {
  cursor: grabbing;
}
.site-scrollbar.is-dragging .site-scrollbar__thumb:after {
  background-color: #000;
}
html.has-scrollbar,
html.has-scrollbar body {
  scrollbar-width: none;
}