@rokkit/themes 1.0.0-next.150 → 1.0.0-next.152

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 (262) hide show
  1. package/build.mjs +14 -5
  2. package/dist/ant-design.css +89 -25
  3. package/dist/base.css +488 -40
  4. package/dist/bits-ui.css +69 -16
  5. package/dist/carbon.css +82 -31
  6. package/dist/daisy-ui.css +73 -16
  7. package/dist/frosted.css +1953 -0
  8. package/dist/grada-ui.css +186 -37
  9. package/dist/index.css +2433 -1065
  10. package/dist/material.css +95 -18
  11. package/dist/minimal.css +120 -47
  12. package/dist/rokkit.css +174 -17
  13. package/dist/shadcn.css +70 -24
  14. package/package.json +5 -5
  15. package/src/ant-design/button.css +31 -24
  16. package/src/ant-design/card.css +4 -4
  17. package/src/ant-design/chart.css +5 -5
  18. package/src/ant-design/dropdown.css +7 -7
  19. package/src/ant-design/floating-action.css +5 -5
  20. package/src/ant-design/floating-navigation.css +4 -4
  21. package/src/ant-design/grid.css +1 -1
  22. package/src/ant-design/index.css +1 -0
  23. package/src/ant-design/input.css +4 -2
  24. package/src/ant-design/list.css +11 -11
  25. package/src/ant-design/menu.css +6 -6
  26. package/src/ant-design/range.css +1 -1
  27. package/src/ant-design/search-filter.css +2 -2
  28. package/src/ant-design/select.css +12 -12
  29. package/src/ant-design/status-list.css +1 -1
  30. package/src/ant-design/step-indicator.css +38 -0
  31. package/src/ant-design/switch.css +2 -2
  32. package/src/ant-design/table.css +8 -6
  33. package/src/ant-design/tabs.css +13 -9
  34. package/src/ant-design/toggle.css +3 -3
  35. package/src/ant-design/toolbar.css +7 -7
  36. package/src/ant-design/tree.css +21 -11
  37. package/src/ant-design/upload-progress.css +1 -1
  38. package/src/ant-design/upload-target.css +1 -1
  39. package/src/base/avatar.css +82 -0
  40. package/src/base/badge.css +41 -0
  41. package/src/base/button.css +6 -6
  42. package/src/base/card.css +7 -4
  43. package/src/base/chart.css +5 -5
  44. package/src/base/density.css +51 -0
  45. package/src/base/divider.css +49 -0
  46. package/src/base/dropdown.css +5 -4
  47. package/src/base/index.css +6 -0
  48. package/src/base/input.css +3 -1
  49. package/src/base/list.css +12 -7
  50. package/src/base/menu.css +7 -5
  51. package/src/base/stack.css +76 -0
  52. package/src/base/step-indicator.css +74 -0
  53. package/src/base/swatch.css +12 -6
  54. package/src/base/table.css +52 -2
  55. package/src/bits-ui/button.css +18 -18
  56. package/src/bits-ui/card.css +4 -4
  57. package/src/bits-ui/chart.css +5 -5
  58. package/src/bits-ui/dropdown.css +5 -5
  59. package/src/bits-ui/floating-action.css +5 -5
  60. package/src/bits-ui/floating-navigation.css +2 -2
  61. package/src/bits-ui/index.css +1 -0
  62. package/src/bits-ui/input.css +8 -4
  63. package/src/bits-ui/list.css +4 -4
  64. package/src/bits-ui/menu.css +5 -5
  65. package/src/bits-ui/range.css +2 -2
  66. package/src/bits-ui/search-filter.css +2 -2
  67. package/src/bits-ui/select.css +9 -9
  68. package/src/bits-ui/status-list.css +1 -1
  69. package/src/bits-ui/step-indicator.css +40 -0
  70. package/src/bits-ui/switch.css +2 -2
  71. package/src/bits-ui/table.css +1 -1
  72. package/src/bits-ui/tabs.css +5 -5
  73. package/src/bits-ui/toggle.css +2 -2
  74. package/src/bits-ui/toolbar.css +7 -7
  75. package/src/bits-ui/tree.css +12 -4
  76. package/src/bits-ui/upload-progress.css +1 -1
  77. package/src/carbon/button.css +23 -20
  78. package/src/carbon/card.css +5 -5
  79. package/src/carbon/chart.css +5 -5
  80. package/src/carbon/dropdown.css +8 -8
  81. package/src/carbon/floating-action.css +8 -8
  82. package/src/carbon/floating-navigation.css +5 -5
  83. package/src/carbon/index.css +1 -0
  84. package/src/carbon/input.css +2 -2
  85. package/src/carbon/list.css +12 -14
  86. package/src/carbon/menu.css +8 -8
  87. package/src/carbon/range.css +2 -2
  88. package/src/carbon/search-filter.css +2 -2
  89. package/src/carbon/select.css +13 -13
  90. package/src/carbon/status-list.css +1 -1
  91. package/src/carbon/step-indicator.css +40 -0
  92. package/src/carbon/switch.css +3 -3
  93. package/src/carbon/table.css +6 -6
  94. package/src/carbon/tabs.css +10 -8
  95. package/src/carbon/toc.css +2 -2
  96. package/src/carbon/toggle.css +3 -3
  97. package/src/carbon/toolbar.css +8 -9
  98. package/src/carbon/tree.css +22 -14
  99. package/src/carbon/upload-progress.css +2 -2
  100. package/src/carbon/upload-target.css +2 -2
  101. package/src/daisy-ui/button.css +20 -19
  102. package/src/daisy-ui/card.css +5 -5
  103. package/src/daisy-ui/chart.css +5 -5
  104. package/src/daisy-ui/dropdown.css +8 -8
  105. package/src/daisy-ui/floating-action.css +6 -6
  106. package/src/daisy-ui/floating-navigation.css +5 -5
  107. package/src/daisy-ui/grid.css +1 -1
  108. package/src/daisy-ui/index.css +1 -0
  109. package/src/daisy-ui/input.css +5 -3
  110. package/src/daisy-ui/list.css +9 -9
  111. package/src/daisy-ui/menu.css +7 -7
  112. package/src/daisy-ui/range.css +3 -3
  113. package/src/daisy-ui/search-filter.css +3 -3
  114. package/src/daisy-ui/select.css +14 -14
  115. package/src/daisy-ui/status-list.css +1 -1
  116. package/src/daisy-ui/step-indicator.css +37 -0
  117. package/src/daisy-ui/switch.css +3 -3
  118. package/src/daisy-ui/table.css +7 -5
  119. package/src/daisy-ui/tabs.css +10 -6
  120. package/src/daisy-ui/toggle.css +3 -3
  121. package/src/daisy-ui/toolbar.css +6 -6
  122. package/src/daisy-ui/tree.css +20 -10
  123. package/src/daisy-ui/upload-target.css +1 -1
  124. package/src/frosted/button.css +224 -0
  125. package/src/frosted/card.css +130 -0
  126. package/src/frosted/chart.css +38 -0
  127. package/src/frosted/dropdown.css +66 -0
  128. package/src/{glass → frosted}/floating-action.css +10 -10
  129. package/src/{glass → frosted}/floating-navigation.css +13 -13
  130. package/src/{glass → frosted}/index.css +1 -0
  131. package/src/frosted/input.css +135 -0
  132. package/src/frosted/list.css +122 -0
  133. package/src/frosted/menu.css +108 -0
  134. package/src/frosted/message.css +35 -0
  135. package/src/{glass → frosted}/range.css +10 -10
  136. package/src/{glass → frosted}/search-filter.css +8 -8
  137. package/src/{glass → frosted}/select.css +34 -34
  138. package/src/frosted/status-list.css +66 -0
  139. package/src/frosted/step-indicator.css +41 -0
  140. package/src/frosted/swatch.css +21 -0
  141. package/src/frosted/switch.css +43 -0
  142. package/src/frosted/table.css +106 -0
  143. package/src/{glass → frosted}/tabs.css +10 -10
  144. package/src/{glass → frosted}/timeline.css +7 -7
  145. package/src/frosted/toc.css +18 -0
  146. package/src/{glass → frosted}/toggle.css +9 -9
  147. package/src/{glass → frosted}/toolbar.css +16 -16
  148. package/src/{glass → frosted}/tree.css +20 -20
  149. package/src/grada-ui/button.css +20 -6
  150. package/src/grada-ui/card.css +12 -6
  151. package/src/grada-ui/chart.css +5 -5
  152. package/src/grada-ui/dropdown.css +7 -3
  153. package/src/grada-ui/floating-action.css +11 -4
  154. package/src/grada-ui/floating-navigation.css +5 -1
  155. package/src/grada-ui/index.css +1 -0
  156. package/src/grada-ui/input.css +2 -2
  157. package/src/grada-ui/list.css +15 -3
  158. package/src/grada-ui/menu.css +2 -2
  159. package/src/grada-ui/range.css +5 -1
  160. package/src/grada-ui/search-filter.css +6 -2
  161. package/src/grada-ui/select.css +27 -9
  162. package/src/grada-ui/status-list.css +5 -1
  163. package/src/grada-ui/step-indicator.css +37 -0
  164. package/src/grada-ui/switch.css +7 -3
  165. package/src/grada-ui/table.css +2 -2
  166. package/src/grada-ui/tabs.css +5 -1
  167. package/src/grada-ui/timeline.css +10 -2
  168. package/src/grada-ui/toggle.css +7 -3
  169. package/src/grada-ui/toolbar.css +10 -2
  170. package/src/grada-ui/tree.css +8 -2
  171. package/src/index.css +2 -2
  172. package/src/material/button.css +5 -5
  173. package/src/material/card.css +4 -4
  174. package/src/material/chart.css +5 -5
  175. package/src/material/dropdown.css +7 -7
  176. package/src/material/floating-action.css +5 -5
  177. package/src/material/floating-navigation.css +4 -4
  178. package/src/material/index.css +1 -0
  179. package/src/material/input.css +1 -1
  180. package/src/material/list.css +11 -11
  181. package/src/material/menu.css +6 -6
  182. package/src/material/message.css +0 -1
  183. package/src/material/range.css +1 -1
  184. package/src/material/search-filter.css +1 -1
  185. package/src/material/select.css +14 -12
  186. package/src/material/status-list.css +1 -1
  187. package/src/material/step-indicator.css +41 -0
  188. package/src/material/swatch.css +4 -2
  189. package/src/material/switch.css +2 -2
  190. package/src/material/table.css +24 -5
  191. package/src/material/tabs.css +6 -3
  192. package/src/material/toggle.css +3 -3
  193. package/src/material/toolbar.css +7 -7
  194. package/src/material/tree.css +17 -7
  195. package/src/minimal/button.css +7 -7
  196. package/src/minimal/card.css +4 -4
  197. package/src/minimal/chart.css +5 -5
  198. package/src/minimal/dropdown.css +7 -7
  199. package/src/minimal/floating-action.css +5 -5
  200. package/src/minimal/floating-navigation.css +4 -4
  201. package/src/minimal/index.css +1 -0
  202. package/src/minimal/list.css +18 -16
  203. package/src/minimal/menu.css +6 -6
  204. package/src/minimal/message.css +0 -1
  205. package/src/minimal/range.css +1 -1
  206. package/src/minimal/search-filter.css +1 -1
  207. package/src/minimal/select.css +11 -11
  208. package/src/minimal/status-list.css +1 -1
  209. package/src/minimal/step-indicator.css +40 -0
  210. package/src/minimal/swatch.css +4 -2
  211. package/src/minimal/table.css +24 -5
  212. package/src/minimal/tabs.css +10 -8
  213. package/src/minimal/toggle.css +1 -1
  214. package/src/minimal/toolbar.css +7 -7
  215. package/src/minimal/tree.css +14 -6
  216. package/src/rokkit/avatar.css +29 -0
  217. package/src/rokkit/badge.css +29 -0
  218. package/src/rokkit/button.css +1 -1
  219. package/src/rokkit/chart.css +5 -5
  220. package/src/rokkit/divider.css +26 -0
  221. package/src/rokkit/index.css +5 -0
  222. package/src/rokkit/stack.css +6 -0
  223. package/src/rokkit/step-indicator.css +41 -0
  224. package/src/rokkit/swatch.css +4 -2
  225. package/src/rokkit/table.css +25 -6
  226. package/src/shadcn/button.css +20 -21
  227. package/src/shadcn/card.css +4 -4
  228. package/src/shadcn/chart.css +5 -5
  229. package/src/shadcn/dropdown.css +7 -7
  230. package/src/shadcn/floating-action.css +5 -5
  231. package/src/shadcn/floating-navigation.css +4 -4
  232. package/src/shadcn/index.css +1 -0
  233. package/src/shadcn/input.css +4 -2
  234. package/src/shadcn/list.css +13 -15
  235. package/src/shadcn/menu.css +7 -7
  236. package/src/shadcn/range.css +2 -2
  237. package/src/shadcn/search-filter.css +2 -2
  238. package/src/shadcn/select.css +13 -13
  239. package/src/shadcn/status-list.css +1 -1
  240. package/src/shadcn/step-indicator.css +37 -0
  241. package/src/shadcn/switch.css +2 -2
  242. package/src/shadcn/table.css +4 -4
  243. package/src/shadcn/tabs.css +10 -8
  244. package/src/shadcn/toc.css +2 -2
  245. package/src/shadcn/toggle.css +4 -4
  246. package/src/shadcn/toolbar.css +8 -9
  247. package/src/shadcn/tree.css +21 -13
  248. package/src/shadcn/upload-progress.css +1 -1
  249. package/dist/glass.css +0 -1760
  250. package/src/glass/button.css +0 -174
  251. package/src/glass/card.css +0 -103
  252. package/src/glass/chart.css +0 -38
  253. package/src/glass/dropdown.css +0 -50
  254. package/src/glass/input.css +0 -128
  255. package/src/glass/list.css +0 -122
  256. package/src/glass/menu.css +0 -92
  257. package/src/glass/message.css +0 -36
  258. package/src/glass/status-list.css +0 -66
  259. package/src/glass/swatch.css +0 -19
  260. package/src/glass/switch.css +0 -28
  261. package/src/glass/table.css +0 -87
  262. package/src/glass/toc.css +0 -18
