@nexterajs/ui 0.0.1 → 0.0.2

package/styles/_dropdown.scss

@@ -2,6 +2,9 @@
 // Reproduces the DevExtreme `.dx-dropdownlist-popup`. Global (loaded via styling/index.scss) so it
 // applies inside the CDK overlay regardless of which component opened it.
 //
+// The file also holds the editors' trailing-button rule set (`nxe-dropdown-editor-buttons`, below),
+// which is NOT global: each dropdown editor includes it in its own component stylesheet.
+//
 // Every value below is checked against the reference deployment's bundle
 // (tools/visual-parity/reference/bright-styles.css); the source rule is named in a comment.
 // Typography deliberately comes from `.nxe-widget` on the PANE (styling/_widget.scss) — the panel
@@ -110,4 +113,150 @@
         min-height: 3em;
         color: var(--nxe-ui-text-muted);
     }
+
+    // The panes that replace DevExtreme popups sit flush against their editor (dx measures the
+    // overlay at the editor's bottom edge). Host apps migrated from broker carry
+    // `.cdk-overlay-pane { margin-top: 5px }` (styles/material/_menu.scss), which was written for
+    // mat-menu — dx popups were never CDK panes, so it never reached them. At (0,2,0) this beats it.
+    // `.nxe-autocomplete-pane` is deliberately absent: it replaces mat-autocomplete, which did get
+    // the 5px, and so did the mat-menu panes that host nxe-list action menus.
+    .cdk-overlay-pane.nxe-select-pane,
+    .cdk-overlay-pane.nxe-dropdownbox-pane,
+    .cdk-overlay-pane.nxe-autocomplete-box-pane,
+    .cdk-overlay-pane.nxe-datebox-pane {
+        margin-top: 0;
+    }
+}
+
+// ------------------------------------------------------------------------------------------------
+// Trailing buttons of the dropdown editors — one rule set for select-box, tag-box, drop-down-box
+// and auto-complete. Include it INSIDE the component's host selector:
+//
+//     nxe-select-box { @include dropdown.nxe-dropdown-editor-buttons; }
+//
+// so every selector starts with the host element. That keeps them in component styles (present in
+// karma, and loaded after the app's global sheet) while staying LOW enough for an app to recolour:
+// `nxe-select-box .nxe-select-arrow` is (0,1,1), so e.g. a sign-in screen's
+// `.sign-in-company .nxe-select-arrow { color }` at (0,2,0) still wins.
+//
+// Colours are dx.light literals, like the rest of the editor chrome (styles/_editor.scss) — there
+// are no dark editor tokens to route them through.
+// ------------------------------------------------------------------------------------------------
+
+// The 34px drop button box, shared with the date box's calendar button.
+// dx: `.dx-dropdowneditor-button { width:34px; min-width:34px; padding:1px; border-radius:4px;
+//      height:100% }` around `.dx-dropdowneditor-icon { width:32px; height:100%;
+//      border:1px solid transparent; border-radius:3px }`. The state fill is painted on that 32px
+// inner icon, never on the button — which is why measuring `.dx-dropdowneditor-button` found it
+// transparent. `background-clip: content-box` paints the same 32px box (corner radius 4 - 1 = 3px)
+// without an extra element.
+@mixin nxe-drop-button {
+    box-sizing: border-box;
+    position: relative;
+    flex: 0 0 34px;
+    // Full editor height rather than a fixed 34px: in a grid cell whose editor is shorter the fill
+    // becomes 32 x (height - 2), as dx's does, and the glyph stays centred.
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    min-width: 34px;
+    padding: 1px;
+    border-radius: 4px;
+    background-clip: content-box;
+    color: #333;
+    cursor: pointer;
+
+    svg {
+        display: block;
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+    }
+}
+
+// dx: `.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
+//      .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon
+//      { background-color:#e6e6e6 }` and
+//     `.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon
+//      { background-color:#b3b3b3; opacity:1 }`.
+//
+// PRECEDENCE — do not reorder, do not add !important. dx's hover selector is (0,4,0) (the :not()
+// counts as a class) and beats the open one at (0,3,0), so an open editor under the pointer shows
+// #e6e6e6 and turns #b3b3b3 only once the pointer leaves. Here hover/active is (0,3,1) against open
+// at (0,2,1) — the same relationship, so source order does not decide it and must not be made to.
+// (The library's panes open with a transparent CDK backdrop, so the host stops matching :hover
+// while open and the fill reads #b3b3b3 for the whole open period. That residual is known.)
+@mixin nxe-drop-button-states($button, $open) {
+    &:hover:not(.nxe-disabled) #{$button},
+    &:active:not(.nxe-disabled) #{$button} {
+        background-color: #e6e6e6;
+    }
+
+    #{$open} {
+        background-color: #b3b3b3;
+    }
+}
+
+// The clear (×) area — one definition for the dropdown editors' `.nxe-select-clear` (below) and the
+// text editors' `.nxe-clear-button-area` (styles/_editor.scss: text-box, number-box, date-box).
+// dx: `.dx-show-clear-button .dx-clear-button-area { width:34px; min-width:34px; height:100% }`
+// holding `.dx-icon-clear { color:#999; top:50%; margin-top:-17px; padding:8px; width:34px;
+// height:34px; font-size:18px }` — an 18px glyph box centred in the area. #999 in every state: dx
+// has no hover colour for it.
+@mixin nxe-clear-button {
+    box-sizing: border-box;
+    flex: 0 0 34px;
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    min-width: 34px;
+    padding: 0;
+    color: #999;
+    cursor: pointer;
+
+    svg {
+        display: block;
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+    }
+}
+
+@mixin nxe-dropdown-editor-buttons {
+    // Clear (×).
+    .nxe-select-clear {
+        @include nxe-clear-button;
+    }
+
+    // Drop-down arrow: an 8x4 #333 triangle centred in its 18px box.
+    .nxe-select-arrow {
+        @include nxe-drop-button;
+    }
+
+    @include nxe-drop-button-states('.nxe-select-arrow', '&.nxe-open .nxe-select-arrow');
+
+    // dx: `.dx-dropdowneditor-button-visible .dx-texteditor-input { padding-inline-end: 0 }` — the
+    // arrow supplies the trailing gap. Descendant, not child, so the tag box's input (inside its
+    // tag container) is covered too.
+    .nxe-editor-container:has(> .nxe-select-arrow) .nxe-editor-input {
+        padding-inline-end: 0;
+    }
+
+    // Invalid badge (styles/_editor.scss) clears the trailing buttons. dx draws it 4px inside
+    // `.dx-texteditor-input-container` (`.dx-texteditor.dx-invalid .dx-texteditor-input-container
+    // ::after { inset-inline-end:4px }`), and that container ends where the 34px buttons begin:
+    // 34 + 4 with one button, 34 + 34 + 4 with both. (dx's own 38px/68px rules target a
+    // `.dx-texteditor-container::after` that has no content, so they never paint.)
+    .nxe-editor-container:has(> .nxe-select-clear),
+    .nxe-editor-container:has(> .nxe-select-arrow) {
+        --nxe-invalid-badge-inset: 38px;
+    }
+
+    .nxe-editor-container:has(> .nxe-select-clear):has(> .nxe-select-arrow) {
+        --nxe-invalid-badge-inset: 72px;
+    }
 }

