Styling

// Scrollbar track border radius
--scrollbar-border-radius: 0px;

// Scrollbar track thickness
--scrollbar-thickness: 5;

// Space between scrollbar track and its surrounding
--scrollbar-offset: 0;

// Scrollbar track wrapper transition
--scrollbar-track-wrapper-transition: width 60ms linear, height 60ms linear;

// Scrollbar track color
--scrollbar-track-color: transparent;

// Scrollbar track transition
--scrollbar-track-transition: none;

// Scrollbar thumb color
--scrollbar-thumb-color: rgb(0 0 0 / 20%);

// Scrollbar thumb color when hovered
--scrollbar-thumb-hover-color: var(--scrollbar-thumb-color);

// Scrollbar thickness when hovered
--scrollbar-hover-thickness: var(--scrollbar-thickness);

// Scrollbar thumb transition effect
--scrollbar-thumb-transition: none;

// The minimum size the scrollbar thumb can get
--scrollbar-thumb-min-size: 20;

// Scrollbar button colors
--scrollbar-button-color: var(--scrollbar-thumb-color);
--scrollbar-button-hover-color: var(--scrollbar-button-color);
--scrollbar-button-active-color: var(--scrollbar-button-hover-color);

// Scrollbar button arrow fill
--scrollbar-button-fill: white;
--scrollbar-button-hover-fill: var(--scrollbar-button-fill);
--scrollbar-button-active-fill: var(--scrollbar-button-hover-fill);


// Viewport overscroll behavior
// In firefox and safari the scrollbar bounces if viewport is over-scrolled causing the scrollbars to bounce with it
// It seems that the only way around this is by disabling the overscroll behavior
// The other option is to give up the sticky scrollbar method and use an absolute position scrollbars
--scrollbar-overscroll-behavior: initial;

// Viewport overscroll behavior in mobile devices
--scrollbar-mobile-overscroll-behavior: none;