@dialpad/dialtone-css/lib/build/less/components/scrollbar.less

Dialpad's design system

.d-scrollbar {
  .os-theme-dark {
    // main color for the scrollbars handle
    --os-handle-color: var(--dt-color-surface-contrast);
    --os-handle-bg: var(--os-handle-color);
    --os-handle-bg-hover: var(--os-handle-color);
    --os-handle-bg-active: var(--os-handle-color);
  }

  .os-scrollbar {
    &.os-scrollbar-horizontal .os-scrollbar-handle:hover {
      height: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
    }

    &.os-scrollbar-vertical .os-scrollbar-handle:hover {
      width: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
    }

    .os-scrollbar-handle {
      cursor: auto;
      opacity: var(--dt-opacity-700);

      &:hover {
        opacity: var(--dt-opacity-800);
      }

      &:active {
        opacity: var(--dt-opacity-900);
      }
    }
  }
}

// put this class on html element to disable the scrollbar on body (useful for modals)
.d-scrollbar-disabled {
  overflow: hidden !important;

  & .os-scrollbar {
    display: none;
  }
}