package/styles/_editor.scss

@@ -3,6 +3,7 @@
 //
 // Typography is NOT set here — it comes from `.nxe-widget` on the host (styling/_widget.scss), so
 // it resolves per host app instead of assuming orbit's 14.4px root.
+@use 'dropdown';
 
 @mixin nxe-editor-chrome {
     // Base box at ZERO specificity (`:where`) so per-instance Tailwind utilities applied on the
@@ -79,10 +80,12 @@
             }
 
             // dx `.dx-texteditor.dx-invalid .dx-texteditor-input { padding-inline-end: 34px }` — keeps
-            // a long value from running under the badge. Only for a container holding nothing but the
-            // input: where a trailing button exists the value already stops short of it, and dx leaves
-            // those inputs unpadded too (`.dx-dropdowneditor-button-visible` keeps padding-end 0).
-            > .nxe-editor-container:not(:has(> :not(.nxe-editor-input))) .nxe-editor-input {
+            // a long value from running under the badge. For a container holding the input alone or
+            // with the text editors' clear area: the badge sits inside the input's own box in both
+            // (a dx text or number box with its clear button shown keeps the 34px — probed). The
+            // dropdown editors' buttons are left to their own rules.
+            > .nxe-editor-container:not(:has(> :not(.nxe-editor-input, .nxe-clear-button-area)))
+                .nxe-editor-input {
                 padding-inline-end: 34px;
             }
         }
