@rokkit/themes 1.0.0-next.14 → 1.0.0-next.140

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 (125) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +106 -9
  3. package/build.mjs +235 -0
  4. package/dist/base.css +4934 -0
  5. package/dist/glass.css +1400 -0
  6. package/dist/index.css +10991 -0
  7. package/dist/material.css +1435 -0
  8. package/dist/minimal.css +1389 -0
  9. package/dist/rokkit.css +1829 -0
  10. package/package.json +53 -52
  11. package/src/base/breadcrumbs.css +47 -0
  12. package/src/base/button.css +254 -0
  13. package/src/base/card.css +36 -0
  14. package/src/base/carousel.css +128 -0
  15. package/src/base/connector.css +92 -0
  16. package/src/base/display.css +91 -0
  17. package/src/base/floating-action.css +388 -0
  18. package/src/base/floating-navigation.css +405 -0
  19. package/src/base/graph-paper.css +83 -0
  20. package/src/base/grid.css +93 -0
  21. package/src/base/index.css +40 -0
  22. package/src/base/input.css +238 -0
  23. package/src/base/item.css +78 -0
  24. package/src/base/list.css +179 -0
  25. package/src/base/menu.css +274 -0
  26. package/src/base/pill.css +57 -0
  27. package/src/base/progress.css +34 -0
  28. package/src/base/range.css +121 -0
  29. package/src/base/rating.css +42 -0
  30. package/src/base/reveal.css +37 -0
  31. package/src/base/search-filter.css +132 -0
  32. package/src/base/select.css +411 -0
  33. package/src/base/shine.css +14 -0
  34. package/src/base/stepper.css +140 -0
  35. package/src/base/switch.css +152 -0
  36. package/src/base/table.css +159 -0
  37. package/src/base/tabs.css +171 -0
  38. package/src/base/tilt.css +14 -0
  39. package/src/base/timeline.css +84 -0
  40. package/src/base/toggle.css +138 -0
  41. package/src/base/toolbar.css +337 -0
  42. package/src/base/tree.css +235 -0
  43. package/src/base/upload-progress.css +155 -0
  44. package/src/base/upload-target.css +67 -0
  45. package/src/glass/button.css +153 -0
  46. package/src/glass/card.css +66 -0
  47. package/src/glass/floating-action.css +61 -0
  48. package/src/glass/floating-navigation.css +74 -0
  49. package/src/glass/index.css +23 -0
  50. package/src/glass/input.css +126 -0
  51. package/src/glass/list.css +122 -0
  52. package/src/glass/menu.css +92 -0
  53. package/src/glass/range.css +61 -0
  54. package/src/glass/search-filter.css +49 -0
  55. package/src/glass/select.css +178 -0
  56. package/src/glass/switch.css +28 -0
  57. package/src/glass/table.css +87 -0
  58. package/src/glass/tabs.css +58 -0
  59. package/src/glass/timeline.css +46 -0
  60. package/src/glass/toggle.css +48 -0
  61. package/src/glass/toolbar.css +84 -0
  62. package/src/glass/tree.css +110 -0
  63. package/src/index.css +18 -0
  64. package/src/index.js +25 -2
  65. package/src/material/button.css +157 -0
  66. package/src/material/card.css +61 -0
  67. package/src/material/floating-action.css +60 -0
  68. package/src/material/floating-navigation.css +74 -0
  69. package/src/material/index.css +23 -0
  70. package/src/material/input.css +159 -0
  71. package/src/material/list.css +126 -0
  72. package/src/material/menu.css +92 -0
  73. package/src/material/range.css +62 -0
  74. package/src/material/search-filter.css +49 -0
  75. package/src/material/select.css +170 -0
  76. package/src/material/switch.css +28 -0
  77. package/src/material/table.css +91 -0
  78. package/src/material/tabs.css +62 -0
  79. package/src/material/timeline.css +46 -0
  80. package/src/material/toggle.css +48 -0
  81. package/src/material/toolbar.css +85 -0
  82. package/src/material/tree.css +103 -0
  83. package/src/minimal/button.css +155 -0
  84. package/src/minimal/card.css +61 -0
  85. package/src/minimal/floating-action.css +59 -0
  86. package/src/minimal/floating-navigation.css +70 -0
  87. package/src/minimal/index.css +23 -0
  88. package/src/minimal/input.css +119 -0
  89. package/src/minimal/list.css +126 -0
  90. package/src/minimal/menu.css +88 -0
  91. package/src/minimal/range.css +61 -0
  92. package/src/minimal/search-filter.css +49 -0
  93. package/src/minimal/select.css +170 -0
  94. package/src/minimal/switch.css +28 -0
  95. package/src/minimal/table.css +89 -0
  96. package/src/minimal/tabs.css +68 -0
  97. package/src/minimal/timeline.css +45 -0
  98. package/src/minimal/toggle.css +48 -0
  99. package/src/minimal/toolbar.css +85 -0
  100. package/src/minimal/tree.css +106 -0
  101. package/src/palette.css +7 -0
  102. package/src/rokkit/button.css +254 -0
  103. package/src/rokkit/card.css +64 -0
  104. package/src/rokkit/connector.css +11 -0
  105. package/src/rokkit/floating-action.css +65 -0
  106. package/src/rokkit/floating-navigation.css +83 -0
  107. package/src/rokkit/grid.css +46 -0
  108. package/src/rokkit/index.css +27 -0
  109. package/src/rokkit/input.css +134 -0
  110. package/src/rokkit/list.css +132 -0
  111. package/src/rokkit/menu.css +93 -0
  112. package/src/rokkit/range.css +62 -0
  113. package/src/rokkit/search-filter.css +49 -0
  114. package/src/rokkit/select.css +190 -0
  115. package/src/rokkit/switch.css +28 -0
  116. package/src/rokkit/table.css +89 -0
  117. package/src/rokkit/tabs.css +87 -0
  118. package/src/rokkit/timeline.css +46 -0
  119. package/src/rokkit/toggle.css +48 -0
  120. package/src/rokkit/toolbar.css +84 -0
  121. package/src/rokkit/tree.css +149 -0
  122. package/src/rokkit/upload-progress.css +102 -0
  123. package/src/rokkit/upload-target.css +50 -0
  124. package/src/constants.js +0 -4
  125. package/src/utils.js +0 -88
