@skewedaspect/sleekspace-ui 0.7.1 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/components/Button/SkButton.vue.d.ts +8 -0
  2. package/dist/components/NavBar/SkNavBar.vue.d.ts +1 -0
  3. package/dist/components/NavBar/context.d.ts +3 -0
  4. package/dist/components/Page/SkPage.vue.d.ts +127 -30
  5. package/dist/components/Page/SkPageSidebarToggle.vue.d.ts +41 -0
  6. package/dist/components/Page/index.d.ts +1 -0
  7. package/dist/components/Page/types.d.ts +28 -5
  8. package/dist/components/ScrollArea/SkScrollArea.vue.d.ts +9 -0
  9. package/dist/components/Select/SkSelectItem.vue.d.ts +6 -18
  10. package/dist/components/Sidebar/SkSidebar.vue.d.ts +9 -1
  11. package/dist/components/Skeleton/SkSkeleton.vue.d.ts +2 -2
  12. package/dist/components/Tabs/SkTabs.vue.d.ts +1 -1
  13. package/dist/components/TreeView/SkTreeView.vue.d.ts +5 -5
  14. package/dist/composables/useFocusTrap.d.ts +17 -0
  15. package/dist/composables/useFocusTrap.test.d.ts +1 -0
  16. package/dist/composables/usePageDrawer.d.ts +35 -0
  17. package/dist/index.d.ts +2 -0
  18. package/dist/sleekspace-ui.css +984 -291
  19. package/dist/sleekspace-ui.es.js +31559 -29868
  20. package/dist/sleekspace-ui.umd.js +32210 -30438
  21. package/dist/styles/mixins/fluidSize.test.d.ts +1 -0
  22. package/dist/tokens.css +60 -0
  23. package/llms-full.txt +6349 -0
  24. package/llms.txt +46 -0
  25. package/package.json +16 -11
  26. package/src/components/Button/SkButton.vue +25 -13
  27. package/src/components/NavBar/SkNavBar.vue +12 -1
  28. package/src/components/NavBar/context.ts +16 -0
  29. package/src/components/Page/SkPage.vue +460 -72
  30. package/src/components/Page/SkPageSidebarToggle.vue +148 -0
  31. package/src/components/Page/index.ts +1 -0
  32. package/src/components/Page/types.ts +30 -5
  33. package/src/components/ScrollArea/SkScrollArea.vue +12 -0
  34. package/src/components/Select/SkSelectItem.vue +2 -2
  35. package/src/components/Sidebar/SkSidebar.vue +10 -0
  36. package/src/components/TreeView/SkTreeView.vue +6 -6
  37. package/src/composables/useFocusTrap.test.ts +184 -0
  38. package/src/composables/useFocusTrap.ts +141 -0
  39. package/src/composables/usePageDrawer.ts +96 -0
  40. package/src/global.d.ts +1 -0
  41. package/src/index.ts +5 -0
  42. package/src/styles/components/_accordion.scss +15 -0
  43. package/src/styles/components/_alert.scss +1 -0
  44. package/src/styles/components/_avatar.scss +1 -0
  45. package/src/styles/components/_breadcrumbs.scss +7 -0
  46. package/src/styles/components/_button.scss +291 -214
  47. package/src/styles/components/_checkbox.scss +9 -1
  48. package/src/styles/components/_collapsible.scss +15 -0
  49. package/src/styles/components/_color-picker.scss +4 -1
  50. package/src/styles/components/_input.scss +1 -0
  51. package/src/styles/components/_listbox.scss +8 -2
  52. package/src/styles/components/_menu.scss +9 -2
  53. package/src/styles/components/_modal.scss +18 -2
  54. package/src/styles/components/_navbar.scss +22 -6
  55. package/src/styles/components/_number-input.scss +1 -0
  56. package/src/styles/components/_page.scss +220 -12
  57. package/src/styles/components/_pagination.scss +10 -1
  58. package/src/styles/components/_panel.scss +8 -3
  59. package/src/styles/components/_popover.scss +15 -2
  60. package/src/styles/components/_progress.scss +14 -0
  61. package/src/styles/components/_radio.scss +8 -1
  62. package/src/styles/components/_scroll-area.scss +56 -0
  63. package/src/styles/components/_select.scss +3 -1
  64. package/src/styles/components/_sidebar.scss +78 -38
  65. package/src/styles/components/_skeleton.scss +18 -0
  66. package/src/styles/components/_slider.scss +1 -0
  67. package/src/styles/components/_spinner.scss +15 -0
  68. package/src/styles/components/_switch.scss +5 -0
  69. package/src/styles/components/_table.scss +1 -0
  70. package/src/styles/components/_tabs.scss +6 -0
  71. package/src/styles/components/_tag.scss +2 -0
  72. package/src/styles/components/_tags-input.scss +1 -0
  73. package/src/styles/components/_textarea.scss +1 -0
  74. package/src/styles/components/_toast.scss +16 -1
  75. package/src/styles/components/_toolbar.scss +2 -0
  76. package/src/styles/components/_tooltip.scss +14 -1
  77. package/src/styles/components/_tree-view.scss +6 -1
  78. package/src/styles/mixins/_index.scss +1 -0
  79. package/src/styles/mixins/_responsive.scss +184 -0
  80. package/src/styles/mixins/fluidSize.test.ts +149 -0
  81. package/src/styles/tokens/_foundation-breakpoints.scss +26 -0
  82. package/src/styles/tokens/_foundation-z-index.scss +38 -0
  83. package/src/styles/tokens/index.scss +2 -0
  84. package/web-types.json +194 -14
package/dist/sleekspace-ui.css CHANGED
@@ -444,6 +444,66 @@
444
444
  --sk-scrollbar-thumb-min-size: 40px;
445
445
  }
446
446
 