@@ -96,9 +99,25 @@
         width: 100%;
     }
 
+    // `showClearButton` on the text editors (text-box, number-box, date-box): the same 34px area and
+    // #999 glyph as the dropdown editors' clear (styles/_dropdown.scss), after the input.
+    .nxe-clear-button-area {
+        @include dropdown.nxe-clear-button;
+    }
+
+    // The badge moves off the clear area: dx draws it 4px inside `.dx-texteditor-input-container`,
+    // which ends where the 34px area begins (38px). The date box adds its own 72px case for the
+    // clear area plus its calendar button.
+    .nxe-editor-container:has(> .nxe-clear-button-area) {
+        --nxe-invalid-badge-inset: 38px;
+    }
+
     .nxe-editor-input {
         -webkit-appearance: none;
         appearance: none;
+        // dx: `.dx-widget * { box-sizing: border-box }`. Without it, a host with no preflight grew the
+        // 34px min-height by the 15px of padding and every editor rendered 51px tall, not 36px.
+        box-sizing: border-box;
         flex: 1 1 auto;
         margin: 0;
         width: 100%;

package/styles/_icons.scss

@@ -0,0 +1,92 @@
+// @nexterajs/ui — the icon layer: `<i class="nxe-icon nxe-icon-NAME">`, the element nxe-button's
+// `icon` input renders in place of dx's `<i class="dx-icon dx-icon-NAME">`.
+//
+// dx draws these from its DXIcons font. The library does not ship or reference that font
+// (DevExtreme is not Apache-licensed), so each glyph below is redrawn: an 18-unit SVG (1 unit =
+// 1px, unless a glyph shares another box's geometry and says so) of rectangles and straight-edged
+// polygons laid out from the metrics measured off dx's rendering (ink box, wall and stroke widths,
+// position), and used as a MASK painted in `currentColor`, so it
+// takes the button's text colour as dx's glyphs do. Where two shapes meet they overlap, so no
+// anti-aliased seam shows at a fractional position.
+//
+// An unknown name draws nothing in its 18x18 box, as dx does (`caret-down`, which DXIcons lacks,
+// measures 18x18 with no ink). That is what the transparent default mask is for: `mask:
+// var(--nxe-icon)` with the property unset is invalid at computed-value time, the mask drops to
+// `none`, and the box paints as a solid square of `currentColor`.
+//
+// Scoped to <i>. The grid's filter-row `<span class="nxe-icon …">` text glyphs and the pivot field
+// chooser's `<span class="nxe-area-icon nxe-icon-filter">` draw themselves and must not match.
+
+// $box is the viewBox side: 18 draws in px, a smaller one scales that glyph up to the 18px box.
+@function nxe-icon-mask($body, $box: 18) {
+    @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$box} #{$box}'%3E#{$body}%3C/svg%3E");
+}
+
+@mixin nxe-icons {
+    // dx: `.dx-icon { display:inline-block }`, `.dx-button .dx-icon { width:18px; height:18px;
+    //      vertical-align:middle; margin-inline:0 }`.
+    i.nxe-icon {
+        --nxe-icon: linear-gradient(transparent, transparent);
+        display: inline-block;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: 18px;
+        height: 18px;
+        vertical-align: middle;
+        background-color: currentColor;
+        -webkit-mask: var(--nxe-icon) center / 18px 18px no-repeat;
+        mask: var(--nxe-icon) center / 18px 18px no-repeat;
+    }
+
+    // `filter` (dx U+F050): the grid header's funnel (nxe-data-grid.component.scss
+    // `.nxe-grid-hf-icon`), the same geometry every funnel in the library uses, drawn in its 14-unit
+    // box and scaled to fill the 18px one: a band 3/14 deep across the full width whose lower
+    // corners run in 45° shoulders down to a 4/14 waist, and a 4/14 stem rect standing inside the
+    // shoulders from the band down to the bottom edge.
+    i.nxe-icon.nxe-icon-filter {
+        --nxe-icon: #{nxe-icon-mask(
+                "%3Cpolygon points='0 0 14 0 14 3 9 8 5 8 0 3'/%3E"
+                    + "%3Crect x='5' y='3' width='4' height='11'/%3E",
+                14
+            )};
+    }
+
+    // `columnchooser` (dx U+F04D): a 16x15 ink box, 1px in and 2px down. A 12x12 frame of 2px walls
+    // (x 1-13, y 2-14) whose lower right corner is covered by an 8x11 panel (x 9-17, y 6-17) with
+    // three 4x1 slots through it (x 11-15, every third row from y 8). All rects: the frame's four
+    // walls, stopped where the panel starts; the panel's two 2px stiles and its four 2px rails.
+    i.nxe-icon.nxe-icon-columnchooser {
+        --nxe-icon: #{nxe-icon-mask(
+                "%3Crect x='1' y='2' width='12' height='2'/%3E"
+                    + "%3Crect x='1' y='2' width='2' height='12'/%3E"
+                    + "%3Crect x='1' y='12' width='9' height='2'/%3E"
+                    + "%3Crect x='11' y='2' width='2' height='5'/%3E"
+                    + "%3Crect x='9' y='6' width='2' height='11'/%3E"
+                    + "%3Crect x='15' y='6' width='2' height='11'/%3E"
+                    + "%3Crect x='9' y='6' width='8' height='2'/%3E"
+                    + "%3Crect x='9' y='9' width='8' height='2'/%3E"
+                    + "%3Crect x='9' y='12' width='8' height='2'/%3E"
+                    + "%3Crect x='9' y='15' width='8' height='2'/%3E"
+            )};
+    }
+
+    // Forced colours (Windows high contrast) replace every background-color with Canvas — the colour
+    // behind the icon — so the masked glyph would vanish. `preserve-parent-color` opts the icon out
+    // of that forcing while its `color` still takes the parent's forced text colour (CanvasText on
+    // nxe-button's host, ButtonText in a native button), so the glyph matches the label beside it.
+    // Where that value is unknown, `none` with CanvasText: plain `none` alone would leave
+    // currentColor at the author's unforced colour (#333 on a black canvas).
+    @media (forced-colors: active) {
+        i.nxe-icon {
+            forced-color-adjust: none;
+            background-color: CanvasText;
+        }
+
+        @supports (forced-color-adjust: preserve-parent-color) {
+            i.nxe-icon {
+                forced-color-adjust: preserve-parent-color;
+                background-color: currentColor;
+            }
+        }
+    }
+}

