.page-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 140;
  width: 14px;
  height: 100%;
  padding: 10px 4px;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.page-scrollbar[hidden] {
  display: none;
}

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

.page-scrollbar.is-dragging {
  opacity: 1;
}

.page-scrollbar__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.page-scrollbar__thumb {
  position: absolute;
  top: 0;
  right: 1px;
  width: 4px;
  min-height: 48px;
  border-radius: 999px;
  background: rgba(0, 45, 114, 0.35);
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

.page-scrollbar.is-dragging .page-scrollbar__thumb {
  cursor: grabbing;
  transition: none;
}

.page-scrollbar.is-visible .page-scrollbar__thumb,
.page-scrollbar:hover .page-scrollbar__thumb {
  background: rgba(0, 45, 114, 0.6);
}

.page-scrollbar:hover .page-scrollbar__thumb {
  width: 6px;
}

@media (max-width: 767px) {
  .page-scrollbar {
    width: 12px;
    padding: 8px 3px;
  }

  .page-scrollbar__thumb {
    width: 3px;
    min-height: 40px;
  }

  .page-scrollbar:hover .page-scrollbar__thumb {
    width: 5px;
  }
}