447
+ /**
448
+ * Foundation Tokens - Breakpoints
449
+ *
450
+ * Single-source breakpoint scale shared between @media (viewport) and
451
+ * @container (component) queries. CSS custom properties are exposed for
452
+ * consumer visibility and JS access; SCSS-level values live in
453
+ * mixins/_responsive.scss and drive the media-up/container-up mixins.
454
+ *
455
+ * Scale rationale:
456
+ * sm ( 640px) - phones held landscape / narrow tablets
457
+ * md (1024px) - tablets / small laptop -- persistent sidebar threshold
458
+ * lg (1280px) - standard laptop / desktop
459
+ * xl (1536px) - large desktop / ultrawide
460
+ */
461
+ :root {
462
+ /* ===================================================================
463
+ * Viewport Breakpoints
464
+ * =================================================================== */
465
+ --sk-bp-sm: 640px;
466
+ --sk-bp-md: 1024px;
467
+ --sk-bp-lg: 1280px;
468
+ --sk-bp-xl: 1536px;
469
+ }
470
+
471
+ /**
472
+ * Foundation Tokens - Z-Index Stacking Scale
473
+ *
474
+ * One scale every SleekSpace component layers against so portaled content stacks in a
475
+ * predictable, documented order. Custom consumer layers can slot in between tokens by
476
+ * picking a number within the reserved gap.
477
+ *
478
+ * Reading order (bottom to top):
479
+ * sticky 100 - App-shell chrome that sits above the flow (sticky navbar / footer)
480
+ * drawer-scrim 900 - Dim + blur layer behind an open drawer
481
+ * drawer 901 - SkPage sidebar / aside drawer
482
+ * modal-scrim 1000 - Dim layer behind an open modal
483
+ * modal 1001 - SkModal content -- must be above drawer so modals launched from
484
+ * inside a drawer render on top
485
+ * popover 1100 - SkPopover (floating anchored surface)
486
+ * dropdown 1100 - SkDropdown + SkListbox menus (same layer as popover; a menu opened
487
+ * inside a modal renders above the modal)
488
+ * tooltip 1200 - SkTooltip -- higher than menus so a tooltip on a menu item stays
489
+ * visible
490
+ * toast 1300 - Ephemeral top-of-stack notifications
491
+ */
492
+ :root {
493
+ /* ===================================================================
494
+ * Layering Scale
495
+ * =================================================================== */
496
+ --sk-z-sticky: 100;
497
+ --sk-z-drawer-scrim: 900;
498
+ --sk-z-drawer: 901;
499
+ --sk-z-modal-scrim: 1000;
500
+ --sk-z-modal: 1001;
501
+ --sk-z-popover: 1100;
502
+ --sk-z-dropdown: 1100;
503
+ --sk-z-tooltip: 1200;
504
+ --sk-z-toast: 1300;
505
+ }
506
+
447
507
  /* ===================================================================
448
508
  * Semantic Tokens
449
509
  * Contextual meanings that reference foundation tokens
@@ -1480,6 +1540,7 @@
1480
1540
  var(--sk-accordion-color-base),
1481
1541
  transparent 85%
1482
1542
  );
1543
+ position: relative;
1483
1544
  overflow: hidden;
1484
1545
  width: 100%;
1485
1546
  }
@@ -1600,6 +1661,12 @@
1600
1661
  opacity: 0;
1601
1662
  }
1602
1663
  }
1664
+ @media (prefers-reduced-motion: reduce) {
1665
+ .sk-accordion-content[data-state=open],
1666
+ .sk-accordion-content[data-state=closed] {
1667
+ animation: none;
1668
+ }
1669
+ }
1603
1670
  .sk-alert {
1604
1671
  --sk-alert-padding: 0.75rem;
1605
1672
  --sk-alert-gap: 0.75rem;
@@ -1623,6 +1690,7 @@
1623
1690
  oklch(from var(--sk-alert-color-base) l c h / var(--sk-alert-glow-opacity));
1624
1691
  }
1625
1692
  .sk-alert {
1693
+ position: relative;
1626
1694
  display: flex;
1627
1695
  align-items: flex-start;
1628
1696
  gap: var(--sk-alert-gap);
@@ -1882,6 +1950,7 @@
1882
1950
  --sk-avatar-fg: var(--sk-neutral-text);
1883
1951
  --sk-avatar-size: 2.5rem;
1884
1952
  --sk-avatar-bevel: calc(var(--sk-avatar-size) * 0.25);
1953
+ position: relative;
1885
1954
  display: inline-flex;
1886
1955
  align-items: center;
1887
1956
  justify-content: center;
@@ -2040,6 +2109,11 @@
2040
2109
  font-family: inherit;
2041
2110
  cursor: pointer;
2042
2111
  }
2112
+ @media (pointer: coarse) {
2113
+ .sk-breadcrumb-item .sk-breadcrumb-link {
2114
+ min-height: 44px;
2115
+ }
2116
+ }
2043
2117
  .sk-breadcrumb-item .sk-breadcrumb-link:hover:not([aria-current]) {
2044
2118
  color: var(--sk-breadcrumbs-color-base);
2045
2119
  text-decoration: underline;
@@ -2113,250 +2187,90 @@
2113
2187
  --sk-button-bg-active: color-mix(in oklch, var(--sk-button-bg) 85%, black 15%);
2114
2188
  --sk-button-border-base: var(--sk-button-color-base);
2115
2189
  --sk-button-border-hover: color-mix(in oklch, var(--sk-button-color-base), white 12.68%);
2190
+ --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
2191
+ --sk-button-current-padding-x: var(--sk-button-padding-base);
2192
+ --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
2193
+ --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
2116
2194
  }
2117
2195
  .sk-button {
2118
2196
  position: relative;
2119
2197
  display: inline-flex;
2120
2198
  align-items: center;
2121
2199
  justify-content: center;
2122
- gap: var(--sk-button-gap);
2123
- font-weight: var(--sk-button-font-weight);
2124
- font-size: var(--sk-button-font-size-base);
2125
- line-height: var(--sk-button-line-height);
2200
+ flex-shrink: 0;
2201
+ background: transparent;
2202
+ border: none;
2203
+ padding: 0;
2126
2204
  text-decoration: none;
2127
- border-width: var(--sk-button-border-width);
2128
- border-style: solid;
2205
+ appearance: none;
2206
+ font-family: inherit;
2129
2207
  cursor: pointer;
2130
2208
  user-select: none;
2131
2209
  touch-action: manipulation;
2132
- flex-shrink: 0;
2133
2210
  }
2134
2211
  .sk-button ul li::marker {
2135
2212
  color: var(--sk-kind-color, var(--sk-button-color-base));
2136
2213
  }
2137
- @supports (corner-shape: bevel) {
2138
- .sk-button {
2139
- border: var(--sk-button-border-width) solid var(--sk-button-border-color);
2140
- border-top-left-radius: calc(var(--sk-button-height-base) / var(--sk-button-radius-factor));
2141
- border-top-right-radius: 0;
2142
- border-bottom-right-radius: calc(var(--sk-button-height-base) / var(--sk-button-radius-factor));
2143
- border-bottom-left-radius: 0;
2144
- corner-shape: bevel;
2145
- }
2146
- }
2147
- @supports not (corner-shape: bevel) {
2148
- .sk-button {
2149
- border: none;
2150
- clip-path: polygon(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))), calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))) 100%, 0% 100%, 0% calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)));
2151
- }
2152
- .sk-button::before {
2153
- content: "";
2154
- position: absolute;
2155
- top: 0;
2156
- left: 0;
2157
- right: 0;
2158
- bottom: 0;
2159
- background-color: var(--sk-button-border-color);
2160
- z-index: -1;
2161
- clip-path: polygon(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))), calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))) 100%, 0% 100%, 0% calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)), calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) 0%, calc(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) + var(--sk-button-border-width)) var(--sk-button-border-width));
2214
+ @media (pointer: coarse) {
2215
+ .sk-button:not(.sk-dense) {
2216
+ min-height: 44px;
2162
2217
  }
2163
- }
2164
- @supports (corner-shape: bevel) {
2165
- .sk-button {
2166
- box-shadow: var(--sk-button-glow-shadow);
2218
+ .sk-button:not(.sk-dense).sk-icon-only {
2219
+ min-width: 44px;
2167
2220
  }
2168
2221
  }
2169
- .sk-button {
2170
- transition: color var(--sk-button-transition-duration) var(--sk-button-transition-easing), background-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), border-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), box-shadow var(--sk-button-transition-duration) var(--sk-button-transition-easing);
2171
- appearance: none;
2172
- font-family: inherit;
2173
- }
2174
2222
  .sk-button.sk-xs {
2175
- --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs) / var(--sk-button-radius-factor));
2176
- height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs));
2177
- padding-left: var(--sk-button-padding-xs);
2178
- padding-right: var(--sk-button-padding-xs);
2179
- font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xs));
2180
- }
2181
- @supports (corner-shape: bevel) {
2182
- .sk-button.sk-xs {
2183
- border: var(--sk-button-border-width) solid var(--sk-button-border-color);
2184
- border-top-left-radius: var(--sk-button-cut-size);
2185
- border-top-right-radius: 0;
2186
- border-bottom-right-radius: var(--sk-button-cut-size);
2187
- border-bottom-left-radius: 0;
2188
- corner-shape: bevel;
2189
- }
2190
- }
2191
- @supports not (corner-shape: bevel) {
2192
- .sk-button.sk-xs {
2193
- border: none;
2194
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
2195
- }
2196
- .sk-button.sk-xs::before {
2197
- content: "";
2198
- position: absolute;
2199
- top: 0;
2200
- left: 0;
2201
- right: 0;
2202
- bottom: 0;
2203
- background-color: var(--sk-button-border-color);
2204
- z-index: -1;
2205
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
2206
- }
2223
+ --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs));
2224
+ --sk-button-current-padding-x: var(--sk-button-padding-xs);
2225
+ --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xs));
2226
+ --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
2207
2227
  }
2208
2228
  .sk-button.sk-sm {
2209
- --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm) / var(--sk-button-radius-factor));
2210
- height: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm));
2211
- padding-left: var(--sk-button-padding-base);
2212
- padding-right: var(--sk-button-padding-base);
2213
- font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-sm));
2214
- }
2215
- @supports (corner-shape: bevel) {
2216
- .sk-button.sk-sm {
2217
- border: var(--sk-button-border-width) solid var(--sk-button-border-color);
2218
- border-top-left-radius: var(--sk-button-cut-size);
2219
- border-top-right-radius: 0;
2220
- border-bottom-right-radius: var(--sk-button-cut-size);
2221
- border-bottom-left-radius: 0;
2222
- corner-shape: bevel;
2223
- }
2224
- }
2225
- @supports not (corner-shape: bevel) {
2226
- .sk-button.sk-sm {
2227
- border: none;
2228
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
2229
- }
2230
- .sk-button.sk-sm::before {
2231
- content: "";
2232
- position: absolute;
2233
- top: 0;
2234
- left: 0;
2235
- right: 0;
2236
- bottom: 0;
2237
- background-color: var(--sk-button-border-color);
2238
- z-index: -1;
2239
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
2240
- }
2229
+ --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm));
2230
+ --sk-button-current-padding-x: var(--sk-button-padding-base);
2231
+ --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-sm));
2232
+ --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
2241
2233
  }
2242
2234
  .sk-button.sk-md {
2243
- --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-md) / var(--sk-button-radius-factor));
2244
- height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
2245
- padding-left: var(--sk-button-padding-base);
2246
- padding-right: var(--sk-button-padding-base);
2247
- font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
2248
- }
2249
- @supports (corner-shape: bevel) {
2250
- .sk-button.sk-md {
2251
- border: var(--sk-button-border-width) solid var(--sk-button-border-color);
2252
- border-top-left-radius: var(--sk-button-cut-size);
2253
- border-top-right-radius: 0;
2254
- border-bottom-right-radius: var(--sk-button-cut-size);
2255
- border-bottom-left-radius: 0;
2256
- corner-shape: bevel;
2257
- }
2258
- }
2259
- @supports not (corner-shape: bevel) {
2260
- .sk-button.sk-md {
2261
- border: none;
2262
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
2263
- }
2264
- .sk-button.sk-md::before {
2265
- content: "";
2266
- position: absolute;
2267
- top: 0;
2268
- left: 0;
2269
- right: 0;
2270
- bottom: 0;
2271
- background-color: var(--sk-button-border-color);
2272
- z-index: -1;
2273
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
2274
- }
2235
+ --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
2236
+ --sk-button-current-padding-x: var(--sk-button-padding-base);
2237
+ --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
2238
+ --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
2275
2239
  }
2276
2240
  .sk-button.sk-lg {
2277
- --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg) / var(--sk-button-radius-factor));
2278
- height: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg));
2279
- padding-left: var(--sk-button-padding-base);
2280
- padding-right: var(--sk-button-padding-base);
2281
- font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-lg));
2282
- }
2283
- @supports (corner-shape: bevel) {
2284
- .sk-button.sk-lg {
2285
- border: var(--sk-button-border-width) solid var(--sk-button-border-color);
2286
- border-top-left-radius: var(--sk-button-cut-size);
2287
- border-top-right-radius: 0;
2288
- border-bottom-right-radius: var(--sk-button-cut-size);
2289
- border-bottom-left-radius: 0;
2290
- corner-shape: bevel;
2291
- }
2292
- }
2293
- @supports not (corner-shape: bevel) {
2294
- .sk-button.sk-lg {
2295
- border: none;
2296
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
2297
- }
2298
- .sk-button.sk-lg::before {
2299
- content: "";
2300
- position: absolute;
2301
- top: 0;
2302
- left: 0;
2303
- right: 0;
2304
- bottom: 0;
2305
- background-color: var(--sk-button-border-color);
2306
- z-index: -1;
2307
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
2308
- }
2241
+ --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg));
2242
+ --sk-button-current-padding-x: var(--sk-button-padding-base);
2243
+ --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-lg));
2244
+ --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
2309
2245
  }
2310
2246
  .sk-button.sk-xl {
2311
- --sk-button-cut-size: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl) / var(--sk-button-radius-factor));
2312
- height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl));
2313
- padding-left: var(--sk-button-padding-xl);
2314
- padding-right: var(--sk-button-padding-xl);
2315
- font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xl));
2316
- }
2317
- @supports (corner-shape: bevel) {
2318
- .sk-button.sk-xl {
2319
- border: var(--sk-button-border-width) solid var(--sk-button-border-color);
2320
- border-top-left-radius: var(--sk-button-cut-size);
2321
- border-top-right-radius: 0;
2322
- border-bottom-right-radius: var(--sk-button-cut-size);
2323
- border-bottom-left-radius: 0;
2324
- corner-shape: bevel;
2325
- }
2326
- }
2327
- @supports not (corner-shape: bevel) {
2328
- .sk-button.sk-xl {
2329
- border: none;
2330
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
2331
- }
2332
- .sk-button.sk-xl::before {
2333
- content: "";
2334
- position: absolute;
2335
- top: 0;
2336
- left: 0;
2337
- right: 0;
2338
- bottom: 0;
2339
- background-color: var(--sk-button-border-color);
2340
- z-index: -1;
2341
- clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
2342
- }
2247
+ --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl));
2248
+ --sk-button-current-padding-x: var(--sk-button-padding-xl);
2249
+ --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xl));
2250
+ --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
2343
2251
  }
2344
2252
  .sk-button.sk-outline.sk-neutral {
2345
2253
  --sk-button-color-base: var(--sk-neutral-base);
2346
2254
  --sk-button-text: var(--sk-neutral-text);
2347
2255
  --sk-kind-color: var(--sk-neutral-base);
2348
2256
  --sk-button-border-color: var(--sk-button-border-base);
2257
+ }
2258
+ .sk-button.sk-outline.sk-neutral .sk-button-chrome {
2349
2259
  background-color: var(--sk-button-outline-bg);
2350
2260
  color: var(--sk-button-color-base);
2351
2261
  }
2352
2262
  .sk-button.sk-outline.sk-neutral:hover:not(:disabled) {
2353
2263
  --sk-button-border-color: var(--sk-button-border-hover);
2354
2264
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2265
+ }
2266
+ .sk-button.sk-outline.sk-neutral:hover:not(:disabled) .sk-button-chrome {
2355
2267
  background-color: var(--sk-button-bg);
2356
2268
  }
2357
2269
  .sk-button.sk-outline.sk-neutral:active:not(:disabled) {
2358
2270
  --sk-button-border-color: var(--sk-button-border-hover);
2359
2271
  --sk-button-glow-shadow: 0 0 0 transparent;
2272
+ }
2273
+ .sk-button.sk-outline.sk-neutral:active:not(:disabled) .sk-button-chrome {
2360
2274
  background-color: var(--sk-button-bg-hover);
2361
2275
  color: var(--sk-button-text);
2362
2276
  }
@@ -2365,17 +2279,23 @@
2365
2279
  --sk-button-text: var(--sk-primary-text);
2366
2280
  --sk-kind-color: var(--sk-primary-base);
2367
2281
  --sk-button-border-color: var(--sk-button-border-base);
2282
+ }
2283
+ .sk-button.sk-outline.sk-primary .sk-button-chrome {
2368
2284
  background-color: var(--sk-button-outline-bg);
2369
2285
  color: var(--sk-button-color-base);
2370
2286
  }
2371
2287
  .sk-button.sk-outline.sk-primary:hover:not(:disabled) {
2372
2288
  --sk-button-border-color: var(--sk-button-border-hover);
2373
2289
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2290
+ }
2291
+ .sk-button.sk-outline.sk-primary:hover:not(:disabled) .sk-button-chrome {
2374
2292
  background-color: var(--sk-button-bg);
2375
2293
  }
2376
2294
  .sk-button.sk-outline.sk-primary:active:not(:disabled) {
2377
2295
  --sk-button-border-color: var(--sk-button-border-hover);
2378
2296
  --sk-button-glow-shadow: 0 0 0 transparent;
2297
+ }
2298
+ .sk-button.sk-outline.sk-primary:active:not(:disabled) .sk-button-chrome {
2379
2299
  background-color: var(--sk-button-bg-hover);
2380
2300
  color: var(--sk-button-text);
2381
2301
  }
@@ -2384,17 +2304,23 @@
2384
2304
  --sk-button-text: var(--sk-accent-text);
2385
2305
  --sk-kind-color: var(--sk-accent-base);
2386
2306
  --sk-button-border-color: var(--sk-button-border-base);
2307
+ }
2308
+ .sk-button.sk-outline.sk-accent .sk-button-chrome {
2387
2309
  background-color: var(--sk-button-outline-bg);
2388
2310
  color: var(--sk-button-color-base);
2389
2311
  }
2390
2312
  .sk-button.sk-outline.sk-accent:hover:not(:disabled) {
2391
2313
  --sk-button-border-color: var(--sk-button-border-hover);
2392
2314
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2315
+ }
2316
+ .sk-button.sk-outline.sk-accent:hover:not(:disabled) .sk-button-chrome {
2393
2317
  background-color: var(--sk-button-bg);
2394
2318
  }
2395
2319
  .sk-button.sk-outline.sk-accent:active:not(:disabled) {
2396
2320
  --sk-button-border-color: var(--sk-button-border-hover);
2397
2321
  --sk-button-glow-shadow: 0 0 0 transparent;
2322
+ }
2323
+ .sk-button.sk-outline.sk-accent:active:not(:disabled) .sk-button-chrome {
2398
2324
  background-color: var(--sk-button-bg-hover);
2399
2325
  color: var(--sk-button-text);
2400
2326
  }
@@ -2403,17 +2329,23 @@
2403
2329
  --sk-button-text: var(--sk-info-text);
2404
2330
  --sk-kind-color: var(--sk-info-base);
2405
2331
  --sk-button-border-color: var(--sk-button-border-base);
2332
+ }
2333
+ .sk-button.sk-outline.sk-info .sk-button-chrome {
2406
2334
  background-color: var(--sk-button-outline-bg);
2407
2335
  color: var(--sk-button-color-base);
2408
2336
  }
2409
2337
  .sk-button.sk-outline.sk-info:hover:not(:disabled) {
2410
2338
  --sk-button-border-color: var(--sk-button-border-hover);
2411
2339
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2340
+ }
2341
+ .sk-button.sk-outline.sk-info:hover:not(:disabled) .sk-button-chrome {
2412
2342
  background-color: var(--sk-button-bg);
2413
2343
  }
2414
2344
  .sk-button.sk-outline.sk-info:active:not(:disabled) {
2415
2345
  --sk-button-border-color: var(--sk-button-border-hover);
2416
2346
  --sk-button-glow-shadow: 0 0 0 transparent;
2347
+ }
2348
+ .sk-button.sk-outline.sk-info:active:not(:disabled) .sk-button-chrome {
2417
2349
  background-color: var(--sk-button-bg-hover);
2418
2350
  color: var(--sk-button-text);
2419
2351
  }
@@ -2422,17 +2354,23 @@
2422
2354
  --sk-button-text: var(--sk-success-text);
2423
2355
  --sk-kind-color: var(--sk-success-base);
2424
2356
  --sk-button-border-color: var(--sk-button-border-base);
2357
+ }
2358
+ .sk-button.sk-outline.sk-success .sk-button-chrome {
2425
2359
  background-color: var(--sk-button-outline-bg);
2426
2360
  color: var(--sk-button-color-base);
2427
2361
  }
2428
2362
  .sk-button.sk-outline.sk-success:hover:not(:disabled) {
2429
2363
  --sk-button-border-color: var(--sk-button-border-hover);
2430
2364
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2365
+ }
2366
+ .sk-button.sk-outline.sk-success:hover:not(:disabled) .sk-button-chrome {
2431
2367
  background-color: var(--sk-button-bg);
2432
2368
  }
2433
2369
  .sk-button.sk-outline.sk-success:active:not(:disabled) {
2434
2370
  --sk-button-border-color: var(--sk-button-border-hover);
2435
2371
  --sk-button-glow-shadow: 0 0 0 transparent;
2372
+ }
2373
+ .sk-button.sk-outline.sk-success:active:not(:disabled) .sk-button-chrome {
2436
2374
  background-color: var(--sk-button-bg-hover);
2437
2375
  color: var(--sk-button-text);
2438
2376
  }
@@ -2441,17 +2379,23 @@
2441
2379
  --sk-button-text: var(--sk-warning-text);
2442
2380
  --sk-kind-color: var(--sk-warning-base);
2443
2381
  --sk-button-border-color: var(--sk-button-border-base);
2382
+ }
2383
+ .sk-button.sk-outline.sk-warning .sk-button-chrome {
2444
2384
  background-color: var(--sk-button-outline-bg);
2445
2385
  color: var(--sk-button-color-base);
2446
2386
  }
2447
2387
  .sk-button.sk-outline.sk-warning:hover:not(:disabled) {
2448
2388
  --sk-button-border-color: var(--sk-button-border-hover);
2449
2389
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2390
+ }
2391
+ .sk-button.sk-outline.sk-warning:hover:not(:disabled) .sk-button-chrome {
2450
2392
  background-color: var(--sk-button-bg);
2451
2393
  }
2452
2394
  .sk-button.sk-outline.sk-warning:active:not(:disabled) {
2453
2395
  --sk-button-border-color: var(--sk-button-border-hover);
2454
2396
  --sk-button-glow-shadow: 0 0 0 transparent;
2397
+ }
2398
+ .sk-button.sk-outline.sk-warning:active:not(:disabled) .sk-button-chrome {
2455
2399
  background-color: var(--sk-button-bg-hover);
2456
2400
  color: var(--sk-button-text);
2457
2401
  }
@@ -2460,17 +2404,23 @@
2460
2404
  --sk-button-text: var(--sk-danger-text);
2461
2405
  --sk-kind-color: var(--sk-danger-base);
2462
2406
  --sk-button-border-color: var(--sk-button-border-base);
2407
+ }
2408
+ .sk-button.sk-outline.sk-danger .sk-button-chrome {
2463
2409
  background-color: var(--sk-button-outline-bg);
2464
2410
  color: var(--sk-button-color-base);
2465
2411
  }
2466
2412
  .sk-button.sk-outline.sk-danger:hover:not(:disabled) {
2467
2413
  --sk-button-border-color: var(--sk-button-border-hover);
2468
2414
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2415
+ }
2416
+ .sk-button.sk-outline.sk-danger:hover:not(:disabled) .sk-button-chrome {
2469
2417
  background-color: var(--sk-button-bg);
2470
2418
  }
2471
2419
  .sk-button.sk-outline.sk-danger:active:not(:disabled) {
2472
2420
  --sk-button-border-color: var(--sk-button-border-hover);
2473
2421
  --sk-button-glow-shadow: 0 0 0 transparent;
2422
+ }
2423
+ .sk-button.sk-outline.sk-danger:active:not(:disabled) .sk-button-chrome {
2474
2424
  background-color: var(--sk-button-bg-hover);
2475
2425
  color: var(--sk-button-text);
2476
2426
  }
@@ -2479,17 +2429,23 @@
2479
2429
  --sk-button-text: var(--sk-boulder-text);
2480
2430
  --sk-kind-color: var(--sk-boulder-base);
2481
2431
  --sk-button-border-color: var(--sk-button-border-base);
2432
+ }
2433
+ .sk-button.sk-outline.sk-boulder .sk-button-chrome {
2482
2434
  background-color: var(--sk-button-outline-bg);
2483
2435
  color: var(--sk-button-color-base);
2484
2436
  }
2485
2437
  .sk-button.sk-outline.sk-boulder:hover:not(:disabled) {
2486
2438
  --sk-button-border-color: var(--sk-button-border-hover);
2487
2439
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2440
+ }
2441
+ .sk-button.sk-outline.sk-boulder:hover:not(:disabled) .sk-button-chrome {
2488
2442
  background-color: var(--sk-button-bg);
2489
2443
  }
2490
2444
  .sk-button.sk-outline.sk-boulder:active:not(:disabled) {
2491
2445
  --sk-button-border-color: var(--sk-button-border-hover);
2492
2446
  --sk-button-glow-shadow: 0 0 0 transparent;
2447
+ }
2448
+ .sk-button.sk-outline.sk-boulder:active:not(:disabled) .sk-button-chrome {
2493
2449
  background-color: var(--sk-button-bg-hover);
2494
2450
  color: var(--sk-button-text);
2495
2451
  }
@@ -2498,17 +2454,23 @@
2498
2454
  --sk-button-text: var(--sk-neon-blue-text);
2499
2455
  --sk-kind-color: var(--sk-neon-blue-base);
2500
2456
  --sk-button-border-color: var(--sk-button-border-base);
2457
+ }
2458
+ .sk-button.sk-outline.sk-neon-blue .sk-button-chrome {
2501
2459
  background-color: var(--sk-button-outline-bg);
2502
2460
  color: var(--sk-button-color-base);
2503
2461
  }
2504
2462
  .sk-button.sk-outline.sk-neon-blue:hover:not(:disabled) {
2505
2463
  --sk-button-border-color: var(--sk-button-border-hover);
2506
2464
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2465
+ }
2466
+ .sk-button.sk-outline.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
2507
2467
  background-color: var(--sk-button-bg);
2508
2468
  }
2509
2469
  .sk-button.sk-outline.sk-neon-blue:active:not(:disabled) {
2510
2470
  --sk-button-border-color: var(--sk-button-border-hover);
2511
2471
  --sk-button-glow-shadow: 0 0 0 transparent;
2472
+ }
2473
+ .sk-button.sk-outline.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
2512
2474
  background-color: var(--sk-button-bg-hover);
2513
2475
  color: var(--sk-button-text);
2514
2476
  }
@@ -2517,17 +2479,23 @@
2517
2479
  --sk-button-text: var(--sk-light-blue-text);
2518
2480
  --sk-kind-color: var(--sk-light-blue-base);
2519
2481
  --sk-button-border-color: var(--sk-button-border-base);
2482
+ }
2483
+ .sk-button.sk-outline.sk-light-blue .sk-button-chrome {
2520
2484
  background-color: var(--sk-button-outline-bg);
2521
2485
  color: var(--sk-button-color-base);
2522
2486
  }
2523
2487
  .sk-button.sk-outline.sk-light-blue:hover:not(:disabled) {
2524
2488
  --sk-button-border-color: var(--sk-button-border-hover);
2525
2489
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2490
+ }
2491
+ .sk-button.sk-outline.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
2526
2492
  background-color: var(--sk-button-bg);
2527
2493
  }
2528
2494
  .sk-button.sk-outline.sk-light-blue:active:not(:disabled) {
2529
2495
  --sk-button-border-color: var(--sk-button-border-hover);
2530
2496
  --sk-button-glow-shadow: 0 0 0 transparent;
2497
+ }
2498
+ .sk-button.sk-outline.sk-light-blue:active:not(:disabled) .sk-button-chrome {
2531
2499
  background-color: var(--sk-button-bg-hover);
2532
2500
  color: var(--sk-button-text);
2533
2501
  }
@@ -2536,17 +2504,23 @@
2536
2504
  --sk-button-text: var(--sk-neon-orange-text);
2537
2505
  --sk-kind-color: var(--sk-neon-orange-base);
2538
2506
  --sk-button-border-color: var(--sk-button-border-base);
2507
+ }
2508
+ .sk-button.sk-outline.sk-neon-orange .sk-button-chrome {
2539
2509
  background-color: var(--sk-button-outline-bg);
2540
2510
  color: var(--sk-button-color-base);
2541
2511
  }
2542
2512
  .sk-button.sk-outline.sk-neon-orange:hover:not(:disabled) {
2543
2513
  --sk-button-border-color: var(--sk-button-border-hover);
2544
2514
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2515
+ }
2516
+ .sk-button.sk-outline.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
2545
2517
  background-color: var(--sk-button-bg);
2546
2518
  }
2547
2519
  .sk-button.sk-outline.sk-neon-orange:active:not(:disabled) {
2548
2520
  --sk-button-border-color: var(--sk-button-border-hover);
2549
2521
  --sk-button-glow-shadow: 0 0 0 transparent;
2522
+ }
2523
+ .sk-button.sk-outline.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
2550
2524
  background-color: var(--sk-button-bg-hover);
2551
2525
  color: var(--sk-button-text);
2552
2526
  }
@@ -2555,17 +2529,23 @@
2555
2529
  --sk-button-text: var(--sk-neon-purple-text);
2556
2530
  --sk-kind-color: var(--sk-neon-purple-base);
2557
2531
  --sk-button-border-color: var(--sk-button-border-base);
2532
+ }
2533
+ .sk-button.sk-outline.sk-neon-purple .sk-button-chrome {
2558
2534
  background-color: var(--sk-button-outline-bg);
2559
2535
  color: var(--sk-button-color-base);
2560
2536
  }
2561
2537
  .sk-button.sk-outline.sk-neon-purple:hover:not(:disabled) {
2562
2538
  --sk-button-border-color: var(--sk-button-border-hover);
2563
2539
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2540
+ }
2541
+ .sk-button.sk-outline.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
2564
2542
  background-color: var(--sk-button-bg);
2565
2543
  }
2566
2544
  .sk-button.sk-outline.sk-neon-purple:active:not(:disabled) {
2567
2545
  --sk-button-border-color: var(--sk-button-border-hover);
2568
2546
  --sk-button-glow-shadow: 0 0 0 transparent;
2547
+ }
2548
+ .sk-button.sk-outline.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
2569
2549
  background-color: var(--sk-button-bg-hover);
2570
2550
  color: var(--sk-button-text);
2571
2551
  }
@@ -2574,17 +2554,23 @@
2574
2554
  --sk-button-text: var(--sk-neon-green-text);
2575
2555
  --sk-kind-color: var(--sk-neon-green-base);
2576
2556
  --sk-button-border-color: var(--sk-button-border-base);
2557
+ }
2558
+ .sk-button.sk-outline.sk-neon-green .sk-button-chrome {
2577
2559
  background-color: var(--sk-button-outline-bg);
2578
2560
  color: var(--sk-button-color-base);
2579
2561
  }
2580
2562
  .sk-button.sk-outline.sk-neon-green:hover:not(:disabled) {
2581
2563
  --sk-button-border-color: var(--sk-button-border-hover);
2582
2564
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2565
+ }
2566
+ .sk-button.sk-outline.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
2583
2567
  background-color: var(--sk-button-bg);
2584
2568
  }
2585
2569
  .sk-button.sk-outline.sk-neon-green:active:not(:disabled) {
2586
2570
  --sk-button-border-color: var(--sk-button-border-hover);
2587
2571
  --sk-button-glow-shadow: 0 0 0 transparent;
2572
+ }
2573
+ .sk-button.sk-outline.sk-neon-green:active:not(:disabled) .sk-button-chrome {
2588
2574
  background-color: var(--sk-button-bg-hover);
2589
2575
  color: var(--sk-button-text);
2590
2576
  }
@@ -2593,17 +2579,23 @@
2593
2579
  --sk-button-text: var(--sk-neon-mint-text);
2594
2580
  --sk-kind-color: var(--sk-neon-mint-base);
2595
2581
  --sk-button-border-color: var(--sk-button-border-base);
2582
+ }
2583
+ .sk-button.sk-outline.sk-neon-mint .sk-button-chrome {
2596
2584
  background-color: var(--sk-button-outline-bg);
2597
2585
  color: var(--sk-button-color-base);
2598
2586
  }
2599
2587
  .sk-button.sk-outline.sk-neon-mint:hover:not(:disabled) {
2600
2588
  --sk-button-border-color: var(--sk-button-border-hover);
2601
2589
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2590
+ }
2591
+ .sk-button.sk-outline.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
2602
2592
  background-color: var(--sk-button-bg);
2603
2593
  }
2604
2594
  .sk-button.sk-outline.sk-neon-mint:active:not(:disabled) {
2605
2595
  --sk-button-border-color: var(--sk-button-border-hover);
2606
2596
  --sk-button-glow-shadow: 0 0 0 transparent;
2597
+ }
2598
+ .sk-button.sk-outline.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
2607
2599
  background-color: var(--sk-button-bg-hover);
2608
2600
  color: var(--sk-button-text);
2609
2601
  }
@@ -2612,17 +2604,23 @@
2612
2604
  --sk-button-text: var(--sk-neon-pink-text);
2613
2605
  --sk-kind-color: var(--sk-neon-pink-base);
2614
2606
  --sk-button-border-color: var(--sk-button-border-base);
2607
+ }
2608
+ .sk-button.sk-outline.sk-neon-pink .sk-button-chrome {
2615
2609
  background-color: var(--sk-button-outline-bg);
2616
2610
  color: var(--sk-button-color-base);
2617
2611
  }
2618
2612
  .sk-button.sk-outline.sk-neon-pink:hover:not(:disabled) {
2619
2613
  --sk-button-border-color: var(--sk-button-border-hover);
2620
2614
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2615
+ }
2616
+ .sk-button.sk-outline.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
2621
2617
  background-color: var(--sk-button-bg);
2622
2618
  }
2623
2619
  .sk-button.sk-outline.sk-neon-pink:active:not(:disabled) {
2624
2620
  --sk-button-border-color: var(--sk-button-border-hover);
2625
2621
  --sk-button-glow-shadow: 0 0 0 transparent;
2622
+ }
2623
+ .sk-button.sk-outline.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
2626
2624
  background-color: var(--sk-button-bg-hover);
2627
2625
  color: var(--sk-button-text);
2628
2626
  }
@@ -2631,17 +2629,23 @@
2631
2629
  --sk-button-text: var(--sk-yellow-text);
2632
2630
  --sk-kind-color: var(--sk-yellow-base);
2633
2631
  --sk-button-border-color: var(--sk-button-border-base);
2632
+ }
2633
+ .sk-button.sk-outline.sk-yellow .sk-button-chrome {
2634
2634
  background-color: var(--sk-button-outline-bg);
2635
2635
  color: var(--sk-button-color-base);
2636
2636
  }
2637
2637
  .sk-button.sk-outline.sk-yellow:hover:not(:disabled) {
2638
2638
  --sk-button-border-color: var(--sk-button-border-hover);
2639
2639
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2640
+ }
2641
+ .sk-button.sk-outline.sk-yellow:hover:not(:disabled) .sk-button-chrome {
2640
2642
  background-color: var(--sk-button-bg);
2641
2643
  }
2642
2644
  .sk-button.sk-outline.sk-yellow:active:not(:disabled) {
2643
2645
  --sk-button-border-color: var(--sk-button-border-hover);
2644
2646
  --sk-button-glow-shadow: 0 0 0 transparent;
2647
+ }
2648
+ .sk-button.sk-outline.sk-yellow:active:not(:disabled) .sk-button-chrome {
2645
2649
  background-color: var(--sk-button-bg-hover);
2646
2650
  color: var(--sk-button-text);
2647
2651
  }
@@ -2650,22 +2654,30 @@
2650
2654
  --sk-button-text: var(--sk-red-text);
2651
2655
  --sk-kind-color: var(--sk-red-base);
2652
2656
  --sk-button-border-color: var(--sk-button-border-base);
2657
+ }
2658
+ .sk-button.sk-outline.sk-red .sk-button-chrome {
2653
2659
  background-color: var(--sk-button-outline-bg);
2654
2660
  color: var(--sk-button-color-base);
2655
2661
  }
2656
2662
  .sk-button.sk-outline.sk-red:hover:not(:disabled) {
2657
2663
  --sk-button-border-color: var(--sk-button-border-hover);
2658
2664
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2665
+ }
2666
+ .sk-button.sk-outline.sk-red:hover:not(:disabled) .sk-button-chrome {
2659
2667
  background-color: var(--sk-button-bg);
2660
2668
  }
2661
2669
  .sk-button.sk-outline.sk-red:active:not(:disabled) {
2662
2670
  --sk-button-border-color: var(--sk-button-border-hover);
2663
2671
  --sk-button-glow-shadow: 0 0 0 transparent;
2672
+ }
2673
+ .sk-button.sk-outline.sk-red:active:not(:disabled) .sk-button-chrome {
2664
2674
  background-color: var(--sk-button-bg-hover);
2665
2675
  color: var(--sk-button-text);
2666
2676
  }
2667
2677
  .sk-button.sk-outline.sk-neutral {
2668
2678
  --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base), white 25%);
2679
+ }
2680
+ .sk-button.sk-outline.sk-neutral .sk-button-chrome {
2669
2681
  color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
2670
2682
  }
2671
2683
  .sk-button.sk-solid.sk-neutral {
@@ -2673,17 +2685,23 @@
2673
2685
  --sk-button-text: var(--sk-neutral-text);
2674
2686
  --sk-kind-color: var(--sk-neutral-base);
2675
2687
  --sk-button-border-color: var(--sk-button-border-base);
2688
+ }
2689
+ .sk-button.sk-solid.sk-neutral .sk-button-chrome {
2676
2690
  background-color: var(--sk-button-bg);
2677
2691
  color: var(--sk-button-text);
2678
2692
  }
2679
2693
  .sk-button.sk-solid.sk-neutral:hover:not(:disabled) {
2680
2694
  --sk-button-border-color: var(--sk-button-border-hover);
2681
2695
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2696
+ }
2697
+ .sk-button.sk-solid.sk-neutral:hover:not(:disabled) .sk-button-chrome {
2682
2698
  background-color: var(--sk-button-bg-hover);
2683
2699
  }
2684
2700
  .sk-button.sk-solid.sk-neutral:active:not(:disabled) {
2685
2701
  --sk-button-border-color: var(--sk-button-border-hover);
2686
2702
  --sk-button-glow-shadow: 0 0 0 transparent;
2703
+ }
2704
+ .sk-button.sk-solid.sk-neutral:active:not(:disabled) .sk-button-chrome {
2687
2705
  background-color: var(--sk-button-bg);
2688
2706
  color: var(--sk-button-color-base);
2689
2707
  }
@@ -2695,17 +2713,23 @@
2695
2713
  --sk-button-text: var(--sk-primary-text);
2696
2714
  --sk-kind-color: var(--sk-primary-base);
2697
2715
  --sk-button-border-color: var(--sk-button-border-base);
2716
+ }
2717
+ .sk-button.sk-solid.sk-primary .sk-button-chrome {
2698
2718
  background-color: var(--sk-button-bg);
2699
2719
  color: var(--sk-button-text);
2700
2720
  }
2701
2721
  .sk-button.sk-solid.sk-primary:hover:not(:disabled) {
2702
2722
  --sk-button-border-color: var(--sk-button-border-hover);
2703
2723
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2724
+ }
2725
+ .sk-button.sk-solid.sk-primary:hover:not(:disabled) .sk-button-chrome {
2704
2726
  background-color: var(--sk-button-bg-hover);
2705
2727
  }
2706
2728
  .sk-button.sk-solid.sk-primary:active:not(:disabled) {
2707
2729
  --sk-button-border-color: var(--sk-button-border-hover);
2708
2730
  --sk-button-glow-shadow: 0 0 0 transparent;
2731
+ }
2732
+ .sk-button.sk-solid.sk-primary:active:not(:disabled) .sk-button-chrome {
2709
2733
  background-color: var(--sk-button-bg);
2710
2734
  color: var(--sk-button-color-base);
2711
2735
  }
@@ -2717,17 +2741,23 @@
2717
2741
  --sk-button-text: var(--sk-accent-text);
2718
2742
  --sk-kind-color: var(--sk-accent-base);
2719
2743
  --sk-button-border-color: var(--sk-button-border-base);
2744
+ }
2745
+ .sk-button.sk-solid.sk-accent .sk-button-chrome {
2720
2746
  background-color: var(--sk-button-bg);
2721
2747
  color: var(--sk-button-text);
2722
2748
  }
2723
2749
  .sk-button.sk-solid.sk-accent:hover:not(:disabled) {
2724
2750
  --sk-button-border-color: var(--sk-button-border-hover);
2725
2751
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2752
+ }
2753
+ .sk-button.sk-solid.sk-accent:hover:not(:disabled) .sk-button-chrome {
2726
2754
  background-color: var(--sk-button-bg-hover);
2727
2755
  }
2728
2756
  .sk-button.sk-solid.sk-accent:active:not(:disabled) {
2729
2757
  --sk-button-border-color: var(--sk-button-border-hover);
2730
2758
  --sk-button-glow-shadow: 0 0 0 transparent;
2759
+ }
2760
+ .sk-button.sk-solid.sk-accent:active:not(:disabled) .sk-button-chrome {
2731
2761
  background-color: var(--sk-button-bg);
2732
2762
  color: var(--sk-button-color-base);
2733
2763
  }
@@ -2739,17 +2769,23 @@
2739
2769
  --sk-button-text: var(--sk-info-text);
2740
2770
  --sk-kind-color: var(--sk-info-base);
2741
2771
  --sk-button-border-color: var(--sk-button-border-base);
2772
+ }
2773
+ .sk-button.sk-solid.sk-info .sk-button-chrome {
2742
2774
  background-color: var(--sk-button-bg);
2743
2775
  color: var(--sk-button-text);
2744
2776
  }
2745
2777
  .sk-button.sk-solid.sk-info:hover:not(:disabled) {
2746
2778
  --sk-button-border-color: var(--sk-button-border-hover);
2747
2779
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2780
+ }
2781
+ .sk-button.sk-solid.sk-info:hover:not(:disabled) .sk-button-chrome {
2748
2782
  background-color: var(--sk-button-bg-hover);
2749
2783
  }
2750
2784
  .sk-button.sk-solid.sk-info:active:not(:disabled) {
2751
2785
  --sk-button-border-color: var(--sk-button-border-hover);
2752
2786
  --sk-button-glow-shadow: 0 0 0 transparent;
2787
+ }
2788
+ .sk-button.sk-solid.sk-info:active:not(:disabled) .sk-button-chrome {
2753
2789
  background-color: var(--sk-button-bg);
2754
2790
  color: var(--sk-button-color-base);
2755
2791
  }
@@ -2761,17 +2797,23 @@
2761
2797
  --sk-button-text: var(--sk-success-text);
2762
2798
  --sk-kind-color: var(--sk-success-base);
2763
2799
  --sk-button-border-color: var(--sk-button-border-base);
2800
+ }
2801
+ .sk-button.sk-solid.sk-success .sk-button-chrome {
2764
2802
  background-color: var(--sk-button-bg);
2765
2803
  color: var(--sk-button-text);
2766
2804
  }
2767
2805
  .sk-button.sk-solid.sk-success:hover:not(:disabled) {
2768
2806
  --sk-button-border-color: var(--sk-button-border-hover);
2769
2807
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2808
+ }
2809
+ .sk-button.sk-solid.sk-success:hover:not(:disabled) .sk-button-chrome {
2770
2810
  background-color: var(--sk-button-bg-hover);
2771
2811
  }
2772
2812
  .sk-button.sk-solid.sk-success:active:not(:disabled) {
2773
2813
  --sk-button-border-color: var(--sk-button-border-hover);
2774
2814
  --sk-button-glow-shadow: 0 0 0 transparent;
2815
+ }
2816
+ .sk-button.sk-solid.sk-success:active:not(:disabled) .sk-button-chrome {
2775
2817
  background-color: var(--sk-button-bg);
2776
2818
  color: var(--sk-button-color-base);
2777
2819
  }
@@ -2783,17 +2825,23 @@
2783
2825
  --sk-button-text: var(--sk-warning-text);
2784
2826
  --sk-kind-color: var(--sk-warning-base);
2785
2827
  --sk-button-border-color: var(--sk-button-border-base);
2828
+ }
2829
+ .sk-button.sk-solid.sk-warning .sk-button-chrome {
2786
2830
  background-color: var(--sk-button-bg);
2787
2831
  color: var(--sk-button-text);
2788
2832
  }
2789
2833
  .sk-button.sk-solid.sk-warning:hover:not(:disabled) {
2790
2834
  --sk-button-border-color: var(--sk-button-border-hover);
2791
2835
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2836
+ }
2837
+ .sk-button.sk-solid.sk-warning:hover:not(:disabled) .sk-button-chrome {
2792
2838
  background-color: var(--sk-button-bg-hover);
2793
2839
  }
2794
2840
  .sk-button.sk-solid.sk-warning:active:not(:disabled) {
2795
2841
  --sk-button-border-color: var(--sk-button-border-hover);
2796
2842
  --sk-button-glow-shadow: 0 0 0 transparent;
2843
+ }
2844
+ .sk-button.sk-solid.sk-warning:active:not(:disabled) .sk-button-chrome {
2797
2845
  background-color: var(--sk-button-bg);
2798
2846
  color: var(--sk-button-color-base);
2799
2847
  }
@@ -2805,17 +2853,23 @@
2805
2853
  --sk-button-text: var(--sk-danger-text);
2806
2854
  --sk-kind-color: var(--sk-danger-base);
2807
2855
  --sk-button-border-color: var(--sk-button-border-base);
2856
+ }
2857
+ .sk-button.sk-solid.sk-danger .sk-button-chrome {
2808
2858
  background-color: var(--sk-button-bg);
2809
2859
  color: var(--sk-button-text);
2810
2860
  }
2811
2861
  .sk-button.sk-solid.sk-danger:hover:not(:disabled) {
2812
2862
  --sk-button-border-color: var(--sk-button-border-hover);
2813
2863
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2864
+ }
2865
+ .sk-button.sk-solid.sk-danger:hover:not(:disabled) .sk-button-chrome {
2814
2866
  background-color: var(--sk-button-bg-hover);
2815
2867
  }
2816
2868
  .sk-button.sk-solid.sk-danger:active:not(:disabled) {
2817
2869
  --sk-button-border-color: var(--sk-button-border-hover);
2818
2870
  --sk-button-glow-shadow: 0 0 0 transparent;
2871
+ }
2872
+ .sk-button.sk-solid.sk-danger:active:not(:disabled) .sk-button-chrome {
2819
2873
  background-color: var(--sk-button-bg);
2820
2874
  color: var(--sk-button-color-base);
2821
2875
  }
@@ -2827,17 +2881,23 @@
2827
2881
  --sk-button-text: var(--sk-boulder-text);
2828
2882
  --sk-kind-color: var(--sk-boulder-base);
2829
2883
  --sk-button-border-color: var(--sk-button-border-base);
2884
+ }
2885
+ .sk-button.sk-solid.sk-boulder .sk-button-chrome {
2830
2886
  background-color: var(--sk-button-bg);
2831
2887
  color: var(--sk-button-text);
2832
2888
  }
2833
2889
  .sk-button.sk-solid.sk-boulder:hover:not(:disabled) {
2834
2890
  --sk-button-border-color: var(--sk-button-border-hover);
2835
2891
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2892
+ }
2893
+ .sk-button.sk-solid.sk-boulder:hover:not(:disabled) .sk-button-chrome {
2836
2894
  background-color: var(--sk-button-bg-hover);
2837
2895
  }
2838
2896
  .sk-button.sk-solid.sk-boulder:active:not(:disabled) {
2839
2897
  --sk-button-border-color: var(--sk-button-border-hover);
2840
2898
  --sk-button-glow-shadow: 0 0 0 transparent;
2899
+ }
2900
+ .sk-button.sk-solid.sk-boulder:active:not(:disabled) .sk-button-chrome {
2841
2901
  background-color: var(--sk-button-bg);
2842
2902
  color: var(--sk-button-color-base);
2843
2903
  }
@@ -2849,17 +2909,23 @@
2849
2909
  --sk-button-text: var(--sk-neon-blue-text);
2850
2910
  --sk-kind-color: var(--sk-neon-blue-base);
2851
2911
  --sk-button-border-color: var(--sk-button-border-base);
2912
+ }
2913
+ .sk-button.sk-solid.sk-neon-blue .sk-button-chrome {
2852
2914
  background-color: var(--sk-button-bg);
2853
2915
  color: var(--sk-button-text);
2854
2916
  }
2855
2917
  .sk-button.sk-solid.sk-neon-blue:hover:not(:disabled) {
2856
2918
  --sk-button-border-color: var(--sk-button-border-hover);
2857
2919
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2920
+ }
2921
+ .sk-button.sk-solid.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
2858
2922
  background-color: var(--sk-button-bg-hover);
2859
2923
  }
2860
2924
  .sk-button.sk-solid.sk-neon-blue:active:not(:disabled) {
2861
2925
  --sk-button-border-color: var(--sk-button-border-hover);
2862
2926
  --sk-button-glow-shadow: 0 0 0 transparent;
2927
+ }
2928
+ .sk-button.sk-solid.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
2863
2929
  background-color: var(--sk-button-bg);
2864
2930
  color: var(--sk-button-color-base);
2865
2931
  }
@@ -2871,17 +2937,23 @@
2871
2937
  --sk-button-text: var(--sk-light-blue-text);
2872
2938
  --sk-kind-color: var(--sk-light-blue-base);
2873
2939
  --sk-button-border-color: var(--sk-button-border-base);
2940
+ }
2941
+ .sk-button.sk-solid.sk-light-blue .sk-button-chrome {
2874
2942
  background-color: var(--sk-button-bg);
2875
2943
  color: var(--sk-button-text);
2876
2944
  }
2877
2945
  .sk-button.sk-solid.sk-light-blue:hover:not(:disabled) {
2878
2946
  --sk-button-border-color: var(--sk-button-border-hover);
2879
2947
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2948
+ }
2949
+ .sk-button.sk-solid.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
2880
2950
  background-color: var(--sk-button-bg-hover);
2881
2951
  }
2882
2952
  .sk-button.sk-solid.sk-light-blue:active:not(:disabled) {
2883
2953
  --sk-button-border-color: var(--sk-button-border-hover);
2884
2954
  --sk-button-glow-shadow: 0 0 0 transparent;
2955
+ }
2956
+ .sk-button.sk-solid.sk-light-blue:active:not(:disabled) .sk-button-chrome {
2885
2957
  background-color: var(--sk-button-bg);
2886
2958
  color: var(--sk-button-color-base);
2887
2959
  }
@@ -2893,17 +2965,23 @@
2893
2965
  --sk-button-text: var(--sk-neon-orange-text);
2894
2966
  --sk-kind-color: var(--sk-neon-orange-base);
2895
2967
  --sk-button-border-color: var(--sk-button-border-base);
2968
+ }
2969
+ .sk-button.sk-solid.sk-neon-orange .sk-button-chrome {
2896
2970
  background-color: var(--sk-button-bg);
2897
2971
  color: var(--sk-button-text);
2898
2972
  }
2899
2973
  .sk-button.sk-solid.sk-neon-orange:hover:not(:disabled) {
2900
2974
  --sk-button-border-color: var(--sk-button-border-hover);
2901
2975
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
2976
+ }
2977
+ .sk-button.sk-solid.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
2902
2978
  background-color: var(--sk-button-bg-hover);
2903
2979
  }
2904
2980
  .sk-button.sk-solid.sk-neon-orange:active:not(:disabled) {
2905
2981
  --sk-button-border-color: var(--sk-button-border-hover);
2906
2982
  --sk-button-glow-shadow: 0 0 0 transparent;
2983
+ }
2984
+ .sk-button.sk-solid.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
2907
2985
  background-color: var(--sk-button-bg);
2908
2986
  color: var(--sk-button-color-base);
2909
2987
  }
@@ -2915,17 +2993,23 @@
2915
2993
  --sk-button-text: var(--sk-neon-purple-text);
2916
2994
  --sk-kind-color: var(--sk-neon-purple-base);
2917
2995
  --sk-button-border-color: var(--sk-button-border-base);
2996
+ }
2997
+ .sk-button.sk-solid.sk-neon-purple .sk-button-chrome {
2918
2998
  background-color: var(--sk-button-bg);
2919
2999
  color: var(--sk-button-text);
2920
3000
  }
2921
3001
  .sk-button.sk-solid.sk-neon-purple:hover:not(:disabled) {
2922
3002
  --sk-button-border-color: var(--sk-button-border-hover);
2923
3003
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3004
+ }
3005
+ .sk-button.sk-solid.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
2924
3006
  background-color: var(--sk-button-bg-hover);
2925
3007
  }
2926
3008
  .sk-button.sk-solid.sk-neon-purple:active:not(:disabled) {
2927
3009
  --sk-button-border-color: var(--sk-button-border-hover);
2928
3010
  --sk-button-glow-shadow: 0 0 0 transparent;
3011
+ }
3012
+ .sk-button.sk-solid.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
2929
3013
  background-color: var(--sk-button-bg);
2930
3014
  color: var(--sk-button-color-base);
2931
3015
  }
@@ -2937,17 +3021,23 @@
2937
3021
  --sk-button-text: var(--sk-neon-green-text);
2938
3022
  --sk-kind-color: var(--sk-neon-green-base);
2939
3023
  --sk-button-border-color: var(--sk-button-border-base);
3024
+ }
3025
+ .sk-button.sk-solid.sk-neon-green .sk-button-chrome {
2940
3026
  background-color: var(--sk-button-bg);
2941
3027
  color: var(--sk-button-text);
2942
3028
  }
2943
3029
  .sk-button.sk-solid.sk-neon-green:hover:not(:disabled) {
2944
3030
  --sk-button-border-color: var(--sk-button-border-hover);
2945
3031
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3032
+ }
3033
+ .sk-button.sk-solid.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
2946
3034
  background-color: var(--sk-button-bg-hover);
2947
3035
  }
2948
3036
  .sk-button.sk-solid.sk-neon-green:active:not(:disabled) {
2949
3037
  --sk-button-border-color: var(--sk-button-border-hover);
2950
3038
  --sk-button-glow-shadow: 0 0 0 transparent;
3039
+ }
3040
+ .sk-button.sk-solid.sk-neon-green:active:not(:disabled) .sk-button-chrome {
2951
3041
  background-color: var(--sk-button-bg);
2952
3042
  color: var(--sk-button-color-base);
2953
3043
  }
@@ -2959,17 +3049,23 @@
2959
3049
  --sk-button-text: var(--sk-neon-mint-text);
2960
3050
  --sk-kind-color: var(--sk-neon-mint-base);
2961
3051
  --sk-button-border-color: var(--sk-button-border-base);
3052
+ }
3053
+ .sk-button.sk-solid.sk-neon-mint .sk-button-chrome {
2962
3054
  background-color: var(--sk-button-bg);
2963
3055
  color: var(--sk-button-text);
2964
3056
  }
2965
3057
  .sk-button.sk-solid.sk-neon-mint:hover:not(:disabled) {
2966
3058
  --sk-button-border-color: var(--sk-button-border-hover);
2967
3059
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3060
+ }
3061
+ .sk-button.sk-solid.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
2968
3062
  background-color: var(--sk-button-bg-hover);
2969
3063
  }
2970
3064
  .sk-button.sk-solid.sk-neon-mint:active:not(:disabled) {
2971
3065
  --sk-button-border-color: var(--sk-button-border-hover);
2972
3066
  --sk-button-glow-shadow: 0 0 0 transparent;
3067
+ }
3068
+ .sk-button.sk-solid.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
2973
3069
  background-color: var(--sk-button-bg);
2974
3070
  color: var(--sk-button-color-base);
2975
3071
  }
@@ -2981,17 +3077,23 @@
2981
3077
  --sk-button-text: var(--sk-neon-pink-text);
2982
3078
  --sk-kind-color: var(--sk-neon-pink-base);
2983
3079
  --sk-button-border-color: var(--sk-button-border-base);
3080
+ }
3081
+ .sk-button.sk-solid.sk-neon-pink .sk-button-chrome {
2984
3082
  background-color: var(--sk-button-bg);
2985
3083
  color: var(--sk-button-text);
2986
3084
  }
2987
3085
  .sk-button.sk-solid.sk-neon-pink:hover:not(:disabled) {
2988
3086
  --sk-button-border-color: var(--sk-button-border-hover);
2989
3087
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3088
+ }
3089
+ .sk-button.sk-solid.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
2990
3090
  background-color: var(--sk-button-bg-hover);
2991
3091
  }
2992
3092
  .sk-button.sk-solid.sk-neon-pink:active:not(:disabled) {
2993
3093
  --sk-button-border-color: var(--sk-button-border-hover);
2994
3094
  --sk-button-glow-shadow: 0 0 0 transparent;
3095
+ }
3096
+ .sk-button.sk-solid.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
2995
3097
  background-color: var(--sk-button-bg);
2996
3098
  color: var(--sk-button-color-base);
2997
3099
  }
@@ -3003,17 +3105,23 @@
3003
3105
  --sk-button-text: var(--sk-yellow-text);
3004
3106
  --sk-kind-color: var(--sk-yellow-base);
3005
3107
  --sk-button-border-color: var(--sk-button-border-base);
3108
+ }
3109
+ .sk-button.sk-solid.sk-yellow .sk-button-chrome {
3006
3110
  background-color: var(--sk-button-bg);
3007
3111
  color: var(--sk-button-text);
3008
3112
  }
3009
3113
  .sk-button.sk-solid.sk-yellow:hover:not(:disabled) {
3010
3114
  --sk-button-border-color: var(--sk-button-border-hover);
3011
3115
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3116
+ }
3117
+ .sk-button.sk-solid.sk-yellow:hover:not(:disabled) .sk-button-chrome {
3012
3118
  background-color: var(--sk-button-bg-hover);
3013
3119
  }
3014
3120
  .sk-button.sk-solid.sk-yellow:active:not(:disabled) {
3015
3121
  --sk-button-border-color: var(--sk-button-border-hover);
3016
3122
  --sk-button-glow-shadow: 0 0 0 transparent;
3123
+ }
3124
+ .sk-button.sk-solid.sk-yellow:active:not(:disabled) .sk-button-chrome {
3017
3125
  background-color: var(--sk-button-bg);
3018
3126
  color: var(--sk-button-color-base);
3019
3127
  }
@@ -3025,17 +3133,23 @@
3025
3133
  --sk-button-text: var(--sk-red-text);
3026
3134
  --sk-kind-color: var(--sk-red-base);
3027
3135
  --sk-button-border-color: var(--sk-button-border-base);
3136
+ }
3137
+ .sk-button.sk-solid.sk-red .sk-button-chrome {
3028
3138
  background-color: var(--sk-button-bg);
3029
3139
  color: var(--sk-button-text);
3030
3140
  }
3031
3141
  .sk-button.sk-solid.sk-red:hover:not(:disabled) {
3032
3142
  --sk-button-border-color: var(--sk-button-border-hover);
3033
3143
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3144
+ }
3145
+ .sk-button.sk-solid.sk-red:hover:not(:disabled) .sk-button-chrome {
3034
3146
  background-color: var(--sk-button-bg-hover);
3035
3147
  }
3036
3148
  .sk-button.sk-solid.sk-red:active:not(:disabled) {
3037
3149
  --sk-button-border-color: var(--sk-button-border-hover);
3038
3150
  --sk-button-glow-shadow: 0 0 0 transparent;
3151
+ }
3152
+ .sk-button.sk-solid.sk-red:active:not(:disabled) .sk-button-chrome {
3039
3153
  background-color: var(--sk-button-bg);
3040
3154
  color: var(--sk-button-color-base);
3041
3155
  }
@@ -3047,16 +3161,22 @@
3047
3161
  --sk-button-text: var(--sk-neutral-text);
3048
3162
  --sk-kind-color: var(--sk-neutral-base);
3049
3163
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3164
+ }
3165
+ .sk-button.sk-subtle.sk-neutral .sk-button-chrome {
3050
3166
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3051
3167
  color: var(--sk-button-color-base);
3052
3168
  }
3053
3169
  .sk-button.sk-subtle.sk-neutral:hover:not(:disabled) {
3054
3170
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3171
+ }
3172
+ .sk-button.sk-subtle.sk-neutral:hover:not(:disabled) .sk-button-chrome {
3055
3173
  background-color: var(--sk-button-bg-hover);
3056
3174
  }
3057
3175
  .sk-button.sk-subtle.sk-neutral:active:not(:disabled) {
3058
3176
  --sk-button-border-color: var(--sk-button-border-base);
3059
3177
  --sk-button-glow-shadow: 0 0 0 transparent;
3178
+ }
3179
+ .sk-button.sk-subtle.sk-neutral:active:not(:disabled) .sk-button-chrome {
3060
3180
  background-color: var(--sk-button-bg);
3061
3181
  color: var(--sk-button-text);
3062
3182
  }
@@ -3065,16 +3185,22 @@
3065
3185
  --sk-button-text: var(--sk-primary-text);
3066
3186
  --sk-kind-color: var(--sk-primary-base);
3067
3187
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3188
+ }
3189
+ .sk-button.sk-subtle.sk-primary .sk-button-chrome {
3068
3190
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3069
3191
  color: var(--sk-button-color-base);
3070
3192
  }
3071
3193
  .sk-button.sk-subtle.sk-primary:hover:not(:disabled) {
3072
3194
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3195
+ }
3196
+ .sk-button.sk-subtle.sk-primary:hover:not(:disabled) .sk-button-chrome {
3073
3197
  background-color: var(--sk-button-bg-hover);
3074
3198
  }
3075
3199
  .sk-button.sk-subtle.sk-primary:active:not(:disabled) {
3076
3200
  --sk-button-border-color: var(--sk-button-border-base);
3077
3201
  --sk-button-glow-shadow: 0 0 0 transparent;
3202
+ }
3203
+ .sk-button.sk-subtle.sk-primary:active:not(:disabled) .sk-button-chrome {
3078
3204
  background-color: var(--sk-button-bg);
3079
3205
  color: var(--sk-button-text);
3080
3206
  }
@@ -3083,16 +3209,22 @@
3083
3209
  --sk-button-text: var(--sk-accent-text);
3084
3210
  --sk-kind-color: var(--sk-accent-base);
3085
3211
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3212
+ }
3213
+ .sk-button.sk-subtle.sk-accent .sk-button-chrome {
3086
3214
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3087
3215
  color: var(--sk-button-color-base);
3088
3216
  }
3089
3217
  .sk-button.sk-subtle.sk-accent:hover:not(:disabled) {
3090
3218
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3219
+ }
3220
+ .sk-button.sk-subtle.sk-accent:hover:not(:disabled) .sk-button-chrome {
3091
3221
  background-color: var(--sk-button-bg-hover);
3092
3222
  }
3093
3223
  .sk-button.sk-subtle.sk-accent:active:not(:disabled) {
3094
3224
  --sk-button-border-color: var(--sk-button-border-base);
3095
3225
  --sk-button-glow-shadow: 0 0 0 transparent;
3226
+ }
3227
+ .sk-button.sk-subtle.sk-accent:active:not(:disabled) .sk-button-chrome {
3096
3228
  background-color: var(--sk-button-bg);
3097
3229
  color: var(--sk-button-text);
3098
3230
  }
@@ -3101,16 +3233,22 @@
3101
3233
  --sk-button-text: var(--sk-info-text);
3102
3234
  --sk-kind-color: var(--sk-info-base);
3103
3235
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3236
+ }
3237
+ .sk-button.sk-subtle.sk-info .sk-button-chrome {
3104
3238
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3105
3239
  color: var(--sk-button-color-base);
3106
3240
  }
3107
3241
  .sk-button.sk-subtle.sk-info:hover:not(:disabled) {
3108
3242
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3243
+ }
3244
+ .sk-button.sk-subtle.sk-info:hover:not(:disabled) .sk-button-chrome {
3109
3245
  background-color: var(--sk-button-bg-hover);
3110
3246
  }
3111
3247
  .sk-button.sk-subtle.sk-info:active:not(:disabled) {
3112
3248
  --sk-button-border-color: var(--sk-button-border-base);
3113
3249
  --sk-button-glow-shadow: 0 0 0 transparent;
3250
+ }
3251
+ .sk-button.sk-subtle.sk-info:active:not(:disabled) .sk-button-chrome {
3114
3252
  background-color: var(--sk-button-bg);
3115
3253
  color: var(--sk-button-text);
3116
3254
  }
@@ -3119,16 +3257,22 @@
3119
3257
  --sk-button-text: var(--sk-success-text);
3120
3258
  --sk-kind-color: var(--sk-success-base);
3121
3259
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3260
+ }
3261
+ .sk-button.sk-subtle.sk-success .sk-button-chrome {
3122
3262
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3123
3263
  color: var(--sk-button-color-base);
3124
3264
  }
3125
3265
  .sk-button.sk-subtle.sk-success:hover:not(:disabled) {
3126
3266
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3267
+ }
3268
+ .sk-button.sk-subtle.sk-success:hover:not(:disabled) .sk-button-chrome {
3127
3269
  background-color: var(--sk-button-bg-hover);
3128
3270
  }
3129
3271
  .sk-button.sk-subtle.sk-success:active:not(:disabled) {
3130
3272
  --sk-button-border-color: var(--sk-button-border-base);
3131
3273
  --sk-button-glow-shadow: 0 0 0 transparent;
3274
+ }
3275
+ .sk-button.sk-subtle.sk-success:active:not(:disabled) .sk-button-chrome {
3132
3276
  background-color: var(--sk-button-bg);
3133
3277
  color: var(--sk-button-text);
3134
3278
  }
@@ -3137,16 +3281,22 @@
3137
3281
  --sk-button-text: var(--sk-warning-text);
3138
3282
  --sk-kind-color: var(--sk-warning-base);
3139
3283
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3284
+ }
3285
+ .sk-button.sk-subtle.sk-warning .sk-button-chrome {
3140
3286
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3141
3287
  color: var(--sk-button-color-base);
3142
3288
  }
3143
3289
  .sk-button.sk-subtle.sk-warning:hover:not(:disabled) {
3144
3290
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3291
+ }
3292
+ .sk-button.sk-subtle.sk-warning:hover:not(:disabled) .sk-button-chrome {
3145
3293
  background-color: var(--sk-button-bg-hover);
3146
3294
  }
3147
3295
  .sk-button.sk-subtle.sk-warning:active:not(:disabled) {
3148
3296
  --sk-button-border-color: var(--sk-button-border-base);
3149
3297
  --sk-button-glow-shadow: 0 0 0 transparent;
3298
+ }
3299
+ .sk-button.sk-subtle.sk-warning:active:not(:disabled) .sk-button-chrome {
3150
3300
  background-color: var(--sk-button-bg);
3151
3301
  color: var(--sk-button-text);
3152
3302
  }
@@ -3155,16 +3305,22 @@
3155
3305
  --sk-button-text: var(--sk-danger-text);
3156
3306
  --sk-kind-color: var(--sk-danger-base);
3157
3307
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3308
+ }
3309
+ .sk-button.sk-subtle.sk-danger .sk-button-chrome {
3158
3310
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3159
3311
  color: var(--sk-button-color-base);
3160
3312
  }
3161
3313
  .sk-button.sk-subtle.sk-danger:hover:not(:disabled) {
3162
3314
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3315
+ }
3316
+ .sk-button.sk-subtle.sk-danger:hover:not(:disabled) .sk-button-chrome {
3163
3317
  background-color: var(--sk-button-bg-hover);
3164
3318
  }
3165
3319
  .sk-button.sk-subtle.sk-danger:active:not(:disabled) {
3166
3320
  --sk-button-border-color: var(--sk-button-border-base);
3167
3321
  --sk-button-glow-shadow: 0 0 0 transparent;
3322
+ }
3323
+ .sk-button.sk-subtle.sk-danger:active:not(:disabled) .sk-button-chrome {
3168
3324
  background-color: var(--sk-button-bg);
3169
3325
  color: var(--sk-button-text);
3170
3326
  }
@@ -3173,16 +3329,22 @@
3173
3329
  --sk-button-text: var(--sk-boulder-text);
3174
3330
  --sk-kind-color: var(--sk-boulder-base);
3175
3331
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3332
+ }
3333
+ .sk-button.sk-subtle.sk-boulder .sk-button-chrome {
3176
3334
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3177
3335
  color: var(--sk-button-color-base);
3178
3336
  }
3179
3337
  .sk-button.sk-subtle.sk-boulder:hover:not(:disabled) {
3180
3338
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3339
+ }
3340
+ .sk-button.sk-subtle.sk-boulder:hover:not(:disabled) .sk-button-chrome {
3181
3341
  background-color: var(--sk-button-bg-hover);
3182
3342
  }
3183
3343
  .sk-button.sk-subtle.sk-boulder:active:not(:disabled) {
3184
3344
  --sk-button-border-color: var(--sk-button-border-base);
3185
3345
  --sk-button-glow-shadow: 0 0 0 transparent;
3346
+ }
3347
+ .sk-button.sk-subtle.sk-boulder:active:not(:disabled) .sk-button-chrome {
3186
3348
  background-color: var(--sk-button-bg);
3187
3349
  color: var(--sk-button-text);
3188
3350
  }
@@ -3191,16 +3353,22 @@
3191
3353
  --sk-button-text: var(--sk-neon-blue-text);
3192
3354
  --sk-kind-color: var(--sk-neon-blue-base);
3193
3355
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3356
+ }
3357
+ .sk-button.sk-subtle.sk-neon-blue .sk-button-chrome {
3194
3358
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3195
3359
  color: var(--sk-button-color-base);
3196
3360
  }
3197
3361
  .sk-button.sk-subtle.sk-neon-blue:hover:not(:disabled) {
3198
3362
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3363
+ }
3364
+ .sk-button.sk-subtle.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
3199
3365
  background-color: var(--sk-button-bg-hover);
3200
3366
  }
3201
3367
  .sk-button.sk-subtle.sk-neon-blue:active:not(:disabled) {
3202
3368
  --sk-button-border-color: var(--sk-button-border-base);
3203
3369
  --sk-button-glow-shadow: 0 0 0 transparent;
3370
+ }
3371
+ .sk-button.sk-subtle.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
3204
3372
  background-color: var(--sk-button-bg);
3205
3373
  color: var(--sk-button-text);
3206
3374
  }
@@ -3209,16 +3377,22 @@
3209
3377
  --sk-button-text: var(--sk-light-blue-text);
3210
3378
  --sk-kind-color: var(--sk-light-blue-base);
3211
3379
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3380
+ }
3381
+ .sk-button.sk-subtle.sk-light-blue .sk-button-chrome {
3212
3382
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3213
3383
  color: var(--sk-button-color-base);
3214
3384
  }
3215
3385
  .sk-button.sk-subtle.sk-light-blue:hover:not(:disabled) {
3216
3386
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3387
+ }
3388
+ .sk-button.sk-subtle.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
3217
3389
  background-color: var(--sk-button-bg-hover);
3218
3390
  }
3219
3391
  .sk-button.sk-subtle.sk-light-blue:active:not(:disabled) {
3220
3392
  --sk-button-border-color: var(--sk-button-border-base);
3221
3393
  --sk-button-glow-shadow: 0 0 0 transparent;
3394
+ }
3395
+ .sk-button.sk-subtle.sk-light-blue:active:not(:disabled) .sk-button-chrome {
3222
3396
  background-color: var(--sk-button-bg);
3223
3397
  color: var(--sk-button-text);
3224
3398
  }
@@ -3227,16 +3401,22 @@
3227
3401
  --sk-button-text: var(--sk-neon-orange-text);
3228
3402
  --sk-kind-color: var(--sk-neon-orange-base);
3229
3403
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3404
+ }
3405
+ .sk-button.sk-subtle.sk-neon-orange .sk-button-chrome {
3230
3406
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3231
3407
  color: var(--sk-button-color-base);
3232
3408
  }
3233
3409
  .sk-button.sk-subtle.sk-neon-orange:hover:not(:disabled) {
3234
3410
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3411
+ }
3412
+ .sk-button.sk-subtle.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
3235
3413
  background-color: var(--sk-button-bg-hover);
3236
3414
  }
3237
3415
  .sk-button.sk-subtle.sk-neon-orange:active:not(:disabled) {
3238
3416
  --sk-button-border-color: var(--sk-button-border-base);
3239
3417
  --sk-button-glow-shadow: 0 0 0 transparent;
3418
+ }
3419
+ .sk-button.sk-subtle.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
3240
3420
  background-color: var(--sk-button-bg);
3241
3421
  color: var(--sk-button-text);
3242
3422
  }
@@ -3245,16 +3425,22 @@
3245
3425
  --sk-button-text: var(--sk-neon-purple-text);
3246
3426
  --sk-kind-color: var(--sk-neon-purple-base);
3247
3427
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3428
+ }
3429
+ .sk-button.sk-subtle.sk-neon-purple .sk-button-chrome {
3248
3430
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3249
3431
  color: var(--sk-button-color-base);
3250
3432
  }
3251
3433
  .sk-button.sk-subtle.sk-neon-purple:hover:not(:disabled) {
3252
3434
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3435
+ }
3436
+ .sk-button.sk-subtle.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
3253
3437
  background-color: var(--sk-button-bg-hover);
3254
3438
  }
3255
3439
  .sk-button.sk-subtle.sk-neon-purple:active:not(:disabled) {
3256
3440
  --sk-button-border-color: var(--sk-button-border-base);
3257
3441
  --sk-button-glow-shadow: 0 0 0 transparent;
3442
+ }
3443
+ .sk-button.sk-subtle.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
3258
3444
  background-color: var(--sk-button-bg);
3259
3445
  color: var(--sk-button-text);
3260
3446
  }
@@ -3263,16 +3449,22 @@
3263
3449
  --sk-button-text: var(--sk-neon-green-text);
3264
3450
  --sk-kind-color: var(--sk-neon-green-base);
3265
3451
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3452
+ }
3453
+ .sk-button.sk-subtle.sk-neon-green .sk-button-chrome {
3266
3454
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3267
3455
  color: var(--sk-button-color-base);
3268
3456
  }
3269
3457
  .sk-button.sk-subtle.sk-neon-green:hover:not(:disabled) {
3270
3458
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3459
+ }
3460
+ .sk-button.sk-subtle.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
3271
3461
  background-color: var(--sk-button-bg-hover);
3272
3462
  }
3273
3463
  .sk-button.sk-subtle.sk-neon-green:active:not(:disabled) {
3274
3464
  --sk-button-border-color: var(--sk-button-border-base);
3275
3465
  --sk-button-glow-shadow: 0 0 0 transparent;
3466
+ }
3467
+ .sk-button.sk-subtle.sk-neon-green:active:not(:disabled) .sk-button-chrome {
3276
3468
  background-color: var(--sk-button-bg);
3277
3469
  color: var(--sk-button-text);
3278
3470
  }
@@ -3281,16 +3473,22 @@
3281
3473
  --sk-button-text: var(--sk-neon-mint-text);
3282
3474
  --sk-kind-color: var(--sk-neon-mint-base);
3283
3475
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3476
+ }
3477
+ .sk-button.sk-subtle.sk-neon-mint .sk-button-chrome {
3284
3478
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3285
3479
  color: var(--sk-button-color-base);
3286
3480
  }
3287
3481
  .sk-button.sk-subtle.sk-neon-mint:hover:not(:disabled) {
3288
3482
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3483
+ }
3484
+ .sk-button.sk-subtle.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
3289
3485
  background-color: var(--sk-button-bg-hover);
3290
3486
  }
3291
3487
  .sk-button.sk-subtle.sk-neon-mint:active:not(:disabled) {
3292
3488
  --sk-button-border-color: var(--sk-button-border-base);
3293
3489
  --sk-button-glow-shadow: 0 0 0 transparent;
3490
+ }
3491
+ .sk-button.sk-subtle.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
3294
3492
  background-color: var(--sk-button-bg);
3295
3493
  color: var(--sk-button-text);
3296
3494
  }
@@ -3299,16 +3497,22 @@
3299
3497
  --sk-button-text: var(--sk-neon-pink-text);
3300
3498
  --sk-kind-color: var(--sk-neon-pink-base);
3301
3499
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3500
+ }
3501
+ .sk-button.sk-subtle.sk-neon-pink .sk-button-chrome {
3302
3502
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3303
3503
  color: var(--sk-button-color-base);
3304
3504
  }
3305
3505
  .sk-button.sk-subtle.sk-neon-pink:hover:not(:disabled) {
3306
3506
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3507
+ }
3508
+ .sk-button.sk-subtle.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
3307
3509
  background-color: var(--sk-button-bg-hover);
3308
3510
  }
3309
3511
  .sk-button.sk-subtle.sk-neon-pink:active:not(:disabled) {
3310
3512
  --sk-button-border-color: var(--sk-button-border-base);
3311
3513
  --sk-button-glow-shadow: 0 0 0 transparent;
3514
+ }
3515
+ .sk-button.sk-subtle.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
3312
3516
  background-color: var(--sk-button-bg);
3313
3517
  color: var(--sk-button-text);
3314
3518
  }
@@ -3317,16 +3521,22 @@
3317
3521
  --sk-button-text: var(--sk-yellow-text);
3318
3522
  --sk-kind-color: var(--sk-yellow-base);
3319
3523
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3524
+ }
3525
+ .sk-button.sk-subtle.sk-yellow .sk-button-chrome {
3320
3526
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3321
3527
  color: var(--sk-button-color-base);
3322
3528
  }
3323
3529
  .sk-button.sk-subtle.sk-yellow:hover:not(:disabled) {
3324
3530
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3531
+ }
3532
+ .sk-button.sk-subtle.sk-yellow:hover:not(:disabled) .sk-button-chrome {
3325
3533
  background-color: var(--sk-button-bg-hover);
3326
3534
  }
3327
3535
  .sk-button.sk-subtle.sk-yellow:active:not(:disabled) {
3328
3536
  --sk-button-border-color: var(--sk-button-border-base);
3329
3537
  --sk-button-glow-shadow: 0 0 0 transparent;
3538
+ }
3539
+ .sk-button.sk-subtle.sk-yellow:active:not(:disabled) .sk-button-chrome {
3330
3540
  background-color: var(--sk-button-bg);
3331
3541
  color: var(--sk-button-text);
3332
3542
  }
@@ -3335,20 +3545,26 @@
3335
3545
  --sk-button-text: var(--sk-red-text);
3336
3546
  --sk-kind-color: var(--sk-red-base);
3337
3547
  --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
3548
+ }
3549
+ .sk-button.sk-subtle.sk-red .sk-button-chrome {
3338
3550
  background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
3339
3551
  color: var(--sk-button-color-base);
3340
3552
  }
3341
3553
  .sk-button.sk-subtle.sk-red:hover:not(:disabled) {
3342
3554
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3555
+ }
3556
+ .sk-button.sk-subtle.sk-red:hover:not(:disabled) .sk-button-chrome {
3343
3557
  background-color: var(--sk-button-bg-hover);
3344
3558
  }
3345
3559
  .sk-button.sk-subtle.sk-red:active:not(:disabled) {
3346
3560
  --sk-button-border-color: var(--sk-button-border-base);
3347
3561
  --sk-button-glow-shadow: 0 0 0 transparent;
3562
+ }
3563
+ .sk-button.sk-subtle.sk-red:active:not(:disabled) .sk-button-chrome {
3348
3564
  background-color: var(--sk-button-bg);
3349
3565
  color: var(--sk-button-text);
3350
3566
  }
3351
- .sk-button.sk-subtle:disabled, .sk-button.sk-subtle.sk-loading {
3567
+ .sk-button.sk-subtle:disabled .sk-button-chrome, .sk-button.sk-subtle.sk-loading .sk-button-chrome {
3352
3568
  background-color: oklch(from var(--sk-button-bg) l c h/0.45);
3353
3569
  }
3354
3570
  .sk-button.sk-subtle.sk-neutral {
@@ -3356,26 +3572,31 @@
3356
3572
  from color-mix(in oklch, var(--sk-button-border-base), white 50%)
3357
3573
  l c h / var(--sk-button-subtle-border-opacity)
3358
3574
  );
3359
- color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
3360
3575
  }
3361
- .sk-button.sk-ghost {
3362
- border-color: transparent;
3576
+ .sk-button.sk-subtle.sk-neutral .sk-button-chrome {
3577
+ color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
3363
3578
  }
3364
3579
  .sk-button.sk-ghost.sk-neutral {
3365
3580
  --sk-button-color-base: var(--sk-neutral-base);
3366
3581
  --sk-button-text: var(--sk-neutral-text);
3367
3582
  --sk-kind-color: var(--sk-neutral-base);
3368
3583
  --sk-button-border-color: transparent;
3584
+ }
3585
+ .sk-button.sk-ghost.sk-neutral .sk-button-chrome {
3369
3586
  background-color: transparent;
3370
3587
  color: var(--sk-button-color-base);
3371
3588
  }
3372
3589
  .sk-button.sk-ghost.sk-neutral:hover:not(:disabled) {
3373
3590
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3591
+ }
3592
+ .sk-button.sk-ghost.sk-neutral:hover:not(:disabled) .sk-button-chrome {
3374
3593
  background-color: var(--sk-button-bg-hover);
3375
3594
  }
3376
3595
  .sk-button.sk-ghost.sk-neutral:active:not(:disabled) {
3377
3596
  --sk-button-border-color: var(--sk-button-border-hover);
3378
3597
  --sk-button-glow-shadow: 0 0 0 transparent;
3598
+ }
3599
+ .sk-button.sk-ghost.sk-neutral:active:not(:disabled) .sk-button-chrome {
3379
3600
  background-color: var(--sk-button-bg-hover);
3380
3601
  color: var(--sk-button-text);
3381
3602
  }
@@ -3384,16 +3605,22 @@
3384
3605
  --sk-button-text: var(--sk-primary-text);
3385
3606
  --sk-kind-color: var(--sk-primary-base);
3386
3607
  --sk-button-border-color: transparent;
3608
+ }
3609
+ .sk-button.sk-ghost.sk-primary .sk-button-chrome {
3387
3610
  background-color: transparent;
3388
3611
  color: var(--sk-button-color-base);
3389
3612
  }
3390
3613
  .sk-button.sk-ghost.sk-primary:hover:not(:disabled) {
3391
3614
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3615
+ }
3616
+ .sk-button.sk-ghost.sk-primary:hover:not(:disabled) .sk-button-chrome {
3392
3617
  background-color: var(--sk-button-bg-hover);
3393
3618
  }
3394
3619
  .sk-button.sk-ghost.sk-primary:active:not(:disabled) {
3395
3620
  --sk-button-border-color: var(--sk-button-border-hover);
3396
3621
  --sk-button-glow-shadow: 0 0 0 transparent;
3622
+ }
3623
+ .sk-button.sk-ghost.sk-primary:active:not(:disabled) .sk-button-chrome {
3397
3624
  background-color: var(--sk-button-bg-hover);
3398
3625
  color: var(--sk-button-text);
3399
3626
  }
@@ -3402,16 +3629,22 @@
3402
3629
  --sk-button-text: var(--sk-accent-text);
3403
3630
  --sk-kind-color: var(--sk-accent-base);
3404
3631
  --sk-button-border-color: transparent;
3632
+ }
3633
+ .sk-button.sk-ghost.sk-accent .sk-button-chrome {
3405
3634
  background-color: transparent;
3406
3635
  color: var(--sk-button-color-base);
3407
3636
  }
3408
3637
  .sk-button.sk-ghost.sk-accent:hover:not(:disabled) {
3409
3638
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3639
+ }
3640
+ .sk-button.sk-ghost.sk-accent:hover:not(:disabled) .sk-button-chrome {
3410
3641
  background-color: var(--sk-button-bg-hover);
3411
3642
  }
3412
3643
  .sk-button.sk-ghost.sk-accent:active:not(:disabled) {
3413
3644
  --sk-button-border-color: var(--sk-button-border-hover);
3414
3645
  --sk-button-glow-shadow: 0 0 0 transparent;
3646
+ }
3647
+ .sk-button.sk-ghost.sk-accent:active:not(:disabled) .sk-button-chrome {
3415
3648
  background-color: var(--sk-button-bg-hover);
3416
3649
  color: var(--sk-button-text);
3417
3650
  }
@@ -3420,16 +3653,22 @@
3420
3653
  --sk-button-text: var(--sk-info-text);
3421
3654
  --sk-kind-color: var(--sk-info-base);
3422
3655
  --sk-button-border-color: transparent;
3656
+ }
3657
+ .sk-button.sk-ghost.sk-info .sk-button-chrome {
3423
3658
  background-color: transparent;
3424
3659
  color: var(--sk-button-color-base);
3425
3660
  }
3426
3661
  .sk-button.sk-ghost.sk-info:hover:not(:disabled) {
3427
3662
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3663
+ }
3664
+ .sk-button.sk-ghost.sk-info:hover:not(:disabled) .sk-button-chrome {
3428
3665
  background-color: var(--sk-button-bg-hover);
3429
3666
  }
3430
3667
  .sk-button.sk-ghost.sk-info:active:not(:disabled) {
3431
3668
  --sk-button-border-color: var(--sk-button-border-hover);
3432
3669
  --sk-button-glow-shadow: 0 0 0 transparent;
3670
+ }
3671
+ .sk-button.sk-ghost.sk-info:active:not(:disabled) .sk-button-chrome {
3433
3672
  background-color: var(--sk-button-bg-hover);
3434
3673
  color: var(--sk-button-text);
3435
3674
  }
@@ -3438,16 +3677,22 @@
3438
3677
  --sk-button-text: var(--sk-success-text);
3439
3678
  --sk-kind-color: var(--sk-success-base);
3440
3679
  --sk-button-border-color: transparent;
3680
+ }
3681
+ .sk-button.sk-ghost.sk-success .sk-button-chrome {
3441
3682
  background-color: transparent;
3442
3683
  color: var(--sk-button-color-base);
3443
3684
  }
3444
3685
  .sk-button.sk-ghost.sk-success:hover:not(:disabled) {
3445
3686
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3687
+ }
3688
+ .sk-button.sk-ghost.sk-success:hover:not(:disabled) .sk-button-chrome {
3446
3689
  background-color: var(--sk-button-bg-hover);
3447
3690
  }
3448
3691
  .sk-button.sk-ghost.sk-success:active:not(:disabled) {
3449
3692
  --sk-button-border-color: var(--sk-button-border-hover);
3450
3693
  --sk-button-glow-shadow: 0 0 0 transparent;
3694
+ }
3695
+ .sk-button.sk-ghost.sk-success:active:not(:disabled) .sk-button-chrome {
3451
3696
  background-color: var(--sk-button-bg-hover);
3452
3697
  color: var(--sk-button-text);
3453
3698
  }
@@ -3456,16 +3701,22 @@
3456
3701
  --sk-button-text: var(--sk-warning-text);
3457
3702
  --sk-kind-color: var(--sk-warning-base);
3458
3703
  --sk-button-border-color: transparent;
3704
+ }
3705
+ .sk-button.sk-ghost.sk-warning .sk-button-chrome {
3459
3706
  background-color: transparent;
3460
3707
  color: var(--sk-button-color-base);
3461
3708
  }
3462
3709
  .sk-button.sk-ghost.sk-warning:hover:not(:disabled) {
3463
3710
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3711
+ }
3712
+ .sk-button.sk-ghost.sk-warning:hover:not(:disabled) .sk-button-chrome {
3464
3713
  background-color: var(--sk-button-bg-hover);
3465
3714
  }
3466
3715
  .sk-button.sk-ghost.sk-warning:active:not(:disabled) {
3467
3716
  --sk-button-border-color: var(--sk-button-border-hover);
3468
3717
  --sk-button-glow-shadow: 0 0 0 transparent;
3718
+ }
3719
+ .sk-button.sk-ghost.sk-warning:active:not(:disabled) .sk-button-chrome {
3469
3720
  background-color: var(--sk-button-bg-hover);
3470
3721
  color: var(--sk-button-text);
3471
3722
  }
@@ -3474,16 +3725,22 @@
3474
3725
  --sk-button-text: var(--sk-danger-text);
3475
3726
  --sk-kind-color: var(--sk-danger-base);
3476
3727
  --sk-button-border-color: transparent;
3728
+ }
3729
+ .sk-button.sk-ghost.sk-danger .sk-button-chrome {
3477
3730
  background-color: transparent;
3478
3731
  color: var(--sk-button-color-base);
3479
3732
  }
3480
3733
  .sk-button.sk-ghost.sk-danger:hover:not(:disabled) {
3481
3734
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3735
+ }
3736
+ .sk-button.sk-ghost.sk-danger:hover:not(:disabled) .sk-button-chrome {
3482
3737
  background-color: var(--sk-button-bg-hover);
3483
3738
  }
3484
3739
  .sk-button.sk-ghost.sk-danger:active:not(:disabled) {
3485
3740
  --sk-button-border-color: var(--sk-button-border-hover);
3486
3741
  --sk-button-glow-shadow: 0 0 0 transparent;
3742
+ }
3743
+ .sk-button.sk-ghost.sk-danger:active:not(:disabled) .sk-button-chrome {
3487
3744
  background-color: var(--sk-button-bg-hover);
3488
3745
  color: var(--sk-button-text);
3489
3746
  }
@@ -3492,16 +3749,22 @@
3492
3749
  --sk-button-text: var(--sk-boulder-text);
3493
3750
  --sk-kind-color: var(--sk-boulder-base);
3494
3751
  --sk-button-border-color: transparent;
3752
+ }
3753
+ .sk-button.sk-ghost.sk-boulder .sk-button-chrome {
3495
3754
  background-color: transparent;
3496
3755
  color: var(--sk-button-color-base);
3497
3756
  }
3498
3757
  .sk-button.sk-ghost.sk-boulder:hover:not(:disabled) {
3499
3758
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3759
+ }
3760
+ .sk-button.sk-ghost.sk-boulder:hover:not(:disabled) .sk-button-chrome {
3500
3761
  background-color: var(--sk-button-bg-hover);
3501
3762
  }
3502
3763
  .sk-button.sk-ghost.sk-boulder:active:not(:disabled) {
3503
3764
  --sk-button-border-color: var(--sk-button-border-hover);
3504
3765
  --sk-button-glow-shadow: 0 0 0 transparent;
3766
+ }
3767
+ .sk-button.sk-ghost.sk-boulder:active:not(:disabled) .sk-button-chrome {
3505
3768
  background-color: var(--sk-button-bg-hover);
3506
3769
  color: var(--sk-button-text);
3507
3770
  }
@@ -3510,16 +3773,22 @@
3510
3773
  --sk-button-text: var(--sk-neon-blue-text);
3511
3774
  --sk-kind-color: var(--sk-neon-blue-base);
3512
3775
  --sk-button-border-color: transparent;
3776
+ }
3777
+ .sk-button.sk-ghost.sk-neon-blue .sk-button-chrome {
3513
3778
  background-color: transparent;
3514
3779
  color: var(--sk-button-color-base);
3515
3780
  }
3516
3781
  .sk-button.sk-ghost.sk-neon-blue:hover:not(:disabled) {
3517
3782
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3783
+ }
3784
+ .sk-button.sk-ghost.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
3518
3785
  background-color: var(--sk-button-bg-hover);
3519
3786
  }
3520
3787
  .sk-button.sk-ghost.sk-neon-blue:active:not(:disabled) {
3521
3788
  --sk-button-border-color: var(--sk-button-border-hover);
3522
3789
  --sk-button-glow-shadow: 0 0 0 transparent;
3790
+ }
3791
+ .sk-button.sk-ghost.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
3523
3792
  background-color: var(--sk-button-bg-hover);
3524
3793
  color: var(--sk-button-text);
3525
3794
  }
@@ -3528,16 +3797,22 @@
3528
3797
  --sk-button-text: var(--sk-light-blue-text);
3529
3798
  --sk-kind-color: var(--sk-light-blue-base);
3530
3799
  --sk-button-border-color: transparent;
3800
+ }
3801
+ .sk-button.sk-ghost.sk-light-blue .sk-button-chrome {
3531
3802
  background-color: transparent;
3532
3803
  color: var(--sk-button-color-base);
3533
3804
  }
3534
3805
  .sk-button.sk-ghost.sk-light-blue:hover:not(:disabled) {
3535
3806
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3807
+ }
3808
+ .sk-button.sk-ghost.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
3536
3809
  background-color: var(--sk-button-bg-hover);
3537
3810
  }
3538
3811
  .sk-button.sk-ghost.sk-light-blue:active:not(:disabled) {
3539
3812
  --sk-button-border-color: var(--sk-button-border-hover);
3540
3813
  --sk-button-glow-shadow: 0 0 0 transparent;
3814
+ }
3815
+ .sk-button.sk-ghost.sk-light-blue:active:not(:disabled) .sk-button-chrome {
3541
3816
  background-color: var(--sk-button-bg-hover);
3542
3817
  color: var(--sk-button-text);
3543
3818
  }
@@ -3546,16 +3821,22 @@
3546
3821
  --sk-button-text: var(--sk-neon-orange-text);
3547
3822
  --sk-kind-color: var(--sk-neon-orange-base);
3548
3823
  --sk-button-border-color: transparent;
3824
+ }
3825
+ .sk-button.sk-ghost.sk-neon-orange .sk-button-chrome {
3549
3826
  background-color: transparent;
3550
3827
  color: var(--sk-button-color-base);
3551
3828
  }
3552
3829
  .sk-button.sk-ghost.sk-neon-orange:hover:not(:disabled) {
3553
3830
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3831
+ }
3832
+ .sk-button.sk-ghost.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
3554
3833
  background-color: var(--sk-button-bg-hover);
3555
3834
  }
3556
3835
  .sk-button.sk-ghost.sk-neon-orange:active:not(:disabled) {
3557
3836
  --sk-button-border-color: var(--sk-button-border-hover);
3558
3837
  --sk-button-glow-shadow: 0 0 0 transparent;
3838
+ }
3839
+ .sk-button.sk-ghost.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
3559
3840
  background-color: var(--sk-button-bg-hover);
3560
3841
  color: var(--sk-button-text);
3561
3842
  }
@@ -3564,16 +3845,22 @@
3564
3845
  --sk-button-text: var(--sk-neon-purple-text);
3565
3846
  --sk-kind-color: var(--sk-neon-purple-base);
3566
3847
  --sk-button-border-color: transparent;
3848
+ }
3849
+ .sk-button.sk-ghost.sk-neon-purple .sk-button-chrome {
3567
3850
  background-color: transparent;
3568
3851
  color: var(--sk-button-color-base);
3569
3852
  }
3570
3853
  .sk-button.sk-ghost.sk-neon-purple:hover:not(:disabled) {
3571
3854
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3855
+ }
3856
+ .sk-button.sk-ghost.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
3572
3857
  background-color: var(--sk-button-bg-hover);
3573
3858
  }
3574
3859
  .sk-button.sk-ghost.sk-neon-purple:active:not(:disabled) {
3575
3860
  --sk-button-border-color: var(--sk-button-border-hover);
3576
3861
  --sk-button-glow-shadow: 0 0 0 transparent;
3862
+ }
3863
+ .sk-button.sk-ghost.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
3577
3864
  background-color: var(--sk-button-bg-hover);
3578
3865
  color: var(--sk-button-text);
3579
3866
  }
@@ -3582,16 +3869,22 @@
3582
3869
  --sk-button-text: var(--sk-neon-green-text);
3583
3870
  --sk-kind-color: var(--sk-neon-green-base);
3584
3871
  --sk-button-border-color: transparent;
3872
+ }
3873
+ .sk-button.sk-ghost.sk-neon-green .sk-button-chrome {
3585
3874
  background-color: transparent;
3586
3875
  color: var(--sk-button-color-base);
3587
3876
  }
3588
3877
  .sk-button.sk-ghost.sk-neon-green:hover:not(:disabled) {
3589
3878
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3879
+ }
3880
+ .sk-button.sk-ghost.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
3590
3881
  background-color: var(--sk-button-bg-hover);
3591
3882
  }
3592
3883
  .sk-button.sk-ghost.sk-neon-green:active:not(:disabled) {
3593
3884
  --sk-button-border-color: var(--sk-button-border-hover);
3594
3885
  --sk-button-glow-shadow: 0 0 0 transparent;
3886
+ }
3887
+ .sk-button.sk-ghost.sk-neon-green:active:not(:disabled) .sk-button-chrome {
3595
3888
  background-color: var(--sk-button-bg-hover);
3596
3889
  color: var(--sk-button-text);
3597
3890
  }
@@ -3600,16 +3893,22 @@
3600
3893
  --sk-button-text: var(--sk-neon-mint-text);
3601
3894
  --sk-kind-color: var(--sk-neon-mint-base);
3602
3895
  --sk-button-border-color: transparent;
3896
+ }
3897
+ .sk-button.sk-ghost.sk-neon-mint .sk-button-chrome {
3603
3898
  background-color: transparent;
3604
3899
  color: var(--sk-button-color-base);
3605
3900
  }
3606
3901
  .sk-button.sk-ghost.sk-neon-mint:hover:not(:disabled) {
3607
3902
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3903
+ }
3904
+ .sk-button.sk-ghost.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
3608
3905
  background-color: var(--sk-button-bg-hover);
3609
3906
  }
3610
3907
  .sk-button.sk-ghost.sk-neon-mint:active:not(:disabled) {
3611
3908
  --sk-button-border-color: var(--sk-button-border-hover);
3612
3909
  --sk-button-glow-shadow: 0 0 0 transparent;
3910
+ }
3911
+ .sk-button.sk-ghost.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
3613
3912
  background-color: var(--sk-button-bg-hover);
3614
3913
  color: var(--sk-button-text);
3615
3914
  }
@@ -3618,16 +3917,22 @@
3618
3917
  --sk-button-text: var(--sk-neon-pink-text);
3619
3918
  --sk-kind-color: var(--sk-neon-pink-base);
3620
3919
  --sk-button-border-color: transparent;
3920
+ }
3921
+ .sk-button.sk-ghost.sk-neon-pink .sk-button-chrome {
3621
3922
  background-color: transparent;
3622
3923
  color: var(--sk-button-color-base);
3623
3924
  }
3624
3925
  .sk-button.sk-ghost.sk-neon-pink:hover:not(:disabled) {
3625
3926
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3927
+ }
3928
+ .sk-button.sk-ghost.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
3626
3929
  background-color: var(--sk-button-bg-hover);
3627
3930
  }
3628
3931
  .sk-button.sk-ghost.sk-neon-pink:active:not(:disabled) {
3629
3932
  --sk-button-border-color: var(--sk-button-border-hover);
3630
3933
  --sk-button-glow-shadow: 0 0 0 transparent;
3934
+ }
3935
+ .sk-button.sk-ghost.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
3631
3936
  background-color: var(--sk-button-bg-hover);
3632
3937
  color: var(--sk-button-text);
3633
3938
  }
@@ -3636,16 +3941,22 @@
3636
3941
  --sk-button-text: var(--sk-yellow-text);
3637
3942
  --sk-kind-color: var(--sk-yellow-base);
3638
3943
  --sk-button-border-color: transparent;
3944
+ }
3945
+ .sk-button.sk-ghost.sk-yellow .sk-button-chrome {
3639
3946
  background-color: transparent;
3640
3947
  color: var(--sk-button-color-base);
3641
3948
  }
3642
3949
  .sk-button.sk-ghost.sk-yellow:hover:not(:disabled) {
3643
3950
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3951
+ }
3952
+ .sk-button.sk-ghost.sk-yellow:hover:not(:disabled) .sk-button-chrome {
3644
3953
  background-color: var(--sk-button-bg-hover);
3645
3954
  }
3646
3955
  .sk-button.sk-ghost.sk-yellow:active:not(:disabled) {
3647
3956
  --sk-button-border-color: var(--sk-button-border-hover);
3648
3957
  --sk-button-glow-shadow: 0 0 0 transparent;
3958
+ }
3959
+ .sk-button.sk-ghost.sk-yellow:active:not(:disabled) .sk-button-chrome {
3649
3960
  background-color: var(--sk-button-bg-hover);
3650
3961
  color: var(--sk-button-text);
3651
3962
  }
@@ -3654,28 +3965,35 @@
3654
3965
  --sk-button-text: var(--sk-red-text);
3655
3966
  --sk-kind-color: var(--sk-red-base);
3656
3967
  --sk-button-border-color: transparent;
3968
+ }
3969
+ .sk-button.sk-ghost.sk-red .sk-button-chrome {
3657
3970
  background-color: transparent;
3658
3971
  color: var(--sk-button-color-base);
3659
3972
  }
3660
3973
  .sk-button.sk-ghost.sk-red:hover:not(:disabled) {
3661
3974
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
3975
+ }
3976
+ .sk-button.sk-ghost.sk-red:hover:not(:disabled) .sk-button-chrome {
3662
3977
  background-color: var(--sk-button-bg-hover);
3663
3978
  }
3664
3979
  .sk-button.sk-ghost.sk-red:active:not(:disabled) {
3665
3980
  --sk-button-border-color: var(--sk-button-border-hover);
3666
3981
  --sk-button-glow-shadow: 0 0 0 transparent;
3982
+ }
3983
+ .sk-button.sk-ghost.sk-red:active:not(:disabled) .sk-button-chrome {
3667
3984
  background-color: var(--sk-button-bg-hover);
3668
3985
  color: var(--sk-button-text);
3669
3986
  }
3670
- .sk-button.sk-ghost.sk-neutral {
3987
+ .sk-button.sk-ghost.sk-neutral .sk-button-chrome {
3671
3988
  color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
3672
3989
  }
3673
3990
  .sk-button.sk-link {
3674
- border-color: transparent;
3675
- padding-left: 0;
3676
- padding-right: 0;
3991
+ --sk-button-current-padding-x: 0;
3992
+ }
3993
+ .sk-button.sk-link .sk-button-chrome {
3677
3994
  text-decoration: underline;
3678
3995
  text-underline-offset: 2px;
3996
+ border-color: transparent;
3679
3997
  }
3680
3998
  .sk-button.sk-link.sk-neutral {
3681
3999
  --sk-button-color-base: var(--sk-neutral-base);
@@ -3684,17 +4002,19 @@
3684
4002
  --sk-button-radius-factor: 10;
3685
4003
  --sk-button-border-width: 0;
3686
4004
  --sk-button-border-color: transparent;
4005
+ }
4006
+ .sk-button.sk-link.sk-neutral .sk-button-chrome {
3687
4007
  background-color: transparent;
3688
4008
  color: var(--sk-button-color-base);
3689
4009
  text-decoration: none;
3690
4010
  border: none;
3691
4011
  }
3692
- .sk-button.sk-link.sk-neutral:hover:not(:disabled) {
4012
+ .sk-button.sk-link.sk-neutral:hover:not(:disabled) .sk-button-chrome {
3693
4013
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3694
4014
  text-decoration-color: var(--sk-button-text);
3695
4015
  text-decoration: underline;
3696
4016
  }
3697
- .sk-button.sk-link.sk-neutral:active:not(:disabled) {
4017
+ .sk-button.sk-link.sk-neutral:active:not(:disabled) .sk-button-chrome {
3698
4018
  color: var(--sk-button-text);
3699
4019
  text-decoration-color: var(--sk-button-border-hover);
3700
4020
  text-decoration: underline;
@@ -3706,17 +4026,19 @@
3706
4026
  --sk-button-radius-factor: 10;
3707
4027
  --sk-button-border-width: 0;
3708
4028
  --sk-button-border-color: transparent;
4029
+ }
4030
+ .sk-button.sk-link.sk-primary .sk-button-chrome {
3709
4031
  background-color: transparent;
3710
4032
  color: var(--sk-button-color-base);
3711
4033
  text-decoration: none;
3712
4034
  border: none;
3713
4035
  }
3714
- .sk-button.sk-link.sk-primary:hover:not(:disabled) {
4036
+ .sk-button.sk-link.sk-primary:hover:not(:disabled) .sk-button-chrome {
3715
4037
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3716
4038
  text-decoration-color: var(--sk-button-text);
3717
4039
  text-decoration: underline;
3718
4040
  }
3719
- .sk-button.sk-link.sk-primary:active:not(:disabled) {
4041
+ .sk-button.sk-link.sk-primary:active:not(:disabled) .sk-button-chrome {
3720
4042
  color: var(--sk-button-text);
3721
4043
  text-decoration-color: var(--sk-button-border-hover);
3722
4044
  text-decoration: underline;
@@ -3728,17 +4050,19 @@
3728
4050
  --sk-button-radius-factor: 10;
3729
4051
  --sk-button-border-width: 0;
3730
4052
  --sk-button-border-color: transparent;
4053
+ }
4054
+ .sk-button.sk-link.sk-accent .sk-button-chrome {
3731
4055
  background-color: transparent;
3732
4056
  color: var(--sk-button-color-base);
3733
4057
  text-decoration: none;
3734
4058
  border: none;
3735
4059
  }
3736
- .sk-button.sk-link.sk-accent:hover:not(:disabled) {
4060
+ .sk-button.sk-link.sk-accent:hover:not(:disabled) .sk-button-chrome {
3737
4061
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3738
4062
  text-decoration-color: var(--sk-button-text);
3739
4063
  text-decoration: underline;
3740
4064
  }
3741
- .sk-button.sk-link.sk-accent:active:not(:disabled) {
4065
+ .sk-button.sk-link.sk-accent:active:not(:disabled) .sk-button-chrome {
3742
4066
  color: var(--sk-button-text);
3743
4067
  text-decoration-color: var(--sk-button-border-hover);
3744
4068
  text-decoration: underline;
@@ -3750,17 +4074,19 @@
3750
4074
  --sk-button-radius-factor: 10;
3751
4075
  --sk-button-border-width: 0;
3752
4076
  --sk-button-border-color: transparent;
4077
+ }
4078
+ .sk-button.sk-link.sk-info .sk-button-chrome {
3753
4079
  background-color: transparent;
3754
4080
  color: var(--sk-button-color-base);
3755
4081
  text-decoration: none;
3756
4082
  border: none;
3757
4083
  }
3758
- .sk-button.sk-link.sk-info:hover:not(:disabled) {
4084
+ .sk-button.sk-link.sk-info:hover:not(:disabled) .sk-button-chrome {
3759
4085
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3760
4086
  text-decoration-color: var(--sk-button-text);
3761
4087
  text-decoration: underline;
3762
4088
  }
3763
- .sk-button.sk-link.sk-info:active:not(:disabled) {
4089
+ .sk-button.sk-link.sk-info:active:not(:disabled) .sk-button-chrome {
3764
4090
  color: var(--sk-button-text);
3765
4091
  text-decoration-color: var(--sk-button-border-hover);
3766
4092
  text-decoration: underline;
@@ -3772,17 +4098,19 @@
3772
4098
  --sk-button-radius-factor: 10;
3773
4099
  --sk-button-border-width: 0;
3774
4100
  --sk-button-border-color: transparent;
4101
+ }
4102
+ .sk-button.sk-link.sk-success .sk-button-chrome {
3775
4103
  background-color: transparent;
3776
4104
  color: var(--sk-button-color-base);
3777
4105
  text-decoration: none;
3778
4106
  border: none;
3779
4107
  }
3780
- .sk-button.sk-link.sk-success:hover:not(:disabled) {
4108
+ .sk-button.sk-link.sk-success:hover:not(:disabled) .sk-button-chrome {
3781
4109
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3782
4110
  text-decoration-color: var(--sk-button-text);
3783
4111
  text-decoration: underline;
3784
4112
  }
3785
- .sk-button.sk-link.sk-success:active:not(:disabled) {
4113
+ .sk-button.sk-link.sk-success:active:not(:disabled) .sk-button-chrome {
3786
4114
  color: var(--sk-button-text);
3787
4115
  text-decoration-color: var(--sk-button-border-hover);
3788
4116
  text-decoration: underline;
@@ -3794,17 +4122,19 @@
3794
4122
  --sk-button-radius-factor: 10;
3795
4123
  --sk-button-border-width: 0;
3796
4124
  --sk-button-border-color: transparent;
4125
+ }
4126
+ .sk-button.sk-link.sk-warning .sk-button-chrome {
3797
4127
  background-color: transparent;
3798
4128
  color: var(--sk-button-color-base);
3799
4129
  text-decoration: none;
3800
4130
  border: none;
3801
4131
  }
3802
- .sk-button.sk-link.sk-warning:hover:not(:disabled) {
4132
+ .sk-button.sk-link.sk-warning:hover:not(:disabled) .sk-button-chrome {
3803
4133
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3804
4134
  text-decoration-color: var(--sk-button-text);
3805
4135
  text-decoration: underline;
3806
4136
  }
3807
- .sk-button.sk-link.sk-warning:active:not(:disabled) {
4137
+ .sk-button.sk-link.sk-warning:active:not(:disabled) .sk-button-chrome {
3808
4138
  color: var(--sk-button-text);
3809
4139
  text-decoration-color: var(--sk-button-border-hover);
3810
4140
  text-decoration: underline;
@@ -3816,17 +4146,19 @@
3816
4146
  --sk-button-radius-factor: 10;
3817
4147
  --sk-button-border-width: 0;
3818
4148
  --sk-button-border-color: transparent;
4149
+ }
4150
+ .sk-button.sk-link.sk-danger .sk-button-chrome {
3819
4151
  background-color: transparent;
3820
4152
  color: var(--sk-button-color-base);
3821
4153
  text-decoration: none;
3822
4154
  border: none;
3823
4155
  }
3824
- .sk-button.sk-link.sk-danger:hover:not(:disabled) {
4156
+ .sk-button.sk-link.sk-danger:hover:not(:disabled) .sk-button-chrome {
3825
4157
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3826
4158
  text-decoration-color: var(--sk-button-text);
3827
4159
  text-decoration: underline;
3828
4160
  }
3829
- .sk-button.sk-link.sk-danger:active:not(:disabled) {
4161
+ .sk-button.sk-link.sk-danger:active:not(:disabled) .sk-button-chrome {
3830
4162
  color: var(--sk-button-text);
3831
4163
  text-decoration-color: var(--sk-button-border-hover);
3832
4164
  text-decoration: underline;
@@ -3838,17 +4170,19 @@
3838
4170
  --sk-button-radius-factor: 10;
3839
4171
  --sk-button-border-width: 0;
3840
4172
  --sk-button-border-color: transparent;
4173
+ }
4174
+ .sk-button.sk-link.sk-boulder .sk-button-chrome {
3841
4175
  background-color: transparent;
3842
4176
  color: var(--sk-button-color-base);
3843
4177
  text-decoration: none;
3844
4178
  border: none;
3845
4179
  }
3846
- .sk-button.sk-link.sk-boulder:hover:not(:disabled) {
4180
+ .sk-button.sk-link.sk-boulder:hover:not(:disabled) .sk-button-chrome {
3847
4181
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3848
4182
  text-decoration-color: var(--sk-button-text);
3849
4183
  text-decoration: underline;
3850
4184
  }
3851
- .sk-button.sk-link.sk-boulder:active:not(:disabled) {
4185
+ .sk-button.sk-link.sk-boulder:active:not(:disabled) .sk-button-chrome {
3852
4186
  color: var(--sk-button-text);
3853
4187
  text-decoration-color: var(--sk-button-border-hover);
3854
4188
  text-decoration: underline;
@@ -3860,17 +4194,19 @@
3860
4194
  --sk-button-radius-factor: 10;
3861
4195
  --sk-button-border-width: 0;
3862
4196
  --sk-button-border-color: transparent;
4197
+ }
4198
+ .sk-button.sk-link.sk-neon-blue .sk-button-chrome {
3863
4199
  background-color: transparent;
3864
4200
  color: var(--sk-button-color-base);
3865
4201
  text-decoration: none;
3866
4202
  border: none;
3867
4203
  }
3868
- .sk-button.sk-link.sk-neon-blue:hover:not(:disabled) {
4204
+ .sk-button.sk-link.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
3869
4205
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3870
4206
  text-decoration-color: var(--sk-button-text);
3871
4207
  text-decoration: underline;
3872
4208
  }
3873
- .sk-button.sk-link.sk-neon-blue:active:not(:disabled) {
4209
+ .sk-button.sk-link.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
3874
4210
  color: var(--sk-button-text);
3875
4211
  text-decoration-color: var(--sk-button-border-hover);
3876
4212
  text-decoration: underline;
@@ -3882,17 +4218,19 @@
3882
4218
  --sk-button-radius-factor: 10;
3883
4219
  --sk-button-border-width: 0;
3884
4220
  --sk-button-border-color: transparent;
4221
+ }
4222
+ .sk-button.sk-link.sk-light-blue .sk-button-chrome {
3885
4223
  background-color: transparent;
3886
4224
  color: var(--sk-button-color-base);
3887
4225
  text-decoration: none;
3888
4226
  border: none;
3889
4227
  }
3890
- .sk-button.sk-link.sk-light-blue:hover:not(:disabled) {
4228
+ .sk-button.sk-link.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
3891
4229
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3892
4230
  text-decoration-color: var(--sk-button-text);
3893
4231
  text-decoration: underline;
3894
4232
  }
3895
- .sk-button.sk-link.sk-light-blue:active:not(:disabled) {
4233
+ .sk-button.sk-link.sk-light-blue:active:not(:disabled) .sk-button-chrome {
3896
4234
  color: var(--sk-button-text);
3897
4235
  text-decoration-color: var(--sk-button-border-hover);
3898
4236
  text-decoration: underline;
@@ -3904,17 +4242,19 @@
3904
4242
  --sk-button-radius-factor: 10;
3905
4243
  --sk-button-border-width: 0;
3906
4244
  --sk-button-border-color: transparent;
4245
+ }
4246
+ .sk-button.sk-link.sk-neon-orange .sk-button-chrome {
3907
4247
  background-color: transparent;
3908
4248
  color: var(--sk-button-color-base);
3909
4249
  text-decoration: none;
3910
4250
  border: none;
3911
4251
  }
3912
- .sk-button.sk-link.sk-neon-orange:hover:not(:disabled) {
4252
+ .sk-button.sk-link.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
3913
4253
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3914
4254
  text-decoration-color: var(--sk-button-text);
3915
4255
  text-decoration: underline;
3916
4256
  }
3917
- .sk-button.sk-link.sk-neon-orange:active:not(:disabled) {
4257
+ .sk-button.sk-link.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
3918
4258
  color: var(--sk-button-text);
3919
4259
  text-decoration-color: var(--sk-button-border-hover);
3920
4260
  text-decoration: underline;
@@ -3926,17 +4266,19 @@
3926
4266
  --sk-button-radius-factor: 10;
3927
4267
  --sk-button-border-width: 0;
3928
4268
  --sk-button-border-color: transparent;
4269
+ }
4270
+ .sk-button.sk-link.sk-neon-purple .sk-button-chrome {
3929
4271
  background-color: transparent;
3930
4272
  color: var(--sk-button-color-base);
3931
4273
  text-decoration: none;
3932
4274
  border: none;
3933
4275
  }
3934
- .sk-button.sk-link.sk-neon-purple:hover:not(:disabled) {
4276
+ .sk-button.sk-link.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
3935
4277
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3936
4278
  text-decoration-color: var(--sk-button-text);
3937
4279
  text-decoration: underline;
3938
4280
  }
3939
- .sk-button.sk-link.sk-neon-purple:active:not(:disabled) {
4281
+ .sk-button.sk-link.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
3940
4282
  color: var(--sk-button-text);
3941
4283
  text-decoration-color: var(--sk-button-border-hover);
3942
4284
  text-decoration: underline;
@@ -3948,17 +4290,19 @@
3948
4290
  --sk-button-radius-factor: 10;
3949
4291
  --sk-button-border-width: 0;
3950
4292
  --sk-button-border-color: transparent;
4293
+ }
4294
+ .sk-button.sk-link.sk-neon-green .sk-button-chrome {
3951
4295
  background-color: transparent;
3952
4296
  color: var(--sk-button-color-base);
3953
4297
  text-decoration: none;
3954
4298
  border: none;
3955
4299
  }
3956
- .sk-button.sk-link.sk-neon-green:hover:not(:disabled) {
4300
+ .sk-button.sk-link.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
3957
4301
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3958
4302
  text-decoration-color: var(--sk-button-text);
3959
4303
  text-decoration: underline;
3960
4304
  }
3961
- .sk-button.sk-link.sk-neon-green:active:not(:disabled) {
4305
+ .sk-button.sk-link.sk-neon-green:active:not(:disabled) .sk-button-chrome {
3962
4306
  color: var(--sk-button-text);
3963
4307
  text-decoration-color: var(--sk-button-border-hover);
3964
4308
  text-decoration: underline;
@@ -3970,17 +4314,19 @@
3970
4314
  --sk-button-radius-factor: 10;
3971
4315
  --sk-button-border-width: 0;
3972
4316
  --sk-button-border-color: transparent;
4317
+ }
4318
+ .sk-button.sk-link.sk-neon-mint .sk-button-chrome {
3973
4319
  background-color: transparent;
3974
4320
  color: var(--sk-button-color-base);
3975
4321
  text-decoration: none;
3976
4322
  border: none;
3977
4323
  }
3978
- .sk-button.sk-link.sk-neon-mint:hover:not(:disabled) {
4324
+ .sk-button.sk-link.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
3979
4325
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
3980
4326
  text-decoration-color: var(--sk-button-text);
3981
4327
  text-decoration: underline;
3982
4328
  }
3983
- .sk-button.sk-link.sk-neon-mint:active:not(:disabled) {
4329
+ .sk-button.sk-link.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
3984
4330
  color: var(--sk-button-text);
3985
4331
  text-decoration-color: var(--sk-button-border-hover);
3986
4332
  text-decoration: underline;
@@ -3992,17 +4338,19 @@
3992
4338
  --sk-button-radius-factor: 10;
3993
4339
  --sk-button-border-width: 0;
3994
4340
  --sk-button-border-color: transparent;
4341
+ }
4342
+ .sk-button.sk-link.sk-neon-pink .sk-button-chrome {
3995
4343
  background-color: transparent;
3996
4344
  color: var(--sk-button-color-base);
3997
4345
  text-decoration: none;
3998
4346
  border: none;
3999
4347
  }
4000
- .sk-button.sk-link.sk-neon-pink:hover:not(:disabled) {
4348
+ .sk-button.sk-link.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
4001
4349
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
4002
4350
  text-decoration-color: var(--sk-button-text);
4003
4351
  text-decoration: underline;
4004
4352
  }
4005
- .sk-button.sk-link.sk-neon-pink:active:not(:disabled) {
4353
+ .sk-button.sk-link.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
4006
4354
  color: var(--sk-button-text);
4007
4355
  text-decoration-color: var(--sk-button-border-hover);
4008
4356
  text-decoration: underline;
@@ -4014,17 +4362,19 @@
4014
4362
  --sk-button-radius-factor: 10;
4015
4363
  --sk-button-border-width: 0;
4016
4364
  --sk-button-border-color: transparent;
4365
+ }
4366
+ .sk-button.sk-link.sk-yellow .sk-button-chrome {
4017
4367
  background-color: transparent;
4018
4368
  color: var(--sk-button-color-base);
4019
4369
  text-decoration: none;
4020
4370
  border: none;
4021
4371
  }
4022
- .sk-button.sk-link.sk-yellow:hover:not(:disabled) {
4372
+ .sk-button.sk-link.sk-yellow:hover:not(:disabled) .sk-button-chrome {
4023
4373
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
4024
4374
  text-decoration-color: var(--sk-button-text);
4025
4375
  text-decoration: underline;
4026
4376
  }
4027
- .sk-button.sk-link.sk-yellow:active:not(:disabled) {
4377
+ .sk-button.sk-link.sk-yellow:active:not(:disabled) .sk-button-chrome {
4028
4378
  color: var(--sk-button-text);
4029
4379
  text-decoration-color: var(--sk-button-border-hover);
4030
4380
  text-decoration: underline;
@@ -4036,25 +4386,27 @@
4036
4386
  --sk-button-radius-factor: 10;
4037
4387
  --sk-button-border-width: 0;
4038
4388
  --sk-button-border-color: transparent;
4389
+ }
4390
+ .sk-button.sk-link.sk-red .sk-button-chrome {
4039
4391
  background-color: transparent;
4040
4392
  color: var(--sk-button-color-base);
4041
4393
  text-decoration: none;
4042
4394
  border: none;
4043
4395
  }
4044
- .sk-button.sk-link.sk-red:hover:not(:disabled) {
4396
+ .sk-button.sk-link.sk-red:hover:not(:disabled) .sk-button-chrome {
4045
4397
  color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
4046
4398
  text-decoration-color: var(--sk-button-text);
4047
4399
  text-decoration: underline;
4048
4400
  }
4049
- .sk-button.sk-link.sk-red:active:not(:disabled) {
4401
+ .sk-button.sk-link.sk-red:active:not(:disabled) .sk-button-chrome {
4050
4402
  color: var(--sk-button-text);
4051
4403
  text-decoration-color: var(--sk-button-border-hover);
4052
4404
  text-decoration: underline;
4053
4405
  }
4054
- .sk-button.sk-link.sk-neutral {
4406
+ .sk-button.sk-link.sk-neutral .sk-button-chrome {
4055
4407
  color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
4056
4408
  }
4057
- .sk-button.sk-link.sk-neutral:hover:not(:disabled) {
4409
+ .sk-button.sk-link.sk-neutral:hover:not(:disabled) .sk-button-chrome {
4058
4410
  color: color-mix(in oklch, var(--sk-button-color-base), white 60%);
4059
4411
  }
4060
4412
  .sk-button:disabled {
@@ -4069,38 +4421,111 @@
4069
4421
  }
4070
4422
  .sk-button.sk-pressed.sk-solid {
4071
4423
  --sk-button-border-color: var(--sk-button-border-hover);
4424
+ }
4425
+ .sk-button.sk-pressed.sk-solid .sk-button-chrome {
4072
4426
  background-color: var(--sk-button-bg-hover);
4073
4427
  color: var(--sk-button-text);
4074
4428
  }
4075
4429
  .sk-button.sk-pressed.sk-solid:hover:not(:disabled) {
4076
4430
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
4431
+ }
4432
+ .sk-button.sk-pressed.sk-solid:hover:not(:disabled) .sk-button-chrome {
4077
4433
  background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
4078
4434
  }
4079
4435
  .sk-button.sk-pressed.sk-outline {
4080
4436
  --sk-button-border-color: var(--sk-button-border-hover);
4437
+ }
4438
+ .sk-button.sk-pressed.sk-outline .sk-button-chrome {
4081
4439
  background-color: var(--sk-button-bg);
4082
4440
  color: var(--sk-button-text);
4083
4441
  }
4084
4442
  .sk-button.sk-pressed.sk-subtle {
4085
4443
  --sk-button-border-color: transparent;
4444
+ }
4445
+ .sk-button.sk-pressed.sk-subtle .sk-button-chrome {
4086
4446
  background-color: var(--sk-button-bg);
4087
4447
  color: var(--sk-button-text);
4088
4448
  }
4089
4449
  .sk-button.sk-pressed.sk-subtle:hover:not(:disabled) {
4090
4450
  --sk-button-border-color: transparent;
4091
4451
  --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
4452
+ }
4453
+ .sk-button.sk-pressed.sk-subtle:hover:not(:disabled) .sk-button-chrome {
4092
4454
  background-color: var(--sk-button-bg-hover);
4093
4455
  }
4094
4456
  .sk-button.sk-pressed.sk-ghost {
4095
4457
  --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
4458
+ }
4459
+ .sk-button.sk-pressed.sk-ghost .sk-button-chrome {
4096
4460
  border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
4097
4461
  background-color: var(--sk-button-outline-bg);
4098
4462
  color: var(--sk-button-text);
4099
4463
  }
4100
- .sk-button.sk-pressed.sk-link {
4464
+ .sk-button.sk-pressed.sk-link .sk-button-chrome {
4101
4465
  color: var(--sk-button-text);
4102
4466
  }
4103
- .sk-button .sk-button-loader {
4467
+ .sk-button.sk-icon-only {
4468
+ --sk-button-current-padding-x: 0;
4469
+ }
4470
+ .sk-button.sk-icon-only .sk-button-chrome {
4471
+ aspect-ratio: 1;
4472
+ }
4473
+ .sk-button.sk-icon-only .sk-button-icon {
4474
+ font-size: 1.25em;
4475
+ }
4476
+ .sk-button-chrome {
4477
+ position: relative;
4478
+ display: inline-flex;
4479
+ align-items: center;
4480
+ justify-content: center;
4481
+ gap: var(--sk-button-gap);
4482
+ height: var(--sk-button-current-height);
4483
+ padding-left: var(--sk-button-current-padding-x);
4484
+ padding-right: var(--sk-button-current-padding-x);
4485
+ font-weight: var(--sk-button-font-weight);
4486
+ font-size: var(--sk-button-current-font-size);
4487
+ line-height: var(--sk-button-line-height);
4488
+ border-width: var(--sk-button-border-width);
4489
+ border-style: solid;
4490
+ flex-shrink: 0;
4491
+ box-sizing: border-box;
4492
+ }
4493
+ @supports (corner-shape: bevel) {
4494
+ .sk-button-chrome {
4495
+ border: var(--sk-button-border-width) solid var(--sk-button-border-color);
4496
+ border-top-left-radius: var(--sk-button-current-cut-size);
4497
+ border-top-right-radius: 0;
4498
+ border-bottom-right-radius: var(--sk-button-current-cut-size);
4499
+ border-bottom-left-radius: 0;
4500
+ corner-shape: bevel;
4501
+ }
4502
+ }
4503
+ @supports not (corner-shape: bevel) {
4504
+ .sk-button-chrome {
4505
+ border: none;
4506
+ clip-path: polygon(var(--sk-button-current-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-current-cut-size)), calc(100% - var(--sk-button-current-cut-size)) 100%, 0% 100%, 0% var(--sk-button-current-cut-size));
4507
+ }
4508
+ .sk-button-chrome::before {
4509
+ content: "";
4510
+ position: absolute;
4511
+ top: 0;
4512
+ left: 0;
4513
+ right: 0;
4514
+ bottom: 0;
4515
+ background-color: var(--sk-button-border-color);
4516
+ z-index: -1;
4517
+ clip-path: polygon(var(--sk-button-current-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-current-cut-size)), calc(100% - var(--sk-button-current-cut-size)) 100%, 0% 100%, 0% var(--sk-button-current-cut-size), var(--sk-button-current-cut-size) 0%, calc(var(--sk-button-current-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-current-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-current-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-current-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-current-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
4518
+ }
4519
+ }
4520
+ @supports (corner-shape: bevel) {
4521
+ .sk-button-chrome {
4522
+ box-shadow: var(--sk-button-glow-shadow);
4523
+ }
4524
+ }
4525
+ .sk-button-chrome {
4526
+ transition: color var(--sk-button-transition-duration) var(--sk-button-transition-easing), background-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), border-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), box-shadow var(--sk-button-transition-duration) var(--sk-button-transition-easing);
4527
+ }
4528
+ .sk-button-loader {
4104
4529
  position: absolute;
4105
4530
  width: 1em;
4106
4531
  height: 1em;
@@ -4109,35 +4534,27 @@
4109
4534
  border-radius: 50%;
4110
4535
  animation: sk-button-spin 0.6s linear infinite;
4111
4536
  }
4112
- .sk-button.sk-icon-only {
4113
- padding-left: 0;
4114
- padding-right: 0;
4115
- aspect-ratio: 1;
4116
- }
4117
- .sk-button.sk-icon-only .sk-button-icon {
4118
- font-size: 1.25em;
4119
- }
4120
- .sk-button .sk-button-icon {
4537
+ .sk-button-icon {
4121
4538
  display: inline-flex;
4122
4539
  align-items: center;
4123
4540
  justify-content: center;
4124
4541
  flex-shrink: 0;
4125
4542
  line-height: 1;
4126
4543
  }
4127
- .sk-button .sk-button-icon svg {
4544
+ .sk-button-icon svg {
4128
4545
  width: 1em;
4129
4546
  height: 1em;
4130
4547
  display: block;
4131
4548
  }
4132
- .sk-button .sk-button-content {
4549
+ .sk-button-content {
4133
4550
  display: inline-flex;
4134
4551
  align-items: center;
4135
4552
  gap: var(--sk-button-gap);
4136
4553
  }
4137
- .sk-button .sk-button-content.loading {
4554
+ .sk-button-content.loading {
4138
4555
  visibility: hidden;
4139
4556
  }
4140
- .sk-button .sk-button-text {
4557
+ .sk-button-text {
4141
4558
  display: inline-flex;
4142
4559
  align-items: center;
4143
4560
  }
@@ -4239,6 +4656,11 @@
4239
4656
  gap: var(--sk-space-xs);
4240
4657
  cursor: pointer;
4241
4658
  }
4659
+ @media (pointer: coarse) {
4660
+ .sk-checkbox-wrapper {
4661
+ min-height: 44px;
4662
+ }
4663
+ }
4242
4664
  .sk-checkbox-wrapper.sk-disabled {
4243
4665
  cursor: not-allowed;
4244
4666
  opacity: 0.5;
@@ -4247,6 +4669,7 @@
4247
4669
  --sk-checkbox-color-base: var(--sk-neutral-base);
4248
4670
  --sk-checkbox-fg: var(--sk-neutral-text);
4249
4671
  --sk-checkbox-cut: 0.25rem;
4672
+ position: relative;
4250
4673
  display: inline-flex;
4251
4674
  align-items: center;
4252
4675
  justify-content: center;
@@ -4457,6 +4880,7 @@
4457
4880
  color-mix(in oklch, var(--sk-collapsible-color-base) 75%, transparent 25%),
4458
4881
  #000 46.25%
4459
4882
  );
4883
+ position: relative;
4460
4884
  padding: var(--sk-space-md) var(--sk-space-lg);
4461
4885
  width: 100%;
4462
4886
  }
@@ -4511,6 +4935,12 @@
4511
4935
  opacity: 0;
4512
4936
  }
4513
4937
  }
4938
+ @media (prefers-reduced-motion: reduce) {
4939
+ .sk-collapsible-content[data-state=open],
4940
+ .sk-collapsible-content[data-state=closed] {
4941
+ animation: none;
4942
+ }
4943
+ }
4514
4944
  .sk-color-picker {
4515
4945
  --sk-color-picker-color-base: var(--sk-neutral-base);
4516
4946
  --sk-color-picker-fg: var(--sk-neutral-text);
@@ -4643,6 +5073,7 @@
4643
5073
  pointer-events: none;
4644
5074
  }
4645
5075
  .sk-color-picker-swatch {
5076
+ position: relative;
4646
5077
  flex-shrink: 0;
4647
5078
  }
4648
5079
  @supports (corner-shape: bevel) {
@@ -4746,11 +5177,12 @@
4746
5177
  .sk-color-picker-panel {
4747
5178
  --sk-panel-color-base: var(--sk-neutral-base);
4748
5179
  --sk-panel-fg: var(--sk-neutral-text);
5180
+ position: relative;
4749
5181
  display: flex;
4750
5182
  flex-direction: column;
4751
5183
  gap: var(--sk-space-sm);
4752
5184
  padding: var(--sk-space-md);
4753
- z-index: 1000;
5185
+ z-index: var(--sk-z-popover);
4754
5186
  width: 17rem;
4755
5187
  }
4756
5188
  @supports (corner-shape: bevel) {
@@ -4884,6 +5316,7 @@
4884
5316
  gap: 2px;
4885
5317
  }
4886
5318
  .sk-color-picker-format-btn {
5319
+ position: relative;
4887
5320
  flex: 1;
4888
5321
  padding: var(--sk-space-3xs) var(--sk-space-xs);
4889
5322
  font-size: 0.6875rem;
@@ -5248,6 +5681,7 @@
5248
5681
  --sk-input-color-base: var(--sk-neutral-base);
5249
5682
  --sk-input-fg: var(--sk-neutral-text);
5250
5683
  --sk-input-cut: 0.5rem;
5684
+ position: relative;
5251
5685
  display: block;
5252
5686
  width: 100%;
5253
5687
  font-family: var(--sk-font-family-base);
@@ -5575,7 +6009,7 @@
5575
6009
  max-height: 20rem;
5576
6010
  overflow: auto;
5577
6011
  padding: var(--sk-space-xs);
5578
- z-index: 1000;
6012
+ z-index: var(--sk-z-dropdown);
5579
6013
  }
5580
6014
  @supports (corner-shape: bevel) {
5581
6015
  .sk-listbox-content {
@@ -5670,6 +6104,7 @@
5670
6104
  --sk-menu-fg: var(--sk-red-text);
5671
6105
  }
5672
6106
  .sk-listbox-item {
6107
+ position: relative;
5673
6108
  display: flex;
5674
6109
  align-items: center;
5675
6110
  justify-content: space-between;
@@ -5681,6 +6116,11 @@
5681
6116
  outline: none;
5682
6117
  user-select: none;
5683
6118
  }
6119
+ @media (pointer: coarse) {
6120
+ .sk-listbox-item {
6121
+ min-height: 44px;
6122
+ }
6123
+ }
5684
6124
  @supports (corner-shape: bevel) {
5685
6125
  .sk-listbox-item {
5686
6126
  border: var(--sk-border-width-thin) solid transparent;
@@ -5740,9 +6180,10 @@
5740
6180
  .sk-menu-content {
5741
6181
  --sk-menu-color-base: var(--sk-neutral-base);
5742
6182
  --sk-menu-fg: var(--sk-neutral-text);
6183
+ position: relative;
5743
6184
  min-width: 12rem;
5744
6185
  padding: var(--sk-space-xs);
5745
- z-index: 1000;
6186
+ z-index: var(--sk-z-dropdown);
5746
6187
  }
5747
6188
  @supports (corner-shape: bevel) {
5748
6189
  .sk-menu-content {
@@ -5837,6 +6278,7 @@
5837
6278
  --sk-menu-fg: var(--sk-red-text);
5838
6279
  }
5839
6280
  .sk-menu-item {
6281
+ position: relative;
5840
6282
  display: flex;
5841
6283
  align-items: center;
5842
6284
  justify-content: space-between;
@@ -5848,6 +6290,11 @@
5848
6290
  outline: none;
5849
6291
  user-select: none;
5850
6292
  }
6293
+ @media (pointer: coarse) {
6294
+ .sk-menu-item {
6295
+ min-height: 44px;
6296
+ }
6297
+ }
5851
6298
  @supports (corner-shape: bevel) {
5852
6299
  .sk-menu-item {
5853
6300
  border: var(--sk-border-width-thin) solid transparent;
@@ -5961,7 +6408,7 @@
5961
6408
  position: fixed;
5962
6409
  inset: 0;
5963
6410
  background: oklch(0% 0 0deg / 0.75);
5964
- z-index: 50;
6411
+ z-index: var(--sk-z-modal-scrim);
5965
6412
  backdrop-filter: blur(2px);
5966
6413
  }
5967
6414
  .sk-modal-overlay[data-state=open] {
@@ -6002,7 +6449,7 @@
6002
6449
  top: 50%;
6003
6450
  left: 50%;
6004
6451
  transform: translate(-50%, -50%);
6005
- z-index: 51;
6452
+ z-index: var(--sk-z-modal);
6006
6453
  display: flex;
6007
6454
  flex-direction: column;
6008
6455
  max-height: 85vh;
@@ -6264,6 +6711,14 @@
6264
6711
  transform: translate(-50%, -48%) scale(0.96);
6265
6712
  }
6266
6713
  }
6714
+ @media (prefers-reduced-motion: reduce) {
6715
+ .sk-modal-overlay[data-state=open],
6716
+ .sk-modal-overlay[data-state=closed],
6717
+ .sk-modal-content[data-state=open],
6718
+ .sk-modal-content[data-state=closed] {
6719
+ animation: none;
6720
+ }
6721
+ }
6267
6722
  .sk-navbar {
6268
6723
  --sk-navbar-padding-y: 0.75rem;
6269
6724
  --sk-navbar-padding-x: 1rem;
@@ -6328,17 +6783,21 @@
6328
6783
  .sk-navbar.sk-sticky {
6329
6784
  position: sticky;
6330
6785
  top: 0;
6331
- z-index: 100;
6786
+ z-index: var(--sk-z-sticky);
6332
6787
  }
6333
6788
  .sk-navbar .sk-navbar-content {
6334
6789
  display: flex;
6335
6790
  align-items: center;
6336
- justify-content: space-between;
6337
- gap: 2rem;
6791
+ gap: 1rem;
6338
6792
  padding: var(--sk-navbar-padding-y) var(--sk-navbar-padding-x);
6339
6793
  max-width: 1920px;
6340
6794
  margin: 0 auto;
6341
6795
  }
6796
+ .sk-navbar .sk-navbar-leading {
6797
+ display: flex;
6798
+ align-items: center;
6799
+ flex-shrink: 0;
6800
+ }
6342
6801
  .sk-navbar .sk-navbar-brand {
6343
6802
  display: flex;
6344
6803
  align-items: center;
@@ -6349,13 +6808,13 @@
6349
6808
  color: inherit;
6350
6809
  }
6351
6810
  .sk-navbar .sk-navbar-brand a:hover h1 {
6352
- color: var(--sk-primary-base);
6811
+ color: var(--sk-navbar-color-base);
6353
6812
  }
6354
6813
  .sk-navbar .sk-navbar-brand h1 {
6355
6814
  margin: 0;
6356
6815
  font-size: 1.5rem;
6357
6816
  font-weight: 600;
6358
- color: var(--sk-primary-base);
6817
+ color: inherit;
6359
6818
  transition: color var(--sk-transition-fast);
6360
6819
  }
6361
6820
  .sk-navbar .sk-navbar-nav {
@@ -6389,6 +6848,7 @@
6389
6848
  justify-content: flex-end;
6390
6849
  gap: 1rem;
6391
6850
  flex-shrink: 0;
6851
+ margin-left: auto;
6392
6852
  }
6393
6853
  .sk-navbar.sk-neutral {
6394
6854
  --sk-navbar-color-base: var(--sk-neutral-base);
@@ -6783,6 +7243,7 @@
6783
7243
  opacity: 0.5;
6784
7244
  }
6785
7245
  .sk-number-input-increment {
7246
+ position: relative;
6786
7247
  border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
6787
7248
  }
6788
7249
  @supports (corner-shape: bevel) {
@@ -6816,9 +7277,20 @@
6816
7277
  --sk-page-header-height: auto;
6817
7278
  --sk-page-footer-height: auto;
6818
7279
  --sk-page-sidebar-width: 16rem;
7280
+ --sk-page-aside-width: 16rem;
7281
+ --sk-page-drawer-z-index: var(--sk-z-drawer);
7282
+ --sk-page-min-height: 100vh;
7283
+ --sk-page-gap: 1rem;
7284
+ }
7285
+ .sk-page.sk-flush {
7286
+ --sk-page-gap: 0;
7287
+ }
7288
+ .sk-page {
7289
+ position: relative;
7290
+ isolation: isolate;
6819
7291
  display: flex;
6820
7292
  flex-direction: column;
6821
- min-height: 100vh;
7293
+ min-height: var(--sk-page-min-height);
6822
7294
  background: var(--sk-surface-base);
6823
7295
  color: var(--sk-text-primary);
6824
7296
  }
@@ -6830,23 +7302,62 @@
6830
7302
  position: sticky;
6831
7303
  top: 0;
6832
7304
  }
7305
+ .sk-page .sk-page-subheader {
7306
+ flex-shrink: 0;
7307
+ z-index: 9;
7308
+ }
6833
7309
  .sk-page .sk-page-main {
6834
7310
  display: flex;
6835
7311
  flex: 1;
6836
7312
  min-height: 0;
7313
+ padding: var(--sk-page-gap);
7314
+ gap: var(--sk-page-gap);
6837
7315
  }
6838
7316
  .sk-page .sk-page-sidebar {
6839
7317
  flex-shrink: 0;
6840
- width: var(--sk-page-sidebar-width);
6841
- overflow-y: auto;
7318
+ display: flex;
7319
+ flex-direction: column;
7320
+ min-height: 0;
6842
7321
  }
6843
- .sk-page.sk-sidebar-right .sk-page-main {
6844
- flex-direction: row-reverse;
7322
+ .sk-page .sk-page-center {
7323
+ flex: 1;
7324
+ min-width: 0;
7325
+ display: flex;
7326
+ flex-direction: column;
7327
+ }
7328
+ .sk-page .sk-page-center .sk-page-main-header,
7329
+ .sk-page .sk-page-center .sk-page-main-footer {
7330
+ flex-shrink: 0;
6845
7331
  }
6846
7332
  .sk-page .sk-page-content {
6847
7333
  flex: 1;
6848
- min-width: 0;
7334
+ min-height: 0;
7335
+ overflow-y: auto;
7336
+ }
7337
+ .sk-page .sk-page-aside {
7338
+ flex-shrink: 0;
7339
+ display: flex;
7340
+ flex-direction: column;
7341
+ min-height: 0;
7342
+ }
7343
+ .sk-page .sk-page-sidebar-header,
7344
+ .sk-page .sk-page-sidebar-footer,
7345
+ .sk-page .sk-page-aside-header,
7346
+ .sk-page .sk-page-aside-footer {
7347
+ flex-shrink: 0;
7348
+ }
7349
+ .sk-page .sk-page-sidebar-body,
7350
+ .sk-page .sk-page-aside-body {
7351
+ flex: 1;
7352
+ min-height: 0;
6849
7353
  overflow-y: auto;
7354
+ display: flex;
7355
+ flex-direction: column;
7356
+ }
7357
+ .sk-page .sk-page-sidebar-body > *,
7358
+ .sk-page .sk-page-aside-body > * {
7359
+ flex: 1;
7360
+ min-height: 0;
6850
7361
  }
6851
7362
  .sk-page .sk-page-footer {
6852
7363
  flex-shrink: 0;
@@ -6856,6 +7367,73 @@
6856
7367
  position: sticky;
6857
7368
  bottom: 0;
6858
7369
  }
7370
+ .sk-page .sk-page-drawer {
7371
+ position: fixed;
7372
+ top: 0;
7373
+ bottom: 0;
7374
+ max-height: 100dvh;
7375
+ width: var(--sk-page-sidebar-width);
7376
+ max-width: calc(100vw - 3rem);
7377
+ z-index: var(--sk-z-drawer);
7378
+ background: transparent;
7379
+ display: flex;
7380
+ flex-direction: column;
7381
+ }
7382
+ .sk-page .sk-page-drawer.sk-page-drawer-left {
7383
+ left: 0;
7384
+ }
7385
+ .sk-page .sk-page-drawer.sk-page-drawer-right {
7386
+ right: 0;
7387
+ width: var(--sk-page-aside-width);
7388
+ }
7389
+ .sk-page .sk-page-drawer:focus {
7390
+ outline: none;
7391
+ }
7392
+ .sk-page .sk-page-drawer-backdrop {
7393
+ position: fixed;
7394
+ inset: 0;
7395
+ z-index: var(--sk-z-drawer-scrim);
7396
+ background: oklch(0% 0 0deg / 0.6);
7397
+ backdrop-filter: blur(2px);
7398
+ }
7399
+ .sk-page-drawer-left-enter-active,
7400
+ .sk-page-drawer-left-leave-active,
7401
+ .sk-page-drawer-right-enter-active,
7402
+ .sk-page-drawer-right-leave-active {
7403
+ transition: transform var(--sk-transition-duration-normal) var(--sk-transition-easing);
7404
+ }
7405
+ .sk-page-drawer-left-enter-from,
7406
+ .sk-page-drawer-left-leave-to {
7407
+ transform: translateX(-100%);
7408
+ }
7409
+ .sk-page-drawer-right-enter-from,
7410
+ .sk-page-drawer-right-leave-to {
7411
+ transform: translateX(100%);
7412
+ }
7413
+ .sk-page-drawer-backdrop-enter-active,
7414
+ .sk-page-drawer-backdrop-leave-active {
7415
+ transition: opacity var(--sk-transition-duration-normal) var(--sk-transition-easing);
7416
+ }
7417
+ .sk-page-drawer-backdrop-enter-from,
7418
+ .sk-page-drawer-backdrop-leave-to {
7419
+ opacity: 0;
7420
+ }
7421
+ @media (prefers-reduced-motion: reduce) {
7422
+ .sk-page-drawer-left-enter-active,
7423
+ .sk-page-drawer-left-leave-active,
7424
+ .sk-page-drawer-right-enter-active,
7425
+ .sk-page-drawer-right-leave-active,
7426
+ .sk-page-drawer-backdrop-enter-active,
7427
+ .sk-page-drawer-backdrop-leave-active {
7428
+ transition: none;
7429
+ }
7430
+ .sk-page-drawer-left-enter-from,
7431
+ .sk-page-drawer-left-leave-to,
7432
+ .sk-page-drawer-right-enter-from,
7433
+ .sk-page-drawer-right-leave-to {
7434
+ transform: none;
7435
+ }
7436
+ }
6859
7437
  .sk-pagination {
6860
7438
  display: flex;
6861
7439
  align-items: center;
@@ -6959,6 +7537,7 @@
6959
7537
  }
6960
7538
  }
6961
7539
  .sk-pagination-item {
7540
+ position: relative;
6962
7541
  display: inline-flex;
6963
7542
  align-items: center;
6964
7543
  justify-content: center;
@@ -6972,6 +7551,14 @@
6972
7551
  line-height: 1.5;
6973
7552
  cursor: pointer;
6974
7553
  user-select: none;
7554
+ }
7555
+ @media (pointer: coarse) {
7556
+ .sk-pagination-item {
7557
+ min-width: 44px;
7558
+ min-height: 44px;
7559
+ }
7560
+ }
7561
+ .sk-pagination-item {
6975
7562
  transition: color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing), background-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing), border-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing), box-shadow var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing);
6976
7563
  }
6977
7564
  @supports (corner-shape: bevel) {
@@ -7364,7 +7951,7 @@
7364
7951
  .sk-panel.sk-no-border::after {
7365
7952
  display: none;
7366
7953
  }
7367
- .sk-panel:has(.sk-panel-scroll-content) {
7954
+ .sk-panel:has(> .sk-panel-scroll-content) {
7368
7955
  padding: 0;
7369
7956
  display: flex;
7370
7957
  flex-direction: column;
@@ -7588,7 +8175,7 @@
7588
8175
  box-shadow: var(--sk-shadow-lg), inset 0 0 24px oklch(from var(--sk-popover-color-base) l c h/0.15), 0 0 12px oklch(from var(--sk-popover-color-base) l c h/0.3);
7589
8176
  max-width: 24rem;
7590
8177
  min-width: 12rem;
7591
- z-index: 60;
8178
+ z-index: var(--sk-z-popover);
7592
8179
  }
7593
8180
  .sk-popover-content[data-state=open] {
7594
8181
  animation: sk-popover-show var(--sk-transition-duration-fast) ease-out;
@@ -7738,6 +8325,12 @@
7738
8325
  transform: scale(0.96);
7739
8326
  }
7740
8327
  }
8328
+ @media (prefers-reduced-motion: reduce) {
8329
+ .sk-popover-content[data-state=open],
8330
+ .sk-popover-content[data-state=closed] {
8331
+ animation: none;
8332
+ }
8333
+ }
7741
8334
  .sk-progress {
7742
8335
  --sk-progress-color-base: var(--sk-primary-base);
7743
8336
  --sk-progress-track-bg: oklch(from var(--sk-neutral-base) l c h / 0.15);
@@ -7903,6 +8496,11 @@
7903
8496
  transform: translateX(400%);
7904
8497
  }
7905
8498
  }
8499
+ @media (prefers-reduced-motion: reduce) {
8500
+ .sk-progress-indicator-indeterminate {
8501
+ animation-duration: 8s;
8502
+ }
8503
+ }
7906
8504
  .sk-radio-group {
7907
8505
  display: flex;
7908
8506
  gap: var(--sk-space-md);
@@ -7919,6 +8517,11 @@
7919
8517
  gap: var(--sk-space-xs);
7920
8518
  cursor: pointer;
7921
8519
  }
8520
+ @media (pointer: coarse) {
8521
+ .sk-radio-wrapper {
8522
+ min-height: 44px;
8523
+ }
8524
+ }
7922
8525
  .sk-radio-wrapper.sk-disabled {
7923
8526
  cursor: not-allowed;
7924
8527
  opacity: 0.5;
@@ -7927,6 +8530,7 @@
7927
8530
  --sk-radio-color-base: var(--sk-neutral-base);
7928
8531
  --sk-radio-fg: var(--sk-neutral-text);
7929
8532
  --sk-radio-cut: 0.3rem;
8533
+ position: relative;
7930
8534
  display: inline-flex;
7931
8535
  align-items: center;
7932
8536
  justify-content: center;
@@ -8066,6 +8670,7 @@
8066
8670
  cursor: not-allowed;
8067
8671
  }
8068
8672
  .sk-radio-indicator {
8673
+ position: relative;
8069
8674
  display: flex;
8070
8675
  align-items: center;
8071
8676
  justify-content: center;
@@ -8108,6 +8713,7 @@
8108
8713
  --sk-scroll-area-thumb-color: var(--sk-scroll-area-color-base);
8109
8714
  --sk-scroll-area-track-color: oklch(from var(--sk-neutral-base) l c h / 0.08);
8110
8715
  --sk-scroll-area-size: 0.5rem;
8716
+ --sk-scroll-area-fade: 1.5rem;
8111
8717
  position: relative;
8112
8718
  overflow: hidden;
8113
8719
  }
@@ -8132,6 +8738,16 @@
8132
8738
  .sk-scroll-area.sk-danger {
8133
8739
  --sk-scroll-area-color-base: var(--sk-danger-base);
8134
8740
  }
8741
+ .sk-scroll-area.sk-fade.sk-vertical .sk-scroll-area-viewport {
8742
+ mask-image: linear-gradient(to bottom, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%);
8743
+ }
8744
+ .sk-scroll-area.sk-fade.sk-horizontal .sk-scroll-area-viewport {
8745
+ mask-image: linear-gradient(to right, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%);
8746
+ }
8747
+ .sk-scroll-area.sk-fade.sk-both .sk-scroll-area-viewport {
8748
+ mask-image: linear-gradient(to bottom, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%), linear-gradient(to right, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%);
8749
+ mask-composite: intersect;
8750
+ }
8135
8751
  .sk-scroll-area-viewport {
8136
8752
  width: 100%;
8137
8753
  height: 100%;
@@ -8254,6 +8870,7 @@
8254
8870
  --sk-select-fg: var(--sk-red-text);
8255
8871
  }
8256
8872
  .sk-select-trigger {
8873
+ position: relative;
8257
8874
  display: flex;
8258
8875
  align-items: center;
8259
8876
  gap: var(--sk-space-sm);
@@ -8350,7 +8967,7 @@
8350
8967
  max-height: 20rem;
8351
8968
  overflow: auto;
8352
8969
  padding: var(--sk-space-xs);
8353
- z-index: 1000;
8970
+ z-index: var(--sk-z-dropdown);
8354
8971
  }
8355
8972
  @supports (corner-shape: bevel) {
8356
8973
  .sk-select-content {
@@ -8445,6 +9062,7 @@
8445
9062
  --sk-menu-fg: var(--sk-red-text);
8446
9063
  }
8447
9064
  .sk-select-item {
9065
+ position: relative;
8448
9066
  display: flex;
8449
9067
  align-items: center;
8450
9068
  justify-content: space-between;
@@ -8510,6 +9128,14 @@
8510
9128
  .sk-sidebar {
8511
9129
  width: var(--sk-sidebar-width, 180px);
8512
9130
  flex-shrink: 0;
9131
+ display: flex;
9132
+ flex-direction: column;
9133
+ }
9134
+ .sk-sidebar .sk-sidebar-panel {
9135
+ flex: 1 1 auto;
9136
+ min-height: 0;
9137
+ }
9138
+ .sk-sidebar {
8513
9139
  --sk-sidebar-color-base: var(--sk-neutral-base);
8514
9140
  --sk-sidebar-item-bg: color-mix(
8515
9141
  in oklch,
@@ -8518,26 +9144,32 @@
8518
9144
  );
8519
9145
  --sk-sidebar-item-hover-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 85%, white 15%);
8520
9146
  --sk-sidebar-item-hover-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 30%);
8521
- --sk-sidebar-item-active-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 50%);
8522
- --sk-sidebar-item-active-bg: var(--sk-sidebar-item-bg);
9147
+ --sk-sidebar-item-active-text: var(--sk-neutral-text);
9148
+ --sk-sidebar-item-active-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 92%, white 8%);
8523
9149
  }
8524
9150
  .sk-sidebar.sk-primary {
8525
9151
  --sk-sidebar-color-base: var(--sk-primary-base);
9152
+ --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
8526
9153
  }
8527
9154
  .sk-sidebar.sk-accent {
8528
9155
  --sk-sidebar-color-base: var(--sk-accent-base);
9156
+ --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
8529
9157
  }
8530
9158
  .sk-sidebar.sk-info {
8531
9159
  --sk-sidebar-color-base: var(--sk-info-base);
9160
+ --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
8532
9161
  }
8533
9162
  .sk-sidebar.sk-success {
8534
9163
  --sk-sidebar-color-base: var(--sk-success-base);
9164
+ --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
8535
9165
  }
8536
9166
  .sk-sidebar.sk-warning {
8537
9167
  --sk-sidebar-color-base: var(--sk-warning-base);
9168
+ --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
8538
9169
  }
8539
9170
  .sk-sidebar.sk-danger {
8540
9171
  --sk-sidebar-color-base: var(--sk-danger-base);
9172
+ --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
8541
9173
  }
8542
9174
  .sk-sidebar .sk-sidebar-nav {
8543
9175
  display: flex;
@@ -8567,6 +9199,13 @@
8567
9199
  cursor: pointer;
8568
9200
  display: block;
8569
9201
  }
9202
+ @media (pointer: coarse) {
9203
+ .sk-sidebar:not(.sk-dense) .sk-sidebar-item {
9204
+ min-height: 44px;
9205
+ display: flex;
9206
+ align-items: center;
9207
+ }
9208
+ }
8570
9209
  .sk-sidebar-item:hover {
8571
9210
  background: var(--sk-sidebar-item-hover-bg);
8572
9211
  color: var(--sk-sidebar-item-hover-text);
@@ -8576,23 +9215,26 @@
8576
9215
  background: var(--sk-sidebar-item-active-bg);
8577
9216
  color: var(--sk-sidebar-item-active-text);
8578
9217
  font-weight: 600;
8579
- clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
8580
9218
  }
8581
9219
  .sk-sidebar-item.sk-active::before, .sk-sidebar-item.router-link-active::before {
8582
9220
  content: "";
8583
9221
  position: absolute;
8584
9222
  inset: 0;
8585
9223
  background: var(--sk-sidebar-color-base);
8586
- clip-path: polygon(0% 100%, 0px 10px, 10px 0px, 11.41px 1.41px, 2px 10.83px, 2px 100%);
9224
+ clip-path: polygon(0% 0%, 2px 0%, 2px 100%, 0% 100%);
8587
9225
  }
8588
- .sk-sidebar-right .sk-sidebar-item:hover {
8589
- clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
9226
+ .sk-sidebar-item.sk-active:hover, .sk-sidebar-item.router-link-active:hover {
9227
+ background: var(--sk-sidebar-item-hover-bg);
9228
+ clip-path: none;
8590
9229
  }
8591
- .sk-sidebar-right .sk-sidebar-item.sk-active, .sk-sidebar-right .sk-sidebar-item.router-link-active {
9230
+ .sk-sidebar-item.sk-active:hover::before, .sk-sidebar-item.router-link-active:hover::before {
9231
+ background: var(--sk-sidebar-item-hover-text);
9232
+ }
9233
+ .sk-sidebar-right .sk-sidebar-item:hover {
8592
9234
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
8593
9235
  }
8594
9236
  .sk-sidebar-right .sk-sidebar-item.sk-active::before, .sk-sidebar-right .sk-sidebar-item.router-link-active::before {
8595
- clip-path: polygon(100% 100%, 100% 10px, calc(100% - 10px) 0px, calc(100% - 11.41px) 1.41px, calc(100% - 2px) 10.83px, calc(100% - 2px) 100%);
9237
+ clip-path: polygon(100% 0%, calc(100% - 2px) 0%, calc(100% - 2px) 100%, 100% 100%);
8596
9238
  }
8597
9239
  .sk-skeleton {
8598
9240
  --sk-skeleton-base: oklch(from var(--sk-neutral-base) l c h / 0.12);
@@ -8649,6 +9291,13 @@
8649
9291
  opacity: 0.4;
8650
9292
  }
8651
9293
  }
9294
+ @media (prefers-reduced-motion: reduce) {
9295
+ .sk-skeleton,
9296
+ .sk-skeleton::after,
9297
+ .sk-skeleton-shimmer::after {
9298
+ animation: none;
9299
+ }
9300
+ }
8652
9301
  .sk-slider {
8653
9302
  --sk-slider-color-base: var(--sk-primary-base);
8654
9303
  --sk-slider-thumb-color: var(--sk-slider-color-base);
@@ -8852,6 +9501,7 @@
8852
9501
  }
8853
9502
  }
8854
9503
  .sk-slider-thumb {
9504
+ position: relative;
8855
9505
  display: block;
8856
9506
  width: var(--sk-slider-thumb-size);
8857
9507
  height: var(--sk-slider-thumb-size);
@@ -9119,6 +9769,11 @@
9119
9769
  opacity: 0.3;
9120
9770
  }
9121
9771
  }
9772
+ @media (prefers-reduced-motion: reduce) {
9773
+ .sk-spinner * {
9774
+ animation-duration: 8s !important;
9775
+ }
9776
+ }
9122
9777
  .sk-splitter {
9123
9778
  --sk-splitter-color-base: var(--sk-neutral-base);
9124
9779
  --sk-splitter-handle-color: var(--sk-splitter-color-base);
@@ -9233,6 +9888,11 @@
9233
9888
  gap: var(--sk-switch-label-gap);
9234
9889
  cursor: pointer;
9235
9890
  }
9891
+ @media (pointer: coarse) {
9892
+ .sk-switch-wrapper {
9893
+ min-height: 44px;
9894
+ }
9895
+ }
9236
9896
  .sk-switch-wrapper:has(.sk-switch:disabled) {
9237
9897
  cursor: not-allowed;
9238
9898
  }
@@ -9814,6 +10474,7 @@
9814
10474
  .sk-table-wrapper {
9815
10475
  --sk-table-border-color: color-mix(in oklch, var(--sk-neutral-base), black 20%);
9816
10476
  --sk-table-corner-cut: 1rem;
10477
+ position: relative;
9817
10478
  overflow-x: auto;
9818
10479
  }
9819
10480
  @supports (corner-shape: bevel) {
@@ -11710,6 +12371,13 @@
11710
12371
  border: none;
11711
12372
  border-radius: 0;
11712
12373
  cursor: pointer;
12374
+ }
12375
+ @media (pointer: coarse) {
12376
+ .sk-tab {
12377
+ min-height: 44px;
12378
+ }
12379
+ }
12380
+ .sk-tab {
11713
12381
  transition: color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing), background-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing), border-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing);
11714
12382
  white-space: nowrap;
11715
12383
  user-select: none;
@@ -11969,6 +12637,7 @@
11969
12637
  --sk-tag-ghost-opacity: 0.35;
11970
12638
  }
11971
12639
  .sk-tag {
12640
+ position: relative;
11972
12641
  display: inline-flex;
11973
12642
  align-items: center;
11974
12643
  justify-content: center;
@@ -12802,6 +13471,7 @@
12802
13471
  --sk-tags-input-fg: var(--sk-red-text);
12803
13472
  }
12804
13473
  .sk-tags-input-container {
13474
+ position: relative;
12805
13475
  display: flex;
12806
13476
  flex-wrap: wrap;
12807
13477
  align-items: center;
@@ -12915,6 +13585,7 @@
12915
13585
  --sk-textarea-color-base: var(--sk-neutral-base);
12916
13586
  --sk-textarea-fg: var(--sk-neutral-text);
12917
13587
  --sk-textarea-cut: 0.5rem;
13588
+ position: relative;
12918
13589
  display: block;
12919
13590
  width: 100%;
12920
13591
  font-family: var(--sk-font-family-base);
@@ -13064,7 +13735,7 @@
13064
13735
  }
13065
13736
  .sk-toast-viewport {
13066
13737
  position: fixed;
13067
- z-index: 100;
13738
+ z-index: var(--sk-z-toast);
13068
13739
  display: flex;
13069
13740
  flex-direction: column;
13070
13741
  gap: var(--sk-space-sm);
@@ -13122,6 +13793,7 @@
13122
13793
  #000 46.25%
13123
13794
  );
13124
13795
  --sk-toast-border-color: var(--sk-toast-color-base);
13796
+ position: relative;
13125
13797
  display: flex;
13126
13798
  align-items: center;
13127
13799
  gap: var(--sk-toast-gap);
@@ -13279,6 +13951,13 @@
13279
13951
  transform: translateX(calc(100% + var(--sk-space-md)));
13280
13952
  }
13281
13953
  }
13954
+ @media (prefers-reduced-motion: reduce) {
13955
+ .sk-toast-root[data-state=open],
13956
+ .sk-toast-root[data-state=closed],
13957
+ .sk-toast-root[data-swipe=end] {
13958
+ animation: none;
13959
+ }
13960
+ }
13282
13961
  .sk-toolbar {
13283
13962
  --sk-toolbar-color-base: var(--sk-neutral-base);
13284
13963
  --sk-toolbar-fg: var(--sk-neutral-text);
@@ -13383,6 +14062,7 @@
13383
14062
  --sk-toolbar-active: var(--sk-danger-active);
13384
14063
  }
13385
14064
  .sk-toolbar-button {
14065
+ position: relative;
13386
14066
  display: flex;
13387
14067
  align-items: center;
13388
14068
  justify-content: center;
@@ -13445,6 +14125,7 @@
13445
14125
  gap: 1px;
13446
14126
  }
13447
14127
  .sk-toolbar-toggle-item {
14128
+ position: relative;
13448
14129
  display: flex;
13449
14130
  align-items: center;
13450
14131
  justify-content: center;
@@ -13566,7 +14247,7 @@
13566
14247
  color: var(--sk-neutral-text);
13567
14248
  box-shadow: var(--sk-shadow-md), 0 0 8px oklch(from var(--sk-tooltip-color-base) l c h/0.4);
13568
14249
  max-width: 20rem;
13569
- z-index: 60;
14250
+ z-index: var(--sk-z-tooltip);
13570
14251
  }
13571
14252
  .sk-tooltip-content[data-state=delayed-open], .sk-tooltip-content[data-state=instant-open] {
13572
14253
  animation: sk-tooltip-show var(--sk-transition-duration-fast) ease-out;
@@ -13665,6 +14346,11 @@
13665
14346
  transform: scale(0.95);
13666
14347
  }
13667
14348
  }
14349
+ @media (prefers-reduced-motion: reduce) {
14350
+ .sk-tooltip-content[data-state] {
14351
+ animation: none;
14352
+ }
14353
+ }
13668
14354
  .sk-tree-view {
13669
14355
  --sk-tree-color-base: var(--sk-neutral-base);
13670
14356
  --sk-tree-fg: var(--sk-neutral-text);
@@ -13713,6 +14399,13 @@
13713
14399
  font-size: var(--sk-font-size-sm);
13714
14400
  line-height: 1.5;
13715
14401
  outline: none;
14402
+ }
14403
+ @media (pointer: coarse) {
14404
+ .sk-tree-item {
14405
+ min-height: 44px;
14406
+ }
14407
+ }
14408
+ .sk-tree-item {
13716
14409
  transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
13717
14410
  }
13718
14411
  .sk-tree-item:hover:not([data-disabled]) {
@@ -14318,7 +15011,7 @@ kbd.sk-neutral {
14318
15011
 
14319
15012
  @layer reset, tokens, base, components, utilities;.sk-panel[data-v-07c1642c]::after {
14320
15013
  display: var(--v42b18398);
14321
- }.vuelor-picker-root{--vuelor-primary-color: #0d99ff;--vuelor-surface-color: #ffffff;--vuelor-border-color: #e6e6e6;--vuelor-inner-shadow-color: #0000001a;--vuelor-input-bg-color: #f5f5f5;--vuelor-button-hover-bg-color: #0000000d;--vuelor-disabled-opacity: .5;--shadow-vuelor-card: 0 .125rem .3125rem 0 #00000026, 0 .625rem 1rem 0 #0000001f, 0 0 .03125rem 0 #0000001f;--shadow-vuelor-thumb: 0 0 .03125rem rgba(0, 0, 0, .18), 0 .1875rem .5rem rgba(0, 0, 0, .1), 0 .0625rem .1875rem rgba(0, 0, 0, .1);--shadow-vuelor-inner: inset 0 0 0 .0625rem var(--vuelor-inner-shadow-color);width:15rem;background-color:var(--vuelor-surface-color);border-radius:.8125rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-vuelor-card)}.vuelor-picker-eye-dropper{padding:.25rem;border-radius:.3125rem}.vuelor-picker-eye-dropper:hover:not(:disabled){background-color:var(--vuelor-button-hover-bg-color)}.vuelor-picker-eye-dropper:disabled{opacity:var(--vuelor-disabled-opacity);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--vuelor-surface-color);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-canvas-root{position:relative;touch-action:none}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-canvas-area{border-radius:.3125rem;outline-width:.0625rem;outline-style:solid;outline-offset:-.0625rem;outline-color:var(--vuelor-inner-shadow-color)}.vuelor-picker-slider-root{position:relative;height:1rem;width:100%;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.vuelor-picker-slider-root[data-orientation=vertical]{height:auto;width:1rem;flex-direction:column}.vuelor-picker-slider-root[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-slider-track{position:relative;height:1rem;width:100%;flex-grow:1;border-radius:9999rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-slider-track[data-orientation=vertical]{height:100%;width:1rem}.vuelor-picker-input-group{width:100%;display:flex;gap:.0625rem;border-radius:.3125rem;outline-style:solid;outline-width:0;outline-color:var(--vuelor-border-color)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--vuelor-primary-color)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--vuelor-input-bg-color)}.vuelor-picker-input-item[data-before],.vuelor-picker-input-item[data-alpha-input]{flex-grow:0}.vuelor-picker-input-item:first-child{border-top-left-radius:.3125rem;border-bottom-left-radius:.3125rem}.vuelor-picker-input-item:last-child{border-top-right-radius:.3125rem;border-bottom-right-radius:.3125rem}.vuelor-picker-input-label{-webkit-user-select:none;user-select:none;color:#000;font-size:.6875rem;opacity:.4;display:none}.vuelor-picker-input-label[data-alpha-label],.vuelor-picker-input-label:not([data-alpha-label]){display:block}.vuelor-picker-input-field{width:100%;height:1.5rem;min-width:1.25rem;font-size:.6875rem;background:transparent;border:none}.vuelor-picker-input-field:focus{outline:none}.vuelor-picker-swatch-base{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-basedisabled{opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-swatch-base:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
15014
+ }.vuelor-picker-root{--color-vuelor-primary: #0d99ff;--color-vuelor-surface: #ffffff;--color-vuelor-border: #e6e6e6;--color-vuelor-shadow-inner: #0000001a;--color-vuelor-input-bg: #f5f5f5;--color-vuelor-button-bg--hover: #0000000d;--opacity-vuelor-disabled: .5;--shadow-vuelor-card: 0 .125rem .3125rem 0 #00000026, 0 .625rem 1rem 0 #0000001f, 0 0 .03125rem 0 #0000001f;--shadow-vuelor-thumb: 0 0 .03125rem rgba(0, 0, 0, .18), 0 .1875rem .5rem rgba(0, 0, 0, .1), 0 .0625rem .1875rem rgba(0, 0, 0, .1);--shadow-vuelor-inner: inset 0 0 0 .0625rem var(--color-vuelor-shadow-inner);width:15rem;background-color:var(--color-vuelor-surface);border-radius:.8125rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-vuelor-card)}.vuelor-picker-eye-dropper{padding:.25rem;border-radius:.3125rem}.vuelor-picker-eye-dropper:hover:not(:disabled){background-color:var(--color-vuelor-button-bg--hover)}.vuelor-picker-eye-dropper:disabled{opacity:var(--opacity-vuelor-disabled);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--color-vuelor-surface);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-canvas-root{position:relative;width:100%;height:13rem;touch-action:none;border-radius:.3125rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-slider-root{position:relative;height:1rem;width:100%;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.vuelor-picker-slider-root[data-orientation=vertical]{height:auto;width:1rem;flex-direction:column}.vuelor-picker-slider-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-slider-track{position:relative;height:1rem;width:100%;flex-grow:1;border-radius:9999rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-slider-track[data-orientation=vertical]{height:100%;width:1rem}.vuelor-picker-input-group{width:100%;display:flex;gap:.0625rem;border-radius:.3125rem;outline-style:solid;outline-width:0;outline-color:var(--color-vuelor-border)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--color-vuelor-primary)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled);outline:none}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--color-vuelor-input-bg)}.vuelor-picker-input-item[data-before],.vuelor-picker-input-item[data-alpha-input]{flex-grow:0}.vuelor-picker-input-item:first-child{border-top-left-radius:.3125rem;border-bottom-left-radius:.3125rem}.vuelor-picker-input-item:last-child{border-top-right-radius:.3125rem;border-bottom-right-radius:.3125rem}.vuelor-picker-input-label{-webkit-user-select:none;user-select:none;color:#000;font-size:.6875rem;opacity:.4}.vuelor-picker-input-field{width:100%;height:1.5rem;min-width:1.25rem;font-size:.6875rem;background:transparent;border:none}.vuelor-picker-input-field:focus{outline:none}.vuelor-picker-swatch-root{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-root:disabled{opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-swatch-root:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
14322
15015
  .vuelor-picker-root[data-v-adc9cbb2] {
14323
15016
  width: 100%;
14324
15017
  background: transparent;
@@ -14439,4 +15132,4 @@ kbd.sk-neutral {
14439
15132
  }
14440
15133
  .sk-color-picker-panel .vuelor-picker-swatch-base {
14441
15134
  border-radius: 2px;
14442
- }
15135
+ }/*$vite$:1*/