@esportsplus/ui 0.57.0 → 0.58.0

package/src/{css-utilities → modifiers}/scrollbar/index.ts

@@ -1,11 +1,28 @@
 import { reactive } from '@esportsplus/reactivity';
 import { observer, type Observer } from '~/shared/resize';
-import { createOverlay } from '../glass';
+import { overlay } from '../glass';
 import './scss/index.scss';
 
 
 type Axis = 'both' | 'horizontal' | 'vertical';
 
+// Mirrors tokens' '$colors', which generates a '--scrollbar-<color>' class for each.
+type Color = 'black' | 'blue' | 'green' | 'grey' | 'primary' | 'purple' | 'red' | 'text' | 'white' | 'yellow';
+
+// Blur and fade are both edge effects, so a scroller takes one or the other; drag combines with either.
+type Options = {
+    auto?: boolean;
+    color?: Color;
+    drag?: Axis | boolean;
+    hidden?: boolean;
+    horizontal?: boolean;
+    hover?: boolean;
+    snap?: boolean;
+} & (
+    { blur?: boolean; fade?: never } |
+    { blur?: never; fade?: boolean }
+);
+
 type Press = {
     id: number;
     left: number;
@@ -22,9 +39,9 @@ const SLOP = 4;
 
 // 'size' names the effect's registered length, which computes to pixels: like the scroll-driven animation ranges,
 // each edge reaches full strength once the content has scrolled that far past it.
-function attributes(name: string, size: string) {
+function edges(size: string, horizontal: boolean) {
     if (typeof CSS === 'undefined' || CSS.supports('animation-timeline: scroll()')) {
-        return { class: ['--scrollbar', name] };
+        return {};
     }
 
     let mutation: MutationObserver | undefined,
@@ -39,8 +56,7 @@ function attributes(name: string, size: string) {
     }
 
     function update(element: HTMLElement) {
-        let horizontal = element.classList.contains('--scrollbar-horizontal'),
-            offset = horizontal ? Math.abs(element.scrollLeft) : element.scrollTop,
+        let offset = horizontal ? Math.abs(element.scrollLeft) : element.scrollTop,
             range = horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight,
             end = range > 0 ? Math.min(1, (range - offset) / ramp) : 0,
             start = range > 0 ? Math.min(1, offset / ramp) : 0;
@@ -58,7 +74,6 @@ function attributes(name: string, size: string) {
     // Returned as a reactive style, not set imperatively, because the template rewrites the whole
     // style attribute whenever any other reactive style on the element changes.
     return {
-        class: ['--scrollbar', name],
         onconnect: (element: HTMLElement) => {
             mutation?.disconnect();
             resize?.disconnect();
@@ -104,33 +119,33 @@ function attributes(name: string, size: string) {
         onscroll: function(this: HTMLElement) {
             update(this);
         },
-        style: () => state.toggle !== undefined && `--scroll-overflow-end: ${overflow.end}; --scroll-overflow-start: ${overflow.start};`
+        style: () => state.toggle !== undefined && `--scrollbar-overflow-end: ${overflow.end}; --scrollbar-overflow-start: ${overflow.start};`
     };
 }
 
 
-const blur = () => {
-    let scroll = attributes('--scrollbar-blur', '--scroll-blur-size');
+function blur(horizontal: boolean) {
+    let scroll = edges('--scrollbar-blur-size', horizontal);
 
     return {
         ...scroll,
         onconnect: (element: HTMLElement) => {
             if (!element.querySelector(':scope > .--scrollbar-blur-start')) {
-                element.prepend(createOverlay(element, 'progressive', '--scrollbar-blur-edge --scrollbar-blur-start'));
+                element.prepend(overlay('progressive', '--scrollbar-blur-edge --scrollbar-blur-start'));
             }
 
             if (!element.querySelector(':scope > .--scrollbar-blur-end')) {
-                element.appendChild(createOverlay(element, 'progressive', '--scrollbar-blur-edge --scrollbar-blur-end'));
+                element.appendChild(overlay('progressive', '--scrollbar-blur-edge --scrollbar-blur-end'));
             }
 
             scroll.onconnect?.(element);
         }
     };
-};
+}
 
 // Mouse only: touch, pen and trackpads already scroll natively, with their own momentum. The pointer is
 // captured only once the press moves past the slop, so a plain click still reaches whatever it landed on.
-const drag = (axis: Axis = 'both') => {
+function drag(axis: Axis) {
     let press: Press | null = null,
         state = reactive({ dragging: false });
 
@@ -144,7 +159,7 @@ const drag = (axis: Axis = 'both') => {
     }
 
     return {
-        class: ['--scrollbar', '--scrollbar-drag', () => state.dragging && '--dragging'],
+        class: ['--scrollbar-drag', () => state.dragging && '--dragging'],
         // Links and images would otherwise start a native drag-and-drop mid-scroll.
         ondragstart: (e: DragEvent) => {
             e.preventDefault();
@@ -192,9 +207,69 @@ const drag = (axis: Axis = 'both') => {
         },
         onpointerup: end
     };
-};
+}
+
 
-const fade = () => attributes('--scrollbar-fade', '--scroll-fade-size');
+// One scroller's attributes: the bar and its variants, an edge effect if asked for, and mouse drag along 'drag''s axis,
+// both when true.
+const scrollbar = ({
+    auto,
+    blur: blurred,
+    color,
+    drag: dragged,
+    fade: faded,
+    hidden,
+    horizontal = false,
+    hover,
+    snap
+}: Options = {}) => {
+    let classes: (string | (() => false | string))[] = ['--scrollbar'],
+        effect = blurred
+            ? blur(horizontal)
+            : faded
+                ? edges('--scrollbar-fade-size', horizontal)
+                : {},
+        grab = dragged ? drag(dragged === true ? 'both' : dragged) : null;
+
+    if (auto) {
+        classes.push('--scrollbar-auto');
+    }
+
+    if (blurred) {
+        classes.push('--scrollbar-blur');
+    }
+
+    if (color) {
+        classes.push(`--scrollbar-${color}`);
+    }
+
+    if (faded) {
+        classes.push('--scrollbar-fade');
+    }
+
+    if (hidden) {
+        classes.push('--scrollbar-hidden');
+    }
+
+    if (horizontal) {
+        classes.push('--scrollbar-horizontal');
+    }
+
+    if (hover) {
+        classes.push('--scrollbar-hover');
+    }
+
+    if (snap) {
+        classes.push('--scrollbar-snap');
+    }
+
+    if (!grab) {
+        return { ...effect, class: classes };
+    }
+
+    return { ...effect, ...grab, class: [...classes, ...grab.class] };
+};
 
 
-export default { blur, drag, fade };
+export default scrollbar;
+export type { Axis, Color, Options };

package/src/{css-utilities → modifiers}/scrollbar/scss/index.scss

@@ -3,175 +3,39 @@
 
 // The sizes are registered so they compute to pixels, which the fallback reads as its ramp and the animation
 // ranges accept; the fade lengths so the scroll-driven animations below can interpolate them.
-@property --scroll-blur-size {
+@property --scrollbar-blur-size {
     inherits: true;
     initial-value: 0px;
     syntax: '<length>';
 }
 
-@property --scroll-fade-end {
+@property --scrollbar-fade-end {
     inherits: false;
     initial-value: 0px;
     syntax: '<length>';
 }
 
-@property --scroll-fade-size {
+@property --scrollbar-fade-size {
     inherits: true;
     initial-value: 0px;
     syntax: '<length>';
 }
 
-@property --scroll-fade-start {
+@property --scrollbar-fade-start {
     inherits: false;
     initial-value: 0px;
     syntax: '<length>';
 }
 
-// Clipped descendants must pass wheel input to their scroller instead of trapping it at their own boundary.
-.--scrollbar,
-:where(.--scrollbar-scope) {
-    overscroll-behavior: var(--scrollbar-overscroll);
-}
-
-.--scrollbar,
-:where(.--scrollbar-scope, .--scrollbar-scope *) {
-    scroll-behavior: var(--scrollbar-behavior);
-    scrollbar-color: var(--scrollbar-color-default) var(--scrollbar-rail-color);
-    scrollbar-width: var(--scrollbar-width);
-
-    @media (prefers-reduced-motion: reduce) {
-        scroll-behavior: auto;
-    }
-
-    // Custom rendering exposes thumb shape and state; other browsers keep the native color and width above.
-    // Size-derived values resolve on each element rather than as root defaults, so a descendant that overrides
-    // --scrollbar-size keeps its own proportions.
-    @supports selector(::-webkit-scrollbar) {
-        --scrollbar-growth: calc(var(--scrollbar-size-hover, calc(var(--scrollbar-size) + 2px)) - var(--scrollbar-size));
-        --scrollbar-inset-edge: calc(var(--scrollbar-growth) * var(--scrollbar-align));
-        --scrollbar-inset-inner: calc(var(--scrollbar-growth) * (1 - var(--scrollbar-align)));
-        --scrollbar-radius: var(--scrollbar-border-radius, calc(var(--scrollbar-size) / 3));
-        --scrollbar-track-size: calc(var(--scrollbar-size) + var(--scrollbar-growth));
-        scrollbar-color: auto;
-        scrollbar-width: auto;
-
-        // Sized for the hovered thumb, so widening it never reflows the gutter.
-        &::-webkit-scrollbar {
-            height: calc(var(--scrollbar-size) + var(--scrollbar-growth));
-            width: calc(var(--scrollbar-size) + var(--scrollbar-growth));
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-clip: padding-box;
-            background-color: var(--scrollbar-color-default);
-            border: 0 solid transparent;
-            border-radius: var(--scrollbar-radius);
-        }
-
-        // Transparent borders across the thumb inset its paint to --scrollbar-size, split between the window edge
-        // and the content side by --scrollbar-align. Each corner's cross-axis radius grows by its side's inset so
-        // the painted corners keep --scrollbar-radius.
-        &::-webkit-scrollbar-thumb:vertical {
-            border-end-end-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge)) var(--scrollbar-radius);
-            border-end-start-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner)) var(--scrollbar-radius);
-            border-inline-end-width: var(--scrollbar-inset-edge);
-            border-inline-start-width: var(--scrollbar-inset-inner);
-            border-start-end-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge)) var(--scrollbar-radius);
-            border-start-start-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner)) var(--scrollbar-radius);
-        }
-
-        &::-webkit-scrollbar-thumb:horizontal {
-            border-block-end-width: var(--scrollbar-inset-edge);
-            border-block-start-width: var(--scrollbar-inset-inner);
-            border-end-end-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge));
-            border-end-start-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge));
-            border-start-end-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner));
-            border-start-start-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner));
-        }
-
-        &::-webkit-scrollbar-thumb:active,
-        &::-webkit-scrollbar-thumb:hover {
-            border-radius: var(--scrollbar-radius);
-            border-width: 0;
-        }
-
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: var(--scrollbar-color-hover);
-        }
-
-        &::-webkit-scrollbar-thumb:active {
-            background-color: var(--scrollbar-color-pressed);
-        }
-
-        &::-webkit-scrollbar-button {
-            display: none;
-        }
-
-        &::-webkit-scrollbar-corner,
-        &::-webkit-scrollbar-track {
-            background: var(--scrollbar-rail-color);
-        }
-    }
-}
-
 // The scope styles existing scroll containers without making every descendant scrollable or reserving gutters.
 .--scrollbar {
     overflow: var(--scrollbar-overflow, auto);
     scrollbar-gutter: var(--scrollbar-gutter, stable);
 
-    &.--flex-column {
-        overflow-x: hidden;
-    }
-    &.--flex-row {
-        overflow-y: hidden;
-    }
-
-    // An `auto` size has no width to inset from, so the platform bar paints at full width. Its width is unknown,
-    // so a fade covers it rather than leaving a strip of the wrong size.
-    &-auto {
-        --scrollbar-growth: 0px;
-        --scrollbar-track-size: 0px;
-    }
-
     // Sticky edges pin to the scrollport and cancel their own size with a negative margin. Scoped under the
     // scroller to outrank the overlay's own absolute '--glass-blur' placement whatever order the stylesheets load
     // in; absolute edges would also resolve scroll(nearest) to an ancestor that never scrolls.
     &-blur {
-        > .--scrollbar-blur-edge {
-            --blur: var(--scroll-blur);
-            flex-shrink: 0;
-            height: var(--scroll-blur-size);
-            position: sticky;
-            z-index: 1;
-        }
-
-        > .--scrollbar-blur-end {
-            --glass-direction: to bottom;
-            --glass-opacity: calc(var(--scroll-overflow-end, 0) * 0.9);
-            inset: auto 0 0;
-            margin-top: calc(var(--scroll-blur-size) * -1);
-            translate: 0 var(--scroll-blur-offset-end);
-        }
-
-        > .--scrollbar-blur-start {
-            --glass-direction: to top;
-            --glass-opacity: calc(var(--scroll-overflow-start, 0) * 0.9);
-            inset: 0 0 auto;
-            margin-bottom: calc(var(--scroll-blur-size) * -1);
-            translate: 0 var(--scroll-blur-offset-start);
-        }
-
-        // The column utility adds a gap beside each edge, even when its height is cancelled.
-        &.--flex-column {
-            > .--scrollbar-blur-end {
-                margin-top: calc((var(--scroll-blur-size) + var(--gap-vertical)) * -1);
-            }
-
-            > .--scrollbar-blur-start {
-                margin-bottom: calc((var(--scroll-blur-size) + var(--gap-vertical)) * -1);
-            }
-        }
-
         // Block flow would stack the edges above and below the content, so a row lays them beside it. A flex
         // item's containing block is the scroller itself, letting the edges stick across the whole scroll, and
         // stretching gives them its full height however it is sized. Content keeps its own width to overflow.
@@ -184,52 +48,66 @@
 
             > .--scrollbar-blur-edge {
                 height: auto;
-                width: var(--scroll-blur-size);
+                width: var(--scrollbar-blur-size);
             }
 
             > .--scrollbar-blur-end {
                 --glass-direction: to right;
                 inset: auto 0 auto auto;
-                margin: 0 0 0 calc(var(--scroll-blur-size) * -1);
-                translate: var(--scroll-blur-offset-end) 0;
+                margin: 0 0 0 calc(var(--scrollbar-blur-size) * -1);
+                translate: var(--scrollbar-blur-offset-end) 0;
             }
 
             > .--scrollbar-blur-start {
                 --glass-direction: to left;
                 inset: auto auto auto 0;
-                margin: 0 calc(var(--scroll-blur-size) * -1) 0 0;
-                translate: var(--scroll-blur-offset-start) 0;
+                margin: 0 calc(var(--scrollbar-blur-size) * -1) 0 0;
+                translate: var(--scrollbar-blur-offset-start) 0;
             }
+        }
 
-            &.--flex-row {
-                > .--scrollbar-blur-end {
-                    margin-left: calc((var(--scroll-blur-size) + var(--gap-horizontal)) * -1);
-                }
+        > .--scrollbar-blur-edge {
+            --glass-blur: var(--scrollbar-blur);
+            flex-shrink: 0;
+            height: var(--scrollbar-blur-size);
+            position: sticky;
+            z-index: 1;
+        }
 
-                > .--scrollbar-blur-start {
-                    margin-right: calc((var(--scroll-blur-size) + var(--gap-horizontal)) * -1);
-                }
-            }
+        > .--scrollbar-blur-end {
+            --glass-direction: to bottom;
+            --glass-opacity: calc(var(--scrollbar-overflow-end, 0) * 0.9);
+            inset: auto 0 0;
+            margin-top: calc(var(--scrollbar-blur-size) * -1);
+            translate: 0 var(--scrollbar-blur-offset-end);
+        }
+
+        > .--scrollbar-blur-start {
+            --glass-direction: to top;
+            --glass-opacity: calc(var(--scrollbar-overflow-start, 0) * 0.9);
+            inset: 0 0 auto;
+            margin-bottom: calc(var(--scrollbar-blur-size) * -1);
+            translate: 0 var(--scrollbar-blur-offset-start);
         }
 
         // The scroller is the edges' nearest scroll container, so they follow its own scroll. Each edge reaches
         // full strength once the content has scrolled the blur's size past it, however long the content is.
         @supports (animation-timeline: scroll()) {
+            &.--scrollbar-horizontal > .--scrollbar-blur-edge {
+                animation-timeline: scroll(nearest x);
+            }
+
             > .--scrollbar-blur-end {
                 animation: scrollbar-blur-end 1ms linear both;
-                animation-range: calc(100% - var(--scroll-blur-size)) 100%;
+                animation-range: calc(100% - var(--scrollbar-blur-size)) 100%;
                 animation-timeline: scroll(nearest);
             }
 
             > .--scrollbar-blur-start {
                 animation: scrollbar-blur-start 1ms linear both;
-                animation-range: 0px var(--scroll-blur-size);
+                animation-range: 0px var(--scrollbar-blur-size);
                 animation-timeline: scroll(nearest);
             }
-
-            &.--scrollbar-horizontal > .--scrollbar-blur-edge {
-                animation-timeline: scroll(nearest x);
-            }
         }
 
         @keyframes scrollbar-blur-end {
@@ -262,13 +140,13 @@
         user-select: none;
     }
 
-    // Unsupported browsers get --scroll-overflow-* from the scrollbar.fade() fallback instead of the timeline. The
+    // Unsupported browsers get --scrollbar-overflow-* from the scrollbar.fade() fallback instead of the timeline. The
     // mask spans the scrollbar too, so a second, opaque layer keeps the custom bar's strip out of the fade.
     &-fade {
-        --scroll-fade-end: calc(var(--scroll-fade-size) * var(--scroll-overflow-end, 0));
-        --scroll-fade-start: calc(var(--scroll-fade-size) * var(--scroll-overflow-start, 0));
+        --scrollbar-fade-end: calc(var(--scrollbar-fade-size) * var(--scrollbar-overflow-end, 0));
+        --scrollbar-fade-start: calc(var(--scrollbar-fade-size) * var(--scrollbar-overflow-start, 0));
         mask-image:
-            linear-gradient(to bottom, transparent, #000 var(--scroll-fade-start), #000 calc(100% - var(--scroll-fade-end)), transparent),
+            linear-gradient(to bottom, transparent, #000 var(--scrollbar-fade-start), #000 calc(100% - var(--scrollbar-fade-end)), transparent),
             linear-gradient(#000 0 0);
         mask-position: left, right;
         mask-repeat: no-repeat;
@@ -276,7 +154,7 @@
 
         &.--scrollbar-horizontal {
             mask-image:
-                linear-gradient(to right, transparent, #000 var(--scroll-fade-start), #000 calc(100% - var(--scroll-fade-end)), transparent),
+                linear-gradient(to right, transparent, #000 var(--scrollbar-fade-start), #000 calc(100% - var(--scrollbar-fade-end)), transparent),
                 linear-gradient(#000 0 0);
             mask-position: top, bottom;
             mask-size: 100% calc(100% - var(--scrollbar-track-size, 0px)), 100% var(--scrollbar-track-size, 0px);
@@ -286,7 +164,7 @@
         // content is.
         @supports (animation-timeline: scroll()) {
             animation: scrollbar-fade-end 1ms linear both, scrollbar-fade-start 1ms linear both;
-            animation-range: calc(100% - var(--scroll-fade-size)) 100%, 0px var(--scroll-fade-size);
+            animation-range: calc(100% - var(--scrollbar-fade-size)) 100%, 0px var(--scrollbar-fade-size);
             animation-timeline: scroll(self);
 
             &.--scrollbar-horizontal {
@@ -296,21 +174,21 @@
 
         @keyframes scrollbar-fade-end {
             from {
-                --scroll-fade-end: var(--scroll-fade-size);
+                --scrollbar-fade-end: var(--scrollbar-fade-size);
             }
 
             to {
-                --scroll-fade-end: 0px;
+                --scrollbar-fade-end: 0px;
             }
         }
 
         @keyframes scrollbar-fade-start {
             from {
-                --scroll-fade-start: 0px;
+                --scrollbar-fade-start: 0px;
             }
 
             to {
-                --scroll-fade-start: var(--scroll-fade-size);
+                --scrollbar-fade-start: var(--scrollbar-fade-size);
             }
         }
     }
@@ -324,6 +202,14 @@
         }
     }
 
+    // No vertical gutter held open, and vertical wheels chain through to the page.
+    &-horizontal {
+        overflow-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior-y: auto;
+        scrollbar-gutter: auto;
+    }
+
     // Hide only the paint, preserving the scrollbar's size and gutter. Touch keeps its native affordance.
     &-hover {
         @media (hover: hover) and (pointer: fine) {
@@ -343,14 +229,6 @@
         }
     }
 
-    // No vertical gutter held open, and vertical wheels chain through to the page.
-    &-horizontal {
-        overflow-x: auto;
-        overflow-y: hidden;
-        overscroll-behavior-y: auto;
-        scrollbar-gutter: auto;
-    }
-
     &-snap {
         overflow: auto;
         overscroll-behavior-x: contain;
@@ -362,3 +240,126 @@
         }
     }
 }
+
+// Clipped descendants must pass wheel input to their scroller instead of trapping it at their own boundary.
+.--scrollbar,
+:where(.--scrollbar-scope) {
+    overscroll-behavior: var(--scrollbar-overscroll);
+}
+
+.--scrollbar,
+:where(.--scrollbar-scope, .--scrollbar-scope *) {
+    scroll-behavior: var(--scrollbar-behavior);
+    scrollbar-color: var(--scrollbar-color-default) var(--scrollbar-rail-color);
+    scrollbar-width: var(--scrollbar-width);
+
+    @media (prefers-reduced-motion: reduce) {
+        scroll-behavior: auto;
+    }
+
+    // Custom rendering exposes thumb shape and state; other browsers keep the native color and width above.
+    // Size-derived values resolve on each element rather than as root defaults, so a descendant that overrides
+    // --scrollbar-size keeps its own proportions.
+    @supports selector(::-webkit-scrollbar) {
+        --scrollbar-growth: calc(var(--scrollbar-size-hover, calc(var(--scrollbar-size) + 2px)) - var(--scrollbar-size));
+        --scrollbar-inset-edge: calc(var(--scrollbar-growth) * var(--scrollbar-align) + var(--scrollbar-offset));
+        --scrollbar-inset-inner: calc(var(--scrollbar-growth) * (1 - var(--scrollbar-align)));
+        --scrollbar-radius: var(--scrollbar-border-radius, calc(var(--scrollbar-size) / 3));
+        --scrollbar-track-size: calc(var(--scrollbar-size) + var(--scrollbar-growth) + var(--scrollbar-offset));
+        scrollbar-color: auto;
+        scrollbar-width: auto;
+
+        // Sized for the hovered thumb, so widening it never reflows the gutter.
+        &::-webkit-scrollbar {
+            height: var(--scrollbar-track-size);
+            width: var(--scrollbar-track-size);
+        }
+
+        &::-webkit-scrollbar-button {
+            display: none;
+        }
+
+        &::-webkit-scrollbar-corner,
+        &::-webkit-scrollbar-track {
+            background-color: var(--scrollbar-rail-color);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-color-default);
+        }
+
+        // Transparent borders across the thumb inset its paint to --scrollbar-size, split between the window edge
+        // and the content side by --scrollbar-align, plus --scrollbar-offset on the edge. Each corner's cross-axis
+        // radius grows by its side's inset so the painted corners keep --scrollbar-radius. The rail takes the
+        // resting thumb's shape, so it runs under the thumb rather than filling the gutter.
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-track {
+            background-clip: padding-box;
+            border: 0 solid transparent;
+            border-radius: var(--scrollbar-radius);
+        }
+
+        &::-webkit-scrollbar-thumb:active {
+            background-color: var(--scrollbar-color-pressed);
+        }
+
+        &::-webkit-scrollbar-thumb:horizontal,
+        &::-webkit-scrollbar-track:horizontal {
+            border-block-end-width: var(--scrollbar-inset-edge);
+            border-block-start-width: var(--scrollbar-inset-inner);
+            border-end-end-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge));
+            border-end-start-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge));
+            border-start-end-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner));
+            border-start-start-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner));
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: var(--scrollbar-color-hover);
+        }
+
+        &::-webkit-scrollbar-thumb:vertical,
+        &::-webkit-scrollbar-track:vertical {
+            border-end-end-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge)) var(--scrollbar-radius);
+            border-end-start-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner)) var(--scrollbar-radius);
+            border-inline-end-width: var(--scrollbar-inset-edge);
+            border-inline-start-width: var(--scrollbar-inset-inner);
+            border-start-end-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-edge)) var(--scrollbar-radius);
+            border-start-start-radius: calc(var(--scrollbar-radius) + var(--scrollbar-inset-inner)) var(--scrollbar-radius);
+        }
+
+        &::-webkit-scrollbar-track:horizontal {
+            margin-inline: var(--scrollbar-track-inset);
+        }
+
+        &::-webkit-scrollbar-track:vertical {
+            margin-block: var(--scrollbar-track-inset);
+        }
+
+        &:hover::-webkit-scrollbar-thumb:horizontal,
+        &:hover::-webkit-scrollbar-track:horizontal,
+        &::-webkit-scrollbar-thumb:horizontal:active,
+        &::-webkit-scrollbar-track:horizontal:active {
+            border-block-end-width: var(--scrollbar-offset);
+            border-block-start-width: 0;
+            border-end-end-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-offset));
+            border-end-start-radius: var(--scrollbar-radius) calc(var(--scrollbar-radius) + var(--scrollbar-offset));
+            border-start-end-radius: var(--scrollbar-radius);
+            border-start-start-radius: var(--scrollbar-radius);
+        }
+
+        // Grown to the full track, less the offset that keeps it off the window edge. A scrollbar part only matches
+        // its own hover, so the scroller's hover grows the thumb and rail together; pressing either holds it through
+        // a drag.
+        &:hover::-webkit-scrollbar-thumb:vertical,
+        &:hover::-webkit-scrollbar-track:vertical,
+        &::-webkit-scrollbar-thumb:vertical:active,
+        &::-webkit-scrollbar-track:vertical:active {
+            border-end-end-radius: calc(var(--scrollbar-radius) + var(--scrollbar-offset)) var(--scrollbar-radius);
+            border-end-start-radius: var(--scrollbar-radius);
+            border-inline-end-width: var(--scrollbar-offset);
+            border-inline-start-width: 0;
+            border-start-end-radius: calc(var(--scrollbar-radius) + var(--scrollbar-offset)) var(--scrollbar-radius);
+            border-start-start-radius: var(--scrollbar-radius);
+        }
+    }
+}