package/dist/material.css ADDED
@@ -0,0 +1,1435 @@
1
+ /**
2
+ * @rokkit/themes - Material Theme
3
+ *
4
+ * Material Design inspired styling with elevation shadows and ripple effects.
5
+ * Use with data-style="material" wrapper.
6
+ */
7
+
8
+ /**
9
+ * Button - Material Theme Styles
10
+ *
11
+ * Material Design inspired with elevation and shadows.
12
+ */
13
+
14
+ /* =============================================================================
15
+ Default Style (filled)
16
+ ============================================================================= */
17
+
18
+ [data-style='material'] [data-button][data-style='default'][data-variant='default'],
19
+ [data-style='material'] [data-button]:not([data-style])[data-variant='default'],
20
+ [data-style='material'] [data-button][data-style='default']:not([data-variant]),
21
+ [data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
22
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
23
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"] [data-style="material"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"][data-style="material"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"] [data-style="material"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"][data-style="material"] [data-button]:not([data-style]):not([data-variant]),[data-mode="dark"] [data-style="material"] [data-button]:not([data-style]):not([data-variant]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
24
+
25
+ [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
26
+ [data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
27
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),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);
28
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="primary"],[data-mode="dark"] [data-style="material"] [data-button]:not([data-style])[data-variant="primary"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
29
+
30
+ [data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
31
+ [data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
32
+ --un-bg-opacity:1;background-color:rgba(var(--color-secondary-400),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),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);
33
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="secondary"],[data-mode="dark"] [data-style="material"] [data-button]:not([data-style])[data-variant="secondary"]{--un-bg-opacity:1;background-color:rgba(var(--color-secondary-600),var(--un-bg-opacity));}
34
+
35
+ [data-style='material'] [data-button][data-style='default'][data-variant='danger'],
36
+ [data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
37
+ --un-bg-opacity:1;background-color:rgba(var(--color-danger-400),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-danger-50),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);
38
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button]:not([data-style])[data-variant="danger"]{--un-bg-opacity:1;background-color:rgba(var(--color-danger-600),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
39
+
40
+ /* =============================================================================
41
+ Outline Style
42
+ ============================================================================= */
43
+
44
+ [data-style='material'] [data-button][data-style='outline'][data-variant='default'],
45
+ [data-style='material'] [data-button][data-style='outline']:not([data-variant]) {
46
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
47
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"] [data-style="material"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"][data-style="material"] [data-button][data-style="outline"]:not([data-variant]),[data-mode="dark"] [data-style="material"] [data-button][data-style="outline"]:not([data-variant]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
48
+
49
+ [data-style='material'] [data-button][data-style='outline'][data-variant='primary'] {
50
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
51
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="outline"][data-variant="primary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="outline"][data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
52
+
53
+ [data-style='material'] [data-button][data-style='outline'][data-variant='secondary'] {
54
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-secondary-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
55
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="outline"][data-variant="secondary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="outline"][data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
56
+
57
+ [data-style='material'] [data-button][data-style='outline'][data-variant='danger'] {
58
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-danger-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
59
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="outline"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="outline"][data-variant="danger"]{--un-border-opacity:1;border-color:rgba(var(--color-danger-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
60
+
61
+ /* =============================================================================
62
+ Ghost Style
63
+ ============================================================================= */
64
+
65
+ [data-style='material'] [data-button][data-style='ghost'] {
66
+ border-color:transparent;background-color:transparent;
67
+ }
68
+
69
+ [data-style='material'] [data-button][data-style='ghost'][data-variant='default'],
70
+ [data-style='material'] [data-button][data-style='ghost']:not([data-variant]) {
71
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
72
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"] [data-style="material"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"][data-style="material"] [data-button][data-style="ghost"]:not([data-variant]),[data-mode="dark"] [data-style="material"] [data-button][data-style="ghost"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
73
+
74
+ [data-style='material'] [data-button][data-style='ghost'][data-variant='primary'] {
75
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
76
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="ghost"][data-variant="primary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="ghost"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
77
+
78
+ [data-style='material'] [data-button][data-style='ghost'][data-variant='secondary'] {
79
+ --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
80
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="ghost"][data-variant="secondary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="ghost"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
81
+
82
+ [data-style='material'] [data-button][data-style='ghost'][data-variant='danger'] {
83
+ --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
84
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="ghost"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="ghost"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
85
+
86
+ /* =============================================================================
87
+ Gradient Style
88
+ ============================================================================= */
89
+
90
+ [data-style='material'] [data-button][data-style='gradient'][data-variant='default'],
91
+ [data-style='material'] [data-button][data-style='gradient']:not([data-variant]) {
92
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) 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),1) 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-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);
93
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="default"],[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"][data-variant="default"],[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"]:not([data-variant]),[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"]:not([data-variant]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) 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),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
94
+
95
+ [data-style='material'] [data-button][data-style='gradient'][data-variant='primary'] {
96
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) 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),1) 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-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);
97
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="primary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"][data-variant="primary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) 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),1) var(--un-gradient-to-position);}
98
+
99
+ [data-style='material'] [data-button][data-style='gradient'][data-variant='secondary'] {
100
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),1) 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),1) 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-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);
101
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="secondary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"][data-variant="secondary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),1) 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),1) var(--un-gradient-to-position);}
102
+
103
+ [data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
104
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),1) 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),1) 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-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);
105
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"][data-variant="danger"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),1) 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),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
106
+
107
+ [data-style='material']
108
+ [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
109
+ filter: brightness(1.08);
110
+ --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);
111
+ }
112
+
113
+ /* =============================================================================
114
+ Link Style
115
+ ============================================================================= */
116
+
117
+ [data-style='material'] [data-button][data-style='link'][data-variant='default'],
118
+ [data-style='material'] [data-button][data-style='link']:not([data-variant]) {
119
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
120
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"] [data-style="material"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"][data-style="material"] [data-button][data-style="link"]:not([data-variant]),[data-mode="dark"] [data-style="material"] [data-button][data-style="link"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
121
+
122
+ [data-style='material'] [data-button][data-style='link'][data-variant='primary'] {
123
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
124
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="link"][data-variant="primary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="link"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
125
+
126
+ [data-style='material'] [data-button][data-style='link'][data-variant='secondary'] {
127
+ --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
128
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="link"][data-variant="secondary"],[data-mode="dark"] [data-style="material"] [data-button][data-style="link"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
129
+
130
+ [data-style='material'] [data-button][data-style='link'][data-variant='danger'] {
131
+ --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
132
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="link"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="link"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
133
+
134
+ [data-style='material'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
135
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
136
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="link"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="material"] [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));}
137
+
138
+ /* =============================================================================
139
+ Hover States
140
+ ============================================================================= */
141
+
142
+ [data-style='material']
143
+ [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
144
+ [data-style='material'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
145
+ --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);
146
+ }
147
+
148
+ [data-style='material']
149
+ [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
150
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
151
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="material"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
152
+
153
+ [data-style='material']
154
+ [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
155
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
156
+ }[data-mode="dark"][data-style="material"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="material"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
157
+
158
+ /* =============================================================================
159
+ Focus
160
+ ============================================================================= */
161
+
162
+ [data-style='material'] [data-button]:focus-visible {
163
+ 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-offset-width:2px;--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
164
+ }[data-mode="dark"][data-style="material"] [data-button]:focus-visible,[data-mode="dark"] [data-style="material"] [data-button]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
165
+
166
+ /* Material Theme - Form field and input styles
167
+ * Material Design outlined text field with floating label.
168
+ */
169
+
170
+ /* Form background: needed so floating label pill matches */
171
+ [data-style='material'] [data-form-root] {
172
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
173
+ --material-bg: rgba(var(--color-surface-100), 1);
174
+ }[data-mode="dark"][data-style="material"] [data-form-root],[data-mode="dark"] [data-style="material"] [data-form-root]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
175
+
176
+ [data-mode='dark'] [data-style='material'] [data-form-root] {
177
+ --material-bg: rgba(var(--color-surface-900), 1);
178
+ }
179
+
180
+ /* Field root: relative positioning for floating label */
181
+ [data-style='material'] [data-field-root] {
182
+ position:relative;gap:0;
183
+ }
184
+
185
+ /* Input root: outlined border */
186
+ [data-style='material'] [data-input-root] {
187
+ display:flex;align-items:center;border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));border-radius:0.25rem;background-color:transparent;padding:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
188
+ background-image: none;
189
+ }[data-mode="dark"][data-style="material"] [data-input-root],[data-mode="dark"] [data-style="material"] [data-input-root]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
190
+
191
+ [data-style='material'] [data-input-root]:hover {
192
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));
193
+ }[data-mode="dark"][data-style="material"] [data-input-root]:hover,[data-mode="dark"] [data-style="material"] [data-input-root]:hover{--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));}
194
+
195
+ [data-style='material'] [data-input-root]:focus-within {
196
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));background-color:transparent;
197
+ background-image: none;
198
+ }[data-mode="dark"][data-style="material"] [data-input-root]:focus-within,[data-mode="dark"] [data-style="material"] [data-input-root]:focus-within{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));}
199
+
200
+ /* Inputs inside wrapper */
201
+ [data-style='material']
202
+ [data-input-root]
203
+ input:not([type='checkbox'], [type='radio'], [type='color']),
204
+ [data-style='material'] [data-input-root] textarea,
205
+ [data-style='material'] [data-input-root] select {
206
+ width:100%;border-style:none;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.625rem;padding-bottom:0.625rem;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
207
+ font-size: 0.875rem;
208
+ line-height: 1.25rem;
209
+ }[data-mode="dark"][data-style="material"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"] [data-style="material"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"][data-style="material"] [data-input-root] textarea,[data-mode="dark"] [data-style="material"] [data-input-root] textarea,[data-mode="dark"][data-style="material"] [data-input-root] select,[data-mode="dark"] [data-style="material"] [data-input-root] select{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
210
+
211
+ [data-style='material'] [data-input-root] textarea {
212
+ min-height:5rem;
213
+ }
214
+
215
+ /* Select inside input-root */
216
+ [data-style='material'] [data-input-root] [data-select-trigger] {
217
+ border-radius:0.25rem;border-style:none;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;--un-text-opacity:1;color:rgba(var(--color-surface-900),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);
218
+ font-size: 0.875rem;
219
+ }[data-mode="dark"][data-style="material"] [data-input-root] [data-select-trigger],[data-mode="dark"] [data-style="material"] [data-input-root] [data-select-trigger]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}[data-style="material"] [data-input-root] [data-select-trigger]:focus{outline:2px solid transparent;outline-offset:2px;}
220
+
221
+ /* Suppress standalone select open-state ring/border when inside input-root */
222
+ [data-style='material'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
223
+ 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);
224
+ }
225
+
226
+ /* Labels: floating label effect (exclude checkbox — uses inline label) */
227
+ [data-style='material'] [data-field-root]:not([data-field-type='checkbox']) [data-field] > label {
228
+ pointer-events:none;position:absolute;left:0.75rem;padding-left:0.25rem;padding-right:0.25rem;font-size:0.875rem;line-height:1.25rem;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
229
+ top: 50%;
230
+ transform: translateY(-50%);
231
+ background: transparent;
232
+ z-index: 1;
233
+ }[data-mode="dark"][data-style="material"] [data-field-root]:not([data-field-type="checkbox"]) [data-field]>label,[data-mode="dark"] [data-style="material"] [data-field-root]:not([data-field-type="checkbox"]) [data-field]>label{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
234
+
235
+ /* Label floats up when input has focus or value */
236
+ [data-style='material']
237
+ [data-field-root]:not([data-field-type='checkbox'])
238
+ [data-field]:has([data-input-root]:focus-within)
239
+ > label,
240
+ [data-style='material']
241
+ [data-field-root]:not([data-field-type='checkbox']):not([data-field-empty='true'])
242
+ [data-field]
243
+ > label {
244
+ font-size:0.75rem;line-height:1rem;
245
+ top: 0;
246
+ transform: translateY(-50%);
247
+ background: var(--material-bg, rgba(var(--color-surface-100), 1));
248
+ padding-inline: 0.25rem;
249
+ }
250
+
251
+ [data-style='material']
252
+ [data-field-root]:not([data-field-type='checkbox'])
253
+ [data-field]:has([data-input-root]:focus-within)
254
+ > label {
255
+ --un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
256
+ }[data-mode="dark"][data-style="material"] [data-field-root]:not([data-field-type="checkbox"]) [data-field]:has([data-input-root]:focus-within)>label,[data-mode="dark"] [data-style="material"] [data-field-root]:not([data-field-type="checkbox"]) [data-field]:has([data-input-root]:focus-within)>label{--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
257
+
258
+ /* Checkbox fields: inline label, centered with icon */
259
+ [data-style='material'] [data-field-type='checkbox'] [data-field] {
260
+ display:flex;flex-direction:row;align-items:center;gap:0.5rem;
261
+ }
262
+
263
+ [data-style='material'] [data-field-type='checkbox'] [data-field] > label {
264
+ font-size:0.875rem;line-height:1.25rem;--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
265
+ }[data-mode="dark"][data-style="material"] [data-field-type="checkbox"] [data-field]>label,[data-mode="dark"] [data-style="material"] [data-field-type="checkbox"] [data-field]>label{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
266
+
267
+ /* Form-level labels (FormRenderer) */
268
+ [data-style='material'] [data-form-root] label {
269
+ font-size:0.875rem;line-height:1.25rem;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
270
+ }[data-mode="dark"][data-style="material"] [data-form-root] label,[data-mode="dark"] [data-style="material"] [data-form-root] label{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
271
+
272
+ /* Info field value */
273
+ [data-style='material'] [data-field-info] {
274
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
275
+ }[data-mode="dark"][data-style="material"] [data-field-info],[data-mode="dark"] [data-style="material"] [data-field-info]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
276
+
277
+ /* Separator */
278
+ [data-style='material'] [data-form-separator] {
279
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));
280
+ }[data-mode="dark"][data-style="material"] [data-form-separator],[data-mode="dark"] [data-style="material"] [data-form-separator]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));}
281
+
282
+ /* Disabled state */
283
+ [data-style='material'] [data-field-disabled] [data-input-root] {
284
+ cursor:not-allowed;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));opacity:0.6;
285
+ }[data-mode="dark"][data-style="material"] [data-field-disabled] [data-input-root],[data-mode="dark"] [data-style="material"] [data-field-disabled] [data-input-root]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
286
+
287
+ /* Error state */
288
+ [data-style='material'] [data-field-state='fail'] [data-input-root] {
289
+ --un-border-opacity:1;border-color:rgba(var(--color-danger-400),var(--un-border-opacity));
290
+ }[data-mode="dark"][data-style="material"] [data-field-state="fail"] [data-input-root],[data-mode="dark"] [data-style="material"] [data-field-state="fail"] [data-input-root]{--un-border-opacity:1;border-color:rgba(var(--color-danger-600),var(--un-border-opacity));}
291
+
292
+ [data-style='material']
293
+ [data-field-root]:not([data-field-type='checkbox'])[data-field-state='fail']
294
+ [data-field]
295
+ > label {
296
+ --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
297
+ }[data-mode="dark"][data-style="material"] [data-field-root]:not([data-field-type="checkbox"])[data-field-state="fail"] [data-field]>label,[data-mode="dark"] [data-style="material"] [data-field-root]:not([data-field-type="checkbox"])[data-field-state="fail"] [data-field]>label{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
298
+
299
+ /* Description */
300
+ [data-style='material'] [data-description] {
301
+ margin-top:0.25rem;padding-left:0.75rem;padding-right:0.75rem;font-size:0.75rem;line-height:1rem;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
302
+ }[data-mode="dark"][data-style="material"] [data-description],[data-mode="dark"] [data-style="material"] [data-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
303
+
304
+ /* Message */
305
+ [data-style='material'] [data-message] {
306
+ margin-top:0.25rem;padding-left:0.75rem;padding-right:0.75rem;font-size:0.75rem;line-height:1rem;--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));
307
+ }[data-mode="dark"][data-style="material"] [data-message],[data-mode="dark"] [data-style="material"] [data-message]{--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));}
308
+
309
+ /* Checkbox */
310
+ [data-style='material'] [data-checkbox-icon] {
311
+ font-size:1.125rem;line-height:1.75rem;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
312
+ }[data-mode="dark"][data-style="material"] [data-checkbox-icon],[data-mode="dark"] [data-style="material"] [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
313
+
314
+ [data-style='material']
315
+ [data-checkbox-root][data-variant='custom']:has(input:checked)
316
+ [data-checkbox-icon] {
317
+ --un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
318
+ }[data-mode="dark"][data-style="material"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon],[data-mode="dark"] [data-style="material"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
319
+
320
+ /* Placeholders */
321
+ [data-style='material'] [data-input-root] input::placeholder,
322
+ [data-style='material'] [data-input-root] textarea::placeholder {
323
+ --un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));
324
+ }[data-mode="dark"][data-style="material"] [data-input-root] input::placeholder,[data-mode="dark"] [data-style="material"] [data-input-root] input::placeholder,[data-mode="dark"][data-style="material"] [data-input-root] textarea::placeholder,[data-mode="dark"] [data-style="material"] [data-input-root] textarea::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));}
325
+
326
+ /**
327
+ * Toolbar - Material Theme Styles
328
+ *
329
+ * Material Design inspired with elevation and shadows.
330
+ */
331
+
332
+ /* =============================================================================
333
+ Toolbar Container
334
+ ============================================================================= */
335
+
336
+ [data-style='material'] [data-toolbar] {
337
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-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);
338
+ }[data-mode="dark"][data-style="material"] [data-toolbar],[data-mode="dark"] [data-style="material"] [data-toolbar]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
339
+
340
+ /* Position-based borders removed - using shadows instead */
341
+ [data-style='material'] [data-toolbar][data-toolbar-position='top'],
342
+ [data-style='material'] [data-toolbar]:not([data-toolbar-position]) {
343
+ --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);
344
+ }
345
+
346
+ [data-style='material'] [data-toolbar][data-toolbar-position='bottom'] {
347
+ --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);
348
+ }
349
+
350
+ [data-style='material'] [data-toolbar][data-toolbar-position='left'] {
351
+ --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);
352
+ }
353
+
354
+ [data-style='material'] [data-toolbar][data-toolbar-position='right'] {
355
+ --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);
356
+ }
357
+
358
+ /* =============================================================================
359
+ Toolbar Items
360
+ ============================================================================= */
361
+
362
+ [data-style='material'] [data-toolbar-item] {
363
+ border-radius:9999px;--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
364
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item],[data-mode="dark"] [data-style="material"] [data-toolbar-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
365
+
366
+ [data-style='material'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
367
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
368
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="material"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
369
+
370
+ [data-style='material']
371
+ [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
372
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
373
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="material"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
374
+
375
+ /* Active/pressed state */
376
+ [data-style='material'] [data-toolbar-item][data-active='true'] {
377
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
378
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item][data-active="true"],[data-mode="dark"] [data-style="material"] [data-toolbar-item][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
379
+
380
+ [data-style='material'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
381
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
382
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-toolbar-item][data-active="true"]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
383
+
384
+ /* =============================================================================
385
+ Toolbar Icon
386
+ ============================================================================= */
387
+
388
+ [data-style='material'] [data-toolbar-item] [data-toolbar-icon] {
389
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
390
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item] [data-toolbar-icon],[data-mode="dark"] [data-style="material"] [data-toolbar-item] [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
391
+
392
+ [data-style='material'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
393
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
394
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon],[data-mode="dark"] [data-style="material"] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
395
+
396
+ [data-style='material'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
397
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
398
+ }[data-mode="dark"][data-style="material"] [data-toolbar-item][data-active="true"] [data-toolbar-icon],[data-mode="dark"] [data-style="material"] [data-toolbar-item][data-active="true"] [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
399
+
400
+ /* =============================================================================
401
+ Separator & Divider
402
+ ============================================================================= */
403
+
404
+ [data-style='material'] [data-toolbar-separator] {
405
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
406
+ }[data-mode="dark"][data-style="material"] [data-toolbar-separator],[data-mode="dark"] [data-style="material"] [data-toolbar-separator]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
407
+
408
+ [data-style='material'] [data-toolbar-divider] {
409
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
410
+ }[data-mode="dark"][data-style="material"] [data-toolbar-divider],[data-mode="dark"] [data-style="material"] [data-toolbar-divider]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
411
+
412
+ /**
413
+ * Tabs - Material Theme Styles
414
+ *
415
+ * Material Design inspired with elevation and rounded corners.
416
+ */
417
+
418
+ /* =============================================================================
419
+ Tab List
420
+ ============================================================================= */
421
+
422
+ [data-style='material'] [data-tabs-list] {
423
+ gap:0.125rem;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-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);
424
+ }[data-mode="dark"][data-style="material"] [data-tabs-list],[data-mode="dark"] [data-style="material"] [data-tabs-list]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
425
+
426
+ [data-style='material'] [data-tabs][data-position='after'] [data-tabs-list] {
427
+ border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;
428
+ }
429
+
430
+ /* =============================================================================
431
+ Tab Triggers
432
+ ============================================================================= */
433
+
434
+ [data-style='material'] [data-tabs-trigger] {
435
+ border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
436
+ }[data-mode="dark"][data-style="material"] [data-tabs-trigger],[data-mode="dark"] [data-style="material"] [data-tabs-trigger]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
437
+
438
+ [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
439
+ border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;
440
+ }
441
+
442
+ [data-style='material'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
443
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
444
+ }[data-mode="dark"][data-style="material"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="material"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
445
+
446
+ /* Selected state */
447
+ [data-style='material'] [data-tabs-trigger][data-selected] {
448
+ --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));--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);
449
+ }[data-mode="dark"][data-style="material"] [data-tabs-trigger][data-selected],[data-mode="dark"] [data-style="material"] [data-tabs-trigger][data-selected]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
450
+
451
+ /* =============================================================================
452
+ Tab Icon
453
+ ============================================================================= */
454
+
455
+ [data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
456
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
457
+ }[data-mode="dark"][data-style="material"] [data-tabs-trigger] [data-tabs-icon],[data-mode="dark"] [data-style="material"] [data-tabs-trigger] [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
458
+
459
+ [data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
460
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
461
+ }[data-mode="dark"][data-style="material"] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon],[data-mode="dark"] [data-style="material"] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
462
+
463
+ [data-style='material'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
464
+ --un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));
465
+ }
466
+
467
+ /* =============================================================================
468
+ Tab Panel
469
+ ============================================================================= */
470
+
471
+ [data-style='material'] [data-tabs-content] {
472
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
473
+ }[data-mode="dark"][data-style="material"] [data-tabs-content],[data-mode="dark"] [data-style="material"] [data-tabs-content]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
474
+
475
+ /**
476
+ * Toggle - Material Theme Styles
477
+ *
478
+ * Material Design inspired with elevation and rounded corners.
479
+ */
480
+
481
+ /* =============================================================================
482
+ Toggle Container
483
+ ============================================================================= */
484
+
485
+ [data-style='material'] [data-toggle] {
486
+ border-radius:9999px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-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);
487
+ }[data-mode="dark"][data-style="material"] [data-toggle],[data-mode="dark"] [data-style="material"] [data-toggle]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
488
+
489
+ /* =============================================================================
490
+ Toggle Options
491
+ ============================================================================= */
492
+
493
+ [data-style='material'] [data-toggle-option] {
494
+ border-radius:9999px;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
495
+ }[data-mode="dark"][data-style="material"] [data-toggle-option],[data-mode="dark"] [data-style="material"] [data-toggle-option]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
496
+
497
+ [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
498
+ [data-style='material'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
499
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
500
+ }[data-mode="dark"][data-style="material"] [data-toggle-option]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="material"] [data-toggle-option]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="material"] [data-toggle-option]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="material"] [data-toggle-option]:focus:not(:disabled):not([data-disabled="true"]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
501
+
502
+ /* Selected state */
503
+ [data-style='material'] [data-toggle-option][data-selected='true'] {
504
+ --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));--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);
505
+ }[data-mode="dark"][data-style="material"] [data-toggle-option][data-selected="true"],[data-mode="dark"] [data-style="material"] [data-toggle-option][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
506
+
507
+ /* =============================================================================
508
+ Toggle Icon
509
+ ============================================================================= */
510
+
511
+ [data-style='material'] [data-toggle-option] [data-toggle-icon] {
512
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
513
+ }[data-mode="dark"][data-style="material"] [data-toggle-option] [data-toggle-icon],[data-mode="dark"] [data-style="material"] [data-toggle-option] [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
514
+
515
+ [data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
516
+ [data-style='material'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
517
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
518
+ }[data-mode="dark"][data-style="material"] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],[data-mode="dark"] [data-style="material"] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],[data-mode="dark"][data-style="material"] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon],[data-mode="dark"] [data-style="material"] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
519
+
520
+ [data-style='material'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
521
+ --un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));
522
+ }
523
+
524
+ /**
525
+ * Switch - Material Theme Styles
526
+ */
527
+
528
+ [data-style='material'] [data-switch-track] {
529
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
530
+ }[data-mode="dark"][data-style="material"] [data-switch-track],[data-mode="dark"] [data-style="material"] [data-switch-track]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
531
+
532
+ [data-style='material'] [data-switch-thumb] {
533
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-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);
534
+ }[data-mode="dark"][data-style="material"] [data-switch-thumb],[data-mode="dark"] [data-style="material"] [data-switch-thumb]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));}
535
+
536
+ [data-style='material'] [data-switch]:focus-visible [data-switch-track] {
537
+ --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-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
538
+ }[data-mode="dark"][data-style="material"] [data-switch]:focus-visible [data-switch-track],[data-mode="dark"] [data-style="material"] [data-switch]:focus-visible [data-switch-track]{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));}
539
+
540
+ /* On state */
541
+ [data-style='material'] [data-switch][aria-checked='true'] [data-switch-track] {
542
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));
543
+ }[data-mode="dark"][data-style="material"] [data-switch][aria-checked="true"] [data-switch-track],[data-mode="dark"] [data-style="material"] [data-switch][aria-checked="true"] [data-switch-track]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
544
+
545
+ [data-style='material'] [data-switch][aria-checked='true'] [data-switch-thumb] {
546
+ --un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-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);
547
+ }
548
+
549
+ [data-style='material'] [data-switch-label] {
550
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
551
+ }[data-mode="dark"][data-style="material"] [data-switch-label],[data-mode="dark"] [data-style="material"] [data-switch-label]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
552
+
553
+ /**
554
+ * List - Material Theme Styles
555
+ *
556
+ * Material Design inspired with subtle elevation and ripple effects.
557
+ */
558
+
559
+ /* =============================================================================
560
+ List Container
561
+ ============================================================================= */
562
+
563
+ [data-style='material'] [data-list]:focus-within {
564
+ outline:2px solid transparent;outline-offset:2px;
565
+ }
566
+
567
+ /* =============================================================================
568
+ List Items
569
+ ============================================================================= */
570
+
571
+ [data-style='material'] [data-list] [data-list-item] {
572
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
573
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
574
+
575
+ [data-style='material'] [data-list] a[data-list-item],
576
+ [data-style='material'] [data-list] button[data-list-item] {
577
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
578
+ }[data-mode="dark"][data-style="material"] [data-list] a[data-list-item],[data-mode="dark"] [data-style="material"] [data-list] a[data-list-item],[data-mode="dark"][data-style="material"] [data-list] button[data-list-item],[data-mode="dark"] [data-style="material"] [data-list] button[data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
579
+
580
+ /* Hover and focus (keyboard navigation) */
581
+ [data-style='material']
582
+ [data-list]
583
+ [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
584
+ [data-style='material']
585
+ [data-list]
586
+ [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
587
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
588
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="material"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="material"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="material"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
589
+
590
+ /* Active state — muted when list not focused */
591
+ [data-style='material'] [data-list] [data-list-item][data-active='true'] {
592
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
593
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
594
+
595
+ /* Active state — full highlight when list has focus */
596
+ [data-style='material'] [data-list]:focus-within [data-list-item][data-active='true'] {
597
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
598
+ }[data-mode="dark"][data-style="material"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="material"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
599
+
600
+ /* Active + hover/focus */
601
+ [data-style='material'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
602
+ [data-style='material'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
603
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));
604
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-active="true"]:focus:not(:disabled),[data-mode="dark"] [data-style="material"] [data-list] [data-list-item][data-active="true"]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
605
+
606
+ /* =============================================================================
607
+ Item Elements
608
+ ============================================================================= */
609
+
610
+ [data-style='material'] [data-list] [data-list-item] [data-item-icon] {
611
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
612
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item] [data-item-icon],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
613
+
614
+ [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
615
+ [data-style='material'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
616
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
617
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"][data-style="material"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="material"] [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));}
618
+
619
+ [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
620
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
621
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="material"] [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));}
622
+
623
+ [data-style='material'] [data-list] [data-list-item] [data-item-description] {
624
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
625
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item] [data-item-description],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
626
+
627
+ [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
628
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
629
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="material"] [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));}
630
+
631
+ [data-style='material'] [data-list] [data-list-item] [data-item-badge] {
632
+ border-radius:9999px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
633
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item] [data-item-badge],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
634
+
635
+ [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
636
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
637
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item][data-active="true"] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
638
+
639
+ /* =============================================================================
640
+ Groups
641
+ ============================================================================= */
642
+
643
+ [data-style='material'] [data-list] [data-list-group] {
644
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));font-weight:500;
645
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-group],[data-mode="dark"] [data-style="material"] [data-list] [data-list-group]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
646
+
647
+ [data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
648
+ [data-style='material'] [data-list] [data-list-group]:focus:not(:disabled) {
649
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
650
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-group]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-list] [data-list-group]:hover:not(:disabled),[data-mode="dark"][data-style="material"] [data-list] [data-list-group]:focus:not(:disabled),[data-mode="dark"] [data-style="material"] [data-list] [data-list-group]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
651
+
652
+ /* =============================================================================
653
+ Separator
654
+ ============================================================================= */
655
+
656
+ [data-style='material'] [data-list] [data-list-separator] {
657
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
658
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-separator],[data-mode="dark"] [data-style="material"] [data-list] [data-list-separator]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
659
+
660
+ /* =============================================================================
661
+ Multi-Selection
662
+ ============================================================================= */
663
+
664
+ [data-style='material'] [data-list] [data-list-item][data-selected='true'] {
665
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
666
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-selected="true"],[data-mode="dark"] [data-style="material"] [data-list] [data-list-item][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
667
+
668
+ [data-style='material'] [data-list]:focus-within [data-list-item][data-selected='true'] {
669
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));
670
+ }[data-mode="dark"][data-style="material"] [data-list]:focus-within [data-list-item][data-selected="true"],[data-mode="dark"] [data-style="material"] [data-list]:focus-within [data-list-item][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));}
671
+
672
+ [data-style='material'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
673
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));
674
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-selected="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-list] [data-list-item][data-selected="true"]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
675
+
676
+ [data-style='material'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
677
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
678
+ }[data-mode="dark"][data-style="material"] [data-list] [data-list-item][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="material"] [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));}
679
+
680
+ /**
681
+ * Tree - Material Theme Styles
682
+ *
683
+ * Material Design inspired with subtle elevation.
684
+ */
685
+
686
+ /* =============================================================================
687
+ Tree Container
688
+ ============================================================================= */
689
+
690
+ [data-style='material'] [data-tree]:focus-within {
691
+ outline:2px solid transparent;outline-offset:2px;
692
+ }
693
+
694
+ /* =============================================================================
695
+ Tree Toggle Button
696
+ ============================================================================= */
697
+
698
+ [data-style='material'] [data-tree-toggle-btn] {
699
+ border-radius:9999px;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
700
+ }[data-mode="dark"][data-style="material"] [data-tree-toggle-btn],[data-mode="dark"] [data-style="material"] [data-tree-toggle-btn]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
701
+
702
+ [data-style='material'] [data-tree-toggle-btn]:hover {
703
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
704
+ }[data-mode="dark"][data-style="material"] [data-tree-toggle-btn]:hover,[data-mode="dark"] [data-style="material"] [data-tree-toggle-btn]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
705
+
706
+ /* =============================================================================
707
+ Tree Item Content
708
+ ============================================================================= */
709
+
710
+ [data-style='material'] [data-tree-item-content] {
711
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
712
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content],[data-mode="dark"] [data-style="material"] [data-tree-item-content]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
713
+
714
+ [data-style='material'] [data-tree-item-content]:hover:not(:disabled),
715
+ [data-style='material'] [data-tree-item-content]:focus:not(:disabled) {
716
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
717
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"][data-style="material"] [data-tree-item-content]:focus:not(:disabled),[data-mode="dark"] [data-style="material"] [data-tree-item-content]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
718
+
719
+ /* Focus visible for keyboard navigation */
720
+ [data-style='material'] [data-tree-item-content]:focus-visible {
721
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));--un-ring-inset:inset;
722
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content]:focus-visible,[data-mode="dark"] [data-style="material"] [data-tree-item-content]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
723
+
724
+ /* Active/selected state */
725
+ [data-style='material'] [data-tree-item-content][data-active='true'] {
726
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
727
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content][data-active="true"],[data-mode="dark"] [data-style="material"] [data-tree-item-content][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
728
+
729
+ [data-style='material'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
730
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));
731
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-tree-item-content][data-active="true"]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
732
+
733
+ /* =============================================================================
734
+ Item Elements
735
+ ============================================================================= */
736
+
737
+ [data-style='material'] [data-tree-item-content] [data-item-icon] {
738
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
739
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content] [data-item-icon],[data-mode="dark"] [data-style="material"] [data-tree-item-content] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
740
+
741
+ [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
742
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
743
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="material"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
744
+
745
+ [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-icon] {
746
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
747
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="material"] [data-tree-item-content][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
748
+
749
+ [data-style='material'] [data-tree-item-content] [data-item-description] {
750
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
751
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content] [data-item-description],[data-mode="dark"] [data-style="material"] [data-tree-item-content] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
752
+
753
+ [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
754
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
755
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="material"] [data-tree-item-content][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
756
+
757
+ [data-style='material'] [data-tree-item-content] [data-item-badge] {
758
+ border-radius:9999px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
759
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content] [data-item-badge],[data-mode="dark"] [data-style="material"] [data-tree-item-content] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
760
+
761
+ [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
762
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
763
+ }[data-mode="dark"][data-style="material"] [data-tree-item-content][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="material"] [data-tree-item-content][data-active="true"] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
764
+
765
+ /* =============================================================================
766
+ Multi-Selection
767
+ ============================================================================= */
768
+
769
+ [data-style='material'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
770
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));
771
+ }[data-mode="dark"][data-style="material"] [data-tree-node][data-selected="true"] [data-tree-node-row],[data-mode="dark"] [data-style="material"] [data-tree-node][data-selected="true"] [data-tree-node-row]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));}
772
+
773
+ [data-style='material'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
774
+ --un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
775
+ }[data-mode="dark"][data-style="material"] [data-tree-node][data-selected="true"] [data-tree-item-content],[data-mode="dark"] [data-style="material"] [data-tree-node][data-selected="true"] [data-tree-item-content]{--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
776
+
777
+ [data-style='material']
778
+ [data-tree-node][data-selected='true']
779
+ [data-tree-item-content]
780
+ [data-item-icon] {
781
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
782
+ }[data-mode="dark"][data-style="material"] [data-tree-node][data-selected="true"] [data-tree-item-content] [data-item-icon],[data-mode="dark"] [data-style="material"] [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));}
783
+
784
+ /**
785
+ * Select - Material Theme Styles
786
+ *
787
+ * Material Design inspired with elevation and shadows.
788
+ */
789
+
790
+ /* =============================================================================
791
+ Trigger Button
792
+ ============================================================================= */
793
+
794
+ [data-style='material'] [data-select-trigger] {
795
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
796
+ }[data-mode="dark"][data-style="material"] [data-select-trigger],[data-mode="dark"] [data-style="material"] [data-select-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
797
+
798
+ [data-style='material'] [data-select-trigger]:hover:not(:disabled) {
799
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-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);
800
+ }[data-mode="dark"][data-style="material"] [data-select-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-select-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
801
+
802
+ [data-style='material'] [data-select-trigger]:focus-visible {
803
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
804
+ }[data-mode="dark"][data-style="material"] [data-select-trigger]:focus-visible,[data-mode="dark"] [data-style="material"] [data-select-trigger]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
805
+
806
+ [data-style='material'] [data-select][data-open='true'] [data-select-trigger] {
807
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-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);
808
+ }[data-mode="dark"][data-style="material"] [data-select][data-open="true"] [data-select-trigger],[data-mode="dark"] [data-style="material"] [data-select][data-open="true"] [data-select-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));}
809
+
810
+ /* =============================================================================
811
+ Placeholder
812
+ ============================================================================= */
813
+
814
+ [data-style='material'] [data-select-placeholder] {
815
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
816
+ }[data-mode="dark"][data-style="material"] [data-select-placeholder],[data-mode="dark"] [data-style="material"] [data-select-placeholder]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
817
+
818
+ /* =============================================================================
819
+ Arrow
820
+ ============================================================================= */
821
+
822
+ [data-style='material'] [data-select-arrow] {
823
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
824
+ }[data-mode="dark"][data-style="material"] [data-select-arrow],[data-mode="dark"] [data-style="material"] [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
825
+
826
+ [data-style='material'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
827
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
828
+ }[data-mode="dark"][data-style="material"] [data-select-trigger]:hover:not(:disabled) [data-select-arrow],[data-mode="dark"] [data-style="material"] [data-select-trigger]:hover:not(:disabled) [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
829
+
830
+ /* =============================================================================
831
+ Tags (MultiSelect)
832
+ ============================================================================= */
833
+
834
+ [data-style='material'] [data-select-tag] {
835
+ border-radius:9999px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
836
+ }[data-mode="dark"][data-style="material"] [data-select-tag],[data-mode="dark"] [data-style="material"] [data-select-tag]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
837
+
838
+ [data-style='material'] [data-select-tag-remove] {
839
+ border-radius:9999px;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
840
+ }[data-mode="dark"][data-style="material"] [data-select-tag-remove],[data-mode="dark"] [data-style="material"] [data-select-tag-remove]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
841
+
842
+ [data-style='material'] [data-select-tag-remove]:hover {
843
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
844
+ }[data-mode="dark"][data-style="material"] [data-select-tag-remove]:hover,[data-mode="dark"] [data-style="material"] [data-select-tag-remove]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
845
+
846
+ /* =============================================================================
847
+ Dropdown Panel
848
+ ============================================================================= */
849
+
850
+ [data-style='material'] [data-select-dropdown] {
851
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-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);
852
+ }[data-mode="dark"][data-style="material"] [data-select-dropdown],[data-mode="dark"] [data-style="material"] [data-select-dropdown]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
853
+
854
+ /* =============================================================================
855
+ Options
856
+ ============================================================================= */
857
+
858
+ [data-style='material'] [data-select-option] {
859
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
860
+ }[data-mode="dark"][data-style="material"] [data-select-option],[data-mode="dark"] [data-style="material"] [data-select-option]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
861
+
862
+ [data-style='material'] [data-select-option]:hover:not(:disabled),
863
+ [data-style='material'] [data-select-option]:focus:not(:disabled) {
864
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
865
+ }[data-mode="dark"][data-style="material"] [data-select-option]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-select-option]:hover:not(:disabled),[data-mode="dark"][data-style="material"] [data-select-option]:focus:not(:disabled),[data-mode="dark"] [data-style="material"] [data-select-option]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
866
+
867
+ [data-style='material'] [data-select-option]:focus-visible {
868
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));--un-ring-inset:inset;
869
+ }[data-mode="dark"][data-style="material"] [data-select-option]:focus-visible,[data-mode="dark"] [data-style="material"] [data-select-option]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
870
+
871
+ [data-style='material'] [data-select-option][data-selected='true'] {
872
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
873
+ }[data-mode="dark"][data-style="material"] [data-select-option][data-selected="true"],[data-mode="dark"] [data-style="material"] [data-select-option][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
874
+
875
+ [data-style='material'] [data-select-option][data-selected='true']:hover:not(:disabled),
876
+ [data-style='material'] [data-select-option][data-selected='true']:focus:not(:disabled) {
877
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));
878
+ }[data-mode="dark"][data-style="material"] [data-select-option][data-selected="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-select-option][data-selected="true"]:hover:not(:disabled),[data-mode="dark"][data-style="material"] [data-select-option][data-selected="true"]:focus:not(:disabled),[data-mode="dark"] [data-style="material"] [data-select-option][data-selected="true"]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
879
+
880
+ /* Check mark */
881
+ [data-style='material'] [data-select-check] {
882
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
883
+ }[data-mode="dark"][data-style="material"] [data-select-check],[data-mode="dark"] [data-style="material"] [data-select-check]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
884
+
885
+ /* Checkbox */
886
+ [data-style='material'] [data-select-checkbox] {
887
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));border-radius:0.25rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
888
+ }[data-mode="dark"][data-style="material"] [data-select-checkbox],[data-mode="dark"] [data-style="material"] [data-select-checkbox]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
889
+
890
+ [data-style='material'] [data-select-checkbox][data-checked='true'] {
891
+ --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));
892
+ }[data-mode="dark"][data-style="material"] [data-select-checkbox][data-checked="true"],[data-mode="dark"] [data-style="material"] [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));}
893
+
894
+ /* Item elements */
895
+ [data-style='material'] [data-select-option] [data-item-icon] {
896
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
897
+ }[data-mode="dark"][data-style="material"] [data-select-option] [data-item-icon],[data-mode="dark"] [data-style="material"] [data-select-option] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
898
+
899
+ [data-style='material'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
900
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
901
+ }[data-mode="dark"][data-style="material"] [data-select-option]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="material"] [data-select-option]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
902
+
903
+ [data-style='material'] [data-select-option][data-selected='true'] [data-item-icon] {
904
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
905
+ }[data-mode="dark"][data-style="material"] [data-select-option][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="material"] [data-select-option][data-selected="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
906
+
907
+ [data-style='material'] [data-select-option] [data-item-description] {
908
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
909
+ }[data-mode="dark"][data-style="material"] [data-select-option] [data-item-description],[data-mode="dark"] [data-style="material"] [data-select-option] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
910
+
911
+ [data-style='material'] [data-select-option][data-selected='true'] [data-item-description] {
912
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
913
+ }[data-mode="dark"][data-style="material"] [data-select-option][data-selected="true"] [data-item-description],[data-mode="dark"] [data-style="material"] [data-select-option][data-selected="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
914
+
915
+ /* =============================================================================
916
+ Groups
917
+ ============================================================================= */
918
+
919
+ [data-style='material'] [data-select-group-label] {
920
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));font-weight:500;
921
+ }[data-mode="dark"][data-style="material"] [data-select-group-label],[data-mode="dark"] [data-style="material"] [data-select-group-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
922
+
923
+ /* =============================================================================
924
+ Divider
925
+ ============================================================================= */
926
+
927
+ [data-style='material'] [data-select-divider] {
928
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
929
+ }[data-mode="dark"][data-style="material"] [data-select-divider],[data-mode="dark"] [data-style="material"] [data-select-divider]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
930
+
931
+ /* =============================================================================
932
+ Filter Input
933
+ ============================================================================= */
934
+
935
+ [data-style='material'] [data-select-filter] {
936
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
937
+ }[data-mode="dark"][data-style="material"] [data-select-filter],[data-mode="dark"] [data-style="material"] [data-select-filter]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
938
+
939
+ [data-style='material'] [data-select-filter-input] {
940
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
941
+ }[data-mode="dark"][data-style="material"] [data-select-filter-input],[data-mode="dark"] [data-style="material"] [data-select-filter-input]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
942
+
943
+ [data-style='material'] [data-select-filter-input]:focus {
944
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
945
+ }[data-mode="dark"][data-style="material"] [data-select-filter-input]:focus,[data-mode="dark"] [data-style="material"] [data-select-filter-input]:focus{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
946
+
947
+ [data-style='material'] [data-select-filter-input]::placeholder {
948
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
949
+ }[data-mode="dark"][data-style="material"] [data-select-filter-input]::placeholder,[data-mode="dark"] [data-style="material"] [data-select-filter-input]::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
950
+
951
+ [data-style='material'] [data-select-empty] {
952
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
953
+ }[data-mode="dark"][data-style="material"] [data-select-empty],[data-mode="dark"] [data-style="material"] [data-select-empty]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
954
+
955
+ /**
956
+ * Menu - Material Theme Styles
957
+ *
958
+ * Material Design inspired with elevation and shadows.
959
+ */
960
+
961
+ /* =============================================================================
962
+ Menu Trigger
963
+ ============================================================================= */
964
+
965
+ [data-style='material'] [data-menu-trigger] {
966
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
967
+ }[data-mode="dark"][data-style="material"] [data-menu-trigger],[data-mode="dark"] [data-style="material"] [data-menu-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
968
+
969
+ [data-style='material'] [data-menu-trigger]:hover:not(:disabled) {
970
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),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);
971
+ }[data-mode="dark"][data-style="material"] [data-menu-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-menu-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
972
+
973
+ [data-style='material'] [data-menu-trigger]:focus-visible {
974
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
975
+ }[data-mode="dark"][data-style="material"] [data-menu-trigger]:focus-visible,[data-mode="dark"] [data-style="material"] [data-menu-trigger]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
976
+
977
+ [data-style='material'] [data-menu][data-open='true'] [data-menu-trigger] {
978
+ --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-200),var(--un-bg-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);
979
+ }[data-mode="dark"][data-style="material"] [data-menu][data-open="true"] [data-menu-trigger],[data-mode="dark"] [data-style="material"] [data-menu][data-open="true"] [data-menu-trigger]{--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-800),var(--un-bg-opacity));}
980
+
981
+ /* Trigger elements */
982
+ [data-style='material'] [data-menu-trigger] [data-menu-icon] {
983
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
984
+ }[data-mode="dark"][data-style="material"] [data-menu-trigger] [data-menu-icon],[data-mode="dark"] [data-style="material"] [data-menu-trigger] [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
985
+
986
+ [data-style='material'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
987
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
988
+ }[data-mode="dark"][data-style="material"] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon],[data-mode="dark"] [data-style="material"] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
989
+
990
+ [data-style='material'] [data-menu-trigger] [data-menu-arrow] {
991
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
992
+ }[data-mode="dark"][data-style="material"] [data-menu-trigger] [data-menu-arrow],[data-mode="dark"] [data-style="material"] [data-menu-trigger] [data-menu-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
993
+
994
+ /* =============================================================================
995
+ Menu Dropdown
996
+ ============================================================================= */
997
+
998
+ [data-style='material'] [data-menu-dropdown] {
999
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-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);
1000
+ }[data-mode="dark"][data-style="material"] [data-menu-dropdown],[data-mode="dark"] [data-style="material"] [data-menu-dropdown]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
1001
+
1002
+ /* =============================================================================
1003
+ Menu Items
1004
+ ============================================================================= */
1005
+
1006
+ [data-style='material'] [data-menu-item] {
1007
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1008
+ }[data-mode="dark"][data-style="material"] [data-menu-item],[data-mode="dark"] [data-style="material"] [data-menu-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1009
+
1010
+ [data-style='material'] [data-menu-item]:hover:not(:disabled),
1011
+ [data-style='material'] [data-menu-item]:focus:not(:disabled) {
1012
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1013
+ }[data-mode="dark"][data-style="material"] [data-menu-item]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-menu-item]:hover:not(:disabled),[data-mode="dark"][data-style="material"] [data-menu-item]:focus:not(:disabled),[data-mode="dark"] [data-style="material"] [data-menu-item]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1014
+
1015
+ [data-style='material'] [data-menu-item]:focus-visible {
1016
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));--un-ring-inset:inset;
1017
+ }[data-mode="dark"][data-style="material"] [data-menu-item]:focus-visible,[data-mode="dark"] [data-style="material"] [data-menu-item]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1018
+
1019
+ /* Item elements */
1020
+ [data-style='material'] [data-menu-item] [data-item-icon] {
1021
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1022
+ }[data-mode="dark"][data-style="material"] [data-menu-item] [data-item-icon],[data-mode="dark"] [data-style="material"] [data-menu-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1023
+
1024
+ [data-style='material'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
1025
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1026
+ }[data-mode="dark"][data-style="material"] [data-menu-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="material"] [data-menu-item]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1027
+
1028
+ [data-style='material'] [data-menu-item] [data-item-description] {
1029
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1030
+ }[data-mode="dark"][data-style="material"] [data-menu-item] [data-item-description],[data-mode="dark"] [data-style="material"] [data-menu-item] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1031
+
1032
+ /* =============================================================================
1033
+ Groups
1034
+ ============================================================================= */
1035
+
1036
+ [data-style='material'] [data-menu-group] {
1037
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));font-weight:500;
1038
+ }[data-mode="dark"][data-style="material"] [data-menu-group],[data-mode="dark"] [data-style="material"] [data-menu-group]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1039
+
1040
+ /* =============================================================================
1041
+ Divider
1042
+ ============================================================================= */
1043
+
1044
+ [data-style='material'] [data-menu-separator] {
1045
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
1046
+ }[data-mode="dark"][data-style="material"] [data-menu-separator],[data-mode="dark"] [data-style="material"] [data-menu-separator]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
1047
+
1048
+ /**
1049
+ * FloatingAction - Material Theme Styles
1050
+ *
1051
+ * Material Design inspired with elevation and shadows.
1052
+ */
1053
+
1054
+ /* =============================================================================
1055
+ FAB Trigger Button
1056
+ ============================================================================= */
1057
+
1058
+ [data-style='material'] [data-fab-trigger] {
1059
+ --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));--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);
1060
+ }[data-mode="dark"][data-style="material"] [data-fab-trigger],[data-mode="dark"] [data-style="material"] [data-fab-trigger]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
1061
+
1062
+ [data-style='material'] [data-fab-trigger]:hover:not(:disabled) {
1063
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-600),var(--un-bg-opacity));--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);
1064
+ transform: scale(1.05);
1065
+ }[data-mode="dark"][data-style="material"] [data-fab-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-fab-trigger]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-400),var(--un-bg-opacity));}
1066
+
1067
+ [data-style='material'] [data-fab-trigger]:focus-visible {
1068
+ 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-offset-width:2px;--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1069
+ }[data-mode="dark"][data-style="material"] [data-fab-trigger]:focus-visible,[data-mode="dark"] [data-style="material"] [data-fab-trigger]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1070
+
1071
+ [data-style='material'] [data-fab][data-open='true'] [data-fab-trigger] {
1072
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));--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);
1073
+ transform: rotate(45deg);
1074
+ }[data-mode="dark"][data-style="material"] [data-fab][data-open="true"] [data-fab-trigger],[data-mode="dark"] [data-style="material"] [data-fab][data-open="true"] [data-fab-trigger]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1075
+
1076
+ /* =============================================================================
1077
+ FAB Items
1078
+ ============================================================================= */
1079
+
1080
+ [data-style='material'] [data-fab-item] {
1081
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
1082
+ }[data-mode="dark"][data-style="material"] [data-fab-item],[data-mode="dark"] [data-style="material"] [data-fab-item]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1083
+
1084
+ [data-style='material'] [data-fab-item]:hover:not(:disabled) {
1085
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--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);
1086
+ }[data-mode="dark"][data-style="material"] [data-fab-item]:hover:not(:disabled),[data-mode="dark"] [data-style="material"] [data-fab-item]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1087
+
1088
+ [data-style='material'] [data-fab-item]:focus-visible {
1089
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1090
+ }[data-mode="dark"][data-style="material"] [data-fab-item]:focus-visible,[data-mode="dark"] [data-style="material"] [data-fab-item]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1091
+
1092
+ /* Item icon */
1093
+ [data-style='material'] [data-fab-item] [data-fab-item-icon] {
1094
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1095
+ }[data-mode="dark"][data-style="material"] [data-fab-item] [data-fab-item-icon],[data-mode="dark"] [data-style="material"] [data-fab-item] [data-fab-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1096
+
1097
+ [data-style='material'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
1098
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1099
+ }[data-mode="dark"][data-style="material"] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon],[data-mode="dark"] [data-style="material"] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1100
+
1101
+ /* =============================================================================
1102
+ Backdrop
1103
+ ============================================================================= */
1104
+
1105
+ [data-style='material'] [data-fab-backdrop] {
1106
+ background: rgba(0, 0, 0, 0.5);
1107
+ }
1108
+
1109
+ /**
1110
+ * Table - Material Theme Styles
1111
+ *
1112
+ * Material Design inspired with elevation and shadows.
1113
+ */
1114
+
1115
+ /* =============================================================================
1116
+ Header
1117
+ ============================================================================= */
1118
+
1119
+ [data-style='material'] [data-table-header] th {
1120
+ border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));font-weight:500;
1121
+ }[data-mode="dark"][data-style="material"] [data-table-header] th,[data-mode="dark"] [data-style="material"] [data-table-header] th{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1122
+
1123
+ [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
1124
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1125
+ }[data-mode="dark"][data-style="material"] [data-table-header-cell][data-sortable="true"]:hover,[data-mode="dark"] [data-style="material"] [data-table-header-cell][data-sortable="true"]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1126
+
1127
+ [data-style='material'] [data-table-header-cell][data-sort-order='ascending'],
1128
+ [data-style='material'] [data-table-header-cell][data-sort-order='descending'] {
1129
+ --un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
1130
+ }[data-mode="dark"][data-style="material"] [data-table-header-cell][data-sort-order="ascending"],[data-mode="dark"] [data-style="material"] [data-table-header-cell][data-sort-order="ascending"],[data-mode="dark"][data-style="material"] [data-table-header-cell][data-sort-order="descending"],[data-mode="dark"] [data-style="material"] [data-table-header-cell][data-sort-order="descending"]{--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
1131
+
1132
+ [data-style='material'] [data-table-sort-icon] {
1133
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1134
+ }[data-mode="dark"][data-style="material"] [data-table-sort-icon],[data-mode="dark"] [data-style="material"] [data-table-sort-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1135
+
1136
+ [data-style='material']
1137
+ [data-table-header-cell][data-sort-order='ascending']
1138
+ [data-table-sort-icon],
1139
+ [data-style='material']
1140
+ [data-table-header-cell][data-sort-order='descending']
1141
+ [data-table-sort-icon] {
1142
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1143
+ }[data-mode="dark"][data-style="material"] [data-table-header-cell][data-sort-order="ascending"] [data-table-sort-icon],[data-mode="dark"] [data-style="material"] [data-table-header-cell][data-sort-order="ascending"] [data-table-sort-icon],[data-mode="dark"][data-style="material"] [data-table-header-cell][data-sort-order="descending"] [data-table-sort-icon],[data-mode="dark"] [data-style="material"] [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));}
1144
+
1145
+ /* =============================================================================
1146
+ Caption
1147
+ ============================================================================= */
1148
+
1149
+ [data-style='material'] [data-table-caption] {
1150
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1151
+ }[data-mode="dark"][data-style="material"] [data-table-caption],[data-mode="dark"] [data-style="material"] [data-table-caption]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1152
+
1153
+ /* =============================================================================
1154
+ Rows
1155
+ ============================================================================= */
1156
+
1157
+ [data-style='material'] [data-table-row] {
1158
+ border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1159
+ }[data-mode="dark"][data-style="material"] [data-table-row],[data-mode="dark"] [data-style="material"] [data-table-row]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1160
+
1161
+ [data-style='material'] [data-table-row]:hover {
1162
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
1163
+ }[data-mode="dark"][data-style="material"] [data-table-row]:hover,[data-mode="dark"] [data-style="material"] [data-table-row]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
1164
+
1165
+ [data-style='material'] [data-table-row]:focus {
1166
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));--un-ring-inset:inset;
1167
+ }[data-mode="dark"][data-style="material"] [data-table-row]:focus,[data-mode="dark"] [data-style="material"] [data-table-row]:focus{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1168
+
1169
+ [data-style='material'] [data-table-row][data-selected='true'] {
1170
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1171
+ }[data-mode="dark"][data-style="material"] [data-table-row][data-selected="true"],[data-mode="dark"] [data-style="material"] [data-table-row][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1172
+
1173
+ /* =============================================================================
1174
+ Striped
1175
+ ============================================================================= */
1176
+
1177
+ [data-style='material'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
1178
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
1179
+ }[data-mode="dark"][data-style="material"] [data-striped="true"] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="material"] [data-striped="true"] [data-table-body] tr:nth-child(even){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
1180
+
1181
+ /* =============================================================================
1182
+ Empty
1183
+ ============================================================================= */
1184
+
1185
+ [data-style='material'] [data-table-empty] {
1186
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1187
+ }[data-mode="dark"][data-style="material"] [data-table-empty],[data-mode="dark"] [data-style="material"] [data-table-empty]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1188
+
1189
+ /* =============================================================================
1190
+ Cell Icon
1191
+ ============================================================================= */
1192
+
1193
+ [data-style='material'] [data-table-cell] [data-cell-icon] {
1194
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1195
+ }[data-mode="dark"][data-style="material"] [data-table-cell] [data-cell-icon],[data-mode="dark"] [data-style="material"] [data-table-cell] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1196
+
1197
+ [data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
1198
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1199
+ }[data-mode="dark"][data-style="material"] [data-table-row][data-selected="true"] [data-cell-icon],[data-mode="dark"] [data-style="material"] [data-table-row][data-selected="true"] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1200
+
1201
+ /**
1202
+ * SearchFilter - Material Theme Styles
1203
+ *
1204
+ * Material Design inspired with elevation and shadows.
1205
+ */
1206
+
1207
+ /* =============================================================================
1208
+ Input
1209
+ ============================================================================= */
1210
+
1211
+ [data-style='material'] [data-search-input] {
1212
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
1213
+ }[data-mode="dark"][data-style="material"] [data-search-input],[data-mode="dark"] [data-style="material"] [data-search-input]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1214
+
1215
+ [data-style='material'] [data-search-input]:focus {
1216
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1217
+ }[data-mode="dark"][data-style="material"] [data-search-input]:focus,[data-mode="dark"] [data-style="material"] [data-search-input]:focus{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1218
+
1219
+ [data-style='material'] [data-search-input]::placeholder {
1220
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1221
+ }[data-mode="dark"][data-style="material"] [data-search-input]::placeholder,[data-mode="dark"] [data-style="material"] [data-search-input]::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1222
+
1223
+ /* =============================================================================
1224
+ Clear Button
1225
+ ============================================================================= */
1226
+
1227
+ [data-style='material'] [data-search-clear] {
1228
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1229
+ }[data-mode="dark"][data-style="material"] [data-search-clear],[data-mode="dark"] [data-style="material"] [data-search-clear]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1230
+
1231
+ [data-style='material'] [data-search-clear]:hover {
1232
+ border-radius:0.25rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1233
+ }[data-mode="dark"][data-style="material"] [data-search-clear]:hover,[data-mode="dark"] [data-style="material"] [data-search-clear]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1234
+
1235
+ /* =============================================================================
1236
+ Tags
1237
+ ============================================================================= */
1238
+
1239
+ [data-style='material'] [data-search-tag] {
1240
+ border-radius:9999px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),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);
1241
+ }[data-mode="dark"][data-style="material"] [data-search-tag],[data-mode="dark"] [data-style="material"] [data-search-tag]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1242
+
1243
+ [data-style='material'] [data-search-tag-remove] {
1244
+ border-radius:9999px;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1245
+ }[data-mode="dark"][data-style="material"] [data-search-tag-remove],[data-mode="dark"] [data-style="material"] [data-search-tag-remove]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1246
+
1247
+ [data-style='material'] [data-search-tag-remove]:hover {
1248
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1249
+ }[data-mode="dark"][data-style="material"] [data-search-tag-remove]:hover,[data-mode="dark"] [data-style="material"] [data-search-tag-remove]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1250
+
1251
+ /**
1252
+ * Range - Material Theme Styles
1253
+ *
1254
+ * Flat design with subtle elevation.
1255
+ */
1256
+
1257
+ /* =============================================================================
1258
+ Track
1259
+ ============================================================================= */
1260
+
1261
+ [data-style='material'] [data-range-bar] {
1262
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
1263
+ }[data-mode="dark"][data-style="material"] [data-range-bar],[data-mode="dark"] [data-style="material"] [data-range-bar]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
1264
+
1265
+ [data-style='material'] [data-range-selected] {
1266
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-opacity));
1267
+ }
1268
+
1269
+ /* =============================================================================
1270
+ Thumb
1271
+ ============================================================================= */
1272
+
1273
+ [data-style='material'] [data-range-thumb] {
1274
+ --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-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);
1275
+ }
1276
+
1277
+ [data-style='material'] [data-range-thumb][data-sliding] {
1278
+ --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);
1279
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
1280
+ }
1281
+
1282
+ [data-style='material'] [data-range-thumb]:focus-visible {
1283
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
1284
+ }
1285
+
1286
+ /* =============================================================================
1287
+ Ticks
1288
+ ============================================================================= */
1289
+
1290
+ [data-style='material'] [data-range-tick] {
1291
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1292
+ }[data-mode="dark"][data-style="material"] [data-range-tick],[data-mode="dark"] [data-style="material"] [data-range-tick]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1293
+
1294
+ [data-style='material'] [data-tick-bar] {
1295
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));
1296
+ }[data-mode="dark"][data-style="material"] [data-tick-bar],[data-mode="dark"] [data-style="material"] [data-tick-bar]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));}
1297
+
1298
+ [data-style='material'] [data-tick-label] {
1299
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1300
+ }[data-mode="dark"][data-style="material"] [data-tick-label],[data-mode="dark"] [data-style="material"] [data-tick-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1301
+
1302
+ /* =============================================================================
1303
+ Disabled
1304
+ ============================================================================= */
1305
+
1306
+ [data-style='material'] [data-range][data-disabled] [data-range-thumb] {
1307
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-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);
1308
+ }[data-mode="dark"][data-style="material"] [data-range][data-disabled] [data-range-thumb],[data-mode="dark"] [data-style="material"] [data-range][data-disabled] [data-range-thumb]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
1309
+
1310
+ [data-style='material'] [data-range][data-disabled] [data-range-selected] {
1311
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
1312
+ }[data-mode="dark"][data-style="material"] [data-range][data-disabled] [data-range-selected],[data-mode="dark"] [data-style="material"] [data-range][data-disabled] [data-range-selected]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
1313
+
1314
+ /**
1315
+ * Timeline - Material Theme Styles
1316
+ *
1317
+ * Flat design with subtle elevation.
1318
+ */
1319
+
1320
+ /* =============================================================================
1321
+ Circle
1322
+ ============================================================================= */
1323
+
1324
+ [data-style='material'] [data-timeline-circle] {
1325
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1326
+ }[data-mode="dark"][data-style="material"] [data-timeline-circle],[data-mode="dark"] [data-style="material"] [data-timeline-circle]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1327
+
1328
+ [data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
1329
+ --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-opacity));--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);
1330
+ }
1331
+
1332
+ [data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
1333
+ --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary),var(--un-text-opacity));
1334
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
1335
+ }
1336
+
1337
+ /* =============================================================================
1338
+ Connector
1339
+ ============================================================================= */
1340
+
1341
+ [data-style='material'] [data-timeline-connector] {
1342
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
1343
+ }[data-mode="dark"][data-style="material"] [data-timeline-connector],[data-mode="dark"] [data-style="material"] [data-timeline-connector]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
1344
+
1345
+ [data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
1346
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-opacity));
1347
+ }
1348
+
1349
+ /* =============================================================================
1350
+ Body
1351
+ ============================================================================= */
1352
+
1353
+ [data-style='material'] [data-timeline-title] {
1354
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1355
+ }[data-mode="dark"][data-style="material"] [data-timeline-title],[data-mode="dark"] [data-style="material"] [data-timeline-title]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1356
+
1357
+ [data-style='material'] [data-timeline-description] {
1358
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1359
+ }[data-mode="dark"][data-style="material"] [data-timeline-description],[data-mode="dark"] [data-style="material"] [data-timeline-description]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1360
+
1361
+ /**
1362
+ * FloatingNavigation - Material Theme Styles
1363
+ *
1364
+ * Material Design inspired with elevation and shadows.
1365
+ */
1366
+
1367
+ /* =============================================================================
1368
+ Container
1369
+ ============================================================================= */
1370
+
1371
+ [data-style='material'] [data-floating-nav] {
1372
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--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);
1373
+ }[data-mode="dark"][data-style="material"] [data-floating-nav],[data-mode="dark"] [data-style="material"] [data-floating-nav]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
1374
+
1375
+ /* =============================================================================
1376
+ Header
1377
+ ============================================================================= */
1378
+
1379
+ [data-style='material'] [data-floating-nav-title] {
1380
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1381
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-title],[data-mode="dark"] [data-style="material"] [data-floating-nav-title]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1382
+
1383
+ [data-style='material'] [data-floating-nav-pin] {
1384
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1385
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-pin],[data-mode="dark"] [data-style="material"] [data-floating-nav-pin]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1386
+
1387
+ [data-style='material'] [data-floating-nav-pin]:hover {
1388
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1389
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-pin]:hover,[data-mode="dark"] [data-style="material"] [data-floating-nav-pin]:hover{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1390
+
1391
+ [data-style='material'] [data-floating-nav-pin][aria-pressed='true'] {
1392
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1393
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-pin][aria-pressed="true"],[data-mode="dark"] [data-style="material"] [data-floating-nav-pin][aria-pressed="true"]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1394
+
1395
+ /* =============================================================================
1396
+ Items
1397
+ ============================================================================= */
1398
+
1399
+ [data-style='material'] [data-floating-nav-item] {
1400
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1401
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-item],[data-mode="dark"] [data-style="material"] [data-floating-nav-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1402
+
1403
+ [data-style='material'] [data-floating-nav-item]:hover {
1404
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1405
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-item]:hover,[data-mode="dark"] [data-style="material"] [data-floating-nav-item]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1406
+
1407
+ [data-style='material'] [data-floating-nav-item][data-active] {
1408
+ background-color:rgba(var(--color-primary-500),0.1);--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1409
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-item][data-active],[data-mode="dark"] [data-style="material"] [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));}
1410
+
1411
+ [data-style='material'] [data-floating-nav-item]:focus-visible {
1412
+ 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-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1413
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-item]:focus-visible,[data-mode="dark"] [data-style="material"] [data-floating-nav-item]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1414
+
1415
+ /* Icon */
1416
+ [data-style='material'] [data-floating-nav-icon] {
1417
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1418
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-icon],[data-mode="dark"] [data-style="material"] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1419
+
1420
+ [data-style='material'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
1421
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1422
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-item]:hover [data-floating-nav-icon],[data-mode="dark"] [data-style="material"] [data-floating-nav-item]:hover [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1423
+
1424
+ [data-style='material'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
1425
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1426
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-item][data-active] [data-floating-nav-icon],[data-mode="dark"] [data-style="material"] [data-floating-nav-item][data-active] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1427
+
1428
+ /* =============================================================================
1429
+ Active Indicator
1430
+ ============================================================================= */
1431
+
1432
+ [data-style='material'] [data-floating-nav-indicator] {
1433
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-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);
1434
+ }[data-mode="dark"][data-style="material"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="material"] [data-floating-nav-indicator]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
1435
+