package/styles/_mixins.scss

@@ -1,2 +1,105 @@
 // @nexterajs/ui — shared SCSS mixins.
-// Grows as components are added (e.g. form-control framing, grid theming). Empty for now.
+@use 'sass:math';
+
+// Keeps a mark drawn as a background visible under forced colours (Windows high contrast). There
+// the UA replaces every background-color with Canvas, the colour behind the mark, so the tick and
+// the square would vanish and a checked box would read as unchecked (dx's font tick is text and
+// survives). The pseudo-element opts out of the forcing and paints in CanvasText — the colour the
+// box's border is forced to — so the mark keeps the user's contrast.
+@mixin nxe-forced-colors-mark {
+    @media (forced-colors: active) {
+        forced-color-adjust: none;
+        background-color: CanvasText;
+    }
+}
+
+// The checked glyph of a dx 22px check box (`.dx-checkbox-checked .dx-checkbox-icon::before`, the
+// DXIcons check at 16px), for a pseudo-element of a 22px border-box box with a 1px border.
+//
+// Redrawn, not taken from the font: a 2px stroke bent through a right angle — the short arm falling
+// 5.4px, the long arm rising 9.6px — written as the outline of that stroke, which gives a 15x11 ink
+// box. It is placed 3.5px in and 6px down from the box's outer edge, where dx's measured tick sits
+// (15x11 at +3.5/+6.2, its centre 0.5px below the box's). Every length is stated, so the glyph does
+// not move with the host's box-sizing. Not mirrored under RTL, like dx's: 2.5px from either inline
+// edge is the same place in the 20px padding box.
+@mixin nxe-checkmark($color: var(--nxe-ui-accent, #337ab7)) {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    top: 5px;
+    inset-inline-start: 2.5px;
+    width: 15px;
+    height: 11px;
+    background-color: $color;
+    clip-path: polygon(
+        0 5.586px,
+        5.414px 11px,
+        15px 1.414px,
+        13.586px 0,
+        5.414px 8.172px,
+        1.414px 4.172px
+    );
+
+    @include nxe-forced-colors-mark;
+}
+
+// The indeterminate mark of the same box — dx: `.dx-checkbox-indeterminate .dx-checkbox-icon::before
+// { width:.545455em; height:.545455em (12px at 22px); top:50%; margin-top:-.2727275em;
+// inset-inline-start:50%; margin-inline-start:-.2727275em; background-color:#337ab7;
+// border-radius:2px }` — a 12px square centred in the box.
+@mixin nxe-check-indeterminate($color: var(--nxe-ui-accent, #337ab7)) {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    top: 50%;
+    inset-inline-start: 50%;
+    width: 12px;
+    height: 12px;
+    margin-top: -6px;
+    margin-inline-start: -6px;
+    border-radius: 2px;
+    background-color: $color;
+
+    @include nxe-forced-colors-mark;
+}
+
+// A thin, unobtrusive scrollbar on a natively-scrolling element.
+//
+// Read this before adding `::-webkit-scrollbar` rules anywhere else. From Chrome 121, setting
+// either standard property (`scrollbar-width` / `scrollbar-color`) makes Chromium ignore the
+// webkit pseudo-elements **on that same element**. The two do not compose: an element that sets
+// both gets the standard rendering and the webkit block becomes dead code that still reads as
+// live, which is the worst of both — it looks maintained and changes nothing.
+//
+// So the pseudo-elements live behind `@supports not (scrollbar-width: thin)`, which is true only
+// on the engines that never implemented the standard properties (Chrome < 121, Safari < 18.2).
+// Exactly one of the two branches applies anywhere.
+@mixin nxe-thin-scrollbar(
+    $thumb: rgba(0, 0, 0, 0.5),
+    $track: transparent,
+    $size: 8px,
+    $thumb-hover: $thumb
+) {
+    scrollbar-width: thin;
+    scrollbar-color: $thumb $track;
+
+    @supports not (scrollbar-width: thin) {
+        &::-webkit-scrollbar {
+            width: $size;
+            height: $size;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: $track;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: $thumb;
+            border-radius: math.div($size, 2);
+        }
+
+        &:hover::-webkit-scrollbar-thumb {
+            background-color: $thumb-hover;
+        }
+    }
+}

package/styles/_scrollbar.scss

@@ -0,0 +1,134 @@
+// @nexterajs/ui — [nxeScrollbar] chrome.
+//
+// A value-for-value port of `perfect-scrollbar.css`, which this replaces. Applications style these
+// rails heavily, so every number and easing is copied rather than chosen — the selector names are
+// the only thing that changed, one-for-one:
+//
+//   .ps            -> .nxe-scrollbar          .ps__rail-x   -> .nxe-scrollbar__rail-x
+//   .ps--active-x  -> .nxe-scrollbar--active-x .ps__thumb-x -> .nxe-scrollbar__thumb-x
+//   .ps--focus     -> .nxe-scrollbar--focus   .ps--clicking -> .nxe-scrollbar--clicking
+//   .ps--scrolling-x -> .nxe-scrollbar--scrolling-x        (and the -y twins of each)
+//
+// Load this where `perfect-scrollbar/css/perfect-scrollbar.css` used to sit in the cascade —
+// BEFORE the application's own rail overrides — or those overrides stop winning.
+
+//
+// Container style
+//
+// The original set `overflow: hidden !important` and drove scrolling entirely from JavaScript:
+// wheel, touch, keyboard and momentum were all reimplemented. This keeps `overflow: auto` and
+// merely hides the native bar, so the browser still does the scrolling — which is more faithful
+// on touch and with a trackpad, and is why the directive needs no input handling of its own.
+// Layout is unchanged either way: a hidden native scrollbar occupies no width, exactly as the
+// simulated rails did.
+.nxe-scrollbar {
+    overflow: auto;
+    overflow-anchor: none;
+    touch-action: auto;
+    position: relative;
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+//
+// Scrollbar rail styles
+//
+.nxe-scrollbar__rail-x {
+    display: none;
+    opacity: 0;
+    transition:
+        background-color 0.2s linear,
+        opacity 0.2s linear;
+    height: 15px;
+    // there must be 'bottom' or 'top' for the x rail
+    bottom: 0px;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar__rail-y {
+    display: none;
+    opacity: 0;
+    transition:
+        background-color 0.2s linear,
+        opacity 0.2s linear;
+    width: 15px;
+    // there must be 'right' or 'left' for the y rail
+    right: 0;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar--active-x > .nxe-scrollbar__rail-x,
+.nxe-scrollbar--active-y > .nxe-scrollbar__rail-y {
+    display: block;
+    background-color: transparent;
+}
+
+.nxe-scrollbar:hover > .nxe-scrollbar__rail-x,
+.nxe-scrollbar:hover > .nxe-scrollbar__rail-y,
+.nxe-scrollbar--focus > .nxe-scrollbar__rail-x,
+.nxe-scrollbar--focus > .nxe-scrollbar__rail-y,
+.nxe-scrollbar--scrolling-x > .nxe-scrollbar__rail-x,
+.nxe-scrollbar--scrolling-y > .nxe-scrollbar__rail-y {
+    opacity: 0.6;
+}
+
+.nxe-scrollbar .nxe-scrollbar__rail-x:hover,
+.nxe-scrollbar .nxe-scrollbar__rail-y:hover,
+.nxe-scrollbar .nxe-scrollbar__rail-x:focus,
+.nxe-scrollbar .nxe-scrollbar__rail-y:focus,
+.nxe-scrollbar .nxe-scrollbar__rail-x.nxe-scrollbar--clicking,
+.nxe-scrollbar .nxe-scrollbar__rail-y.nxe-scrollbar--clicking {
+    background-color: #eee;
+    opacity: 0.9;
+}
+
+//
+// Scrollbar thumb styles
+//
+.nxe-scrollbar__thumb-x {
+    background-color: #aaa;
+    border-radius: 6px;
+    transition:
+        background-color 0.2s linear,
+        height 0.2s ease-in-out;
+    height: 6px;
+    // there must be 'bottom' for the x thumb
+    bottom: 2px;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar__thumb-y {
+    background-color: #aaa;
+    border-radius: 6px;
+    transition:
+        background-color 0.2s linear,
+        width 0.2s ease-in-out;
+    width: 6px;
+    // there must be 'right' for the y thumb
+    right: 2px;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar__rail-x:hover > .nxe-scrollbar__thumb-x,
+.nxe-scrollbar__rail-x:focus > .nxe-scrollbar__thumb-x,
+.nxe-scrollbar__rail-x.nxe-scrollbar--clicking .nxe-scrollbar__thumb-x {
+    background-color: #999;
+    height: 11px;
+}
+
+.nxe-scrollbar__rail-y:hover > .nxe-scrollbar__thumb-y,
+.nxe-scrollbar__rail-y:focus > .nxe-scrollbar__thumb-y,
+.nxe-scrollbar__rail-y.nxe-scrollbar--clicking .nxe-scrollbar__thumb-y {
+    background-color: #999;
+    width: 11px;
+}