package/dist/glass.css DELETED
@@ -1,1760 +0,0 @@
1
- /**
2
- * @rokkit/themes - Glass Theme
3
- *
4
- * Glassmorphism styling with blur, transparency, and subtle borders.
5
- * Use with data-style="glass" wrapper.
6
- */
7
-
8
- /**
9
- * Button - Glass Theme Styles
10
- *
11
- * Glassmorphism styling with blur and transparency.
12
- */
13
-
14
- /* =============================================================================
15
- Default Style (filled)
16
- ============================================================================= */
17
-
18
- [data-style='glass'] [data-button][data-style='default'][data-variant='default'],
19
- [data-style='glass'] [data-button]:not([data-style])[data-variant='default'],
20
- [data-style='glass'] [data-button][data-style='default']:not([data-variant]),
21
- [data-style='glass'] [data-button]:not([data-style]):not([data-variant]) {
22
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
23
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"][data-style="glass"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"] [data-style="glass"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"][data-style="glass"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"][data-style="glass"] [data-button]:not([data-style]):not([data-variant]),[data-mode="dark"] [data-style="glass"] [data-button]:not([data-style]):not([data-variant]){border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
24
-
25
- [data-style='glass'] [data-button][data-style='default'][data-variant='primary'],
26
- [data-style='glass'] [data-button]:not([data-style])[data-variant='primary'] {
27
- background-color:rgba(var(--color-primary-500),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
28
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"][data-style="glass"] [data-button]:not([data-style])[data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-button]:not([data-style])[data-variant="primary"]{background-color:rgba(var(--color-primary-500),0.8);}
29
-
30
- [data-style='glass'] [data-button][data-style='default'][data-variant='secondary'],
31
- [data-style='glass'] [data-button]:not([data-style])[data-variant='secondary'] {
32
- background-color:rgba(var(--color-secondary-400),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
33
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"][data-style="glass"] [data-button]:not([data-style])[data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-button]:not([data-style])[data-variant="secondary"]{background-color:rgba(var(--color-secondary-600),0.8);}
34
-
35
- [data-style='glass'] [data-button][data-style='default'][data-variant='accent'],
36
- [data-style='glass'] [data-button]:not([data-style])[data-variant='accent'] {
37
- background-color:rgba(var(--color-accent-400),0.8);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
38
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="glass"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="glass"] [data-button]:not([data-style])[data-variant="accent"]{background-color:rgba(var(--color-accent-600),0.8);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));}
39
-
40
- [data-style='glass'] [data-button][data-style='default'][data-variant='danger'],
41
- [data-style='glass'] [data-button]:not([data-style])[data-variant='danger'] {
42
- background-color:rgba(var(--color-danger-400),0.8);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
43
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="glass"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="glass"] [data-button]:not([data-style])[data-variant="danger"]{background-color:rgba(var(--color-danger-600),0.8);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
44
-
45
- /* =============================================================================
46
- Outline Style
47
- ============================================================================= */
48
-
49
- [data-style='glass'] [data-button][data-style='outline'][data-variant='default'],
50
- [data-style='glass'] [data-button][data-style='outline']:not([data-variant]) {
51
- border-width:1px;border-color:rgba(var(--color-surface-500),0.3);background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
52
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"]:not([data-variant]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"]:not([data-variant]){border-color:rgba(var(--color-surface-500),0.3);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
53
-
54
- [data-style='glass'] [data-button][data-style='outline'][data-variant='primary'] {
55
- border-width:1px;border-color:rgba(var(--color-primary-400),0.4);background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
56
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"][data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"][data-variant="primary"]{border-color:rgba(var(--color-primary-600),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
57
-
58
- [data-style='glass'] [data-button][data-style='outline'][data-variant='secondary'] {
59
- border-width:1px;border-color:rgba(var(--color-secondary-400),0.4);background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
60
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"][data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"][data-variant="secondary"]{border-color:rgba(var(--color-secondary-600),0.4);--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
61
-
62
- [data-style='glass'] [data-button][data-style='outline'][data-variant='accent'] {
63
- border-width:1px;border-color:rgba(var(--color-accent-400),0.4);background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
64
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"][data-variant="accent"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"][data-variant="accent"]{border-color:rgba(var(--color-accent-600),0.4);--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
65
-
66
- [data-style='glass'] [data-button][data-style='outline'][data-variant='danger'] {
67
- border-width:1px;border-color:rgba(var(--color-danger-400),0.4);background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
68
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"][data-variant="danger"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"][data-variant="danger"]{border-color:rgba(var(--color-danger-600),0.4);--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
69
-
70
- /* =============================================================================
71
- Ghost Style
72
- ============================================================================= */
73
-
74
- [data-style='glass'] [data-button][data-style='ghost'] {
75
- border-color:transparent;background-color:transparent;
76
- }
77
-
78
- [data-style='glass'] [data-button][data-style='ghost'][data-variant='default'],
79
- [data-style='glass'] [data-button][data-style='ghost']:not([data-variant]) {
80
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
81
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"]:not([data-variant]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
82
-
83
- [data-style='glass'] [data-button][data-style='ghost'][data-variant='primary'] {
84
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
85
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"][data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
86
-
87
- [data-style='glass'] [data-button][data-style='ghost'][data-variant='secondary'] {
88
- --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
89
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"][data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
90
-
91
- [data-style='glass'] [data-button][data-style='ghost'][data-variant='accent'] {
92
- --un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
93
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"][data-variant="accent"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
94
-
95
- [data-style='glass'] [data-button][data-style='ghost'][data-variant='danger'] {
96
- --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
97
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"][data-variant="danger"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
98
-
99
- /* =============================================================================
100
- Gradient Style
101
- ============================================================================= */
102
-
103
- [data-style='glass'] [data-button][data-style='gradient'][data-variant='default'],
104
- [data-style='glass'] [data-button][data-style='gradient']:not([data-variant]) {
105
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),0.6) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
106
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="gradient"][data-variant="default"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="gradient"][data-variant="default"],[data-mode="dark"][data-style="glass"] [data-button][data-style="gradient"]:not([data-variant]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="gradient"]:not([data-variant]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),0.6) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
107
-
108
- [data-style='glass'] [data-button][data-style='gradient'][data-variant='primary'] {
109
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-300),0.6) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
110
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="gradient"][data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="gradient"][data-variant="primary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-700),0.6) var(--un-gradient-to-position);}
111
-
112
- [data-style='glass'] [data-button][data-style='gradient'][data-variant='secondary'] {
113
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-300),0.6) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
114
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="gradient"][data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="gradient"][data-variant="secondary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-700),0.6) var(--un-gradient-to-position);}
115
-
116
- [data-style='glass'] [data-button][data-style='gradient'][data-variant='accent'] {
117
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-300),0.6) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
118
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="gradient"][data-variant="accent"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-700),0.6) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));}
119
-
120
- [data-style='glass'] [data-button][data-style='gradient'][data-variant='danger'] {
121
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-300),0.6) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
122
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="gradient"][data-variant="danger"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),0.8) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-700),0.6) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
123
-
124
- [data-style='glass']
125
- [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
126
- filter: brightness(1.1);
127
- }
128
-
129
- /* =============================================================================
130
- Link Style
131
- ============================================================================= */
132
-
133
- [data-style='glass'] [data-button][data-style='link'][data-variant='default'],
134
- [data-style='glass'] [data-button][data-style='link']:not([data-variant]) {
135
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
136
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"][data-style="glass"] [data-button][data-style="link"]:not([data-variant]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
137
-
138
- [data-style='glass'] [data-button][data-style='link'][data-variant='primary'] {
139
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
140
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="link"][data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
141
-
142
- [data-style='glass'] [data-button][data-style='link'][data-variant='secondary'] {
143
- --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
144
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="link"][data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
145
-
146
- [data-style='glass'] [data-button][data-style='link'][data-variant='accent'] {
147
- --un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
148
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="link"][data-variant="accent"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
149
-
150
- [data-style='glass'] [data-button][data-style='link'][data-variant='danger'] {
151
- --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
152
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="link"][data-variant="danger"],[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
153
-
154
- [data-style='glass'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
155
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
156
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="link"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="link"]:hover:not(:disabled):not([data-disabled]){--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
157
-
158
- /* =============================================================================
159
- Hover States
160
- ============================================================================= */
161
-
162
- [data-style='glass'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
163
- [data-style='glass'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
164
- --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
165
- }
166
-
167
- [data-style='glass'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
168
- background-color:rgba(var(--color-surface-200),0.4);
169
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled]){background-color:rgba(var(--color-surface-800),0.4);}
170
-
171
- [data-style='glass'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
172
- background-color:rgba(var(--color-surface-200),0.3);
173
- }[data-mode="dark"][data-style="glass"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="glass"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled]){background-color:rgba(var(--color-surface-800),0.3);}
174
-
175
- /* =============================================================================
176
- Focus
177
- ============================================================================= */
178
-
179
- [data-style='glass'] [data-button]:focus-visible {
180
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
181
- }[data-mode="dark"][data-style="glass"] [data-button]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-button]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
182
-
183
- /* Glass Theme - Form field and input styles
184
- * Glassmorphism inputs with blur, transparency, and subtle borders.
185
- */
186
-
187
- /* Field root: text color, spacing */
188
- [data-style='glass'] [data-field-root] {
189
- gap:0.25rem;border-radius:0.375rem;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
190
- }[data-mode="dark"][data-style="glass"] [data-field-root],[data-mode="dark"] [data-style="glass"] [data-field-root]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
191
-
192
- /* Disabled state */
193
- [data-style='glass'] [data-field-root][data-field-disabled] [data-input-root] {
194
- cursor:not-allowed;opacity:0.5;
195
- }
196
-
197
- /* Labels */
198
- [data-style='glass'] [data-field] > label {
199
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
200
- }[data-mode="dark"][data-style="glass"] [data-field]>label,[data-mode="dark"] [data-style="glass"] [data-field]>label{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
201
-
202
- [data-style='glass'] [data-form-root] label {
203
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
204
- }[data-mode="dark"][data-style="glass"] [data-form-root] label,[data-mode="dark"] [data-style="glass"] [data-form-root] label{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
205
-
206
- /* Info field value */
207
- [data-style='glass'] [data-field-info] {
208
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));font-weight:500;
209
- }[data-mode="dark"][data-style="glass"] [data-field-info],[data-mode="dark"] [data-style="glass"] [data-field-info]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
210
-
211
- /* Separator */
212
- [data-style='glass'] [data-form-separator] {
213
- border-color:rgba(var(--color-surface-500),0.2);
214
- }[data-mode="dark"][data-style="glass"] [data-form-separator],[data-mode="dark"] [data-style="glass"] [data-form-separator]{border-color:rgba(var(--color-surface-500),0.2);}
215
-
216
- /* Input root: glass container — p-0.5 gives a small gap between border and content.
217
- * No backdrop-blur here: it creates a stacking context that traps select dropdowns.
218
- * The semi-transparent background provides the frosted glass look. */
219
- [data-style='glass'] [data-input-root] {
220
- display:flex;align-items:center;border-width:1px;border-color:rgba(var(--color-surface-500),0.2);border-radius:0.375rem;background-color:rgba(var(--color-surface-100),0.7);padding:0.125rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
221
- background-image: none;
222
- }[data-mode="dark"][data-style="glass"] [data-input-root],[data-mode="dark"] [data-style="glass"] [data-input-root]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);}
223
-
224
- [data-style='glass'] [data-input-root]:hover {
225
- border-color:rgba(var(--color-surface-500),0.3);
226
- }[data-mode="dark"][data-style="glass"] [data-input-root]:hover,[data-mode="dark"] [data-style="glass"] [data-input-root]:hover{border-color:rgba(var(--color-surface-500),0.3);}
227
-
228
- [data-style='glass'] [data-input-root]:focus-within {
229
- border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-surface-100),0.7);
230
- background-image: none;
231
- }[data-mode="dark"][data-style="glass"] [data-input-root]:focus-within,[data-mode="dark"] [data-style="glass"] [data-input-root]:focus-within{border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-surface-900),0.7);}
232
-
233
- /* Standard inputs inside wrapper */
234
- [data-style='glass'] [data-input-root] input:not([type='checkbox'], [type='radio'], [type='color']),
235
- [data-style='glass'] [data-input-root] select {
236
- border-radius:0.375rem;border-style:none;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
237
- font-size: 0.875rem;
238
- height: 2.25rem;
239
- }[data-mode="dark"][data-style="glass"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"] [data-style="glass"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"][data-style="glass"] [data-input-root] select,[data-mode="dark"] [data-style="glass"] [data-input-root] select{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}[data-style="glass"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]):focus,[data-style="glass"] [data-input-root] select:focus{outline:2px solid transparent;outline-offset:2px;}
240
-
241
- [data-style='glass'] [data-input-root] textarea {
242
- border-radius:0.375rem;border-style:none;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
243
- font-size: 0.875rem;
244
- }[data-mode="dark"][data-style="glass"] [data-input-root] textarea,[data-mode="dark"] [data-style="glass"] [data-input-root] textarea{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}[data-style="glass"] [data-input-root] textarea:focus{outline:2px solid transparent;outline-offset:2px;}
245
-
246
- /* Select inside input-root: suppress standalone glass select styles */
247
- [data-style='glass'] [data-input-root] [data-select-trigger] {
248
- border-radius:0.375rem;border-style:none;background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
249
- background-image: none;
250
- backdrop-filter: none;
251
- }[data-mode="dark"][data-style="glass"] [data-input-root] [data-select-trigger],[data-mode="dark"] [data-style="glass"] [data-input-root] [data-select-trigger]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}[data-style="glass"] [data-input-root] [data-select-trigger]:focus{outline:2px solid transparent;outline-offset:2px;}
252
-
253
- /* Suppress standalone select open-state when inside input-root */
254
- [data-style='glass'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
255
- border-style:none;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
256
- }
257
-
258
- /* Placeholders */
259
- [data-style='glass'] [data-input-root] input::placeholder,
260
- [data-style='glass'] [data-input-root] textarea::placeholder {
261
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
262
- }[data-mode="dark"][data-style="glass"] [data-input-root] input::placeholder,[data-mode="dark"] [data-style="glass"] [data-input-root] input::placeholder,[data-mode="dark"][data-style="glass"] [data-input-root] textarea::placeholder,[data-mode="dark"] [data-style="glass"] [data-input-root] textarea::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
263
-
264
- /* Checkbox field */
265
- [data-style='glass'] [data-field-type='checkbox'] [data-field] {
266
- display:flex;align-items:center;line-height:2;
267
- }
268
-
269
- /* Checkbox icon */
270
- [data-style='glass'] [data-checkbox-icon] {
271
- cursor:pointer;border-radius:0.25rem;font-size:1.125rem;line-height:1.75rem;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
272
- }[data-mode="dark"][data-style="glass"] [data-checkbox-icon],[data-mode="dark"] [data-style="glass"] [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
273
-
274
- [data-style='glass'] [data-checkbox-icon]:focus-visible {
275
- outline-width:2px;--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));outline-offset:2px;
276
- }[data-mode="dark"][data-style="glass"] [data-checkbox-icon]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-checkbox-icon]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));}
277
-
278
- [data-style='glass']
279
- [data-checkbox-root][data-variant='custom']:has(input:checked)
280
- [data-checkbox-icon] {
281
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
282
- }[data-mode="dark"][data-style="glass"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon],[data-mode="dark"] [data-style="glass"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
283
-
284
- [data-style='glass'] [data-field] textarea {
285
- min-height:5rem;padding-top:0.5rem;padding-bottom:0.5rem;
286
- }
287
-
288
- /* Color input */
289
- [data-style='glass'] [data-field-type='color'] [data-input-root] {
290
- overflow:hidden;
291
- }
292
-
293
- [data-style='glass'] [data-field-type='color'] input[type='color'] {
294
- min-height:2.75rem;display:flex;flex:1 1 0%;border-radius:0.375rem;background-color:transparent;
295
- }[data-style="glass"] [data-field-type="color"] input[type="color"]:focus{outline:2px solid transparent;outline-offset:2px;}
296
-
297
- /* Description and message */
298
- [data-style='glass'] [data-description],
299
- [data-style='glass'] [data-message] {
300
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
301
- }[data-mode="dark"][data-style="glass"] [data-description],[data-mode="dark"] [data-style="glass"] [data-description],[data-mode="dark"][data-style="glass"] [data-message],[data-mode="dark"] [data-style="glass"] [data-message]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
302
-
303
- [data-style='glass'] [data-message] {
304
- border-radius:0.375rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;
305
- }
306
-
307
- /* Error state */
308
- [data-style='glass'] [data-field-root][data-field-state='fail'] [data-input-root] {
309
- border-color:rgba(var(--color-danger-500),0.5);
310
- }[data-mode="dark"][data-style="glass"] [data-field-root][data-field-state="fail"] [data-input-root],[data-mode="dark"] [data-style="glass"] [data-field-root][data-field-state="fail"] [data-input-root]{border-color:rgba(var(--color-danger-500),0.5);}
311
-
312
- /**
313
- * Toolbar - Glass Theme Styles
314
- *
315
- * Glassmorphism styling with blur and transparency.
316
- */
317
-
318
- /* =============================================================================
319
- Toolbar Container
320
- ============================================================================= */
321
-
322
- [data-style='glass'] [data-toolbar] {
323
- background-color:rgba(var(--color-surface-100),0.7);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
324
- }[data-mode="dark"][data-style="glass"] [data-toolbar],[data-mode="dark"] [data-style="glass"] [data-toolbar]{background-color:rgba(var(--color-surface-900),0.7);}
325
-
326
- /* Position-based borders */
327
- [data-style='glass'] [data-toolbar][data-toolbar-position='top'],
328
- [data-style='glass'] [data-toolbar]:not([data-toolbar-position]) {
329
- border-bottom-width:1px;border-color:rgba(var(--color-surface-500),0.2);
330
- }[data-mode="dark"][data-style="glass"] [data-toolbar][data-toolbar-position="top"],[data-mode="dark"] [data-style="glass"] [data-toolbar][data-toolbar-position="top"],[data-mode="dark"][data-style="glass"] [data-toolbar]:not([data-toolbar-position]),[data-mode="dark"] [data-style="glass"] [data-toolbar]:not([data-toolbar-position]){border-color:rgba(var(--color-surface-500),0.2);}
331
-
332
- [data-style='glass'] [data-toolbar][data-toolbar-position='bottom'] {
333
- border-top-width:1px;border-color:rgba(var(--color-surface-500),0.2);
334
- }[data-mode="dark"][data-style="glass"] [data-toolbar][data-toolbar-position="bottom"],[data-mode="dark"] [data-style="glass"] [data-toolbar][data-toolbar-position="bottom"]{border-color:rgba(var(--color-surface-500),0.2);}
335
-
336
- [data-style='glass'] [data-toolbar][data-toolbar-position='left'] {
337
- border-right-width:1px;border-color:rgba(var(--color-surface-500),0.2);
338
- }[data-mode="dark"][data-style="glass"] [data-toolbar][data-toolbar-position="left"],[data-mode="dark"] [data-style="glass"] [data-toolbar][data-toolbar-position="left"]{border-color:rgba(var(--color-surface-500),0.2);}
339
-
340
- [data-style='glass'] [data-toolbar][data-toolbar-position='right'] {
341
- border-left-width:1px;border-color:rgba(var(--color-surface-500),0.2);
342
- }[data-mode="dark"][data-style="glass"] [data-toolbar][data-toolbar-position="right"],[data-mode="dark"] [data-style="glass"] [data-toolbar][data-toolbar-position="right"]{border-color:rgba(var(--color-surface-500),0.2);}
343
-
344
- /* =============================================================================
345
- Toolbar Items
346
- ============================================================================= */
347
-
348
- [data-style='glass'] [data-toolbar-item] {
349
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
350
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item],[data-mode="dark"] [data-style="glass"] [data-toolbar-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
351
-
352
- [data-style='glass'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
353
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
354
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="glass"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
355
-
356
- [data-style='glass'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
357
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
358
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="glass"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-ring-color:rgba(var(--color-surface-500),0.4);}
359
-
360
- /* Active/pressed state */
361
- [data-style='glass'] [data-toolbar-item][data-active='true'] {
362
- background-color:rgba(var(--color-primary-500),0.3);--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
363
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item][data-active="true"],[data-mode="dark"] [data-style="glass"] [data-toolbar-item][data-active="true"]{background-color:rgba(var(--color-primary-500),0.3);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
364
-
365
- [data-style='glass'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
366
- background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-950),var(--un-text-opacity));
367
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-toolbar-item][data-active="true"]:hover:not(:disabled){background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-50),var(--un-text-opacity));}
368
-
369
- /* =============================================================================
370
- Toolbar Icon
371
- ============================================================================= */
372
-
373
- [data-style='glass'] [data-toolbar-item] [data-toolbar-icon] {
374
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
375
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item] [data-toolbar-icon],[data-mode="dark"] [data-style="glass"] [data-toolbar-item] [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
376
-
377
- [data-style='glass'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
378
- --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
379
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon],[data-mode="dark"] [data-style="glass"] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
380
-
381
- [data-style='glass'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
382
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
383
- }[data-mode="dark"][data-style="glass"] [data-toolbar-item][data-active="true"] [data-toolbar-icon],[data-mode="dark"] [data-style="glass"] [data-toolbar-item][data-active="true"] [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
384
-
385
- /* =============================================================================
386
- Separator & Divider
387
- ============================================================================= */
388
-
389
- [data-style='glass'] [data-toolbar-separator] {
390
- background-color:rgba(var(--color-surface-500),0.2);
391
- }[data-mode="dark"][data-style="glass"] [data-toolbar-separator],[data-mode="dark"] [data-style="glass"] [data-toolbar-separator]{background-color:rgba(var(--color-surface-500),0.2);}
392
-
393
- [data-style='glass'] [data-toolbar-divider] {
394
- background-color:rgba(var(--color-surface-500),0.2);
395
- }[data-mode="dark"][data-style="glass"] [data-toolbar-divider],[data-mode="dark"] [data-style="glass"] [data-toolbar-divider]{background-color:rgba(var(--color-surface-500),0.2);}
396
-
397
- /**
398
- * Tabs - Glass Theme Styles
399
- *
400
- * Glassmorphism styling with blur and transparency.
401
- */
402
-
403
- /* =============================================================================
404
- Tab List
405
- ============================================================================= */
406
-
407
- [data-style='glass'] [data-tabs-list] {
408
- border-width:0px;border-bottom-width:1px;border-color:rgba(var(--color-surface-500),0.2);border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:rgba(var(--color-surface-100),0.7);padding-left:0;padding-right:0;--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
409
- }[data-mode="dark"][data-style="glass"] [data-tabs-list],[data-mode="dark"] [data-style="glass"] [data-tabs-list]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);}
410
-
411
- [data-style='glass'] [data-tabs][data-position='after'] [data-tabs-list] {
412
- border-top-width:1px;border-bottom-width:0px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;
413
- }
414
-
415
- /* =============================================================================
416
- Tab Triggers
417
- ============================================================================= */
418
-
419
- [data-style='glass'] [data-tabs-trigger] {
420
- background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
421
- }[data-mode="dark"][data-style="glass"] [data-tabs-trigger],[data-mode="dark"] [data-style="glass"] [data-tabs-trigger]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
422
-
423
- [data-style='glass'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
424
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
425
- }[data-mode="dark"][data-style="glass"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="glass"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
426
-
427
- /* Selected state */
428
- [data-style='glass'] [data-tabs-trigger][data-selected] {
429
- border-width:1px;border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
430
- }[data-mode="dark"][data-style="glass"] [data-tabs-trigger][data-selected],[data-mode="dark"] [data-style="glass"] [data-tabs-trigger][data-selected]{border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
431
-
432
- /* =============================================================================
433
- Tab Icon
434
- ============================================================================= */
435
-
436
- [data-style='glass'] [data-tabs-trigger] [data-tabs-icon] {
437
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
438
- }[data-mode="dark"][data-style="glass"] [data-tabs-trigger] [data-tabs-icon],[data-mode="dark"] [data-style="glass"] [data-tabs-trigger] [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
439
-
440
- [data-style='glass'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
441
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
442
- }[data-mode="dark"][data-style="glass"] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon],[data-mode="dark"] [data-style="glass"] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
443
-
444
- [data-style='glass'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
445
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
446
- }[data-mode="dark"][data-style="glass"] [data-tabs-trigger][data-selected] [data-tabs-icon],[data-mode="dark"] [data-style="glass"] [data-tabs-trigger][data-selected] [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
447
-
448
- /* =============================================================================
449
- Tab Panel
450
- ============================================================================= */
451
-
452
- [data-style='glass'] [data-tabs-content] {
453
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
454
- }[data-mode="dark"][data-style="glass"] [data-tabs-content],[data-mode="dark"] [data-style="glass"] [data-tabs-content]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
455
-
456
- /**
457
- * Toggle - Glass Theme Styles
458
- *
459
- * Glassmorphism styling with blur and transparency.
460
- */
461
-
462
- /* =============================================================================
463
- Toggle Container
464
- ============================================================================= */
465
-
466
- [data-style='glass'] [data-toggle] {
467
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);border-radius:0.5rem;background-color:rgba(var(--color-surface-100),0.7);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
468
- }[data-mode="dark"][data-style="glass"] [data-toggle],[data-mode="dark"] [data-style="glass"] [data-toggle]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);}
469
-
470
- /* =============================================================================
471
- Toggle Options
472
- ============================================================================= */
473
-
474
- [data-style='glass'] [data-toggle-option] {
475
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
476
- }[data-mode="dark"][data-style="glass"] [data-toggle-option],[data-mode="dark"] [data-style="glass"] [data-toggle-option]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
477
-
478
- [data-style='glass'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
479
- [data-style='glass'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
480
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
481
- }[data-mode="dark"][data-style="glass"] [data-toggle-option]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="glass"] [data-toggle-option]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="glass"] [data-toggle-option]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="glass"] [data-toggle-option]:focus:not(:disabled):not([data-disabled="true"]){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
482
-
483
- /* Selected state */
484
- [data-style='glass'] [data-toggle-option][data-selected='true'] {
485
- border-width:1px;border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
486
- }[data-mode="dark"][data-style="glass"] [data-toggle-option][data-selected="true"],[data-mode="dark"] [data-style="glass"] [data-toggle-option][data-selected="true"]{border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
487
-
488
- /* =============================================================================
489
- Toggle Icon
490
- ============================================================================= */
491
-
492
- [data-style='glass'] [data-toggle-option] [data-toggle-icon] {
493
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
494
- }[data-mode="dark"][data-style="glass"] [data-toggle-option] [data-toggle-icon],[data-mode="dark"] [data-style="glass"] [data-toggle-option] [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
495
-
496
- [data-style='glass'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
497
- [data-style='glass'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
498
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
499
- }[data-mode="dark"][data-style="glass"] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],[data-mode="dark"] [data-style="glass"] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],[data-mode="dark"][data-style="glass"] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon],[data-mode="dark"] [data-style="glass"] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
500
-
501
- [data-style='glass'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
502
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
503
- }[data-mode="dark"][data-style="glass"] [data-toggle-option][data-selected="true"] [data-toggle-icon],[data-mode="dark"] [data-style="glass"] [data-toggle-option][data-selected="true"] [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
504
-
505
- /**
506
- * Switch - Glass Theme Styles
507
- */
508
-
509
- [data-style='glass'] [data-switch-track] {
510
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.5);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
511
- }[data-mode="dark"][data-style="glass"] [data-switch-track],[data-mode="dark"] [data-style="glass"] [data-switch-track]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.5);}
512
-
513
- [data-style='glass'] [data-switch-thumb] {
514
- background-color:rgba(var(--color-surface-700),0.8);--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
515
- }[data-mode="dark"][data-style="glass"] [data-switch-thumb],[data-mode="dark"] [data-style="glass"] [data-switch-thumb]{background-color:rgba(var(--color-surface-300),0.8);}
516
-
517
- [data-style='glass'] [data-switch]:focus-visible [data-switch-track] {
518
- --un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-offset-width:1px;--un-ring-color:rgba(var(--color-primary-500),0.7);
519
- }[data-mode="dark"][data-style="glass"] [data-switch]:focus-visible [data-switch-track],[data-mode="dark"] [data-style="glass"] [data-switch]:focus-visible [data-switch-track]{--un-ring-color:rgba(var(--color-primary-500),0.7);}
520
-
521
- /* On state */
522
- [data-style='glass'] [data-switch][aria-checked='true'] [data-switch-track] {
523
- border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.4);
524
- }[data-mode="dark"][data-style="glass"] [data-switch][aria-checked="true"] [data-switch-track],[data-mode="dark"] [data-style="glass"] [data-switch][aria-checked="true"] [data-switch-track]{border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.4);}
525
-
526
- [data-style='glass'] [data-switch][aria-checked='true'] [data-switch-thumb] {
527
- background-color:rgb(255 255 255 / 0.9);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
528
- }
529
-
530
- [data-style='glass'] [data-switch-label] {
531
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
532
- }[data-mode="dark"][data-style="glass"] [data-switch-label],[data-mode="dark"] [data-style="glass"] [data-switch-label]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
533
-
534
- /**
535
- * List - Glass Theme Styles
536
- *
537
- * Glassmorphism styling with blur and transparency.
538
- */
539
-
540
- /* =============================================================================
541
- List Container
542
- ============================================================================= */
543
-
544
- [data-style='glass'] [data-list]:focus-within {
545
- border-radius:0.25rem;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
546
- }[data-mode="dark"][data-style="glass"] [data-list]:focus-within,[data-mode="dark"] [data-style="glass"] [data-list]:focus-within{--un-ring-color:rgba(var(--color-surface-500),0.4);}
547
-
548
- /* =============================================================================
549
- List Items
550
- ============================================================================= */
551
-
552
- [data-style='glass'] [data-list] [data-list-item] {
553
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
554
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
555
-
556
- [data-style='glass'] [data-list] a[data-list-item],
557
- [data-style='glass'] [data-list] button[data-list-item] {
558
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
559
- }[data-mode="dark"][data-style="glass"] [data-list] a[data-list-item],[data-mode="dark"] [data-style="glass"] [data-list] a[data-list-item],[data-mode="dark"][data-style="glass"] [data-list] button[data-list-item],[data-mode="dark"] [data-style="glass"] [data-list] button[data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
560
-
561
- /* Hover and focus (keyboard navigation) */
562
- [data-style='glass'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
563
- [data-style='glass'] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
564
- background-color:rgba(var(--color-surface-200),0.15);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
565
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="glass"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
566
-
567
- /* Active state — muted when list not focused */
568
- [data-style='glass'] [data-list] [data-list-item][data-active='true'] {
569
- background-color:rgba(var(--color-surface-200),0.15);background-image:none;--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
570
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-active="true"]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
571
-
572
- /* Active state — full highlight when list has focus */
573
- [data-style='glass'] [data-list]:focus-within [data-list-item][data-active='true'] {
574
- background-color:rgba(var(--color-primary-500),0.3);background-image:none;--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
575
- }[data-mode="dark"][data-style="glass"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="glass"] [data-list]:focus-within [data-list-item][data-active="true"]{background-color:rgba(var(--color-primary-500),0.3);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
576
-
577
- /* Active + hover/focus */
578
- [data-style='glass'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
579
- [data-style='glass'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
580
- background-color:rgba(var(--color-primary-500),0.4);background-image:none;
581
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-active="true"]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-active="true"]:focus:not(:disabled){background-color:rgba(var(--color-primary-500),0.4);}
582
-
583
- /* =============================================================================
584
- Item Elements
585
- ============================================================================= */
586
-
587
- [data-style='glass'] [data-list] [data-list-item] [data-item-icon] {
588
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
589
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
590
-
591
- [data-style='glass'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
592
- [data-style='glass'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
593
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
594
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"][data-style="glass"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
595
-
596
- [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
597
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
598
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
599
-
600
- [data-style='glass'] [data-list] [data-list-item] [data-item-description] {
601
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
602
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
603
-
604
- [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
605
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
606
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
607
-
608
- [data-style='glass'] [data-list] [data-list-item] [data-item-badge] {
609
- background-color:rgba(var(--color-surface-200),0.15);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
610
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item] [data-item-badge],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item] [data-item-badge]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
611
-
612
- [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
613
- background-color:rgba(var(--color-primary-500),0.25);background-image:none;--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
614
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-active="true"] [data-item-badge]{background-color:rgba(var(--color-primary-500),0.25);--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
615
-
616
- /* =============================================================================
617
- Groups
618
- ============================================================================= */
619
-
620
- [data-style='glass'] [data-list] [data-list-group] {
621
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
622
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-group],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-group]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
623
-
624
- [data-style='glass'] [data-list] [data-list-group]:hover:not(:disabled),
625
- [data-style='glass'] [data-list] [data-list-group]:focus:not(:disabled) {
626
- background-color:rgba(var(--color-surface-300),0.25);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
627
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-group]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-group]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-list] [data-list-group]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-group]:focus:not(:disabled){background-color:rgba(var(--color-surface-700),0.25);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
628
-
629
- /* =============================================================================
630
- Separator
631
- ============================================================================= */
632
-
633
- [data-style='glass'] [data-list] [data-list-separator] {
634
- background-color:rgba(var(--color-surface-500),0.2);background-image:none;
635
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-separator],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-separator]{background-color:rgba(var(--color-surface-500),0.2);}
636
-
637
- /* =============================================================================
638
- Multi-Selection
639
- ============================================================================= */
640
-
641
- [data-style='glass'] [data-list] [data-list-item][data-selected='true'] {
642
- background-color:rgba(var(--color-primary-500),0.2);background-image:none;--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
643
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-selected="true"],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-selected="true"]{background-color:rgba(var(--color-primary-500),0.2);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
644
-
645
- [data-style='glass'] [data-list]:focus-within [data-list-item][data-selected='true'] {
646
- background-color:rgba(var(--color-primary-500),0.3);background-image:none;
647
- }[data-mode="dark"][data-style="glass"] [data-list]:focus-within [data-list-item][data-selected="true"],[data-mode="dark"] [data-style="glass"] [data-list]:focus-within [data-list-item][data-selected="true"]{background-color:rgba(var(--color-primary-500),0.3);}
648
-
649
- [data-style='glass'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
650
- background-color:rgba(var(--color-primary-500),0.4);background-image:none;
651
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-selected="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-selected="true"]:hover:not(:disabled){background-color:rgba(var(--color-primary-500),0.4);}
652
-
653
- [data-style='glass'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
654
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
655
- }[data-mode="dark"][data-style="glass"] [data-list] [data-list-item][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-list] [data-list-item][data-selected="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
656
-
657
- /**
658
- * Tree - Glass Theme Styles
659
- *
660
- * Glassmorphism styling with blur and transparency.
661
- */
662
-
663
- /* =============================================================================
664
- Tree Container
665
- ============================================================================= */
666
-
667
- [data-style='glass'] [data-tree]:focus-within {
668
- border-radius:0.25rem;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
669
- }[data-mode="dark"][data-style="glass"] [data-tree]:focus-within,[data-mode="dark"] [data-style="glass"] [data-tree]:focus-within{--un-ring-color:rgba(var(--color-surface-500),0.4);}
670
-
671
- /* =============================================================================
672
- Tree Toggle Button
673
- ============================================================================= */
674
-
675
- [data-style='glass'] [data-tree-toggle-btn] {
676
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
677
- }[data-mode="dark"][data-style="glass"] [data-tree-toggle-btn],[data-mode="dark"] [data-style="glass"] [data-tree-toggle-btn]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
678
-
679
- [data-style='glass'] [data-tree-toggle-btn]:hover {
680
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
681
- }[data-mode="dark"][data-style="glass"] [data-tree-toggle-btn]:hover,[data-mode="dark"] [data-style="glass"] [data-tree-toggle-btn]:hover{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
682
-
683
- /* =============================================================================
684
- Tree Item Content
685
- ============================================================================= */
686
-
687
- [data-style='glass'] [data-tree-item-content] {
688
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
689
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content],[data-mode="dark"] [data-style="glass"] [data-tree-item-content]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
690
-
691
- [data-style='glass'] [data-tree-item-content]:hover:not(:disabled),
692
- [data-style='glass'] [data-tree-item-content]:focus:not(:disabled) {
693
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
694
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-tree-item-content]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-tree-item-content]:focus:not(:disabled){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
695
-
696
- /* Focus visible for keyboard navigation */
697
- [data-style='glass'] [data-tree-item-content]:focus-visible {
698
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
699
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-tree-item-content]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
700
-
701
- /* Active/selected state */
702
- [data-style='glass'] [data-tree-item-content][data-active='true'] {
703
- background-color:rgba(var(--color-primary-500),0.3);--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
704
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content][data-active="true"],[data-mode="dark"] [data-style="glass"] [data-tree-item-content][data-active="true"]{background-color:rgba(var(--color-primary-500),0.3);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
705
-
706
- [data-style='glass'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
707
- background-color:rgba(var(--color-primary-500),0.4);
708
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-tree-item-content][data-active="true"]:hover:not(:disabled){background-color:rgba(var(--color-primary-500),0.4);}
709
-
710
- /* =============================================================================
711
- Item Elements
712
- ============================================================================= */
713
-
714
- [data-style='glass'] [data-tree-item-content] [data-item-icon] {
715
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
716
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-tree-item-content] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
717
-
718
- [data-style='glass'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
719
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
720
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
721
-
722
- [data-style='glass'] [data-tree-item-content][data-active='true'] [data-item-icon] {
723
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
724
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-tree-item-content][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
725
-
726
- [data-style='glass'] [data-tree-item-content] [data-item-description] {
727
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
728
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-tree-item-content] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
729
-
730
- [data-style='glass'] [data-tree-item-content][data-active='true'] [data-item-description] {
731
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
732
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-tree-item-content][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
733
-
734
- [data-style='glass'] [data-tree-item-content] [data-item-badge] {
735
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
736
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content] [data-item-badge],[data-mode="dark"] [data-style="glass"] [data-tree-item-content] [data-item-badge]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
737
-
738
- [data-style='glass'] [data-tree-item-content][data-active='true'] [data-item-badge] {
739
- background-color:rgba(var(--color-primary-500),0.25);--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
740
- }[data-mode="dark"][data-style="glass"] [data-tree-item-content][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="glass"] [data-tree-item-content][data-active="true"] [data-item-badge]{background-color:rgba(var(--color-primary-500),0.25);--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
741
-
742
- /* =============================================================================
743
- Multi-Selection
744
- ============================================================================= */
745
-
746
- [data-style='glass'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
747
- background-color:rgba(var(--color-primary-500),0.2);
748
- }[data-mode="dark"][data-style="glass"] [data-tree-node][data-selected="true"] [data-tree-node-row],[data-mode="dark"] [data-style="glass"] [data-tree-node][data-selected="true"] [data-tree-node-row]{background-color:rgba(var(--color-primary-500),0.2);}
749
-
750
- [data-style='glass']
751
- [data-tree]:focus-within
752
- [data-tree-node][data-selected='true']
753
- [data-tree-node-row] {
754
- background-color:rgba(var(--color-primary-500),0.3);
755
- }[data-mode="dark"][data-style="glass"] [data-tree]:focus-within [data-tree-node][data-selected="true"] [data-tree-node-row],[data-mode="dark"] [data-style="glass"] [data-tree]:focus-within [data-tree-node][data-selected="true"] [data-tree-node-row]{background-color:rgba(var(--color-primary-500),0.3);}
756
-
757
- [data-style='glass'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
758
- --un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
759
- }[data-mode="dark"][data-style="glass"] [data-tree-node][data-selected="true"] [data-tree-item-content],[data-mode="dark"] [data-style="glass"] [data-tree-node][data-selected="true"] [data-tree-item-content]{--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
760
-
761
- [data-style='glass']
762
- [data-tree-node][data-selected='true']
763
- [data-tree-item-content]
764
- [data-item-icon] {
765
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
766
- }[data-mode="dark"][data-style="glass"] [data-tree-node][data-selected="true"] [data-tree-item-content] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-tree-node][data-selected="true"] [data-tree-item-content] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
767
-
768
- /**
769
- * Select - Glass Theme Styles
770
- *
771
- * Glassmorphism styling with blur and transparency.
772
- */
773
-
774
- /* =============================================================================
775
- Select Container — elevate when open so dropdown escapes sibling stacking contexts
776
- ============================================================================= */
777
-
778
- [data-style='glass'] [data-select][data-open='true'] {
779
- z-index: 50;
780
- }
781
-
782
- /* =============================================================================
783
- Trigger Button
784
- ============================================================================= */
785
-
786
- [data-style='glass'] [data-select-trigger] {
787
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
788
- }[data-mode="dark"][data-style="glass"] [data-select-trigger],[data-mode="dark"] [data-style="glass"] [data-select-trigger]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
789
-
790
- [data-style='glass'] [data-select-trigger]:hover:not(:disabled) {
791
- border-color:rgba(var(--color-surface-500),0.3);background-color:rgba(var(--color-surface-200),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
792
- }[data-mode="dark"][data-style="glass"] [data-select-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-select-trigger]:hover:not(:disabled){border-color:rgba(var(--color-surface-500),0.3);background-color:rgba(var(--color-surface-800),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
793
-
794
- [data-style='glass'] [data-select-trigger]:focus-visible {
795
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
796
- }[data-mode="dark"][data-style="glass"] [data-select-trigger]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-select-trigger]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
797
-
798
- [data-style='glass'] [data-select][data-open='true'] [data-select-trigger] {
799
- border-color:rgba(var(--color-primary-500),0.5);
800
- }[data-mode="dark"][data-style="glass"] [data-select][data-open="true"] [data-select-trigger],[data-mode="dark"] [data-style="glass"] [data-select][data-open="true"] [data-select-trigger]{border-color:rgba(var(--color-primary-500),0.5);}
801
-
802
- /* =============================================================================
803
- Placeholder
804
- ============================================================================= */
805
-
806
- [data-style='glass'] [data-select-placeholder] {
807
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
808
- }[data-mode="dark"][data-style="glass"] [data-select-placeholder],[data-mode="dark"] [data-style="glass"] [data-select-placeholder]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
809
-
810
- /* =============================================================================
811
- Arrow
812
- ============================================================================= */
813
-
814
- [data-style='glass'] [data-select-arrow] {
815
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
816
- }[data-mode="dark"][data-style="glass"] [data-select-arrow],[data-mode="dark"] [data-style="glass"] [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
817
-
818
- [data-style='glass'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
819
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
820
- }[data-mode="dark"][data-style="glass"] [data-select-trigger]:hover:not(:disabled) [data-select-arrow],[data-mode="dark"] [data-style="glass"] [data-select-trigger]:hover:not(:disabled) [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
821
-
822
- /* =============================================================================
823
- Tags (MultiSelect)
824
- ============================================================================= */
825
-
826
- [data-style='glass'] [data-select-tag] {
827
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
828
- }[data-mode="dark"][data-style="glass"] [data-select-tag],[data-mode="dark"] [data-style="glass"] [data-select-tag]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
829
-
830
- [data-style='glass'] [data-select-tag-remove] {
831
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
832
- }[data-mode="dark"][data-style="glass"] [data-select-tag-remove],[data-mode="dark"] [data-style="glass"] [data-select-tag-remove]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
833
-
834
- [data-style='glass'] [data-select-tag-remove]:hover {
835
- --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
836
- }[data-mode="dark"][data-style="glass"] [data-select-tag-remove]:hover,[data-mode="dark"] [data-style="glass"] [data-select-tag-remove]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
837
-
838
- /* =============================================================================
839
- Dropdown Panel
840
- ============================================================================= */
841
-
842
- [data-style='glass'] [data-select-dropdown] {
843
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.5);--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
844
- }[data-mode="dark"][data-style="glass"] [data-select-dropdown],[data-mode="dark"] [data-style="glass"] [data-select-dropdown]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.5);}
845
-
846
- /* =============================================================================
847
- Options
848
- ============================================================================= */
849
-
850
- [data-style='glass'] [data-select-option] {
851
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
852
- }[data-mode="dark"][data-style="glass"] [data-select-option],[data-mode="dark"] [data-style="glass"] [data-select-option]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
853
-
854
- [data-style='glass'] [data-select-option]:hover:not(:disabled),
855
- [data-style='glass'] [data-select-option]:focus:not(:disabled) {
856
- background-color:rgba(var(--color-surface-200),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
857
- }[data-mode="dark"][data-style="glass"] [data-select-option]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-select-option]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-select-option]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-select-option]:focus:not(:disabled){background-color:rgba(var(--color-surface-800),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
858
-
859
- [data-style='glass'] [data-select-option]:focus-visible {
860
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);--un-ring-inset:inset;
861
- }[data-mode="dark"][data-style="glass"] [data-select-option]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-select-option]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
862
-
863
- [data-style='glass'] [data-select-option][data-selected='true'] {
864
- background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
865
- }[data-mode="dark"][data-style="glass"] [data-select-option][data-selected="true"],[data-mode="dark"] [data-style="glass"] [data-select-option][data-selected="true"]{background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
866
-
867
- [data-style='glass'] [data-select-option][data-selected='true']:hover:not(:disabled),
868
- [data-style='glass'] [data-select-option][data-selected='true']:focus:not(:disabled) {
869
- background-color:rgba(var(--color-primary-500),0.6);
870
- }[data-mode="dark"][data-style="glass"] [data-select-option][data-selected="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-select-option][data-selected="true"]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-select-option][data-selected="true"]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-select-option][data-selected="true"]:focus:not(:disabled){background-color:rgba(var(--color-primary-500),0.6);}
871
-
872
- /* Check mark */
873
- [data-style='glass'] [data-select-check] {
874
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
875
- }[data-mode="dark"][data-style="glass"] [data-select-check],[data-mode="dark"] [data-style="glass"] [data-select-check]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
876
-
877
- /* Checkbox */
878
- [data-style='glass'] [data-select-checkbox] {
879
- border-color:rgba(var(--color-surface-500),0.4);background-color:rgba(var(--color-surface-100),0.7);
880
- }[data-mode="dark"][data-style="glass"] [data-select-checkbox],[data-mode="dark"] [data-style="glass"] [data-select-checkbox]{border-color:rgba(var(--color-surface-500),0.4);background-color:rgba(var(--color-surface-900),0.7);}
881
-
882
- [data-style='glass'] [data-select-checkbox][data-checked='true'] {
883
- --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));
884
- }[data-mode="dark"][data-style="glass"] [data-select-checkbox][data-checked="true"],[data-mode="dark"] [data-style="glass"] [data-select-checkbox][data-checked="true"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
885
-
886
- /* Item elements */
887
- [data-style='glass'] [data-select-option] [data-item-icon] {
888
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
889
- }[data-mode="dark"][data-style="glass"] [data-select-option] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-select-option] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
890
-
891
- [data-style='glass'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
892
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
893
- }[data-mode="dark"][data-style="glass"] [data-select-option]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-select-option]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
894
-
895
- [data-style='glass'] [data-select-option][data-selected='true'] [data-item-icon] {
896
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
897
- }[data-mode="dark"][data-style="glass"] [data-select-option][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-select-option][data-selected="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
898
-
899
- [data-style='glass'] [data-select-option] [data-item-description] {
900
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
901
- }[data-mode="dark"][data-style="glass"] [data-select-option] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-select-option] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
902
-
903
- [data-style='glass'] [data-select-option][data-selected='true'] [data-item-description] {
904
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
905
- }[data-mode="dark"][data-style="glass"] [data-select-option][data-selected="true"] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-select-option][data-selected="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
906
-
907
- /* =============================================================================
908
- Groups
909
- ============================================================================= */
910
-
911
- [data-style='glass'] [data-select-group-label] {
912
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
913
- }[data-mode="dark"][data-style="glass"] [data-select-group-label],[data-mode="dark"] [data-style="glass"] [data-select-group-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
914
-
915
- /* =============================================================================
916
- Divider
917
- ============================================================================= */
918
-
919
- [data-style='glass'] [data-select-divider] {
920
- background-color:rgba(var(--color-surface-500),0.2);
921
- }[data-mode="dark"][data-style="glass"] [data-select-divider],[data-mode="dark"] [data-style="glass"] [data-select-divider]{background-color:rgba(var(--color-surface-500),0.2);}
922
-
923
- /* =============================================================================
924
- Filter Input
925
- ============================================================================= */
926
-
927
- [data-style='glass'] [data-select-filter] {
928
- background-color:rgba(var(--color-surface-200),0.3);
929
- }[data-mode="dark"][data-style="glass"] [data-select-filter],[data-mode="dark"] [data-style="glass"] [data-select-filter]{background-color:rgba(var(--color-surface-800),0.3);}
930
-
931
- [data-style='glass'] [data-select-filter-input] {
932
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.5);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
933
- }[data-mode="dark"][data-style="glass"] [data-select-filter-input],[data-mode="dark"] [data-style="glass"] [data-select-filter-input]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.5);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
934
-
935
- [data-style='glass'] [data-select-filter-input]:focus {
936
- border-color:rgba(var(--color-primary-500),0.5);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.3);
937
- }[data-mode="dark"][data-style="glass"] [data-select-filter-input]:focus,[data-mode="dark"] [data-style="glass"] [data-select-filter-input]:focus{border-color:rgba(var(--color-primary-500),0.5);--un-ring-color:rgba(var(--color-surface-500),0.3);}
938
-
939
- [data-style='glass'] [data-select-filter-input]::placeholder {
940
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
941
- }[data-mode="dark"][data-style="glass"] [data-select-filter-input]::placeholder,[data-mode="dark"] [data-style="glass"] [data-select-filter-input]::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
942
-
943
- [data-style='glass'] [data-select-empty] {
944
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
945
- }[data-mode="dark"][data-style="glass"] [data-select-empty],[data-mode="dark"] [data-style="glass"] [data-select-empty]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
946
-
947
- /**
948
- * Menu - Glass Theme Styles
949
- *
950
- * Glassmorphism styling with blur and transparency.
951
- */
952
-
953
- /* =============================================================================
954
- Menu Trigger
955
- ============================================================================= */
956
-
957
- [data-style='glass'] [data-menu-trigger] {
958
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.7);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
959
- }[data-mode="dark"][data-style="glass"] [data-menu-trigger],[data-mode="dark"] [data-style="glass"] [data-menu-trigger]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
960
-
961
- [data-style='glass'] [data-menu-trigger]:hover:not(:disabled) {
962
- border-color:rgba(var(--color-surface-500),0.3);background-color:rgba(var(--color-surface-200),0.8);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
963
- }[data-mode="dark"][data-style="glass"] [data-menu-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-menu-trigger]:hover:not(:disabled){border-color:rgba(var(--color-surface-500),0.3);background-color:rgba(var(--color-surface-800),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
964
-
965
- [data-style='glass'] [data-menu-trigger]:focus-visible {
966
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
967
- }[data-mode="dark"][data-style="glass"] [data-menu-trigger]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-menu-trigger]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
968
-
969
- [data-style='glass'] [data-menu][data-open='true'] [data-menu-trigger] {
970
- border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.3);background-image:none;
971
- }[data-mode="dark"][data-style="glass"] [data-menu][data-open="true"] [data-menu-trigger],[data-mode="dark"] [data-style="glass"] [data-menu][data-open="true"] [data-menu-trigger]{border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.3);}
972
-
973
- /* Trigger elements */
974
- [data-style='glass'] [data-menu-trigger] [data-menu-icon] {
975
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
976
- }[data-mode="dark"][data-style="glass"] [data-menu-trigger] [data-menu-icon],[data-mode="dark"] [data-style="glass"] [data-menu-trigger] [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
977
-
978
- [data-style='glass'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
979
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
980
- }[data-mode="dark"][data-style="glass"] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon],[data-mode="dark"] [data-style="glass"] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
981
-
982
- [data-style='glass'] [data-menu-trigger] [data-menu-arrow] {
983
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
984
- }[data-mode="dark"][data-style="glass"] [data-menu-trigger] [data-menu-arrow],[data-mode="dark"] [data-style="glass"] [data-menu-trigger] [data-menu-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
985
-
986
- /* =============================================================================
987
- Menu Dropdown
988
- ============================================================================= */
989
-
990
- [data-style='glass'] [data-menu-dropdown] {
991
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.5);background-image:none;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
992
- }[data-mode="dark"][data-style="glass"] [data-menu-dropdown],[data-mode="dark"] [data-style="glass"] [data-menu-dropdown]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.5);}
993
-
994
- /* =============================================================================
995
- Menu Items
996
- ============================================================================= */
997
-
998
- [data-style='glass'] [data-menu-item] {
999
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1000
- }[data-mode="dark"][data-style="glass"] [data-menu-item],[data-mode="dark"] [data-style="glass"] [data-menu-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1001
-
1002
- [data-style='glass'] [data-menu-item]:hover:not(:disabled),
1003
- [data-style='glass'] [data-menu-item]:focus:not(:disabled) {
1004
- background-color:rgba(var(--color-surface-200),0.15);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1005
- }[data-mode="dark"][data-style="glass"] [data-menu-item]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-menu-item]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-menu-item]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-menu-item]:focus:not(:disabled){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1006
-
1007
- [data-style='glass'] [data-menu-item]:focus-visible {
1008
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);--un-ring-inset:inset;
1009
- }[data-mode="dark"][data-style="glass"] [data-menu-item]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-menu-item]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
1010
-
1011
- /* Item elements */
1012
- [data-style='glass'] [data-menu-item] [data-item-icon] {
1013
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1014
- }[data-mode="dark"][data-style="glass"] [data-menu-item] [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-menu-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1015
-
1016
- [data-style='glass'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
1017
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1018
- }[data-mode="dark"][data-style="glass"] [data-menu-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="glass"] [data-menu-item]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1019
-
1020
- [data-style='glass'] [data-menu-item] [data-item-description] {
1021
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1022
- }[data-mode="dark"][data-style="glass"] [data-menu-item] [data-item-description],[data-mode="dark"] [data-style="glass"] [data-menu-item] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1023
-
1024
- /* =============================================================================
1025
- Groups
1026
- ============================================================================= */
1027
-
1028
- [data-style='glass'] [data-menu-group] {
1029
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1030
- }[data-mode="dark"][data-style="glass"] [data-menu-group],[data-mode="dark"] [data-style="glass"] [data-menu-group]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1031
-
1032
- /* =============================================================================
1033
- Divider
1034
- ============================================================================= */
1035
-
1036
- [data-style='glass'] [data-menu-separator] {
1037
- background-color:rgba(var(--color-surface-500),0.2);background-image:none;
1038
- }[data-mode="dark"][data-style="glass"] [data-menu-separator],[data-mode="dark"] [data-style="glass"] [data-menu-separator]{background-color:rgba(var(--color-surface-500),0.2);}
1039
-
1040
- /**
1041
- * Dropdown - Glass Theme Styles
1042
- *
1043
- * Glassmorphism with blur and transparency.
1044
- */
1045
-
1046
- [data-style='glass'] [data-dropdown-trigger] {
1047
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.7);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1048
- }[data-mode="dark"][data-style="glass"] [data-dropdown-trigger],[data-mode="dark"] [data-style="glass"] [data-dropdown-trigger]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1049
-
1050
- [data-style='glass'] [data-dropdown-trigger]:hover:not(:disabled) {
1051
- border-color:rgba(var(--color-surface-500),0.3);background-color:rgba(var(--color-surface-200),0.8);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1052
- }[data-mode="dark"][data-style="glass"] [data-dropdown-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-dropdown-trigger]:hover:not(:disabled){border-color:rgba(var(--color-surface-500),0.3);background-color:rgba(var(--color-surface-800),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1053
-
1054
- [data-style='glass'] [data-dropdown-trigger]:focus-visible {
1055
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
1056
- }[data-mode="dark"][data-style="glass"] [data-dropdown-trigger]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-dropdown-trigger]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
1057
-
1058
- [data-style='glass'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
1059
- border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.3);background-image:none;
1060
- }[data-mode="dark"][data-style="glass"] [data-dropdown][data-open="true"] [data-dropdown-trigger],[data-mode="dark"] [data-style="glass"] [data-dropdown][data-open="true"] [data-dropdown-trigger]{border-color:rgba(var(--color-primary-500),0.5);background-color:rgba(var(--color-primary-500),0.3);}
1061
-
1062
- [data-style='glass'] [data-dropdown-trigger] [data-dropdown-icon] {
1063
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1064
- }[data-mode="dark"][data-style="glass"] [data-dropdown-trigger] [data-dropdown-icon],[data-mode="dark"] [data-style="glass"] [data-dropdown-trigger] [data-dropdown-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1065
-
1066
- [data-style='glass'] [data-dropdown-trigger] [data-dropdown-arrow] {
1067
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1068
- }[data-mode="dark"][data-style="glass"] [data-dropdown-trigger] [data-dropdown-arrow],[data-mode="dark"] [data-style="glass"] [data-dropdown-trigger] [data-dropdown-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1069
-
1070
- [data-style='glass'] [data-dropdown-panel] {
1071
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.5);background-image:none;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1072
- }[data-mode="dark"][data-style="glass"] [data-dropdown-panel],[data-mode="dark"] [data-style="glass"] [data-dropdown-panel]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.5);}
1073
-
1074
- [data-style='glass'] [data-dropdown-option] {
1075
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1076
- }[data-mode="dark"][data-style="glass"] [data-dropdown-option],[data-mode="dark"] [data-style="glass"] [data-dropdown-option]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1077
-
1078
- [data-style='glass'] [data-dropdown-option]:hover:not(:disabled),
1079
- [data-style='glass'] [data-dropdown-option]:focus:not(:disabled) {
1080
- background-color:rgba(var(--color-surface-200),0.15);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1081
- }[data-mode="dark"][data-style="glass"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"][data-style="glass"] [data-dropdown-option]:focus:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-dropdown-option]:focus:not(:disabled){background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1082
-
1083
- [data-style='glass'] [data-dropdown-option][data-active='true'] {
1084
- background-color:rgba(var(--color-primary-500),0.2);background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1085
- }[data-mode="dark"][data-style="glass"] [data-dropdown-option][data-active="true"],[data-mode="dark"] [data-style="glass"] [data-dropdown-option][data-active="true"]{background-color:rgba(var(--color-primary-500),0.2);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1086
-
1087
- [data-style='glass'] [data-dropdown-separator] {
1088
- background-color:rgba(var(--color-surface-500),0.2);background-image:none;
1089
- }[data-mode="dark"][data-style="glass"] [data-dropdown-separator],[data-mode="dark"] [data-style="glass"] [data-dropdown-separator]{background-color:rgba(var(--color-surface-500),0.2);}
1090
-
1091
- /**
1092
- * FloatingAction - Glass Theme Styles
1093
- *
1094
- * Glassmorphism styling with blur and transparency.
1095
- */
1096
-
1097
- /* =============================================================================
1098
- FAB Trigger Button
1099
- ============================================================================= */
1100
-
1101
- [data-style='glass'] [data-fab-trigger] {
1102
- background-color:rgba(var(--color-primary-500),0.8);--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1103
- }[data-mode="dark"][data-style="glass"] [data-fab-trigger],[data-mode="dark"] [data-style="glass"] [data-fab-trigger]{background-color:rgba(var(--color-primary-500),0.8);}
1104
-
1105
- [data-style='glass'] [data-fab-trigger]:hover:not(:disabled) {
1106
- background-color:rgba(var(--color-primary-500),0.9);--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1107
- transform: scale(1.05);
1108
- }[data-mode="dark"][data-style="glass"] [data-fab-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-fab-trigger]:hover:not(:disabled){background-color:rgba(var(--color-primary-500),0.9);}
1109
-
1110
- [data-style='glass'] [data-fab-trigger]:focus-visible {
1111
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
1112
- }[data-mode="dark"][data-style="glass"] [data-fab-trigger]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-fab-trigger]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
1113
-
1114
- [data-style='glass'] [data-fab][data-open='true'] [data-fab-trigger] {
1115
- background-color:rgba(var(--color-surface-600),0.8);
1116
- transform: rotate(45deg);
1117
- }[data-mode="dark"][data-style="glass"] [data-fab][data-open="true"] [data-fab-trigger],[data-mode="dark"] [data-style="glass"] [data-fab][data-open="true"] [data-fab-trigger]{background-color:rgba(var(--color-surface-400),0.8);}
1118
-
1119
- /* =============================================================================
1120
- FAB Items
1121
- ============================================================================= */
1122
-
1123
- [data-style='glass'] [data-fab-item] {
1124
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1125
- }[data-mode="dark"][data-style="glass"] [data-fab-item],[data-mode="dark"] [data-style="glass"] [data-fab-item]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1126
-
1127
- [data-style='glass'] [data-fab-item]:hover:not(:disabled) {
1128
- background-color:rgba(var(--color-surface-200),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1129
- }[data-mode="dark"][data-style="glass"] [data-fab-item]:hover:not(:disabled),[data-mode="dark"] [data-style="glass"] [data-fab-item]:hover:not(:disabled){background-color:rgba(var(--color-surface-800),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1130
-
1131
- [data-style='glass'] [data-fab-item]:focus-visible {
1132
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
1133
- }[data-mode="dark"][data-style="glass"] [data-fab-item]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-fab-item]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
1134
-
1135
- /* Item icon */
1136
- [data-style='glass'] [data-fab-item] [data-fab-item-icon] {
1137
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1138
- }[data-mode="dark"][data-style="glass"] [data-fab-item] [data-fab-item-icon],[data-mode="dark"] [data-style="glass"] [data-fab-item] [data-fab-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1139
-
1140
- [data-style='glass'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
1141
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1142
- }[data-mode="dark"][data-style="glass"] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon],[data-mode="dark"] [data-style="glass"] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1143
-
1144
- /* =============================================================================
1145
- Backdrop
1146
- ============================================================================= */
1147
-
1148
- [data-style='glass'] [data-fab-backdrop] {
1149
- background: rgba(0, 0, 0, 0.3);
1150
- backdrop-filter: blur(4px);
1151
- }
1152
-
1153
- /**
1154
- * Table - Glass Theme Styles
1155
- *
1156
- * Glassmorphism styling with blur and transparency.
1157
- */
1158
-
1159
- /* =============================================================================
1160
- Header
1161
- ============================================================================= */
1162
-
1163
- [data-style='glass'] [data-table-header] th {
1164
- border-bottom-width:1px;border-color:rgba(var(--color-surface-500),0.2);--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1165
- }[data-mode="dark"][data-style="glass"] [data-table-header] th,[data-mode="dark"] [data-style="glass"] [data-table-header] th{border-color:rgba(var(--color-surface-500),0.2);--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1166
-
1167
- [data-style='glass'] [data-table-header-cell][data-sortable='true']:hover {
1168
- --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1169
- }[data-mode="dark"][data-style="glass"] [data-table-header-cell][data-sortable="true"]:hover,[data-mode="dark"] [data-style="glass"] [data-table-header-cell][data-sortable="true"]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1170
-
1171
- [data-style='glass'] [data-table-header-cell][data-sort-order='ascending'],
1172
- [data-style='glass'] [data-table-header-cell][data-sort-order='descending'] {
1173
- --un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
1174
- }[data-mode="dark"][data-style="glass"] [data-table-header-cell][data-sort-order="ascending"],[data-mode="dark"] [data-style="glass"] [data-table-header-cell][data-sort-order="ascending"],[data-mode="dark"][data-style="glass"] [data-table-header-cell][data-sort-order="descending"],[data-mode="dark"] [data-style="glass"] [data-table-header-cell][data-sort-order="descending"]{--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
1175
-
1176
- [data-style='glass'] [data-table-sort-icon] {
1177
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1178
- }[data-mode="dark"][data-style="glass"] [data-table-sort-icon],[data-mode="dark"] [data-style="glass"] [data-table-sort-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1179
-
1180
- [data-style='glass'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
1181
- [data-style='glass'] [data-table-header-cell][data-sort-order='descending'] [data-table-sort-icon] {
1182
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1183
- }[data-mode="dark"][data-style="glass"] [data-table-header-cell][data-sort-order="ascending"] [data-table-sort-icon],[data-mode="dark"] [data-style="glass"] [data-table-header-cell][data-sort-order="ascending"] [data-table-sort-icon],[data-mode="dark"][data-style="glass"] [data-table-header-cell][data-sort-order="descending"] [data-table-sort-icon],[data-mode="dark"] [data-style="glass"] [data-table-header-cell][data-sort-order="descending"] [data-table-sort-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1184
-
1185
- /* =============================================================================
1186
- Caption
1187
- ============================================================================= */
1188
-
1189
- [data-style='glass'] [data-table-caption] {
1190
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1191
- }[data-mode="dark"][data-style="glass"] [data-table-caption],[data-mode="dark"] [data-style="glass"] [data-table-caption]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1192
-
1193
- /* =============================================================================
1194
- Rows
1195
- ============================================================================= */
1196
-
1197
- [data-style='glass'] [data-table-row] {
1198
- border-bottom-width:1px;border-color:rgba(var(--color-surface-500),0.1);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1199
- }[data-mode="dark"][data-style="glass"] [data-table-row],[data-mode="dark"] [data-style="glass"] [data-table-row]{border-color:rgba(var(--color-surface-500),0.1);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1200
-
1201
- [data-style='glass'] [data-table-row]:hover {
1202
- background-color:rgba(var(--color-surface-200),0.8);
1203
- }[data-mode="dark"][data-style="glass"] [data-table-row]:hover,[data-mode="dark"] [data-style="glass"] [data-table-row]:hover{background-color:rgba(var(--color-surface-800),0.8);}
1204
-
1205
- [data-style='glass'] [data-table-row]:focus {
1206
- background-color:rgba(var(--color-surface-200),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1207
- }[data-mode="dark"][data-style="glass"] [data-table-row]:focus,[data-mode="dark"] [data-style="glass"] [data-table-row]:focus{background-color:rgba(var(--color-surface-800),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1208
-
1209
- [data-style='glass'] [data-table-row][data-selected='true'] {
1210
- background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1211
- }[data-mode="dark"][data-style="glass"] [data-table-row][data-selected="true"],[data-mode="dark"] [data-style="glass"] [data-table-row][data-selected="true"]{background-color:rgba(var(--color-primary-500),0.4);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1212
-
1213
- /* =============================================================================
1214
- Striped
1215
- ============================================================================= */
1216
-
1217
- [data-style='glass'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
1218
- background-color:rgba(var(--color-surface-200),0.3);
1219
- }[data-mode="dark"][data-style="glass"] [data-striped="true"] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="glass"] [data-striped="true"] [data-table-body] tr:nth-child(even){background-color:rgba(var(--color-surface-800),0.3);}
1220
-
1221
- /* =============================================================================
1222
- Empty
1223
- ============================================================================= */
1224
-
1225
- [data-style='glass'] [data-table-empty] {
1226
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1227
- }[data-mode="dark"][data-style="glass"] [data-table-empty],[data-mode="dark"] [data-style="glass"] [data-table-empty]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1228
-
1229
- /* =============================================================================
1230
- Cell Icon
1231
- ============================================================================= */
1232
-
1233
- [data-style='glass'] [data-table-cell] [data-cell-icon] {
1234
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1235
- }[data-mode="dark"][data-style="glass"] [data-table-cell] [data-cell-icon],[data-mode="dark"] [data-style="glass"] [data-table-cell] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1236
-
1237
- [data-style='glass'] [data-table-row][data-selected='true'] [data-cell-icon] {
1238
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1239
- }[data-mode="dark"][data-style="glass"] [data-table-row][data-selected="true"] [data-cell-icon],[data-mode="dark"] [data-style="glass"] [data-table-row][data-selected="true"] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1240
-
1241
- /**
1242
- * SearchFilter - Glass Theme Styles
1243
- *
1244
- * Glassmorphism styling with blur and transparency.
1245
- */
1246
-
1247
- /* =============================================================================
1248
- Input
1249
- ============================================================================= */
1250
-
1251
- [data-style='glass'] [data-search-input] {
1252
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.5);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1253
- }[data-mode="dark"][data-style="glass"] [data-search-input],[data-mode="dark"] [data-style="glass"] [data-search-input]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.5);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1254
-
1255
- [data-style='glass'] [data-search-input]:focus {
1256
- border-color:rgba(var(--color-primary-500),0.5);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.3);
1257
- }[data-mode="dark"][data-style="glass"] [data-search-input]:focus,[data-mode="dark"] [data-style="glass"] [data-search-input]:focus{border-color:rgba(var(--color-primary-500),0.5);--un-ring-color:rgba(var(--color-surface-500),0.3);}
1258
-
1259
- [data-style='glass'] [data-search-input]::placeholder {
1260
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1261
- }[data-mode="dark"][data-style="glass"] [data-search-input]::placeholder,[data-mode="dark"] [data-style="glass"] [data-search-input]::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1262
-
1263
- /* =============================================================================
1264
- Clear Button
1265
- ============================================================================= */
1266
-
1267
- [data-style='glass'] [data-search-clear] {
1268
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1269
- }[data-mode="dark"][data-style="glass"] [data-search-clear],[data-mode="dark"] [data-style="glass"] [data-search-clear]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1270
-
1271
- [data-style='glass'] [data-search-clear]:hover {
1272
- --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1273
- }[data-mode="dark"][data-style="glass"] [data-search-clear]:hover,[data-mode="dark"] [data-style="glass"] [data-search-clear]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1274
-
1275
- /* =============================================================================
1276
- Tags
1277
- ============================================================================= */
1278
-
1279
- [data-style='glass'] [data-search-tag] {
1280
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1281
- }[data-mode="dark"][data-style="glass"] [data-search-tag],[data-mode="dark"] [data-style="glass"] [data-search-tag]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1282
-
1283
- [data-style='glass'] [data-search-tag-remove] {
1284
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1285
- }[data-mode="dark"][data-style="glass"] [data-search-tag-remove],[data-mode="dark"] [data-style="glass"] [data-search-tag-remove]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1286
-
1287
- [data-style='glass'] [data-search-tag-remove]:hover {
1288
- --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1289
- }[data-mode="dark"][data-style="glass"] [data-search-tag-remove]:hover,[data-mode="dark"] [data-style="glass"] [data-search-tag-remove]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1290
-
1291
- /**
1292
- * Range - Glass Theme Styles
1293
- *
1294
- * Glassmorphism styling with blur and transparency.
1295
- */
1296
-
1297
- /* =============================================================================
1298
- Track
1299
- ============================================================================= */
1300
-
1301
- [data-style='glass'] [data-range-bar] {
1302
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.5);
1303
- }[data-mode="dark"][data-style="glass"] [data-range-bar],[data-mode="dark"] [data-style="glass"] [data-range-bar]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.5);}
1304
-
1305
- [data-style='glass'] [data-range-selected] {
1306
- background-color:rgba(var(--color-primary),0.4);
1307
- }
1308
-
1309
- /* =============================================================================
1310
- Thumb
1311
- ============================================================================= */
1312
-
1313
- [data-style='glass'] [data-range-thumb] {
1314
- border-color:rgba(var(--color-primary),0.5);background-color:rgba(var(--color-primary),0.8);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1315
- }
1316
-
1317
- [data-style='glass'] [data-range-thumb][data-sliding] {
1318
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
1319
- }
1320
-
1321
- [data-style='glass'] [data-range-thumb]:focus-visible {
1322
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
1323
- }
1324
-
1325
- /* =============================================================================
1326
- Ticks
1327
- ============================================================================= */
1328
-
1329
- [data-style='glass'] [data-range-tick] {
1330
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1331
- }[data-mode="dark"][data-style="glass"] [data-range-tick],[data-mode="dark"] [data-style="glass"] [data-range-tick]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1332
-
1333
- [data-style='glass'] [data-tick-bar] {
1334
- border-color:rgba(var(--color-surface-500),0.4);
1335
- }[data-mode="dark"][data-style="glass"] [data-tick-bar],[data-mode="dark"] [data-style="glass"] [data-tick-bar]{border-color:rgba(var(--color-surface-500),0.4);}
1336
-
1337
- [data-style='glass'] [data-tick-label] {
1338
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1339
- }[data-mode="dark"][data-style="glass"] [data-tick-label],[data-mode="dark"] [data-style="glass"] [data-tick-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1340
-
1341
- /* =============================================================================
1342
- Disabled
1343
- ============================================================================= */
1344
-
1345
- [data-style='glass'] [data-range][data-disabled] [data-range-thumb] {
1346
- border-color:rgba(var(--color-surface-400),0.3);background-color:rgba(var(--color-surface-400),0.5);
1347
- }[data-mode="dark"][data-style="glass"] [data-range][data-disabled] [data-range-thumb],[data-mode="dark"] [data-style="glass"] [data-range][data-disabled] [data-range-thumb]{border-color:rgba(var(--color-surface-600),0.3);background-color:rgba(var(--color-surface-600),0.5);}
1348
-
1349
- [data-style='glass'] [data-range][data-disabled] [data-range-selected] {
1350
- background-color:rgba(var(--color-surface-400),0.3);
1351
- }[data-mode="dark"][data-style="glass"] [data-range][data-disabled] [data-range-selected],[data-mode="dark"] [data-style="glass"] [data-range][data-disabled] [data-range-selected]{background-color:rgba(var(--color-surface-600),0.3);}
1352
-
1353
- /**
1354
- * Timeline - Glass Theme Styles
1355
- *
1356
- * Glassmorphism styling with blur and transparency.
1357
- */
1358
-
1359
- /* =============================================================================
1360
- Circle
1361
- ============================================================================= */
1362
-
1363
- [data-style='glass'] [data-timeline-circle] {
1364
- border-color:rgba(var(--color-surface-500),0.3);--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1365
- }[data-mode="dark"][data-style="glass"] [data-timeline-circle],[data-mode="dark"] [data-style="glass"] [data-timeline-circle]{border-color:rgba(var(--color-surface-500),0.3);--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1366
-
1367
- [data-style='glass'] [data-timeline-item][data-completed] [data-timeline-circle] {
1368
- border-color:rgba(var(--color-primary),0.5);background-color:rgba(var(--color-primary),0.8);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1369
- }
1370
-
1371
- [data-style='glass'] [data-timeline-item][data-active] [data-timeline-circle] {
1372
- border-color:rgba(var(--color-primary),0.6);--un-text-opacity:1;color:rgba(var(--color-primary),var(--un-text-opacity));
1373
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
1374
- }
1375
-
1376
- /* =============================================================================
1377
- Connector
1378
- ============================================================================= */
1379
-
1380
- [data-style='glass'] [data-timeline-connector] {
1381
- background-color:rgba(var(--color-surface-500),0.2);
1382
- }[data-mode="dark"][data-style="glass"] [data-timeline-connector],[data-mode="dark"] [data-style="glass"] [data-timeline-connector]{background-color:rgba(var(--color-surface-500),0.2);}
1383
-
1384
- [data-style='glass'] [data-timeline-item][data-completed] [data-timeline-connector] {
1385
- background-color:rgba(var(--color-primary),0.4);
1386
- }
1387
-
1388
- /* =============================================================================
1389
- Body
1390
- ============================================================================= */
1391
-
1392
- [data-style='glass'] [data-timeline-title] {
1393
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1394
- }[data-mode="dark"][data-style="glass"] [data-timeline-title],[data-mode="dark"] [data-style="glass"] [data-timeline-title]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1395
-
1396
- [data-style='glass'] [data-timeline-description] {
1397
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1398
- }[data-mode="dark"][data-style="glass"] [data-timeline-description],[data-mode="dark"] [data-style="glass"] [data-timeline-description]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1399
-
1400
- /**
1401
- * FloatingNavigation - Glass Theme Styles
1402
- *
1403
- * Glassmorphism styling with blur and transparency.
1404
- */
1405
-
1406
- /* =============================================================================
1407
- Container
1408
- ============================================================================= */
1409
-
1410
- [data-style='glass'] [data-floating-nav] {
1411
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-100),0.7);--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1412
- }[data-mode="dark"][data-style="glass"] [data-floating-nav],[data-mode="dark"] [data-style="glass"] [data-floating-nav]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-900),0.7);}
1413
-
1414
- /* =============================================================================
1415
- Header
1416
- ============================================================================= */
1417
-
1418
- [data-style='glass'] [data-floating-nav-title] {
1419
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1420
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-title],[data-mode="dark"] [data-style="glass"] [data-floating-nav-title]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1421
-
1422
- [data-style='glass'] [data-floating-nav-pin] {
1423
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1424
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-pin],[data-mode="dark"] [data-style="glass"] [data-floating-nav-pin]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1425
-
1426
- [data-style='glass'] [data-floating-nav-pin]:hover {
1427
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1428
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-pin]:hover,[data-mode="dark"] [data-style="glass"] [data-floating-nav-pin]:hover{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1429
-
1430
- [data-style='glass'] [data-floating-nav-pin][aria-pressed='true'] {
1431
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1432
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-pin][aria-pressed="true"],[data-mode="dark"] [data-style="glass"] [data-floating-nav-pin][aria-pressed="true"]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1433
-
1434
- /* =============================================================================
1435
- Items
1436
- ============================================================================= */
1437
-
1438
- [data-style='glass'] [data-floating-nav-item] {
1439
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1440
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-item],[data-mode="dark"] [data-style="glass"] [data-floating-nav-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1441
-
1442
- [data-style='glass'] [data-floating-nav-item]:hover {
1443
- background-color:rgba(var(--color-surface-200),0.5);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1444
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-item]:hover,[data-mode="dark"] [data-style="glass"] [data-floating-nav-item]:hover{background-color:rgba(var(--color-surface-800),0.5);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1445
-
1446
- [data-style='glass'] [data-floating-nav-item][data-active] {
1447
- background-color:rgba(var(--color-primary-500),0.1);--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1448
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-item][data-active],[data-mode="dark"] [data-style="glass"] [data-floating-nav-item][data-active]{background-color:rgba(var(--color-primary-500),0.1);--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1449
-
1450
- [data-style='glass'] [data-floating-nav-item]:focus-visible {
1451
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
1452
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-item]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-floating-nav-item]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
1453
-
1454
- /* Icon */
1455
- [data-style='glass'] [data-floating-nav-icon] {
1456
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1457
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-icon],[data-mode="dark"] [data-style="glass"] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1458
-
1459
- [data-style='glass'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
1460
- --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1461
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-item]:hover [data-floating-nav-icon],[data-mode="dark"] [data-style="glass"] [data-floating-nav-item]:hover [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1462
-
1463
- [data-style='glass'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
1464
- --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1465
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-item][data-active] [data-floating-nav-icon],[data-mode="dark"] [data-style="glass"] [data-floating-nav-item][data-active] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1466
-
1467
- /* =============================================================================
1468
- Active Indicator
1469
- ============================================================================= */
1470
-
1471
- [data-style='glass'] [data-floating-nav-indicator] {
1472
- background-color:rgba(var(--color-primary-500),0.8);
1473
- }[data-mode="dark"][data-style="glass"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="glass"] [data-floating-nav-indicator]{background-color:rgba(var(--color-primary-500),0.8);}
1474
-
1475
- /* TableOfContents — Glass theme */
1476
-
1477
- [data-style='glass'] [data-toc] [data-toc-label] {
1478
- --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1479
- }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1480
-
1481
- [data-style='glass'] [data-toc] [data-toc-item] {
1482
- --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1483
- }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1484
-
1485
- [data-style='glass'] [data-toc] [data-toc-item]:hover,
1486
- [data-style='glass'] [data-toc] [data-toc-item][data-toc-focused] {
1487
- background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1488
- }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item][data-toc-focused]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1489
-
1490
- [data-style='glass'] [data-toc] [data-toc-item][data-toc-active] {
1491
- --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1492
- }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1493
-
1494
- /**
1495
- * Card - Glass Theme Styles
1496
- *
1497
- * Glassmorphism styling with blur and transparency.
1498
- */
1499
-
1500
- /* =============================================================================
1501
- Base Card Styles
1502
- ============================================================================= */
1503
-
1504
- [data-style='glass'] [data-card] {
1505
- border-width:1px;border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-200),0.6);--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1506
- }[data-mode="dark"][data-style="glass"] [data-card],[data-mode="dark"] [data-style="glass"] [data-card]{border-color:rgba(var(--color-surface-500),0.2);background-color:rgba(var(--color-surface-800),0.6);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1507
-
1508
- /* Interactive cards (buttons) */
1509
- [data-style='glass'] [data-card][data-card-interactive] {
1510
- cursor: pointer;
1511
- transition:
1512
- transform 0.2s ease,
1513
- box-shadow 0.2s ease,
1514
- background-color 0.2s ease;
1515
- }
1516
-
1517
- [data-style='glass'] [data-card][data-card-interactive]:hover {
1518
- background-color:rgba(var(--color-surface-200),0.8);--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1519
- transform: translateY(-2px);
1520
- }[data-mode="dark"][data-style="glass"] [data-card][data-card-interactive]:hover,[data-mode="dark"] [data-style="glass"] [data-card][data-card-interactive]:hover{background-color:rgba(var(--color-surface-800),0.8);}
1521
-
1522
- [data-style='glass'] [data-card][data-card-interactive]:active {
1523
- --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1524
- transform: translateY(0);
1525
- }
1526
-
1527
- /* =============================================================================
1528
- Card Sections
1529
- ============================================================================= */
1530
-
1531
- [data-style='glass'] [data-card-header] {
1532
- border-bottom-width:1px;border-color:rgba(var(--color-surface-500),0.2);
1533
- }[data-mode="dark"][data-style="glass"] [data-card-header],[data-mode="dark"] [data-style="glass"] [data-card-header]{border-color:rgba(var(--color-surface-500),0.2);}
1534
-
1535
- [data-style='glass'] [data-card-body] {
1536
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1537
- }[data-mode="dark"][data-style="glass"] [data-card-body],[data-mode="dark"] [data-style="glass"] [data-card-body]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1538
-
1539
- [data-style='glass'] [data-card-footer] {
1540
- border-top-width:1px;border-color:rgba(var(--color-surface-500),0.2);--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1541
- }[data-mode="dark"][data-style="glass"] [data-card-footer],[data-mode="dark"] [data-style="glass"] [data-card-footer]{border-color:rgba(var(--color-surface-500),0.2);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1542
-
1543
- /* =============================================================================
1544
- Focus States
1545
- ============================================================================= */
1546
-
1547
- [data-style='glass'] [data-card][data-card-interactive]:focus-visible {
1548
- outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:rgba(var(--color-surface-500),0.4);
1549
- }[data-mode="dark"][data-style="glass"] [data-card][data-card-interactive]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-card][data-card-interactive]:focus-visible{--un-ring-color:rgba(var(--color-surface-500),0.4);}
1550
-
1551
- /* =============================================================================
1552
- Disabled State
1553
- ============================================================================= */
1554
-
1555
- [data-style='glass'] [data-card][data-card-interactive][data-disabled],
1556
- [data-style='glass'] [data-card][data-card-interactive]:disabled {
1557
- cursor:not-allowed;opacity:0.5;
1558
- transform: none;
1559
- }
1560
-
1561
- /* =============================================================================
1562
- Variants
1563
- ============================================================================= */
1564
-
1565
- /* Primary — tinted primary glass */
1566
- [data-style='glass'] [data-card][data-variant='primary'] {
1567
- border-width:1px;border-color:rgba(var(--color-primary-500),0.3);background-color:rgba(var(--color-primary-400),0.4);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1568
- }[data-mode="dark"][data-style="glass"] [data-card][data-variant="primary"],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="primary"]{border-color:rgba(var(--color-primary-500),0.3);background-color:rgba(var(--color-primary-600),0.4);}
1569
-
1570
- [data-style='glass'] [data-card][data-variant='primary'] [data-card-header],
1571
- [data-style='glass'] [data-card][data-variant='primary'] [data-card-footer] {
1572
- border-color:rgba(var(--color-primary-400),0.2);
1573
- }[data-mode="dark"][data-style="glass"] [data-card][data-variant="primary"] [data-card-header],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="primary"] [data-card-header],[data-mode="dark"][data-style="glass"] [data-card][data-variant="primary"] [data-card-footer],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="primary"] [data-card-footer]{border-color:rgba(var(--color-primary-600),0.2);}
1574
-
1575
- [data-style='glass'] [data-card][data-variant='primary'] [data-card-body] {
1576
- @apply text-on-primary/80;
1577
- }
1578
-
1579
- /* Secondary — tinted secondary glass */
1580
- [data-style='glass'] [data-card][data-variant='secondary'] {
1581
- border-width:1px;border-color:rgba(var(--color-secondary-500),0.3);background-color:rgba(var(--color-secondary-400),0.4);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1582
- }[data-mode="dark"][data-style="glass"] [data-card][data-variant="secondary"],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="secondary"]{border-color:rgba(var(--color-secondary-500),0.3);background-color:rgba(var(--color-secondary-600),0.4);}
1583
-
1584
- [data-style='glass'] [data-card][data-variant='secondary'] [data-card-header],
1585
- [data-style='glass'] [data-card][data-variant='secondary'] [data-card-footer] {
1586
- border-color:rgba(var(--color-secondary-400),0.2);
1587
- }[data-mode="dark"][data-style="glass"] [data-card][data-variant="secondary"] [data-card-header],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="secondary"] [data-card-header],[data-mode="dark"][data-style="glass"] [data-card][data-variant="secondary"] [data-card-footer],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="secondary"] [data-card-footer]{border-color:rgba(var(--color-secondary-600),0.2);}
1588
-
1589
- [data-style='glass'] [data-card][data-variant='secondary'] [data-card-body] {
1590
- @apply text-on-secondary/80;
1591
- }
1592
-
1593
- /* Tertiary — barely-there frosted glass */
1594
- [data-style='glass'] [data-card][data-variant='tertiary'] {
1595
- border-width:1px;border-color:rgba(var(--color-surface-500),0.1);background-color:rgba(var(--color-surface-300),0.3);--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1596
- }[data-mode="dark"][data-style="glass"] [data-card][data-variant="tertiary"],[data-mode="dark"] [data-style="glass"] [data-card][data-variant="tertiary"]{border-color:rgba(var(--color-surface-500),0.1);background-color:rgba(var(--color-surface-700),0.3);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1597
-
1598
- /**
1599
- * Message - Glass Theme Styles
1600
- */
1601
-
1602
-
1603
- [data-style='glass'] [data-message-root][data-type='error'] {
1604
- border-color:rgba(var(--color-error-400),0.4);background-color:rgba(var(--color-error-200),0.5);--un-text-opacity:1;color:rgba(var(--color-error-800),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1605
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="error"],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="error"]{border-color:rgba(var(--color-error-600),0.4);background-color:rgba(var(--color-error-800),0.5);--un-text-opacity:1;color:rgba(var(--color-error-200),var(--un-text-opacity));}
1606
- [data-style='glass'] [data-message-root][data-type='error'] [data-message-icon],
1607
- [data-style='glass'] [data-message-root][data-type='error'] [data-message-dismiss] {
1608
- --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
1609
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="error"] [data-message-icon],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="error"] [data-message-icon],[data-mode="dark"][data-style="glass"] [data-message-root][data-type="error"] [data-message-dismiss],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="error"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
1610
-
1611
- [data-style='glass'] [data-message-root][data-type='warning'] {
1612
- border-color:rgba(var(--color-warning-400),0.4);background-color:rgba(var(--color-warning-200),0.5);--un-text-opacity:1;color:rgba(var(--color-warning-800),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1613
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="warning"],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="warning"]{border-color:rgba(var(--color-warning-600),0.4);background-color:rgba(var(--color-warning-800),0.5);--un-text-opacity:1;color:rgba(var(--color-warning-200),var(--un-text-opacity));}
1614
- [data-style='glass'] [data-message-root][data-type='warning'] [data-message-icon],
1615
- [data-style='glass'] [data-message-root][data-type='warning'] [data-message-dismiss] {
1616
- --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
1617
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="warning"] [data-message-icon],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="warning"] [data-message-icon],[data-mode="dark"][data-style="glass"] [data-message-root][data-type="warning"] [data-message-dismiss],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="warning"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
1618
-
1619
- [data-style='glass'] [data-message-root][data-type='info'] {
1620
- border-color:rgba(var(--color-info-400),0.4);background-color:rgba(var(--color-info-200),0.5);--un-text-opacity:1;color:rgba(var(--color-info-800),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1621
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="info"],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="info"]{border-color:rgba(var(--color-info-600),0.4);background-color:rgba(var(--color-info-800),0.5);--un-text-opacity:1;color:rgba(var(--color-info-200),var(--un-text-opacity));}
1622
- [data-style='glass'] [data-message-root][data-type='info'] [data-message-icon],
1623
- [data-style='glass'] [data-message-root][data-type='info'] [data-message-dismiss] {
1624
- --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
1625
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="info"] [data-message-icon],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="info"] [data-message-icon],[data-mode="dark"][data-style="glass"] [data-message-root][data-type="info"] [data-message-dismiss],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="info"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
1626
-
1627
- [data-style='glass'] [data-message-root][data-type='success'] {
1628
- border-color:rgba(var(--color-success-400),0.4);background-color:rgba(var(--color-success-200),0.5);--un-text-opacity:1;color:rgba(var(--color-success-800),var(--un-text-opacity));--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1629
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="success"],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="success"]{border-color:rgba(var(--color-success-600),0.4);background-color:rgba(var(--color-success-800),0.5);--un-text-opacity:1;color:rgba(var(--color-success-200),var(--un-text-opacity));}
1630
- [data-style='glass'] [data-message-root][data-type='success'] [data-message-icon],
1631
- [data-style='glass'] [data-message-root][data-type='success'] [data-message-dismiss] {
1632
- --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
1633
- }[data-mode="dark"][data-style="glass"] [data-message-root][data-type="success"] [data-message-icon],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="success"] [data-message-icon],[data-mode="dark"][data-style="glass"] [data-message-root][data-type="success"] [data-message-dismiss],[data-mode="dark"] [data-style="glass"] [data-message-root][data-type="success"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
1634
-
1635
- /**
1636
- * StatusList - Glass Theme Styles
1637
- */
1638
-
1639
- /* ── @rokkit/ui StatusList: icon and text colors by status ── */
1640
-
1641
- [data-style='glass'] [data-status-item][data-status='pass'] span {
1642
- --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
1643
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="pass"] span,[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="pass"] span{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
1644
- [data-style='glass'] [data-status-item][data-status='fail'] span {
1645
- --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
1646
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="fail"] span,[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="fail"] span{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
1647
- [data-style='glass'] [data-status-item][data-status='warn'] span {
1648
- --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
1649
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="warn"] span,[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="warn"] span{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
1650
- [data-style='glass'] [data-status-item][data-status='unknown'] span {
1651
- --un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));
1652
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="unknown"] span,[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="unknown"] span{--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));}
1653
-
1654
- [data-style='glass'] [data-status-item][data-status='pass'] {
1655
- --un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
1656
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="pass"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="pass"]{--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
1657
- [data-style='glass'] [data-status-item][data-status='fail'] {
1658
- --un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
1659
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="fail"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="fail"]{--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
1660
- [data-style='glass'] [data-status-item][data-status='warn'] {
1661
- --un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
1662
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="warn"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="warn"]{--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
1663
- [data-style='glass'] [data-status-item][data-status='unknown'] {
1664
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1665
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="unknown"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="unknown"]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1666
-
1667
- /* ── @rokkit/forms StatusList: group headers by severity ── */
1668
-
1669
- [data-style='glass'] [data-status-group][data-severity='error'] [data-status-header] {
1670
- --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
1671
- }[data-mode="dark"][data-style="glass"] [data-status-group][data-severity="error"] [data-status-header],[data-mode="dark"] [data-style="glass"] [data-status-group][data-severity="error"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
1672
- [data-style='glass'] [data-status-group][data-severity='warning'] [data-status-header] {
1673
- --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
1674
- }[data-mode="dark"][data-style="glass"] [data-status-group][data-severity="warning"] [data-status-header],[data-mode="dark"] [data-style="glass"] [data-status-group][data-severity="warning"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
1675
- [data-style='glass'] [data-status-group][data-severity='info'] [data-status-header] {
1676
- --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
1677
- }[data-mode="dark"][data-style="glass"] [data-status-group][data-severity="info"] [data-status-header],[data-mode="dark"] [data-style="glass"] [data-status-group][data-severity="info"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
1678
- [data-style='glass'] [data-status-group][data-severity='success'] [data-status-header] {
1679
- --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
1680
- }[data-mode="dark"][data-style="glass"] [data-status-group][data-severity="success"] [data-status-header],[data-mode="dark"] [data-style="glass"] [data-status-group][data-severity="success"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
1681
-
1682
- /* ── @rokkit/forms StatusList: item colors ── */
1683
-
1684
- [data-style='glass'] [data-status-item][data-status='error'] {
1685
- --un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
1686
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="error"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="error"]{--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
1687
- [data-style='glass'] [data-status-item][data-status='warning'] {
1688
- --un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
1689
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="warning"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="warning"]{--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
1690
- [data-style='glass'] [data-status-item][data-status='info'] {
1691
- --un-text-opacity:1;color:rgba(var(--color-info-700),var(--un-text-opacity));
1692
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="info"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="info"]{--un-text-opacity:1;color:rgba(var(--color-info-300),var(--un-text-opacity));}
1693
- [data-style='glass'] [data-status-item][data-status='success'] {
1694
- --un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
1695
- }[data-mode="dark"][data-style="glass"] [data-status-item][data-status="success"],[data-mode="dark"] [data-style="glass"] [data-status-item][data-status="success"]{--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
1696
-
1697
- /* Count badge */
1698
- [data-style='glass'] [data-status-count] {
1699
- background-color:rgba(var(--color-surface-200),0.6);--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));font-weight:600;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1700
- }[data-mode="dark"][data-style="glass"] [data-status-count],[data-mode="dark"] [data-style="glass"] [data-status-count]{background-color:rgba(var(--color-surface-800),0.6);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1701
-
1702
- /**
1703
- * Chart - Glass Theme Styles
1704
- */
1705
-
1706
- [data-style='glass'] [data-chart-axis-line],
1707
- [data-style='glass'] [data-chart-tick] line {
1708
- --un-stroke-opacity:1;stroke:rgba(var(--color-surface-300),var(--un-stroke-opacity));
1709
- }[data-mode="dark"][data-style="glass"] [data-chart-axis-line],[data-mode="dark"] [data-style="glass"] [data-chart-axis-line],[data-mode="dark"][data-style="glass"] [data-chart-tick] line,[data-mode="dark"] [data-style="glass"] [data-chart-tick] line{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-700),var(--un-stroke-opacity));}
1710
-
1711
- [data-style='glass'] [data-chart-tick-label] {
1712
- --un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));
1713
- }[data-mode="dark"][data-style="glass"] [data-chart-tick-label],[data-mode="dark"] [data-style="glass"] [data-chart-tick-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));}
1714
-
1715
- [data-style='glass'] [data-chart-grid-line] {
1716
- --un-stroke-opacity:1;stroke:rgba(var(--color-surface-300),var(--un-stroke-opacity));
1717
- stroke-opacity: 0.5;
1718
- stroke-dasharray: 2 4;
1719
- }[data-mode="dark"][data-style="glass"] [data-chart-grid-line],[data-mode="dark"] [data-style="glass"] [data-chart-grid-line]{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-700),var(--un-stroke-opacity));}
1720
-
1721
- [data-style='glass'] [data-chart-legend-label] {
1722
- --un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));
1723
- }[data-mode="dark"][data-style="glass"] [data-chart-legend-label],[data-mode="dark"] [data-style="glass"] [data-chart-legend-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));}
1724
-
1725
- [data-style='glass'] [data-chart-legend-item]:hover {
1726
- --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1727
- }[data-mode="dark"][data-style="glass"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="glass"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1728
-
1729
- [data-style='glass'] [data-plot-element="bar"][data-dimmed],
1730
- [data-style='glass'] [data-plot-element="point"][data-dimmed],
1731
- [data-style='glass'] [data-plot-element="arc"][data-dimmed],
1732
- [data-style='glass'] [data-plot-element="line"][data-dimmed],
1733
- [data-style='glass'] [data-plot-element="area"][data-dimmed] {
1734
- opacity: 0.15;
1735
- }
1736
-
1737
- [data-style='glass'] [data-facet-title] {
1738
- --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1739
- }[data-mode="dark"][data-style="glass"] [data-facet-title],[data-mode="dark"] [data-style="glass"] [data-facet-title]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1740
-
1741
- /**
1742
- * Swatch — Glass Theme
1743
- * Selected: secondary outline ring. Hover/focus: primary outline ring.
1744
- */
1745
-
1746
- [data-style='glass'] [data-swatch-item][data-selected] {
1747
- background: transparent;
1748
- --un-outline-color-opacity:1;outline-color:rgba(var(--color-secondary-500),var(--un-outline-color-opacity));
1749
- }[data-mode="dark"][data-style="glass"] [data-swatch-item][data-selected],[data-mode="dark"] [data-style="glass"] [data-swatch-item][data-selected]{--un-outline-color-opacity:1;outline-color:rgba(var(--color-secondary-500),var(--un-outline-color-opacity));}
1750
-
1751
- [data-style='glass'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
1752
- [data-style='glass'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
1753
- --un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));
1754
- }[data-mode="dark"][data-style="glass"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="glass"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"][data-style="glass"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="glass"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]){--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));}
1755
-
1756
- [data-style='glass'] [data-swatch-item][data-selected]:focus-visible {
1757
- --un-outline-color-opacity:1;outline-color:rgba(var(--color-secondary-600),var(--un-outline-color-opacity));
1758
- outline-offset: 3px;
1759
- }[data-mode="dark"][data-style="glass"] [data-swatch-item][data-selected]:focus-visible,[data-mode="dark"] [data-style="glass"] [data-swatch-item][data-selected]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-secondary-400),var(--un-outline-color-opacity));}
1760
-