sakana-element 2.2.0 → 2.4.0

package/dist/theme/Select.css

@@ -1,5 +1,5 @@
 /* Select Variables */
-.px-select[data-v-d9852f9a] {
+.px-select[data-v-1ab275ee] {
   --px-select-item-hover-bg-color: var(--px-fill-color-light);
   --px-select-item-font-size: var(--px-font-size-base);
   --px-select-item-font-color: var(--px-text-color-primary);
@@ -14,30 +14,30 @@
   --px-select-item-highlighted-border-color: var(--px-color-primary);
 }
 /* Base Select Styles - Pixel Dropdown */
-.px-select[data-v-d9852f9a] {
+.px-select[data-v-1ab275ee] {
   display: inline-block;
   vertical-align: middle;
   line-height: 32px;
   font-family: var(--px-font-family);
 }
 /* Tooltip popper styling - pixel style inherited from Tooltip */
-.px-select[data-v-d9852f9a] .px-tooltip__popper {
+.px-select[data-v-1ab275ee] .px-tooltip__popper {
     padding: 0;
 }
 /* Override tooltip background to match select dropdown */
-.px-select[data-v-d9852f9a] .px-tooltip__popper::after {
+.px-select[data-v-1ab275ee] .px-tooltip__popper::after {
       background: var(--px-select-dropdown-bg-color);
 }
 /* Input with dropdown arrow */
-.px-select[data-v-d9852f9a] .px-input .header-angle {
+.px-select[data-v-1ab275ee] .px-input .header-angle {
       transition: none;
 }
-.px-select[data-v-d9852f9a] .px-input .header-angle.is-active {
+.px-select[data-v-1ab275ee] .px-input .header-angle.is-active {
         transform: rotate(180deg);
 }
 /* No data / Loading states */
-.px-select .px-select__nodata[data-v-d9852f9a],
-  .px-select .px-select__loading[data-v-d9852f9a] {
+.px-select .px-select__nodata[data-v-1ab275ee],
+  .px-select .px-select__loading[data-v-1ab275ee] {
     padding: 12px 16px;
     margin: 0;
     text-align: center;
@@ -46,14 +46,14 @@
     font-family: var(--px-font-family);
 }
 /* Menu container */
-.px-select .px-select__menu[data-v-d9852f9a] {
+.px-select .px-select__menu[data-v-1ab275ee] {
     list-style: none;
     margin: 0;
     padding: 4px 0;
     box-sizing: border-box;
 }
 /* Menu items - Pixel list style */
-.px-select .px-select__menu-item[data-v-d9852f9a] {
+.px-select .px-select__menu-item[data-v-1ab275ee] {
     margin: 0;
     font-size: var(--px-select-item-font-size);
     font-family: var(--px-font-family);
@@ -69,8 +69,8 @@
     cursor: pointer;
     transition: none;
 }
-/* Pixel selector indicator - small square */
-.px-select .px-select__menu-item[data-v-d9852f9a]::before {
+/* Pixel selector indicator - arrow shape on interaction */
+.px-select .px-select__menu-item[data-v-1ab275ee]::before {
       content: '';
       position: absolute;
       left: 10px;
@@ -80,10 +80,12 @@
       height: 6px;
       background: transparent;
       border: 2px solid transparent;
+      /* Pixel arrow — right-pointing triangle, visible when colored */
+      clip-path: polygon(0 0, 100% 50%, 0 100%);
       z-index: 2;
 }
 /* Background layer for hover/selected states */
-.px-select .px-select__menu-item[data-v-d9852f9a]::after {
+.px-select .px-select__menu-item[data-v-1ab275ee]::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -93,45 +95,55 @@
       z-index: -1;
 }
 /* Hover effect */
-.px-select .px-select__menu-item[data-v-d9852f9a]:hover::after {
-        background-color: var(--px-select-item-hover-bg-color);
-}
-.px-select .px-select__menu-item[data-v-d9852f9a]:hover::before {
-        border-color: var(--px-hover-border-color);
+.px-select .px-select__menu-item[data-v-1ab275ee]:hover::after {
+        background-color: var(--px-select-item-hover-bg-color);
+        /* CRT scanline overlay - subtle retro stripe effect */
+        background-image: repeating-linear-gradient(
+          0deg,
+          transparent 0px,
+          transparent 2px,
+          rgba(0, 0, 0, 0.03) 2px,
+          rgba(0, 0, 0, 0.03) 4px
+        );
+}
+.px-select .px-select__menu-item[data-v-1ab275ee]:hover::before {
+        border-color: var(--px-hover-border-color);
+        background: var(--px-hover-border-color);
 }
 /* Selected state with pixel indicator */
-.px-select .px-select__menu-item.is-selected[data-v-d9852f9a] {
+.px-select .px-select__menu-item.is-selected[data-v-1ab275ee] {
       color: var(--px-select-item-selected-font-color);
       font-weight: 500;
 }
-.px-select .px-select__menu-item.is-selected[data-v-d9852f9a]::after {
+.px-select .px-select__menu-item.is-selected[data-v-1ab275ee]::after {
         background-color: var(--px-select-item-selected-bg-color);
 }
-.px-select .px-select__menu-item.is-selected[data-v-d9852f9a]::before {
+.px-select .px-select__menu-item.is-selected[data-v-1ab275ee]::before {
         background: var(--px-select-item-indicator-color);
         border-color: var(--px-select-item-indicator-color);
 }
 /* Highlighted (keyboard navigation) */
-.px-select .px-select__menu-item.is-highlighted[data-v-d9852f9a]::after {
+.px-select .px-select__menu-item.is-highlighted[data-v-1ab275ee]::after {
         background-color: var(--px-select-item-hover-bg-color);
 }
-.px-select .px-select__menu-item.is-highlighted[data-v-d9852f9a]::before {
-        border-color: var(--px-select-item-highlighted-border-color);
+.px-select .px-select__menu-item.is-highlighted[data-v-1ab275ee]::before {
+        border-color: var(--px-select-item-highlighted-border-color);
+        background: var(--px-select-item-highlighted-border-color);
 }
 /* Disabled state */
-.px-select .px-select__menu-item.is-disabled[data-v-d9852f9a] {
+.px-select .px-select__menu-item.is-disabled[data-v-1ab275ee] {
       color: var(--px-select-item-disabled-font-color);
       cursor: not-allowed;
 }
-.px-select .px-select__menu-item.is-disabled[data-v-d9852f9a]:hover::after {
+.px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]:hover::after {
           background-color: transparent;
 }
-.px-select .px-select__menu-item.is-disabled[data-v-d9852f9a]:hover::before {
+.px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]:hover::before {
           border-color: transparent;
           background: transparent;
 }
 /* First item needs pixel corners on top */
-.px-select .px-select__menu-item[data-v-d9852f9a]:first-child::after {
+.px-select .px-select__menu-item[data-v-1ab275ee]:first-child::after {
       top: 2px;
       clip-path: polygon(
         0 2px, 2px 2px, 2px 0, 4px 0,
@@ -141,7 +153,7 @@
       );
 }
 /* Last item needs pixel corners on bottom */
-.px-select .px-select__menu-item[data-v-d9852f9a]:last-child::after {
+.px-select .px-select__menu-item[data-v-1ab275ee]:last-child::after {
       bottom: 2px;
       clip-path: polygon(
         0 0,
@@ -151,7 +163,7 @@
       );
 }
 /* If only one item, needs both top and bottom pixel corners */
-.px-select .px-select__menu-item[data-v-d9852f9a]:first-child:last-child::after {
+.px-select .px-select__menu-item[data-v-1ab275ee]:first-child:last-child::after {
       top: 2px;
       bottom: 2px;
       clip-path: polygon(
@@ -162,81 +174,124 @@
       );
 }
 /* Input pointer cursor */
-.px-select[data-v-d9852f9a] .px-input__inner {
+.px-select[data-v-1ab275ee] .px-input__inner {
     cursor: pointer;
 }
 /* Disabled state */
-.px-select.is-disabled[data-v-d9852f9a] {
+.px-select.is-disabled[data-v-1ab275ee] {
     opacity: 0.6;
     cursor: not-allowed;
 }
 /* Ghost style - transparent at rest, Input handles border/shadow via prop */
-.px-select.is-ghost[data-v-d9852f9a] .px-tooltip__popper::after {
+.px-select.is-ghost[data-v-1ab275ee] .px-tooltip__popper::after {
         background: var(--px-select-dropdown-bg-color);
 }
 /* Size: Large */
-.px-select.px-select--large[data-v-d9852f9a] {
+.px-select.px-select--large[data-v-1ab275ee] {
     line-height: 44px;
 }
-.px-select.px-select--large .px-select__menu-item[data-v-d9852f9a] {
+.px-select.px-select--large .px-select__menu-item[data-v-1ab275ee] {
       height: 44px;
       line-height: 44px;
       font-size: var(--px-font-size-large);
       padding: 0 20px 0 28px;
 }
-.px-select.px-select--large .px-select__menu-item[data-v-d9852f9a]::before {
+.px-select.px-select--large .px-select__menu-item[data-v-1ab275ee]::before {
         left: 12px;
         width: 8px;
         height: 8px;
 }
 /* Size: Small */
-.px-select.px-select--small[data-v-d9852f9a] {
+.px-select.px-select--small[data-v-1ab275ee] {
     line-height: 28px;
 }
-.px-select.px-select--small .px-select__menu-item[data-v-d9852f9a] {
+.px-select.px-select--small .px-select__menu-item[data-v-1ab275ee] {
       height: 28px;
       line-height: 28px;
       font-size: var(--px-font-size-small);
       padding: 0 12px 0 20px;
 }
-.px-select.px-select--small .px-select__menu-item[data-v-d9852f9a]::before {
+.px-select.px-select--small .px-select__menu-item[data-v-1ab275ee]::before {
         left: 8px;
         width: 4px;
         height: 4px;
 }
 /* Color variants */
-.px-select.px-select--primary[data-v-d9852f9a] {
+.px-select.px-select--primary[data-v-1ab275ee] {
       --px-select-item-selected-font-color: var(--px-color-primary);
       --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
       --px-select-item-indicator-color: var(--px-color-primary);
       --px-select-item-highlighted-border-color: var(--px-color-primary);
 }
-.px-select.px-select--success[data-v-d9852f9a] {
+.px-select.px-select--success[data-v-1ab275ee] {
       --px-select-item-selected-font-color: var(--px-color-success);
       --px-select-item-selected-bg-color: var(--px-color-success-light-9);
       --px-select-item-indicator-color: var(--px-color-success);
       --px-select-item-highlighted-border-color: var(--px-color-success);
 }
-.px-select.px-select--warning[data-v-d9852f9a] {
+.px-select.px-select--warning[data-v-1ab275ee] {
       --px-select-item-selected-font-color: var(--px-color-warning);
       --px-select-item-selected-bg-color: var(--px-color-warning-light-9);
       --px-select-item-indicator-color: var(--px-color-warning);
       --px-select-item-highlighted-border-color: var(--px-color-warning);
 }
-.px-select.px-select--info[data-v-d9852f9a] {
+.px-select.px-select--info[data-v-1ab275ee] {
       --px-select-item-selected-font-color: var(--px-color-info);
       --px-select-item-selected-bg-color: var(--px-color-info-light-9);
       --px-select-item-indicator-color: var(--px-color-info);
       --px-select-item-highlighted-border-color: var(--px-color-info);
 }
-.px-select.px-select--danger[data-v-d9852f9a] {
+.px-select.px-select--danger[data-v-1ab275ee] {
       --px-select-item-selected-font-color: var(--px-color-danger);
       --px-select-item-selected-bg-color: var(--px-color-danger-light-9);
       --px-select-item-indicator-color: var(--px-color-danger);
       --px-select-item-highlighted-border-color: var(--px-color-danger);
+}
+/* Pixel scrollbar - RPG-style scrollbar for long option lists */
+.px-select .px-select__menu[data-v-1ab275ee] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--px-border-color) var(--px-fill-color-light);
+}
+.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar {
+      width: 8px;
+}
+.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-track {
+      background: var(--px-fill-color-light);
+      border-left: 2px solid var(--px-border-color);
+}
+.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb {
+      background: var(--px-border-color);
+      border: 2px solid var(--px-fill-color-light);
 }
+.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb:hover {
+        background: var(--px-text-color-secondary);
+}
+/* Dark mode overrides for Select enhancements */
+.px-dark .px-select .px-select__menu-item[data-v-1ab275ee]:hover::after {
+        background-image: repeating-linear-gradient(
+          0deg,
+          transparent 0px,
+          transparent 2px,
+          rgba(255, 255, 255, 0.03) 2px,
+          rgba(255, 255, 255, 0.03) 4px
+        );
+}
+.px-dark .px-select .px-select__menu[data-v-1ab275ee] {
+    scrollbar-color: var(--px-border-color) var(--px-fill-color-darker);
+}
+.px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-track {
+      background: var(--px-fill-color-darker);
+      border-left-color: var(--px-border-color);
+}
+.px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb {
+      background: var(--px-border-color);
+      border-color: var(--px-fill-color-darker);
+}
+.px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb:hover {
+        background: var(--px-text-color-secondary);
+}
 /* Select Variables */
-.px-select[data-v-4d450d40] {
+.px-select[data-v-e33550e6] {
   --px-select-item-hover-bg-color: var(--px-fill-color-light);
   --px-select-item-font-size: var(--px-font-size-base);
   --px-select-item-font-color: var(--px-text-color-primary);
@@ -251,30 +306,30 @@
   --px-select-item-highlighted-border-color: var(--px-color-primary);
 }
 /* Base Select Styles - Pixel Dropdown */
-.px-select[data-v-4d450d40] {
+.px-select[data-v-e33550e6] {
   display: inline-block;
   vertical-align: middle;
   line-height: 32px;
   font-family: var(--px-font-family);
 }
 /* Tooltip popper styling - pixel style inherited from Tooltip */
-.px-select[data-v-4d450d40] .px-tooltip__popper {
+.px-select[data-v-e33550e6] .px-tooltip__popper {
     padding: 0;
 }
 /* Override tooltip background to match select dropdown */
-.px-select[data-v-4d450d40] .px-tooltip__popper::after {
+.px-select[data-v-e33550e6] .px-tooltip__popper::after {
       background: var(--px-select-dropdown-bg-color);
 }
 /* Input with dropdown arrow */
-.px-select[data-v-4d450d40] .px-input .header-angle {
+.px-select[data-v-e33550e6] .px-input .header-angle {
       transition: none;
 }
-.px-select[data-v-4d450d40] .px-input .header-angle.is-active {
+.px-select[data-v-e33550e6] .px-input .header-angle.is-active {
         transform: rotate(180deg);
 }
 /* No data / Loading states */
-.px-select .px-select__nodata[data-v-4d450d40],
-  .px-select .px-select__loading[data-v-4d450d40] {
+.px-select .px-select__nodata[data-v-e33550e6],
+  .px-select .px-select__loading[data-v-e33550e6] {
     padding: 12px 16px;
     margin: 0;
     text-align: center;
@@ -283,14 +338,14 @@
     font-family: var(--px-font-family);
 }
 /* Menu container */
-.px-select .px-select__menu[data-v-4d450d40] {
+.px-select .px-select__menu[data-v-e33550e6] {
     list-style: none;
     margin: 0;
     padding: 4px 0;
     box-sizing: border-box;
 }
 /* Menu items - Pixel list style */
-.px-select .px-select__menu-item[data-v-4d450d40] {
+.px-select .px-select__menu-item[data-v-e33550e6] {
     margin: 0;
     font-size: var(--px-select-item-font-size);
     font-family: var(--px-font-family);
@@ -306,8 +361,8 @@
     cursor: pointer;
     transition: none;
 }
-/* Pixel selector indicator - small square */
-.px-select .px-select__menu-item[data-v-4d450d40]::before {
+/* Pixel selector indicator - arrow shape on interaction */
+.px-select .px-select__menu-item[data-v-e33550e6]::before {
       content: '';
       position: absolute;
       left: 10px;
@@ -317,10 +372,12 @@
       height: 6px;
       background: transparent;
       border: 2px solid transparent;
+      /* Pixel arrow — right-pointing triangle, visible when colored */
+      clip-path: polygon(0 0, 100% 50%, 0 100%);
       z-index: 2;
 }
 /* Background layer for hover/selected states */
-.px-select .px-select__menu-item[data-v-4d450d40]::after {
+.px-select .px-select__menu-item[data-v-e33550e6]::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -330,45 +387,55 @@
       z-index: -1;
 }
 /* Hover effect */
-.px-select .px-select__menu-item[data-v-4d450d40]:hover::after {
-        background-color: var(--px-select-item-hover-bg-color);
-}
-.px-select .px-select__menu-item[data-v-4d450d40]:hover::before {
-        border-color: var(--px-hover-border-color);
+.px-select .px-select__menu-item[data-v-e33550e6]:hover::after {
+        background-color: var(--px-select-item-hover-bg-color);
+        /* CRT scanline overlay - subtle retro stripe effect */
+        background-image: repeating-linear-gradient(
+          0deg,
+          transparent 0px,
+          transparent 2px,
+          rgba(0, 0, 0, 0.03) 2px,
+          rgba(0, 0, 0, 0.03) 4px
+        );
+}
+.px-select .px-select__menu-item[data-v-e33550e6]:hover::before {
+        border-color: var(--px-hover-border-color);
+        background: var(--px-hover-border-color);
 }
 /* Selected state with pixel indicator */
-.px-select .px-select__menu-item.is-selected[data-v-4d450d40] {
+.px-select .px-select__menu-item.is-selected[data-v-e33550e6] {
       color: var(--px-select-item-selected-font-color);
       font-weight: 500;
 }
-.px-select .px-select__menu-item.is-selected[data-v-4d450d40]::after {
+.px-select .px-select__menu-item.is-selected[data-v-e33550e6]::after {
         background-color: var(--px-select-item-selected-bg-color);
 }
-.px-select .px-select__menu-item.is-selected[data-v-4d450d40]::before {
+.px-select .px-select__menu-item.is-selected[data-v-e33550e6]::before {
         background: var(--px-select-item-indicator-color);
         border-color: var(--px-select-item-indicator-color);
 }
 /* Highlighted (keyboard navigation) */
-.px-select .px-select__menu-item.is-highlighted[data-v-4d450d40]::after {
+.px-select .px-select__menu-item.is-highlighted[data-v-e33550e6]::after {
         background-color: var(--px-select-item-hover-bg-color);
 }
-.px-select .px-select__menu-item.is-highlighted[data-v-4d450d40]::before {
-        border-color: var(--px-select-item-highlighted-border-color);
+.px-select .px-select__menu-item.is-highlighted[data-v-e33550e6]::before {
+        border-color: var(--px-select-item-highlighted-border-color);
+        background: var(--px-select-item-highlighted-border-color);
 }
 /* Disabled state */
-.px-select .px-select__menu-item.is-disabled[data-v-4d450d40] {
+.px-select .px-select__menu-item.is-disabled[data-v-e33550e6] {
       color: var(--px-select-item-disabled-font-color);
       cursor: not-allowed;
 }
-.px-select .px-select__menu-item.is-disabled[data-v-4d450d40]:hover::after {
+.px-select .px-select__menu-item.is-disabled[data-v-e33550e6]:hover::after {
           background-color: transparent;
 }
-.px-select .px-select__menu-item.is-disabled[data-v-4d450d40]:hover::before {
+.px-select .px-select__menu-item.is-disabled[data-v-e33550e6]:hover::before {
           border-color: transparent;
           background: transparent;
 }
 /* First item needs pixel corners on top */
-.px-select .px-select__menu-item[data-v-4d450d40]:first-child::after {
+.px-select .px-select__menu-item[data-v-e33550e6]:first-child::after {
       top: 2px;
       clip-path: polygon(
         0 2px, 2px 2px, 2px 0, 4px 0,
@@ -378,7 +445,7 @@
       );
 }
 /* Last item needs pixel corners on bottom */
-.px-select .px-select__menu-item[data-v-4d450d40]:last-child::after {
+.px-select .px-select__menu-item[data-v-e33550e6]:last-child::after {
       bottom: 2px;
       clip-path: polygon(
         0 0,
@@ -388,7 +455,7 @@
       );
 }
 /* If only one item, needs both top and bottom pixel corners */
-.px-select .px-select__menu-item[data-v-4d450d40]:first-child:last-child::after {
+.px-select .px-select__menu-item[data-v-e33550e6]:first-child:last-child::after {
       top: 2px;
       bottom: 2px;
       clip-path: polygon(
@@ -399,76 +466,119 @@
       );
 }
 /* Input pointer cursor */
-.px-select[data-v-4d450d40] .px-input__inner {
+.px-select[data-v-e33550e6] .px-input__inner {
     cursor: pointer;
 }
 /* Disabled state */
-.px-select.is-disabled[data-v-4d450d40] {
+.px-select.is-disabled[data-v-e33550e6] {
     opacity: 0.6;
     cursor: not-allowed;
 }
 /* Ghost style - transparent at rest, Input handles border/shadow via prop */
-.px-select.is-ghost[data-v-4d450d40] .px-tooltip__popper::after {
+.px-select.is-ghost[data-v-e33550e6] .px-tooltip__popper::after {
         background: var(--px-select-dropdown-bg-color);
 }
 /* Size: Large */
-.px-select.px-select--large[data-v-4d450d40] {
+.px-select.px-select--large[data-v-e33550e6] {
     line-height: 44px;
 }
-.px-select.px-select--large .px-select__menu-item[data-v-4d450d40] {
+.px-select.px-select--large .px-select__menu-item[data-v-e33550e6] {
       height: 44px;
       line-height: 44px;
       font-size: var(--px-font-size-large);
       padding: 0 20px 0 28px;
 }
-.px-select.px-select--large .px-select__menu-item[data-v-4d450d40]::before {
+.px-select.px-select--large .px-select__menu-item[data-v-e33550e6]::before {
         left: 12px;
         width: 8px;
         height: 8px;
 }
 /* Size: Small */
-.px-select.px-select--small[data-v-4d450d40] {
+.px-select.px-select--small[data-v-e33550e6] {
     line-height: 28px;
 }
-.px-select.px-select--small .px-select__menu-item[data-v-4d450d40] {
+.px-select.px-select--small .px-select__menu-item[data-v-e33550e6] {
       height: 28px;
       line-height: 28px;
       font-size: var(--px-font-size-small);
       padding: 0 12px 0 20px;
 }
-.px-select.px-select--small .px-select__menu-item[data-v-4d450d40]::before {
+.px-select.px-select--small .px-select__menu-item[data-v-e33550e6]::before {
         left: 8px;
         width: 4px;
         height: 4px;
 }
 /* Color variants */
-.px-select.px-select--primary[data-v-4d450d40] {
+.px-select.px-select--primary[data-v-e33550e6] {
       --px-select-item-selected-font-color: var(--px-color-primary);
       --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
       --px-select-item-indicator-color: var(--px-color-primary);
       --px-select-item-highlighted-border-color: var(--px-color-primary);
 }
-.px-select.px-select--success[data-v-4d450d40] {
+.px-select.px-select--success[data-v-e33550e6] {
       --px-select-item-selected-font-color: var(--px-color-success);
       --px-select-item-selected-bg-color: var(--px-color-success-light-9);
       --px-select-item-indicator-color: var(--px-color-success);
       --px-select-item-highlighted-border-color: var(--px-color-success);
 }
-.px-select.px-select--warning[data-v-4d450d40] {
+.px-select.px-select--warning[data-v-e33550e6] {
       --px-select-item-selected-font-color: var(--px-color-warning);
       --px-select-item-selected-bg-color: var(--px-color-warning-light-9);
       --px-select-item-indicator-color: var(--px-color-warning);
       --px-select-item-highlighted-border-color: var(--px-color-warning);
 }
-.px-select.px-select--info[data-v-4d450d40] {
+.px-select.px-select--info[data-v-e33550e6] {
       --px-select-item-selected-font-color: var(--px-color-info);
       --px-select-item-selected-bg-color: var(--px-color-info-light-9);
       --px-select-item-indicator-color: var(--px-color-info);
       --px-select-item-highlighted-border-color: var(--px-color-info);
 }
-.px-select.px-select--danger[data-v-4d450d40] {
+.px-select.px-select--danger[data-v-e33550e6] {
       --px-select-item-selected-font-color: var(--px-color-danger);
       --px-select-item-selected-bg-color: var(--px-color-danger-light-9);
       --px-select-item-indicator-color: var(--px-color-danger);
       --px-select-item-highlighted-border-color: var(--px-color-danger);
+}
+/* Pixel scrollbar - RPG-style scrollbar for long option lists */
+.px-select .px-select__menu[data-v-e33550e6] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--px-border-color) var(--px-fill-color-light);
+}
+.px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar {
+      width: 8px;
+}
+.px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-track {
+      background: var(--px-fill-color-light);
+      border-left: 2px solid var(--px-border-color);
+}
+.px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb {
+      background: var(--px-border-color);
+      border: 2px solid var(--px-fill-color-light);
+}
+.px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb:hover {
+        background: var(--px-text-color-secondary);
+}
+/* Dark mode overrides for Select enhancements */
+.px-dark .px-select .px-select__menu-item[data-v-e33550e6]:hover::after {
+        background-image: repeating-linear-gradient(
+          0deg,
+          transparent 0px,
+          transparent 2px,
+          rgba(255, 255, 255, 0.03) 2px,
+          rgba(255, 255, 255, 0.03) 4px
+        );
+}
+.px-dark .px-select .px-select__menu[data-v-e33550e6] {
+    scrollbar-color: var(--px-border-color) var(--px-fill-color-darker);
+}
+.px-dark .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-track {
+      background: var(--px-fill-color-darker);
+      border-left-color: var(--px-border-color);
+}
+.px-dark .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb {
+      background: var(--px-border-color);
+      border-color: var(--px-fill-color-darker);
+}
+.px-dark .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb:hover {
+        background: var(--px-text-color-secondary);
 }