frutjam 2.3.0-beta.1 → 2.3.0

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 (273) hide show
  1. package/LICENSE +1 -1
  2. package/README.github.md +382 -0
  3. package/README.md +90 -42
  4. package/README.npm.md +124 -0
  5. package/dist/base/reboot/index.js +5 -0
  6. package/dist/base/reboot/object.js +1 -0
  7. package/dist/base/tokens/index.js +5 -0
  8. package/dist/base/tokens/object.js +1 -0
  9. package/dist/base.css +62 -0
  10. package/dist/base.css.d.ts +1 -0
  11. package/dist/components/accordion/index.js +7 -0
  12. package/dist/components/accordion/object.js +1 -0
  13. package/dist/components/accordion.css +2 -0
  14. package/dist/components/accordion.css.d.ts +1 -0
  15. package/dist/components/alert/index.js +7 -0
  16. package/dist/components/alert/object.js +1 -0
  17. package/dist/components/alert.css +2 -0
  18. package/dist/components/alert.css.d.ts +1 -0
  19. package/dist/components/avatar/index.js +7 -0
  20. package/dist/components/avatar/object.js +1 -0
  21. package/dist/components/avatar.css +2 -0
  22. package/dist/components/avatar.css.d.ts +1 -0
  23. package/dist/components/badge/index.js +7 -0
  24. package/dist/components/badge/object.js +1 -0
  25. package/dist/components/badge.css +2 -0
  26. package/dist/components/badge.css.d.ts +1 -0
  27. package/dist/components/breadcrumb/index.js +7 -0
  28. package/dist/components/breadcrumb/object.js +1 -0
  29. package/dist/components/breadcrumb.css +2 -0
  30. package/dist/components/breadcrumb.css.d.ts +1 -0
  31. package/dist/components/button/index.js +7 -0
  32. package/dist/components/button/object.js +1 -0
  33. package/dist/components/button.css +2 -0
  34. package/dist/components/button.css.d.ts +1 -0
  35. package/dist/components/card/index.js +7 -0
  36. package/dist/components/card/object.js +1 -0
  37. package/dist/components/card.css +2 -0
  38. package/dist/components/card.css.d.ts +1 -0
  39. package/dist/components/carousel/index.js +7 -0
  40. package/dist/components/carousel/object.js +1 -0
  41. package/dist/components/carousel.css +2 -0
  42. package/dist/components/carousel.css.d.ts +1 -0
  43. package/dist/components/chat/index.js +7 -0
  44. package/dist/components/chat/object.js +1 -0
  45. package/dist/components/chat.css +2 -0
  46. package/dist/components/chat.css.d.ts +1 -0
  47. package/dist/components/checkbox/index.js +7 -0
  48. package/dist/components/checkbox/object.js +1 -0
  49. package/dist/components/checkbox.css +2 -0
  50. package/dist/components/checkbox.css.d.ts +1 -0
  51. package/dist/components/collapsible/index.js +7 -0
  52. package/dist/components/collapsible/object.js +1 -0
  53. package/dist/components/collapsible.css +2 -0
  54. package/dist/components/collapsible.css.d.ts +1 -0
  55. package/dist/components/combobox/index.js +7 -0
  56. package/dist/components/combobox/object.js +1 -0
  57. package/dist/components/combobox.css +2 -0
  58. package/dist/components/combobox.css.d.ts +1 -0
  59. package/dist/components/countdown/index.js +7 -0
  60. package/dist/components/countdown/object.js +1 -0
  61. package/dist/components/countdown.css +2 -0
  62. package/dist/components/countdown.css.d.ts +1 -0
  63. package/dist/components/diff/index.js +7 -0
  64. package/dist/components/diff/object.js +1 -0
  65. package/dist/components/diff.css +2 -0
  66. package/dist/components/diff.css.d.ts +1 -0
  67. package/dist/components/divider/index.js +7 -0
  68. package/dist/components/divider/object.js +1 -0
  69. package/dist/components/divider.css +2 -0
  70. package/dist/components/divider.css.d.ts +1 -0
  71. package/dist/components/drawer/index.js +7 -0
  72. package/dist/components/drawer/object.js +1 -0
  73. package/dist/components/drawer.css +2 -0
  74. package/dist/components/drawer.css.d.ts +1 -0
  75. package/dist/components/footer/index.js +7 -0
  76. package/dist/components/footer/object.js +1 -0
  77. package/dist/components/footer.css +2 -0
  78. package/dist/components/footer.css.d.ts +1 -0
  79. package/dist/components/header/index.js +7 -0
  80. package/dist/components/header/object.js +1 -0
  81. package/dist/components/header.css +2 -0
  82. package/dist/components/header.css.d.ts +1 -0
  83. package/dist/components/hero/index.js +7 -0
  84. package/dist/components/hero/object.js +1 -0
  85. package/dist/components/hero.css +2 -0
  86. package/dist/components/hero.css.d.ts +1 -0
  87. package/dist/components/indicator/index.js +7 -0
  88. package/dist/components/indicator/object.js +1 -0
  89. package/dist/components/indicator.css +2 -0
  90. package/dist/components/indicator.css.d.ts +1 -0
  91. package/dist/components/input/index.js +7 -0
  92. package/dist/components/input/object.js +1 -0
  93. package/dist/components/input.css +2 -0
  94. package/dist/components/input.css.d.ts +1 -0
  95. package/dist/components/join/index.js +7 -0
  96. package/dist/components/join/object.js +1 -0
  97. package/dist/components/join.css +2 -0
  98. package/dist/components/join.css.d.ts +1 -0
  99. package/dist/components/kbd/index.js +7 -0
  100. package/dist/components/kbd/object.js +1 -0
  101. package/dist/components/kbd.css +2 -0
  102. package/dist/components/kbd.css.d.ts +1 -0
  103. package/dist/components/link/index.js +7 -0
  104. package/dist/components/link/object.js +1 -0
  105. package/dist/components/link.css +2 -0
  106. package/dist/components/link.css.d.ts +1 -0
  107. package/dist/components/loading/index.js +7 -0
  108. package/dist/components/loading/object.js +1 -0
  109. package/dist/components/loading.css +2 -0
  110. package/dist/components/loading.css.d.ts +1 -0
  111. package/dist/components/marquee/index.js +7 -0
  112. package/dist/components/marquee/object.js +1 -0
  113. package/dist/components/marquee.css +2 -0
  114. package/dist/components/marquee.css.d.ts +1 -0
  115. package/dist/components/mask/index.js +7 -0
  116. package/dist/components/mask/object.js +1 -0
  117. package/dist/components/mask.css +2 -0
  118. package/dist/components/mask.css.d.ts +1 -0
  119. package/dist/components/menu/index.js +7 -0
  120. package/dist/components/menu/object.js +1 -0
  121. package/dist/components/menu.css +2 -0
  122. package/dist/components/menu.css.d.ts +1 -0
  123. package/dist/components/modal/index.js +7 -0
  124. package/dist/components/modal/object.js +1 -0
  125. package/dist/components/modal.css +2 -0
  126. package/dist/components/modal.css.d.ts +1 -0
  127. package/dist/components/navbar/index.js +7 -0
  128. package/dist/components/navbar/object.js +1 -0
  129. package/dist/components/navbar.css +2 -0
  130. package/dist/components/navbar.css.d.ts +1 -0
  131. package/dist/components/popover/index.js +7 -0
  132. package/dist/components/popover/object.js +1 -0
  133. package/dist/components/popover.css +2 -0
  134. package/dist/components/popover.css.d.ts +1 -0
  135. package/dist/components/progress/index.js +7 -0
  136. package/dist/components/progress/object.js +1 -0
  137. package/dist/components/progress.css +2 -0
  138. package/dist/components/progress.css.d.ts +1 -0
  139. package/dist/components/radial-progress/index.js +7 -0
  140. package/dist/components/radial-progress/object.js +1 -0
  141. package/dist/components/radial-progress.css +2 -0
  142. package/dist/components/radial-progress.css.d.ts +1 -0
  143. package/dist/components/radio/index.js +7 -0
  144. package/dist/components/radio/object.js +1 -0
  145. package/dist/components/radio.css +2 -0
  146. package/dist/components/radio.css.d.ts +1 -0
  147. package/dist/components/range/index.js +7 -0
  148. package/dist/components/range/object.js +1 -0
  149. package/dist/components/range.css +2 -0
  150. package/dist/components/range.css.d.ts +1 -0
  151. package/dist/components/rating/index.js +7 -0
  152. package/dist/components/rating/object.js +1 -0
  153. package/dist/components/rating.css +2 -0
  154. package/dist/components/rating.css.d.ts +1 -0
  155. package/dist/components/select/index.js +7 -0
  156. package/dist/components/select/object.js +1 -0
  157. package/dist/components/select.css +2 -0
  158. package/dist/components/select.css.d.ts +1 -0
  159. package/dist/components/sidebar/index.js +7 -0
  160. package/dist/components/sidebar/object.js +1 -0
  161. package/dist/components/sidebar.css +2 -0
  162. package/dist/components/sidebar.css.d.ts +1 -0
  163. package/dist/components/skeleton/index.js +7 -0
  164. package/dist/components/skeleton/object.js +1 -0
  165. package/dist/components/skeleton.css +2 -0
  166. package/dist/components/skeleton.css.d.ts +1 -0
  167. package/dist/components/stat/index.js +7 -0
  168. package/dist/components/stat/object.js +1 -0
  169. package/dist/components/stat.css +2 -0
  170. package/dist/components/stat.css.d.ts +1 -0
  171. package/dist/components/status/index.js +7 -0
  172. package/dist/components/status/object.js +1 -0
  173. package/dist/components/status.css +2 -0
  174. package/dist/components/status.css.d.ts +1 -0
  175. package/dist/components/steps/index.js +7 -0
  176. package/dist/components/steps/object.js +1 -0
  177. package/dist/components/steps.css +2 -0
  178. package/dist/components/steps.css.d.ts +1 -0
  179. package/dist/components/surface/index.js +7 -0
  180. package/dist/components/surface/object.js +1 -0
  181. package/dist/components/surface.css +2 -0
  182. package/dist/components/surface.css.d.ts +1 -0
  183. package/dist/components/swap/index.js +7 -0
  184. package/dist/components/swap/object.js +1 -0
  185. package/dist/components/swap.css +2 -0
  186. package/dist/components/swap.css.d.ts +1 -0
  187. package/dist/components/table/index.js +7 -0
  188. package/dist/components/table/object.js +1 -0
  189. package/dist/components/table.css +2 -0
  190. package/dist/components/table.css.d.ts +1 -0
  191. package/dist/components/tabs/index.js +7 -0
  192. package/dist/components/tabs/object.js +1 -0
  193. package/dist/components/tabs.css +2 -0
  194. package/dist/components/tabs.css.d.ts +1 -0
  195. package/dist/components/tag/index.js +7 -0
  196. package/dist/components/tag/object.js +1 -0
  197. package/dist/components/tag.css +2 -0
  198. package/dist/components/tag.css.d.ts +1 -0
  199. package/dist/components/textarea/index.js +7 -0
  200. package/dist/components/textarea/object.js +1 -0
  201. package/dist/components/textarea.css +2 -0
  202. package/dist/components/textarea.css.d.ts +1 -0
  203. package/dist/components/timeline/index.js +7 -0
  204. package/dist/components/timeline/object.js +1 -0
  205. package/dist/components/timeline.css +2 -0
  206. package/dist/components/timeline.css.d.ts +1 -0
  207. package/dist/components/toast/index.js +7 -0
  208. package/dist/components/toast/object.js +1 -0
  209. package/dist/components/toast.css +2 -0
  210. package/dist/components/toast.css.d.ts +1 -0
  211. package/dist/components/toggle/index.js +7 -0
  212. package/dist/components/toggle/object.js +1 -0
  213. package/dist/components/toggle.css +2 -0
  214. package/dist/components/toggle.css.d.ts +1 -0
  215. package/dist/components/tooltip/index.js +7 -0
  216. package/dist/components/tooltip/object.js +1 -0
  217. package/dist/components/tooltip.css +2 -0
  218. package/dist/components/tooltip.css.d.ts +1 -0
  219. package/dist/frutjam.components.css +62 -0
  220. package/dist/frutjam.components.css.d.ts +1 -0
  221. package/dist/frutjam.min.css +65 -3
  222. package/dist/frutjam.min.css.d.ts +1 -0
  223. package/dist/functions/addPrefix.js +14 -0
  224. package/dist/plugin.js +207 -0
  225. package/dist/themes/darkberry/index.js +5 -0
  226. package/dist/themes/darkberry/object.js +1 -0
  227. package/dist/themes/darkberry.css +2 -0
  228. package/dist/themes/darkberry.css.d.ts +1 -0
  229. package/dist/themes/snowberry/index.js +5 -0
  230. package/dist/themes/snowberry/object.js +1 -0
  231. package/dist/themes/snowberry.css +2 -0
  232. package/dist/themes/snowberry.css.d.ts +1 -0
  233. package/dist/unocss/map.js +5 -0
  234. package/dist/utilities/headings/index.js +7 -0
  235. package/dist/utilities/headings/object.js +1 -0
  236. package/dist/utilities/headings.css +2 -0
  237. package/dist/utilities/headings.css.d.ts +1 -0
  238. package/dist/utilities/para/index.js +7 -0
  239. package/dist/utilities/para/object.js +1 -0
  240. package/dist/utilities/para.css +2 -0
  241. package/dist/utilities/para.css.d.ts +1 -0
  242. package/dist/utilities/typography/index.js +7 -0
  243. package/dist/utilities/typography/object.js +1 -0
  244. package/dist/utilities/typography.css +2 -0
  245. package/dist/utilities/typography.css.d.ts +1 -0
  246. package/dist/utilities/wrapper/index.js +7 -0
  247. package/dist/utilities/wrapper/object.js +1 -0
  248. package/dist/utilities/wrapper.css +2 -0
  249. package/dist/utilities/wrapper.css.d.ts +1 -0
  250. package/index.js +332 -0
  251. package/package.json +90 -43
  252. package/packages/js/carousel.js +20 -0
  253. package/packages/js/collapsible.js +14 -0
  254. package/packages/js/combobox.js +101 -0
  255. package/packages/js/drawer.js +1 -0
  256. package/packages/js/index.js +8 -0
  257. package/packages/js/modal.js +8 -0
  258. package/packages/js/tabs.js +89 -0
  259. package/packages/js/toast.js +27 -0
  260. package/packages/js/tooltip.js +8 -0
  261. package/packages/react/index.js +8 -0
  262. package/packages/react/useCarousel.js +23 -0
  263. package/packages/react/useCollapsible.js +20 -0
  264. package/packages/react/useCombobox.js +81 -0
  265. package/packages/react/useDrawer.js +1 -0
  266. package/packages/react/useModal.js +12 -0
  267. package/packages/react/useTabs.js +53 -0
  268. package/packages/react/useToast.js +27 -0
  269. package/packages/react/useTooltip.js +12 -0
  270. package/packages/unocss/index.js +77 -0
  271. package/dist/frutjam.dev.css +0 -2
  272. package/dist/frutjam.min.js +0 -2
  273. package/dist/frutjam.min.js.LICENSE.txt +0 -1
package/dist/themes/darkberry/index.js ADDED
@@ -0,0 +1,5 @@
1
+ import theme from './object.js';
2
+
3
+ export default ({ addBase }) => {
4
+ addBase({ ...theme });
5
+ };
package/dist/themes/darkberry/object.js ADDED
@@ -0,0 +1 @@
1
+ export default {"@layer theme":{":is([data-theme=\"darkberry\"], [data-theme=\"dark\"])":{"--scheme-color":"dark","--border-radius":"0.25rem","--color-base":"oklch(10.889% 0.00301 17.398)","--color-on-base":"oklch(98% 0.01 270)","--color-neutral":"oklch(85% 0 0)","--color-on-neutral":"oklch(20% 0 0)","--color-primary":"oklch(66.385% 0.18368 285.592)","--color-on-primary":"oklch(10% 0.01 270)","--color-secondary":"oklch(65% 0.18 220)","--color-on-secondary":"oklch(10% 0.01 220)","--color-accent":"oklch(75% 0.18 50)","--color-on-accent":"oklch(10% 0.01 50)","--color-info":"oklch(91.67% .077 205.04)","--color-on-info":"oklch(10% 0.01 250)","--color-success":"oklch(65% 0.18 140)","--color-on-success":"oklch(10% 0.01 140)","--color-warning":"oklch(75% 0.20 85)","--color-on-warning":"oklch(10% 0.01 85)","--color-error":"oklch(60% 0.22 30)","--color-on-error":"oklch(10% 0.01 30)"}}};
package/dist/themes/darkberry.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! frutjam v2.3.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
2
+ @layer theme{:is([data-theme=darkberry],[data-theme=dark]){--scheme-color:dark;--border-radius:0.25rem;--color-base:oklch(10.889% 0.00301 17.398);--color-on-base:oklch(98% 0.01 270);--color-neutral:oklch(85% 0 0);--color-on-neutral:oklch(20% 0 0);--color-primary:oklch(66.385% 0.18368 285.592);--color-on-primary:oklch(10% 0.01 270);--color-secondary:oklch(65% 0.18 220);--color-on-secondary:oklch(10% 0.01 220);--color-accent:oklch(75% 0.18 50);--color-on-accent:oklch(10% 0.01 50);--color-info:oklch(91.67% .077 205.04);--color-on-info:oklch(10% 0.01 250);--color-success:oklch(65% 0.18 140);--color-on-success:oklch(10% 0.01 140);--color-warning:oklch(75% 0.20 85);--color-on-warning:oklch(10% 0.01 85);--color-error:oklch(60% 0.22 30);--color-on-error:oklch(10% 0.01 30)}}
package/dist/themes/darkberry.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/themes/snowberry/index.js ADDED
@@ -0,0 +1,5 @@
1
+ import theme from './object.js';
2
+
3
+ export default ({ addBase }) => {
4
+ addBase({ ...theme });
5
+ };
package/dist/themes/snowberry/object.js ADDED
@@ -0,0 +1 @@
1
+ export default {"@layer theme":{":root:not([data-theme]), :is([data-theme=\"snowberry\"], [data-theme=\"light\"])":{"--scheme-color":"light","--border-radius":"0.25rem","--color-base":"oklch(1 0 0)","--color-on-base":"oklch(0.22 0 0)","--color-neutral":"oklch(0.15 0 0)","--color-on-neutral":"oklch(1 0 0)","--color-primary":"oklch(51.1% 0.262 276.966)","--color-on-primary":"oklch(96.2% 0.018 272.314)","--color-secondary":"oklch(0.591 0.293 322.896)","--color-on-secondary":"oklch(1 0 0)","--color-accent":"oklch(0.541 0.281 293.009)","--color-on-accent":"oklch(1 0 0)","--color-info":"oklch(0.685 0.169 237.323)","--color-on-info":"oklch(0.15 0 0)","--color-success":"oklch(0.792 0.209 151.711)","--color-on-success":"oklch(0.15 0 0)","--color-warning":"oklch(0.852 0.199 91.936)","--color-on-warning":"oklch(0.15 0 0)","--color-error":"oklch(0.577 0.245 27.325)","--color-on-error":"oklch(1 0 0)"}}};
package/dist/themes/snowberry.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! frutjam v2.3.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
2
+ @layer theme{:is([data-theme=snowberry],[data-theme=light]),:root:not([data-theme]){--scheme-color:light;--border-radius:0.25rem;--color-base:oklch(1 0 0);--color-on-base:oklch(0.22 0 0);--color-neutral:oklch(0.15 0 0);--color-on-neutral:oklch(1 0 0);--color-primary:oklch(51.1% 0.262 276.966);--color-on-primary:oklch(96.2% 0.018 272.314);--color-secondary:oklch(0.591 0.293 322.896);--color-on-secondary:oklch(1 0 0);--color-accent:oklch(0.541 0.281 293.009);--color-on-accent:oklch(1 0 0);--color-info:oklch(0.685 0.169 237.323);--color-on-info:oklch(0.15 0 0);--color-success:oklch(0.792 0.209 151.711);--color-on-success:oklch(0.15 0 0);--color-warning:oklch(0.852 0.199 91.936);--color-on-warning:oklch(0.15 0 0);--color-error:oklch(0.577 0.245 27.325);--color-on-error:oklch(1 0 0)}}
package/dist/themes/snowberry.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/unocss/map.js ADDED
@@ -0,0 +1,5 @@
1
+ /*! frutjam v2.3.0 (c) 2026 Nezanuha | MIT | https://frutjam.com */
2
+ export const rules = {"accordion":"--radius-accordion: calc(var(--border-radius) * 2); --color-accordion-soft: var(--color-base-soft); --color-accordion-active: var(--color-base-active); display: block; width: 100%; padding-inline: var(--accordion-flush--padding-inline, 1rem); border-width: var(--accordion-flush--border-width, 1px); border-style: solid; border-color: var(--color-accordion-soft); border-radius: var(--radius-accordion); & > details { box-sizing: border-box; position: relative; width: 100%; &:not(:last-child) { border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--color-accordion-soft) } text-wrap: pretty; & > summary::marker { content: none } & > summary { display: flex; gap: 0.5rem; align-items: center; justify-content: start; padding-block: 1rem; padding-inline-end: 1.5rem; font-weight: 500; color: currentColor; cursor: pointer; &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px } &::after { content: \"\"; border-block-end: 1px solid; border-inline-end: 1px solid; width: 0.425rem; height: 0.425rem; position: absolute; inset-inline-end: 0.5rem; margin-block-start: 0.313rem; transform: translateY(-50%) rotate(45deg) } } } & > details[open] { & > summary { &::after { content: \"\"; transform: rotate(225deg); transform-origin: center; transition: transform 300ms } } }","accordion-content":"padding-block-end: 1rem; font-size: var(--text-base)","accordion-flush":"--accordion-flush--border-width: 0; --accordion-flush--padding-inline: 0; &>details:first-child { >summary { padding-block-start: 0 } } &>details>summary { font-weight: normal }","alert":"--radius-alert: calc(var(--border-radius) * 2); --color-alert: var(--color-base-soft); --color-on-alert: var(--color-on-base); --color-alert-active: var(--color-base-active); --color-alert-soft: var(--color-base-soft); --color-on-alert-soft: var(--color-on-base); --alert-variant-text: var(--color-on-base); background-color: var(--color-alert); color: var(--color-on-alert); padding-inline: var(--alert--padding-inline, 0.75rem); padding-block: var(--alert--padding-block, 0.375rem); font-size: var(--alert--font-size, 0.875rem); line-height: calc(var(--alert--font-size, 0.875rem) * var(--alert--line-height, 1.5)); outline-width: var(--alert--outline-width); outline-style: var(--alert--outline-style); outline-color: var(--alert--outline-color); display: grid; gap: 1rem; border-radius: var(--alert--radius, var(--radius-alert)); justify-content: start; justify-items: start; align-items: center; grid-auto-flow: column; grid-template-columns: auto; vertical-align: middle; text-align: start; width: var(--alert--width, fit-content); height: var(--alert--height); &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } :where(&) :where(p, li) { color: inherit }","alert-accent":"--color-alert: var(--color-accent); --color-alert-active: var(--color-accent-active); --color-on-alert: var(--color-on-accent); --color-alert-soft: var(--color-accent-soft); --color-on-alert-soft: light-dark(var(--color-accent-800), var(--color-accent-400)); --alert-variant-text: light-dark(var(--color-accent-800), var(--color-accent-400))","alert-dashed":"background-color: transparent; color: var(--alert-variant-text); outline-color: var(--color-alert); outline-style: dashed; outline-width: 1px","alert-error":"--color-alert: var(--color-error); --color-alert-active: var(--color-error-active); --color-on-alert: var(--color-on-error); --color-alert-soft: var(--color-error-soft); --color-on-alert-soft: light-dark(var(--color-error-800), var(--color-error-400)); --alert-variant-text: light-dark(var(--color-error-800), var(--color-error-400))","alert-ghost":"background-color: transparent; color: var(--alert-variant-text)","alert-horizontal":"justify-content: start; justify-items: start; grid-auto-flow: column; grid-template-columns: auto; text-align: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) }","alert-info":"--color-alert: var(--color-info); --color-alert-active: var(--color-info-active); --color-on-alert: var(--color-on-info); --color-alert-soft: var(--color-info-soft); --color-on-alert-soft: light-dark(var(--color-info-800), var(--color-info-400)); --alert-variant-text: light-dark(var(--color-info-800), var(--color-info-400))","alert-lg":"--alert--padding-inline: 1rem; --alert--padding-block: 0.5rem; --alert--font-size: 1rem","alert-md":"--alert--padding-inline: 0.75rem; --alert--padding-block: 0.375rem; --alert--font-size: 0.875rem","alert-neutral":"--color-alert: var(--color-neutral); --color-alert-active: var(--color-neutral-active); --color-on-alert: var(--color-on-neutral); --color-alert-soft: var(--color-neutral-soft); --color-on-alert-soft: light-dark(var(--color-neutral-800), var(--color-neutral-400)); --alert-variant-text: light-dark(var(--color-neutral-800), var(--color-neutral-400))","alert-outline":"background-color: transparent; color: var(--alert-variant-text); outline-color: var(--color-alert); outline-style: solid; outline-width: 1px","alert-pill":"--alert--radius: 9999px","alert-primary":"--color-alert: var(--color-primary); --color-alert-active: var(--color-primary-active); --color-on-alert: var(--color-on-primary); --color-alert-soft: var(--color-primary-soft); --color-on-alert-soft: light-dark(var(--color-primary-800), var(--color-primary)); --alert-variant-text: light-dark(var(--color-primary-800), var(--color-primary-400))","alert-rounded":"--alert--radius: calc(infinity * 1px)","alert-secondary":"--color-alert: var(--color-secondary); --color-alert-active: var(--color-secondary-active); --color-on-alert: var(--color-on-secondary); --color-alert-soft: var(--color-secondary-soft); --color-on-alert-soft: light-dark(var(--color-secondary-800), var(--color-secondary-400)); --alert-variant-text: light-dark(var(--color-secondary-800), var(--color-secondary-400))","alert-sm":"--alert--padding-inline: 0.625rem; --alert--padding-block: 0.3125rem; --alert--font-size: 0.8125rem","alert-soft":"background-color: var(--color-alert-soft); color: var(--color-on-alert-soft)","alert-success":"--color-alert: var(--color-success); --color-alert-active: var(--color-success-active); --color-on-alert: var(--color-on-success); --color-alert-soft: var(--color-success-soft); --color-on-alert-soft: light-dark(var(--color-success-800), var(--color-success-400)); --alert-variant-text: light-dark(var(--color-success-800), var(--color-success-400))","alert-vertical":"justify-content: center; justify-items: center; grid-auto-flow: row; grid-template-columns: auto; text-align: center; &:has(:nth-child(2)) { grid-template-columns: auto }","alert-warning":"--color-alert: var(--color-warning); --color-alert-active: var(--color-warning-active); --color-on-alert: var(--color-on-warning); --color-alert-soft: var(--color-warning-soft); --color-on-alert-soft: light-dark(var(--color-warning-800), var(--color-warning-400)); --alert-variant-text: light-dark(var(--color-warning-800), var(--color-warning-400))","alert-xs":"--alert--padding-inline: 0.5rem; --alert--padding-block: 0.25rem; --alert--font-size: 0.75rem","avatar":"--avatar-size: 2.5rem; --avatar-radius: 9999px; --avatar-bg: var(--color-base-soft); --avatar-color: var(--color-on-base); --avatar-font-size: calc(var(--avatar-size) * 0.4); --avatar-status-size: calc(var(--avatar-size) * 0.28); --avatar-status-offset: 0px; --avatar-ring-width: 0px; --avatar-ring-color: var(--color-primary); --avatar-ring-offset: 2px; --avatar-status-color: transparent; --avatar-status-visible: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--avatar-radius); background-color: var(--avatar-bg); color: var(--avatar-color); font-size: var(--avatar-font-size); font-weight: 600; flex-shrink: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: var(--avatar-ring-width) solid var(--avatar-ring-color); outline-offset: var(--avatar-ring-offset); :where(&) :where(img) { width: 100%; height: 100%; oobject-fit: cover; object-fit: cover; border-radius: inherit; overflow: hidden } &::before { content: \"\"; position: absolute; bottom: var(--avatar-status-offset); right: var(--avatar-status-offset); width: var(--avatar-status-size); height: var(--avatar-status-size); border-radius: 9999px; border: 2px solid var(--color-base); background-color: var(--avatar-status-color); z-index: 1; display: var(--avatar-status-visible) }","avatar-2xl":"--avatar-size: 7rem; --avatar-status-offset: 3px","avatar-accent":"--avatar-bg: var(--color-accent); --avatar-color: var(--color-on-accent)","avatar-away":"--avatar-status-color: var(--color-warning); --avatar-status-visible: block","avatar-busy":"--avatar-status-color: var(--color-error); --avatar-status-visible: block","avatar-circle":"--avatar-radius: 9999px","avatar-error":"--avatar-bg: var(--color-error); --avatar-color: var(--color-on-error)","avatar-group":"display: inline-flex; flex-direction: row; :where(&) :where(.avatar) { border: 2px solid var(--color-base); margin-inline-start: calc(var(--avatar-size) * -0.25); &:first-child { margin-inline-start: 0 } }","avatar-info":"--avatar-bg: var(--color-info); --avatar-color: var(--color-on-info)","avatar-lg":"--avatar-size: 3.5rem; --avatar-status-offset: 1px","avatar-md":"--avatar-size: 2.5rem","avatar-neutral":"--avatar-bg: var(--color-neutral); --avatar-color: var(--color-on-neutral)","avatar-offline":"--avatar-status-color: var(--color-base-400); --avatar-status-visible: block","avatar-online":"--avatar-status-color: var(--color-success); --avatar-status-visible: block","avatar-primary":"--avatar-bg: var(--color-primary); --avatar-color: var(--color-on-primary)","avatar-ring":"--avatar-ring-width: 2px; --avatar-ring-color: var(--avatar-bg)","avatar-ring-accent":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-accent)","avatar-ring-error":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-error)","avatar-ring-info":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-info)","avatar-ring-neutral":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-neutral)","avatar-ring-primary":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-primary)","avatar-ring-secondary":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-secondary)","avatar-ring-success":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-success)","avatar-ring-warning":"--avatar-ring-width: 2px; --avatar-ring-color: var(--color-warning)","avatar-rounded":"--avatar-radius: calc(var(--border-radius) * 3)","avatar-secondary":"--avatar-bg: var(--color-secondary); --avatar-color: var(--color-on-secondary)","avatar-sm":"--avatar-size: 2rem; --avatar-status-offset: -1px","avatar-square":"--avatar-radius: var(--border-radius)","avatar-success":"--avatar-bg: var(--color-success); --avatar-color: var(--color-on-success)","avatar-warning":"--avatar-bg: var(--color-warning); --avatar-color: var(--color-on-warning)","avatar-xl":"--avatar-size: 5rem; --avatar-status-offset: 2px","avatar-xs":"--avatar-size: 1.5rem; --avatar-status-offset: -1px","badge":"--radius-badge: calc(var(--border-radius) * 2); --color-badge: var(--color-base-soft); --color-on-badge: var(--color-on-base); --color-badge-active: var(--color-base-active); --color-badge-soft: var(--color-base-soft); --color-on-badge-soft: var(--color-on-base); --badge-variant-text: var(--color-on-base); background-color: var(--color-badge); color: var(--color-on-badge); padding-inline: var(--badge--padding-inline, 0.75rem); padding-block: var(--badge--padding-block, 0.375rem); font-size: var(--badge--font-size, 0.875rem); line-height: calc(var(--badge--font-size, 0.875rem) * var(--badge--line-height, 1.5)); outline-width: var(--badge--outline-width); outline-style: var(--badge--outline-style); outline-color: var(--badge--outline-color); display: inline-flex; gap: 0.5rem; border-radius: var(--badge--radius, var(--radius-badge)); align-items: center; justify-content: center; vertical-align: middle; text-align: center; text-decoration: none; width: var(--badge--width, fit-content); height: var(--badge--height)","badge-2xl":"--badge--padding-inline: 1.125rem; --badge--padding-block: 0.75rem; --badge--font-size: 1.25rem; --badge--line-height: 1.2; --badge-square--padding-block: 0.75rem; --badge-circle--padding-block: 0.75rem","badge-accent":"--color-badge: var(--color-accent); --color-badge-active: var(--color-accent-active); --color-on-badge: var(--color-on-accent); --color-badge-soft: var(--color-accent-soft); --color-on-badge-soft: light-dark(var(--color-accent-800), var(--color-accent-400)); --badge-variant-text: light-dark(var(--color-accent-800), var(--color-accent-400))","badge-circle":"--badge--padding-inline: var(--badge-circle--padding-block, 0.375rem); --badge--padding-block: var(--badge-circle--padding-block, 0.375rem); --badge--radius: calc(infinity * 1px)","badge-dashed":"background-color: transparent; color: var(--badge-variant-text); outline-color: var(--color-badge); outline-style: dashed; outline-width: 1px","badge-error":"--color-badge: var(--color-error); --color-badge-active: var(--color-error-active); --color-on-badge: var(--color-on-error); --color-badge-soft: var(--color-error-soft); --color-on-badge-soft: light-dark(var(--color-error-800), var(--color-error-400)); --badge-variant-text: light-dark(var(--color-error-800), var(--color-error-400))","badge-ghost":"background-color: transparent; color: var(--badge-variant-text)","badge-info":"--color-badge: var(--color-info); --color-badge-active: var(--color-info-active); --color-on-badge: var(--color-on-info); --color-badge-soft: var(--color-info-soft); --color-on-badge-soft: light-dark(var(--color-info-800), var(--color-info-400)); --badge-variant-text: light-dark(var(--color-info-800), var(--color-info-400))","badge-lg":"--badge--padding-inline: 0.875rem; --badge--padding-block: 0.5rem; --badge--font-size: 1rem; --badge--line-height: 1.2; --badge-square--padding-block: 0.5rem; --badge-circle--padding-block: 0.5rem","badge-md":"--badge--padding-inline: 0.75rem; --badge--padding-block: 0.375rem; --badge--font-size: 0.875rem; --badge--line-height: 1.3; --badge-square--padding-block: 0.375rem; --badge-circle--padding-block: 0.375rem","badge-neutral":"--color-badge: var(--color-neutral); --color-badge-active: var(--color-neutral-active); --color-on-badge: var(--color-on-neutral); --color-badge-soft: var(--color-neutral-soft); --color-on-badge-soft: light-dark(var(--color-neutral-800), var(--color-neutral-400)); --badge-variant-text: light-dark(var(--color-neutral-800), var(--color-neutral-400))","badge-outline":"background-color: transparent; color: var(--badge-variant-text); outline-color: var(--color-badge); outline-style: solid; outline-width: 1px","badge-pill":"--badge--radius: calc(infinity * 1px)","badge-primary":"--color-badge: var(--color-primary); --color-badge-active: var(--color-primary-active); --color-on-badge: var(--color-on-primary); --color-badge-soft: var(--color-primary-soft); --color-on-badge-soft: light-dark(var(--color-primary-800), var(--color-primary)); --badge-variant-text: light-dark(var(--color-primary-800), var(--color-primary-400))","badge-rounded":"--badge--radius: calc(infinity * 1px)","badge-secondary":"--color-badge: var(--color-secondary); --color-badge-active: var(--color-secondary-active); --color-on-badge: var(--color-on-secondary); --color-badge-soft: var(--color-secondary-soft); --color-on-badge-soft: light-dark(var(--color-secondary-800), var(--color-secondary-400)); --badge-variant-text: light-dark(var(--color-secondary-800), var(--color-secondary-400))","badge-sm":"--badge--padding-inline: 0.625rem; --badge--padding-block: 0.25rem; --badge--font-size: 0.75rem; --badge--line-height: 1.3; --badge-square--padding-block: 0.25rem; --badge-circle--padding-block: 0.25rem","badge-soft":"background-color: var(--color-badge-soft); color: var(--color-on-badge-soft)","badge-square":"--badge--padding-inline: var(--badge-square--padding-block, 0.375rem); --badge--padding-block: var(--badge-square--padding-block, 0.375rem); --badge--width: var(--badge-square--padding-block); --badge--height: var(--badge-square--padding-block)","badge-success":"--color-badge: var(--color-success); --color-badge-active: var(--color-success-active); --color-on-badge: var(--color-on-success); --color-badge-soft: var(--color-success-soft); --color-on-badge-soft: light-dark(var(--color-success-800), var(--color-success-400)); --badge-variant-text: light-dark(var(--color-success-800), var(--color-success-400))","badge-warning":"--color-badge: var(--color-warning); --color-badge-active: var(--color-warning-active); --color-on-badge: var(--color-on-warning); --color-badge-soft: var(--color-warning-soft); --color-on-badge-soft: light-dark(var(--color-warning-800), var(--color-warning-400)); --badge-variant-text: light-dark(var(--color-warning-800), var(--color-warning-400))","badge-xl":"--badge--padding-inline: 1rem; --badge--padding-block: 0.625rem; --badge--font-size: 1.125rem; --badge--line-height: 1.2; --badge-square--padding-block: 0.625rem; --badge-circle--padding-block: 0.625rem","badge-xs":"--badge--padding-inline: 0.5rem; --badge--padding-block: 0.125rem; --badge--font-size: 0.625rem; --badge--line-height: 1.3; --badge-square--padding-block: 0.125rem; --badge-circle--padding-block: 0.125rem","breadcrumb":"padding-block: 0.5rem; max-width: 100%; overflow-x: auto; font-size: 0.875rem; color: currentColor","breadcrumb-current":"color: currentColor; display: flex; align-items: center; gap: 0.5rem; line-height: 1.125rem","breadcrumb-item":"display: flex; align-items: center; &::before { content: \"\"; margin-inline-end: 0.75rem; margin-inline-start: 0.5rem; height: 0.375rem; width: 0.375rem; display: block; transform: rotate(45deg); transition: transform 300ms; border-block-start: 1px solid; border-inline-end: 1px solid; background-color: oklch(0 0 0 / 0); color: var(--color-body) } &:first-child { &::before { content: none } } &:has(.breadcrumb-separator) { &::before { content: none } } &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) { &::before { content: var(--tw-content); transform: rotate(-135deg) } } &:has([aria-current=\"page\"]) { color: currentColor }","breadcrumb-link":"color: var(--color-body); display: flex; align-items: center; gap: 0.5rem; line-height: 1.125rem; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: left bottom; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 200ms ease-out, color 200ms ease-out; &:hover { @media (hover: hover) { background-size: 100% 1px; cursor: pointer } } &:focus { outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px } } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }","breadcrumb-list":"list-style: none; padding: 0; margin: 0; display: flex; min-height: min-content; align-items: center; white-space: nowrap","breadcrumb-separator":"display: flex; align-items: center; margin-inline: 0.5rem; color: var(--color-body)","btn":"font: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; --radius-btn: calc(var(--border-radius) * 2); --color-btn: var(--color-base-soft); --color-on-btn: var(--color-on-base); --color-btn-active: var(--color-base-active); --btn-variant-text: var(--color-on-base); background-color: var(--color-btn); color: var( --color-on-btn, color-contrast( var(--color-btn) vs white, black ) ); --btn--opacity: 1; --btn--cursor: pointer; --btn--pointer-events: auto; --btn--border-width: 0; --btn--border-style: solid; --btn--border-color: transparent; border-width: var(--btn--border-width); border-style: var(--btn--border-style); border-color: var(--btn--border-color); &:is(:disabled, [disabled]) { --btn--opacity: 0.5; --btn--cursor: not-allowed; --btn--pointer-events: none } opacity: var(--btn--opacity); cursor: pointer; pointer-events: var(--btn--pointer-events); -webkit-user-select: none; -moz-user-select: none; user-select: none; text-decoration: none; text-wrap: nowrap; &:hover { @media (hover: hover) { background-color: var(--color-btn-active); color: var(--color-on-btn); transition-duration: 220ms } } border-radius: var(--btn--radius, var(--radius-btn)); display: var(--btn--display, inline-flex); padding-inline: var(--btn--shape-padding-inline, var(--btn--padding-inline, 1.125rem)); padding-block: var(--btn--shape-padding-block, var(--btn--padding-block, 0.625rem)); font-size: var(--btn--font-size, 1rem); line-height: calc(var(--btn--font-size, 1rem) * var(--btn--line-height, 1.5)); width: var(--btn--width); max-width: var(--btn--max-width); position: relative; gap: 0.375rem; flex-shrink: 0; align-items: center; justify-content: center; flex-wrap: nowrap; vertical-align: middle; font-weight: 500; text-align: center; box-sizing: border-box; transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; &:is(input[type=\"checkbox\"], input[type=\"radio\"]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; &::after { content: attr(aria-label) } &:checked { isolation: isolate; background-color: var(--color-btn-active) } } &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark( var(--color-base-950, currentColor), var(--color-base-50, currentColor) ); outline-offset: 3px; isolation: isolate }","btn-2xl":"--btn--padding-inline: 1.5rem; --btn--padding-block: 1rem; --btn--font-size: 1.375rem; --btn--line-height: 1.5; --btn-square--padding-block: 1rem; --btn-circle--padding-block: 1rem","btn-accent":"--color-btn: var(--color-accent); --color-btn-active: var(--color-accent-active); --color-on-btn: var(--color-on-accent); --color-btn-soft: var(--color-accent-soft); --color-on-btn-soft: var(--color-on-accent-soft); --btn-variant-text: light-dark(var(--color-accent-800), var(--color-accent-400))","btn-active":"--color-btn: var(--color-btn-active)","btn-block":"--btn--width: 100%; --btn--display: block","btn-circle":"--btn--radius: 9999px; --btn--shape-padding-inline: var(--btn-circle--padding-block, 0.625rem); --btn--shape-padding-block: var(--btn-circle--padding-block, 0.625rem); aspect-ratio: 1","btn-dashed":"background-color: transparent; color: var(--btn-variant-text); --btn--border-width: 1px; --btn--border-style: dashed; --btn--border-color: var(--color-btn-active); &:hover { @media (hover: hover) { --btn--border-color: transparent } }","btn-disabled":"--btn--opacity: 0.5; --btn--cursor: not-allowed; --btn--pointer-events: none","btn-error":"--color-btn: var(--color-error); --color-btn-active: var(--color-error-active); --color-on-btn: var(--color-on-error); --color-btn-soft: var(--color-error-soft); --color-on-btn-soft: var(--color-on-error-soft); --btn-variant-text: light-dark(var(--color-error-800), var(--color-error-400))","btn-ghost":"background-color: transparent; color: var(--btn-variant-text); --btn--border-width: 0","btn-info":"--color-btn: var(--color-info); --color-btn-active: var(--color-info-active); --color-on-btn: var(--color-on-info); --color-btn-soft: var(--color-info-soft); --color-on-btn-soft: var(--color-on-info-soft); --btn-variant-text: light-dark(var(--color-info-800), var(--color-info-400))","btn-lg":"--btn--padding-inline: 1.25rem; --btn--padding-block: 0.75rem; --btn--font-size: 1.125rem; --btn--line-height: 1.5; --btn-square--padding-block: 0.75rem; --btn-circle--padding-block: 0.75rem","btn-link":"background-color: transparent; color: var(--btn-variant-text); --btn--border-width: 0; background-image: linear-gradient(currentColor, currentColor); background-position: right bottom; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 300ms ease, background-position 0s, color 200ms ease-out; &:hover { @media (hover: hover) { background-color: transparent; color: var(--btn-variant-text); background-position: left bottom; background-size: 100% 1px; transition: background-size 300ms ease, background-position 0s, color 200ms ease-out } }","btn-md":"--btn--padding-inline: 1.125rem; --btn--padding-block: 0.625rem; --btn--font-size: 1rem; --btn--line-height: 1.5; --btn-square--padding-block: 0.625rem; --btn-circle--padding-block: 0.625rem","btn-neutral":"--color-btn: var(--color-neutral); --color-btn-active: var(--color-neutral-active); --color-on-btn: var(--color-on-neutral); --color-btn-soft: var(--color-neutral-soft); --color-on-btn-soft: var(--color-on-neutral-soft); --btn-variant-text: light-dark(var(--color-neutral-800), var(--color-neutral-400))","btn-outline":"background-color: transparent; color: var(--btn-variant-text); --btn--border-width: 1px; --btn--border-color: var(--color-btn-active); &:hover { @media (hover: hover) { --btn--border-color: transparent } }","btn-pill":"--btn--radius: 9999px","btn-plain":"background-color: transparent; color: var(--btn-variant-text); --btn--border-width: 0; &:hover { @media (hover: hover) { background-color: transparent } }","btn-primary":"--color-btn: var(--color-primary); --color-btn-active: var(--color-primary-active); --color-on-btn: var(--color-on-primary); --color-btn-soft: var(--color-primary-soft); --color-on-btn-soft: var(--color-on-primary-soft); --btn-variant-text: light-dark(var(--color-primary-800), var(--color-primary-400))","btn-rounded":"--btn--radius: var(--radius-btn)","btn-secondary":"--color-btn: var(--color-secondary); --color-btn-active: var(--color-secondary-active); --color-on-btn: var(--color-on-secondary); --color-btn-soft: var(--color-secondary-soft); --color-on-btn-soft: var(--color-on-secondary-soft); --btn-variant-text: light-dark(var(--color-secondary-800), var(--color-secondary-400))","btn-sm":"--btn--padding-inline: 1rem; --btn--padding-block: 0.5rem; --btn--font-size: 0.875rem; --btn--line-height: 1.4; --btn-square--padding-block: 0.5rem; --btn-circle--padding-block: 0.5rem","btn-soft":"background-color: var(--color-btn-soft, var(--color-base-soft)); color: var(--color-on-btn-soft, var(--color-on-base)); &:hover { @media (hover: hover) { background-color: var(--color-btn-active); color: var(--color-on-btn) } }","btn-square":"--btn--shape-padding-inline: var(--btn-square--padding-block, 0.625rem); --btn--shape-padding-block: var(--btn-square--padding-block, 0.625rem); aspect-ratio: 1","btn-success":"--color-btn: var(--color-success); --color-btn-active: var(--color-success-active); --color-on-btn: var(--color-on-success); --color-btn-soft: var(--color-success-soft); --color-on-btn-soft: var(--color-on-success-soft); --btn-variant-text: light-dark(var(--color-success-800), var(--color-success-400))","btn-warning":"--color-btn: var(--color-warning); --color-btn-active: var(--color-warning-active); --color-on-btn: var(--color-on-warning); --color-btn-soft: var(--color-warning-soft); --color-on-btn-soft: var(--color-on-warning-soft); --btn-variant-text: light-dark(var(--color-warning-800), var(--color-warning-400))","btn-wide":"--btn--max-width: 320px; --btn--width: 100%","btn-xl":"--btn--padding-inline: 1.375rem; --btn--padding-block: 0.875rem; --btn--font-size: 1.25rem; --btn--line-height: 1.5; --btn-square--padding-block: 0.875rem; --btn-circle--padding-block: 0.875rem","btn-xs":"--btn--padding-inline: 0.875rem; --btn--padding-block: 0.375rem; --btn--font-size: 0.75rem; --btn--line-height: 1.3; --btn-square--padding-block: 0.375rem; --btn-circle--padding-block: 0.375rem","card":"--radius-card: calc(var(--border-radius) * 4); --color-card: var(--color-base); --color-on-card: var(--color-on-base); position: relative; display: flex; flex-direction: column; border-radius: var(--radius-card); background-color: var(--color-card); color: var(--color-on-card); :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset } :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit } &:has(.card-link:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; .card-link:focus-visible { outline: none } } &:has(.card-link) :where(p, h1, h2, h3, h4, h5, h6) { -webkit-user-select: text; -moz-user-select: text; user-select: text }","card-accent":"--color-card: var(--color-accent); --color-on-card: var(--color-on-accent)","card-actions":"display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: auto","card-content":"display: flex; gap: 0.5rem; flex: auto; flex-direction: column; padding: var(--card-content-padding, 1.5rem); color: inherit; :where(&) :where(p) { font-size: var(--card-content-font-size, 1rem); color: inherit }","card-dashed":"--card--border-width: 1px; border-width: var(--card--border-width, 1px); border-style: dashed; border-color: var(--color-base-soft)","card-error":"--color-card: var(--color-error); --color-on-card: var(--color-on-error)","card-info":"--color-card: var(--color-info); --color-on-card: var(--color-on-info)","card-lg":"--card-content-padding: 2rem; --card-content-font-size: 1rem; --card-title-font-size: 1.25rem","card-link":"&::after { content: \"\"; position: absolute; inset: 0 }","card-md":"--card-content-padding: 1.5rem; --card-content-font-size: 0.875rem; --card-title-font-size: 1.125rem","card-neutral":"--color-card: var(--color-neutral); --color-on-card: var(--color-on-neutral)","card-outline":"--card--border-width: 1px; border-width: var(--card--border-width, 1px); border-style: solid; border-color: var(--color-base-soft)","card-primary":"--color-card: var(--color-primary); --color-on-card: var(--color-on-primary)","card-secondary":"--color-card: var(--color-secondary); --color-on-card: var(--color-on-secondary)","card-sm":"--card-content-padding: 1rem; --card-content-font-size: 0.75rem; --card-title-font-size: 1rem","card-success":"--color-card: var(--color-success); --color-on-card: var(--color-on-success)","card-title":"display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--card-title-font-size, 1.125rem); color: inherit","card-warning":"--color-card: var(--color-warning); --color-on-card: var(--color-on-warning)","card-xl":"--card-content-padding: 2.5rem; --card-content-font-size: 1.125rem; --card-title-font-size: 1.375rem","card-xs":"--card-content-padding: 0.5rem; --card-content-font-size: 0.6875rem; --card-title-font-size: 0.875rem","carousel":"display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth } scrollbar-width: none; gap: var(--carousel--gap, 0); &::-webkit-scrollbar { display: none }","carousel-center":"--carousel-item--snap: center","carousel-end":"--carousel-item--snap: end","carousel-item":"scroll-snap-align: var(--carousel-item--snap, start); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden","carousel-vertical":"flex-direction: column; overflow-x: visible; overflow-y: auto; scroll-snap-type: y mandatory; :where(&) :where(.carousel-item) { width: 100% }","chat":"display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; -moz-column-gap: 0.75rem; column-gap: 0.75rem; row-gap: 0.125rem; padding-block: 0.25rem; :where(&.chat-end) :where(.chat-footer) { direction: ltr; text-align: end }","chat-avatar":"grid-row: 1 / 4; align-self: end","chat-bubble":"--chat-bubble-bg: var(--color-base-soft); --chat-bubble-color: var(--color-on-base); --chat-bubble-radius: 0.25rem 1rem 1rem 1rem; --chat-bubble-padding-inline: 1rem; --chat-bubble-padding-block: 0.625rem; grid-column: 2; position: relative; display: block; width: fit-content; max-width: min(20rem, 80%); padding-inline: var(--chat-bubble-padding-inline); padding-block: var(--chat-bubble-padding-block); background-color: var(--chat-bubble-bg); color: var(--chat-bubble-color); border-radius: var(--chat-bubble-radius); font-size: var(--chat-bubble-font-size, 0.9375rem); line-height: 1.5; word-break: break-word; :where(&) :where(p, li) { color: inherit }","chat-bubble-accent":"--chat-bubble-bg: var(--color-accent); --chat-bubble-color: var(--color-on-accent)","chat-bubble-error":"--chat-bubble-bg: var(--color-error); --chat-bubble-color: var(--color-on-error)","chat-bubble-info":"--chat-bubble-bg: var(--color-info); --chat-bubble-color: var(--color-on-info)","chat-bubble-neutral":"--chat-bubble-bg: var(--color-neutral); --chat-bubble-color: var(--color-on-neutral)","chat-bubble-primary":"--chat-bubble-bg: var(--color-primary); --chat-bubble-color: var(--color-on-primary)","chat-bubble-secondary":"--chat-bubble-bg: var(--color-secondary); --chat-bubble-color: var(--color-on-secondary)","chat-bubble-success":"--chat-bubble-bg: var(--color-success); --chat-bubble-color: var(--color-on-success)","chat-bubble-warning":"--chat-bubble-bg: var(--color-warning); --chat-bubble-color: var(--color-on-warning)","chat-end":"grid-template-columns: 1fr auto; direction: rtl; --chat-bubble-bg: var(--color-primary); --chat-bubble-color: var(--color-on-primary); --chat-bubble-radius: 1rem 0.25rem 1rem 1rem; :where(&) :where(.chat-bubble) { direction: ltr }","chat-footer":"grid-column: 2; font-size: 0.6875rem; opacity: 0.5; display: flex; align-items: center; gap: 0.375rem","chat-header":"grid-column: 2; font-size: 0.6875rem; opacity: 0.5; display: flex; align-items: center; gap: 0.375rem","chat-lg":"--chat-bubble-font-size: 1rem; --chat-bubble-padding-inline: 1.25rem; --chat-bubble-padding-block: 0.75rem","chat-md":"--chat-bubble-font-size: 0.9375rem","chat-sm":"--chat-bubble-font-size: 0.875rem; --chat-bubble-padding-inline: 0.75rem; --chat-bubble-padding-block: 0.5rem","chat-start":"grid-template-columns: auto 1fr; direction: ltr","chat-xl":"--chat-bubble-font-size: 1.125rem; --chat-bubble-padding-inline: 1.5rem; --chat-bubble-padding-block: 1rem","chat-xs":"--chat-bubble-font-size: 0.75rem; --chat-bubble-padding-inline: 0.625rem; --chat-bubble-padding-block: 0.375rem","checkbox":"--radius-checkbox: calc(var(--border-radius) * 1.5); --color-checkbox: var(--color-base); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: color-mix(in oklab, var(--color-base) 50%, transparent) } --color-on-checkbox: var(--color-on-base); --color-checkbox-active: var(--color-base-active); --checkbox--box-shadow: 0 0 0 0px var(--color-base-100), 0 0 0 calc(1px + 0px) var(--color-checkbox-active), 0 0 var(--color-base-100); background-color: var(--color-checkbox); color: var(--color-on-checkbox); box-shadow: var(--checkbox--box-shadow); aspect-ratio: var(--checkbox--aspect-ratio); border-radius: var(--checkbox--radius, var(--radius-checkbox)); padding: var(--checkbox--padding, 0.3125rem); width: var(--checkbox--width, 1.25rem); height: var(--checkbox--height, 1.25rem); position: relative; transition-duration: 350ms; flex-shrink: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; vertical-align: middle; &::before { content: none; opacity: 0%; background-color: currentcolor; transform: rotate(45deg); transition: transform 300ms, background-color 100ms; display: block; width: 100%; height: 100%; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%); font-size: 1rem; line-height: 0.75 } &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark( var(--color-base-950, currentColor), var(--color-base-50, currentColor) ); outline-offset: 3px } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: light-dark(var(--color-base-600), var(--color-base-400)); @supports (color: color-mix(in lab, red, red)) { --checkbox--bg-color: light-dark(color-mix(in oklab, var(--color-base-600) 20%, transparent), color-mix(in oklab, var(--color-base-400) 20%, transparent)) } background-color: var(--checkbox--bg-color); transition: background-color 100ms, box-shadow 100ms; &::before { content: \"✔︎\"; opacity: 100% } @media (forced-colors: active) { &::before { content: \"✔︎\"; --checkbox--bg-color: light-dark(var(--color-base-600), var(--color-base-200)); transform: rotate(0deg); background-color: var(--checkbox--bg-color); clip-path: none } } } &:indeterminate { &::before { content: \"\"; opacity: 100%; transform: rotate(0deg) translate(0, -35%); clip-path: polygon( 20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100% ) } } &:is(:disabled, [disabled], .checkbox-disabled) { --checkbox--cursor: not-allowed; --checkbox--opacity: 20%; cursor: var(--checkbox--cursor); opacity: var(--checkbox--opacity) }","checkbox-2xl":"--checkbox--padding: 0.5rem; --checkbox--width: 2rem; --checkbox--height: 2rem","checkbox-accent":"--color-checkbox: light-dark(var(--color-accent-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-accent-50), color-mix(in oklch, black 10%, var(--color-accent-400) 20%)) } --color-on-checkbox: var(--color-on-accent); --color-checkbox-active: var(--color-accent-active); --checkbox--box-shadow: 0 0 0 0px var(--color-accent-50), 0 0 0 calc(1px + 0px) var(--color-accent-600), 0 0 var(--color-accent-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-accent-50), 0 0 0 calc(1px + 0px) var(--color-accent-700), 0 0 var(--color-accent-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-accent); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-accent-600), var(--color-accent-200)) } } }","checkbox-circle":"--checkbox--radius: calc(infinity * 1px); --checkbox--aspect-ratio: 1 / 1","checkbox-disabled":"cursor: var(--checkbox--cursor); opacity: var(--checkbox--opacity)","checkbox-error":"--color-checkbox: light-dark(var(--color-error-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-error-50), color-mix(in oklch, black 10%, var(--color-error-400) 20%)) } --color-on-checkbox: var(--color-on-error); --color-checkbox-active: var(--color-error-active); --checkbox--box-shadow: 0 0 0 0px var(--color-error-50), 0 0 0 calc(1px + 0px) var(--color-error-600), 0 0 var(--color-error-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-error-50), 0 0 0 calc(1px + 0px) var(--color-error-700), 0 0 var(--color-error-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-error); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-error-600), var(--color-error-200)) } } }","checkbox-info":"--color-checkbox: light-dark(var(--color-info-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-info-50), color-mix(in oklch, black 10%, var(--color-info-400) 20%)) } --color-on-checkbox: var(--color-on-info); --color-checkbox-active: var(--color-info-active); --checkbox--box-shadow: 0 0 0 0px var(--color-info-50), 0 0 0 calc(1px + 0px) var(--color-info-600), 0 0 var(--color-info-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-info-50), 0 0 0 calc(1px + 0px) var(--color-info-700), 0 0 var(--color-info-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-info); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-info-600), var(--color-info-200)) } } }","checkbox-lg":"--checkbox--padding: 0.375rem; --checkbox--width: 1.5rem; --checkbox--height: 1.5rem","checkbox-md":"--checkbox--padding: 0.3125rem; --checkbox--width: 1.25rem; --checkbox--height: 1.25rem","checkbox-neutral":"--color-checkbox: light-dark(var(--color-neutral-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-neutral-50), color-mix(in oklch, black 10%, var(--color-neutral-400) 20%)) } --color-on-checkbox: var(--color-on-neutral); --color-checkbox-active: var(--color-neutral-active); --checkbox--box-shadow: 0 0 0 0px var(--color-neutral-50), 0 0 0 calc(1px + 0px) var(--color-neutral-600), 0 0 var(--color-neutral-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-neutral-50), 0 0 0 calc(1px + 0px) var(--color-neutral-700), 0 0 var(--color-neutral-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-neutral); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-neutral-600), var(--color-neutral-200)) } } }","checkbox-primary":"--color-checkbox: light-dark(var(--color-primary-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-primary-50), color-mix(in oklch, black 10%, var(--color-primary-400) 20%)) } --color-on-checkbox: var(--color-on-primary); --color-checkbox-active: var(--color-primary-active); --checkbox--box-shadow: 0 0 0 0px var(--color-primary-50), 0 0 0 calc(1px + 0px) var(--color-primary-600), 0 0 var(--color-primary-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-primary-50), 0 0 0 calc(1px + 0px) var(--color-primary-700), 0 0 var(--color-primary-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-primary); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-primary-600), var(--color-primary-200)) } } }","checkbox-rounded":"--checkbox--radius: calc(infinity * 1px); --checkbox--aspect-ratio: 1 / 1","checkbox-secondary":"--color-checkbox: light-dark(var(--color-secondary-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-secondary-50), color-mix(in oklch, black 10%, var(--color-secondary-400) 20%)) } --color-on-checkbox: var(--color-on-secondary); --color-checkbox-active: var(--color-secondary-active); --checkbox--box-shadow: 0 0 0 0px var(--color-secondary-50), 0 0 0 calc(1px + 0px) var(--color-secondary-600), 0 0 var(--color-secondary-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-secondary-50), 0 0 0 calc(1px + 0px) var(--color-secondary-700), 0 0 var(--color-secondary-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-secondary); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-secondary-600), var(--color-secondary-200)) } } }","checkbox-sm":"--checkbox--padding: 0.25rem; --checkbox--width: 1rem; --checkbox--height: 1rem","checkbox-square":"--checkbox--radius: var(--radius-checkbox); --checkbox--aspect-ratio: 1 / 1","checkbox-success":"--color-checkbox: light-dark(var(--color-success-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-success-50), color-mix(in oklch, black 10%, var(--color-success-400) 20%)) } --color-on-checkbox: var(--color-on-success); --color-checkbox-active: var(--color-success-active); --checkbox--box-shadow: 0 0 0 0px var(--color-success-50), 0 0 0 calc(1px + 0px) var(--color-success-600), 0 0 var(--color-success-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-success-50), 0 0 0 calc(1px + 0px) var(--color-success-700), 0 0 var(--color-success-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-success); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-success-600), var(--color-success-200)) } } }","checkbox-warning":"--color-checkbox: light-dark(var(--color-warning-50), black); @supports (color: color-mix(in lab, red, red)) { --color-checkbox: light-dark(var(--color-warning-50), color-mix(in oklch, black 10%, var(--color-warning-400) 20%)) } --color-on-checkbox: var(--color-on-warning); --color-checkbox-active: var(--color-warning-active); --checkbox--box-shadow: 0 0 0 0px var(--color-warning-50), 0 0 0 calc(1px + 0px) var(--color-warning-600), 0 0 var(--color-warning-50); &:focus-visible { --checkbox--box-shadow: 0 0 0 0px var(--color-warning-50), 0 0 0 calc(1px + 0px) var(--color-warning-700), 0 0 var(--color-warning-50) } &:checked, &[aria-checked=\"true\"] { --checkbox--bg-color: var(--color-warning); @media (forced-colors: active) { &::before { content: var(--tw-content); --checkbox--bg-color: light-dark(var(--color-warning-600), var(--color-warning-200)) } } }","checkbox-xl":"--checkbox--padding: 0.4375rem; --checkbox--width: 1.75rem; --checkbox--height: 1.75rem","checkbox-xs":"--checkbox--padding: 0.1875rem; --checkbox--width: 0.75rem; --checkbox--height: 0.75rem","collapsible":"position: relative; &:is(.collapsible-open, :has(> .collapsible-toggle:checked), [open]) { & > .collapsible-content { grid-template-rows: 1fr } }","collapsible-arrow":"&::after { content: \"\"; display: inline-block; flex-shrink: 0; width: 0.4em; height: 0.4em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 300ms ease; margin-inline-start: auto }","collapsible-content":"display: grid; grid-template-rows: 0fr; overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: inherit; border-end-end-radius: inherit; transition: grid-template-rows 300ms ease; & > * { min-height: 0 }","collapsible-group":"position: relative","collapsible-open":"& > .collapsible-arrow::after, .collapsible:has( > .collapsible-toggle:checked) .collapsible-arrow::after, .collapsible[open] > .collapsible-arrow::after { transform: rotate(225deg) }","collapsible-overlay":"position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-block-end: 1.25rem; cursor: pointer; .collapsible-open > &, .collapsible:has(> .collapsible-toggle:checked) & { display: none }","collapsible-peek":"& > .collapsible-content { grid-template-rows: 1fr; max-height: var(--peek-height, 8rem); mask-image: linear-gradient(to bottom, black 40%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%) } &:is(.collapsible-open, :has( > .collapsible-toggle:checked)) > .collapsible-content { max-height: var(--peek-max-height, 99rem); mask-image: none; -webkit-mask-image: none }","collapsible-title":"background: none; border: none; font: inherit; display: flex; align-items: center; width: 100%; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; list-style: none; &::marker { content: none } &::-webkit-details-marker { display: none }","collapsible-toggle":"position: absolute; opacity: 0; width: 0; height: 0","combobox-accent":"--combobox-item-active-bg: var(--color-accent-soft); --combobox-item-active-color: light-dark(var(--color-accent-800), var(--color-accent))","combobox-error":"--combobox-item-active-bg: var(--color-error-soft); --combobox-item-active-color: light-dark(var(--color-error-800), var(--color-error))","combobox-info":"--combobox-item-active-bg: var(--color-info-soft); --combobox-item-active-color: light-dark(var(--color-info-800), var(--color-info))","combobox-item":"--combobox-item-active-bg: var(--color-primary-soft); --combobox-item-active-color: light-dark(var(--color-primary-800), var(--color-primary)); padding-inline: 0.75rem; padding-block: 0.5rem; font-size: 0.875rem; border-radius: calc(var(--border-radius) * 1.5); color: var(--color-on-base); cursor: pointer; transition: background-color 100ms ease-in-out, color 100ms ease-in-out; &:hover { @media (hover: hover) { background-color: var(--color-base-soft) } } &:is([aria-selected=\"true\"], .combobox-item-active) { background-color: var(--combobox-item-active-bg); color: var(--combobox-item-active-color) }","combobox-list":"position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline: 0; z-index: 100; background-color: var(--color-base); border: 1px solid var(--color-base-soft); border-radius: calc(var(--border-radius) * 2); padding: 0.375rem; margin: 0; list-style: none; max-height: 16rem; overflow-y: auto; scrollbar-width: thin; opacity: var(--combobox-list--opacity, 0); pointer-events: var(--combobox-list--pointer-events, none); transform: var(--combobox-list--transform, translateY(-0.25rem)); transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; display: flex; flex-direction: column; gap: 0.125rem; box-shadow: 0 4px 16px var(--color-base-950); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 4px 16px color-mix(in oklab, var(--color-base-950) 10%, transparent) }","combobox-open":"--combobox-list--opacity: 1; --combobox-list--pointer-events: auto; --combobox-list--transform: translateY(0)","combobox-primary":"--combobox-item-active-bg: var(--color-primary-soft); --combobox-item-active-color: light-dark(var(--color-primary-800), var(--color-primary))","combobox-secondary":"--combobox-item-active-bg: var(--color-secondary-soft); --combobox-item-active-color: light-dark(var(--color-secondary-800), var(--color-secondary))","combobox-success":"--combobox-item-active-bg: var(--color-success-soft); --combobox-item-active-color: light-dark(var(--color-success-800), var(--color-success))","combobox-warning":"--combobox-item-active-bg: var(--color-warning-soft); --combobox-item-active-color: light-dark(var(--color-warning-800), var(--color-warning))","countdown":"container: countdown / normal; display: inline-flex; align-items: baseline; gap: 0; font-size: 3rem; font-variant-numeric: tabular-nums; line-height: 1; vertical-align: middle; :where(&) :where(span) { --countdown-value: 0; display: inline-block; overflow: hidden; height: 1em; line-height: 1em; &::before { content: \"00\\A 01\\A 02\\A 03\\A 04\\A 05\\A 06\\A 07\\A 08\\A 09\\A 10\\A 11\\A 12\\A 13\\A 14\\A 15\\A 16\\A 17\\A 18\\A 19\\A 20\\A 21\\A 22\\A 23\\A 24\\A 25\\A 26\\A 27\\A 28\\A 29\\A 30\\A 31\\A 32\\A 33\\A 34\\A 35\\A 36\\A 37\\A 38\\A 39\\A 40\\A 41\\A 42\\A 43\\A 44\\A 45\\A 46\\A 47\\A 48\\A 49\\A 50\\A 51\\A 52\\A 53\\A 54\\A 55\\A 56\\A 57\\A 58\\A 59\\A 60\\A 61\\A 62\\A 63\\A 64\\A 65\\A 66\\A 67\\A 68\\A 69\\A 70\\A 71\\A 72\\A 73\\A 74\\A 75\\A 76\\A 77\\A 78\\A 79\\A 80\\A 81\\A 82\\A 83\\A 84\\A 85\\A 86\\A 87\\A 88\\A 89\\A 90\\A 91\\A 92\\A 93\\A 94\\A 95\\A 96\\A 97\\A 98\\A 99\"; display: block; white-space: pre; transform: translateY(calc(var(--countdown-value) * -1em)); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) } }","countdown-lg":"font-size: 4.5rem","countdown-md":"font-size: 3rem","countdown-sm":"font-size: 2rem","countdown-xl":"font-size: 6rem","countdown-xs":"font-size: 1.5rem","diff":"position: relative; display: grid; width: 100%; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; direction: ltr; container-type: inline-size; border-radius: calc(var(--border-radius) * 2)","diff-item-1":"position: relative; z-index: 1; grid-column-start: 1; grid-row: 1 / span 3; overflow: hidden; border-right: 2px solid var(--color-base); :where(&) > * { pointer-events: none; position: absolute; inset-block: 0; inset-inline-start: 0; height: 100%; width: 100cqi; max-width: none; oobject-fit: cover; object-fit: cover; oobject-position: center; object-position: center }","diff-item-2":"position: relative; grid-column-start: 1; grid-row: 1 / span 3; &::after { content: \"\"; pointer-events: none; position: absolute; inset-block-start: 50%; inset-inline-end: 1px; z-index: 2; border-radius: 9999px; width: 1.2rem; height: 1.8rem; background-color: var(--color-base); border: 0.5px solid oklch(0 0 0 / 12%); outline: 1px solid var(--color-on-base); @supports (color: color-mix(in lab, red, red)) { outline: 1px solid color-mix(in oklab, var(--color-on-base) 10%, transparent) } outline-offset: -3px; translate: 50% -50% } :where(&) > * { pointer-events: none; position: absolute; inset-block: 0; inset-inline-start: 0; height: 100%; width: 100cqi; max-width: none; oobject-fit: cover; object-fit: cover; oobject-position: center; object-position: center }","diff-resizer":"position: relative; z-index: 2; grid-column-start: 1; grid-row-start: 2; height: 0.75rem; width: 50cqi; max-width: calc(100cqi - 1rem); min-width: 1rem; resize: horizontal; overflow: hidden; opacity: 0; transform: scaleY(5) translate(0.32rem, 50%); cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))","divider":"--divider--margin: 1rem 0; --color-divider: var(--color-base-soft); --divider-direction: right; --divider--flex-direction: row; --divider--width: 100%; --divider--height: 1px; --divider-dash-length: 10px; --divider-gap-length: 0px; display: flex; align-items: center; justify-content: center; flex-direction: var(--divider--flex-direction); width: var(--divider--width); height: var(--divider--height); &:not(*:empty) { -moz-column-gap: 0.5rem; column-gap: 0.5rem; text-wrap: nowrap } &::before, &::after { content: \"\"; margin: var(--divider--margin); width: var(--divider--width); height: var(--divider--height); background: repeating-linear-gradient(to var(--divider-direction), var(--color-divider) 0px, var(--color-divider) var(--divider-dash-length), transparent var(--divider-dash-length), transparent calc(var(--divider-dash-length) + var(--divider-gap-length))) }","divider-accent":"--color-divider: var(--color-accent)","divider-dashed":"--divider-dash-length: 5px; --divider-gap-length: 5px","divider-dotted":"--divider-dash-length: 2px; --divider-gap-length: 4px","divider-end":"&::after { content: var(--tw-content); display: none }","divider-error":"--color-divider: var(--color-error)","divider-horizontal":"--divider-direction: right; --divider--width: 100%; --divider--height: 1px; --divider--flex-direction: row; --divider--margin: 1rem 0","divider-info":"--color-divider: var(--color-info)","divider-neutral":"--color-divider: var(--color-neutral)","divider-primary":"--color-divider: var(--color-primary)","divider-secondary":"--color-divider: var(--color-secondary)","divider-solid":"--divider-dash-length: 10px; --divider-gap-length: 0px","divider-start":"&::before { content: var(--tw-content); display: none }","divider-success":"--color-divider: var(--color-success)","divider-vertical":"--divider-direction: bottom; --divider--width: 1px; --divider--flex-direction: column; --divider--margin: 0 1rem; align-self: stretch; height: auto; &::before, &::after { flex: 1; height: auto }","divider-warning":"--color-divider: var(--color-warning)","drawer":"border: none; pointer-events: none; visibility: hidden; position: fixed; inset: 0rem; margin: 0rem; padding: 0rem; display: grid; width: 100%; height: 100%; max-width: none; max-height: none; place-items: start; color: inherit; z-index: 1000; overflow: hidden; overscroll-behavior: contain; &:not(drawer:not([open]):not(.drawer-open)), &::backdrop { @starting-style { visibility: hidden } opacity: 1; background-color: light-dark(black, black); @supports (color: color-mix(in lab, red, red)) { background-color: light-dark(color-mix(in oklch, black 10%, var(--color-base-600) 40%), color-mix(in oklch, black 10%, var(--color-base-400) 40%)) } } &:is([open], .drawer-open) { @starting-style { visibility: hidden } pointer-events: auto; visibility: visible; .drawer-content { translate: 0 0; scale: 1 } }","drawer-backdrop":"display: grid; grid-column-start: 1; grid-row-start: 1; align-self: stretch; justify-self: stretch; color: transparent; z-index: -1; :where(&) :where(button) { cursor: pointer }","drawer-bottom":"place-items: end; :where(.drawer-content) { height: auto; width: 100%; max-height: 80vh; margin-block-start: calc(var(--spacing)*24); translate: 0 100%; border-start-end-radius: var(--radius-drawer); border-start-start-radius: var(--radius-drawer) }","drawer-content":"--radius-drawer: calc(var(--border-radius) * 2); border-radius: 0; translate: -100% 0; scale: 1; grid-column-start: 1; grid-row-start: 1; height: 100vh; max-height: none; padding: 0.25rem; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; @media (forced-colors: active) { outline-style: solid; outline-width: 1px } background-color: var(--color-base); transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out","drawer-end":"place-items: end; :where(.drawer-content) { height: 100vh; max-height: none; width: auto; translate: 100% 0 }","drawer-start":"place-items: start; :where(.drawer-content) { height: 100vh; width: auto; max-height: none; translate: -100% 0 }","drawer-top":"place-items: start; :where(.drawer-content) { height: auto; width: 100%; max-height: 80vh; margin-block-end: calc(var(--spacing)*24); translate: 0 -100% }","footer":"display: grid; width: 100%; grid-auto-flow: row; place-items: start; -moz-column-gap: calc(var(--spacing) * 4); column-gap: calc(var(--spacing) * 4); row-gap: calc(var(--spacing) * 10); font-size: 0.875rem; line-height: 1.25rem; :where(&) > * { display: grid; place-items: start; gap: calc(var(--spacing) * 2) }","footer-center":"grid-auto-flow: column dense; place-items: center; text-align: center; :where(&) > * { place-items: center }","footer-horizontal":"grid-auto-flow: column; &.footer-center { grid-auto-flow: row dense }","footer-title":"margin-bottom: calc(var(--spacing) * 2); text-transform: uppercase; color: inherit; font-weight: 600","footer-vertical":"grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense }","header":"--header-bg: var(--color-base); --header-border-color: var(--color-base-soft); --header-shadow: none; --header-blur: none; --header-position: relative; --header-height: 3.5rem; --header-padding-block: 0.5rem; position: var(--header-position); inset-block-start: 0; z-index: 999; width: 100%; height: var(--header-height); background-color: var(--header-bg); border-block-end: 1px solid var(--header-border-color); box-shadow: var(--header-shadow); backdrop-filter: var(--header-blur); -webkit-backdrop-filter: var(--header-blur); transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease","header-blur":"--header-blur: blur(12px); --header-bg: var(--color-base); @supports (color: color-mix(in lab, red, red)) { --header-bg: color-mix(in oklch, var(--color-base) 80%, transparent) }","header-center":"grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 0.75rem","header-content":"display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; width: 100%; height: 100%; padding-inline: 1rem; padding-block: var(--header-padding-block, 0.5rem); @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","header-end":"grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem","header-fixed":"--header-position: fixed; inset-inline: 0","header-lg":"--header-height: 4.5rem; --header-padding-block: 0.75rem","header-shadow":"--header-shadow: 0 1px 8px oklch(0% 0 0 / 8%); --header-border-color: transparent","header-sm":"--header-height: 2.75rem; --header-padding-block: 0.375rem","header-solid":"--header-bg: var(--color-base); --header-border-color: var(--color-base-soft); --header-shadow: 0 1px 8px oklch(0% 0 0 / 8%)","header-start":"grid-column: 1; display: flex; align-items: center; gap: 0.75rem","header-sticky":"--header-position: sticky","header-transparent":"--header-bg: transparent; --header-border-color: transparent","heading":"--heading-size: 1rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-2xl":"--heading-size: 1.5rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-3xl":"--heading-size: 1.875rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-4xl":"--heading-size: 2.25rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-5xl":"--heading-size: 3rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-6xl":"--heading-size: 3.75rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-7xl":"--heading-size: 4.5rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-8xl":"--heading-size: 6rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-9xl":"--heading-size: 8rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-lg":"--heading-size: 1.125rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-md":"color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15; --heading-size: 1rem","heading-sm":"--heading-size: 0.875rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-xl":"--heading-size: 1.25rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","heading-xs":"--heading-size: 0.75rem ; color: var(--color-on-base); font-weight: bold; text-wrap-style: balance; font-size: var(--heading-size); line-height: 1.15","hero":"display: grid; place-items: center; background-size: cover; background-position: center; width: 100%; & > * { grid-column-start: 1; grid-row-start: 1 }","hero-content":"display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 4); isolation: isolate; max-width: 80rem","hero-overlay":"background-color: var(--color-neutral-500); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-500) 50%, transparent) } grid-column-start: 1; grid-row-start: 1; width: 100%; height: 100%","indicator":"position: relative; display: inline-flex; width: fit-content","indicator-bottom":"inset-block-start: auto; inset-block-end: 0; --indicator-ty: 50%","indicator-center":"inset-inline-start: 50%; inset-inline-end: auto; --indicator-tx: -50%","indicator-end":"inset-inline-start: auto; inset-inline-end: 0; --indicator-tx: 50%","indicator-item":"position: absolute; z-index: 10; inset-block-start: 0; inset-inline-end: 0; transform: translate(var(--indicator-tx, 50%), var(--indicator-ty, -50%))","indicator-middle":"inset-block-end: auto; inset-block-start: 50%; --indicator-ty: -50%","indicator-start":"inset-inline-end: auto; inset-inline-start: 0; --indicator-tx: -50%","indicator-top":"inset-block-end: auto; inset-block-start: 0; --indicator-ty: -50%","input":"font: inherit; --radius-input: calc(var(--border-radius) * 2); --color-input: var(--color-base-soft); --color-on-input: var(--color-on-base-soft); --color-input-soft: var(--color-base-soft); --color-input-active: var(--color-base-active); --color-on-input-active: var(--color-on-base); --input--inline: 0.75rem; --input--block: 0.625rem; --input--font-size: 1rem; border-width: 1px; border-style: solid; border-color: var(--color-input-active); background-color: transparent; &:not([type=\"file\"]) { padding-inline: var(--input--inline); padding-block: var(--input--block) } font-size: var(--input--font-size); color: var(--color-on-base); display: inline-flex; align-self: flex-start; flex-shrink: 0; align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--radius-input); gap: 0.5rem; vertical-align: middle; white-space: nowrap; position: relative; font-weight: 500; transition: border-color 250ms; transition-timing-function: ease-in-out; &::-moz-placeholder { font-size: var(--input--font-size); color: var(--input-disabled--color); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-on-base) 30%, transparent) } font-weight: 400 } &::placeholder { font-size: var(--input--font-size); color: var(--input-disabled--color); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-on-base) 30%, transparent) } font-weight: 400 } &::file-selector-button { font-size: var(--input--font-size); margin-inline-end: 1rem; display: inline-flex; padding-inline: var(--input--inline); padding-block: var(--input--block); transition: border-color 300ms, background-color 300ms, display 300ms; transition-timing-function: ease-in-out; align-items: center; border-start-start-radius: calc(var(--radius-input) / 2); border-end-start-radius: calc(var(--radius-input) / 2); background-color: var(--color-input); border-inline-end-width: 1px; border-style: solid; border-color: var(--color-input-active); font-weight: semibold; color: var(--color-on-input); &:hover { @media (hover: hover) { background-color: var(--color-input-active); color: var(--color-on-input-active) } } } &:is(:disabled, [disabled], .input-disabled) { --input-disabled--cursor: not-allowed; --input-disabled--opacity: 0.6; --input-disabled--pointer-events: none; --input-disabled--user-select: none; --input-disabled--bg-color: var(--color-base-soft); --input-disabled--color: light-dark(var(--color-base-700), var(--color-base-400)); --input-disabled--border-color: var(--input); @supports (color: color-mix(in lab, red, red)) { --input-disabled--border-color: color-mix(in oklab, var(--input) 20%, transparent) } cursor: var(--input-disabled--cursor); opacity: var(--input-disabled--opacity); pointer-events: var(--input-disabled--pointer-events); background-color: var(--input-disabled--bg-color); color: var(--input-disabled--color); -webkit-user-select: var(--input-disabled--user-select); -moz-user-select: var(--input-disabled--user-select); user-select: var(--input-disabled--user-select); border-color: var(--input-disabled--border-color) } &:focus, &:focus-within { border-color: light-dark(var(--color-base-800), var(--color-base-300)); @supports (color: color-mix(in lab, red, red)) { border-color: light-dark(var(--color-base-800), color-mix(in oklab, var(--color-base-300) 80%, transparent)) } }","input-2xl":"--input--inline: 1.25rem; --input--block: 1rem; --input--font-size: 1.025rem; --input--square-size: 4.5rem","input-accent":"--color-input: var(--color-accent); --color-on-input: var(--color-on-accent); --color-input-soft: var(--color-accent-soft); --color-on-input-soft: var(--color-on-accent-soft); --color-input-active: var(--color-accent-active); --color-on-input-active: var(--color-on-accent); &:focus, &:focus-within { border-color: var(--color-accent-400) }","input-dashed":"border-style: dashed","input-disabled":"cursor: var(--input-disabled--cursor); opacity: var(--input-disabled--opacity); pointer-events: var(--input-disabled--pointer-events); background-color: var(--input-disabled--bg-color); color: var(--input-disabled--color); -webkit-user-select: var(--input-disabled--user-select); -moz-user-select: var(--input-disabled--user-select); user-select: var(--input-disabled--user-select); border-color: var(--input-disabled--border-color); &::-moz-placeholder { color: var(--input-disabled--color) } &::placeholder { color: var(--input-disabled--color) }","input-error":"--color-input: var(--color-error); --color-on-input: var(--color-on-error); --color-input-soft: var(--color-error-soft); --color-on-input-soft: var(--color-on-error-soft); --color-input-active: var(--color-error-active); --color-on-input-active: var(--color-on-error); &:focus, &:focus-within { border-color: var(--color-error-400) }","input-ghost":"border-color: transparent","input-info":"--color-input: var(--color-info); --color-on-input: var(--color-on-info); --color-input-soft: var(--color-info-soft); --color-on-input-soft: var(--color-on-info-soft); --color-input-active: var(--color-info-active); --color-on-input-active: var(--color-on-info); &:focus, &:focus-within { border-color: var(--color-info-400) }","input-lg":"--input--inline: 0.9rem; --input--block: 0.75rem; --input--font-size: 1rem; --input--square-size: 3.5rem","input-md":"--input--inline: 0.75rem; --input--block: 0.625rem; --input--font-size: 1rem; --input--square-size: 3rem","input-neutral":"--color-input: var(--color-neutral); --color-on-input: var(--color-on-neutral); --color-input-soft: var(--color-neutral-soft); --color-on-input-soft: var(--color-on-neutral-soft); --color-input-active: var(--color-neutral-active); --color-on-input-active: var(--color-on-neutral); &:focus, &:focus-within { border-color: var(--color-neutral-400) }","input-outline":"border-style: solid","input-primary":"--color-input: var(--color-primary); --color-on-input: var(--color-on-primary); --color-input-soft: var(--color-primary-soft); --color-on-input-soft: var(--color-on-primary-soft); --color-input-active: var(--color-primary-active); --color-on-input-active: var(--color-on-primary); &:focus, &:focus-within { border-color: var(--color-primary-400) }","input-secondary":"--color-input: var(--color-secondary); --color-on-input: var(--color-on-secondary); --color-input-soft: var(--color-secondary-soft); --color-on-input-soft: var(--color-on-secondary-soft); --color-input-active: var(--color-secondary-active); --color-on-input-active: var(--color-on-secondary); &:focus, &:focus-within { border-color: var(--color-secondary-400) }","input-sm":"--input--inline: 0.6rem; --input--block: 0.5rem; --input--font-size: 0.875rem; --input--square-size: 2.5rem","input-soft":"background-color: var(--color-input-soft); border-color: transparent; &::-moz-placeholder { color: var(--color-on-input-soft); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-on-input-soft) 45%, transparent) } } &::placeholder { color: var(--color-on-input-soft); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-on-input-soft) 45%, transparent) } }","input-square":"width: var(--input--square-size, 3rem); padding-inline: 0; text-align: center; justify-content: center; font-weight: 600","input-success":"--color-input: var(--color-success); --color-on-input: var(--color-on-success); --color-input-soft: var(--color-success-soft); --color-on-input-soft: var(--color-on-success-soft); --color-input-active: var(--color-success-active); --color-on-input-active: var(--color-on-success); &:focus, &:focus-within { border-color: var(--color-success-400) }","input-warning":"--color-input: var(--color-warning); --color-on-input: var(--color-on-warning); --color-input-soft: var(--color-warning-soft); --color-on-input-soft: var(--color-on-warning-soft); --color-input-active: var(--color-warning-active); --color-on-input-active: var(--color-on-warning); &:focus, &:focus-within { border-color: var(--color-warning-400) }","input-xl":"--input--inline: 1rem; --input--block: 0.875rem; --input--font-size: 1rem; --input--square-size: 4rem","input-xs":"--input--inline: 0.475rem; --input--block: 0.375rem; --input--font-size: 0.75rem; --input--square-size: 2rem","is-collapsible-close":"display: inline; :is(.collapsible-open, .collapsible:has(> .collapsible-toggle:checked), .collapsible[open]) &, .collapsible-group:has(.collapsible-open) &, .collapsible-group:has(.collapsible > .collapsible-toggle:checked) &, .collapsible-group:has(.collapsible[open]) & { display: none }","is-collapsible-open":"display: none; :is(.collapsible-open, .collapsible:has(> .collapsible-toggle:checked), .collapsible[open]) &, .collapsible-group:has(.collapsible-open) &, .collapsible-group:has(.collapsible > .collapsible-toggle:checked) &, .collapsible-group:has(.collapsible[open]) & { display: inline }","join":"display: inline-flex; align-items: stretch; --join-radius: calc(var(--border-radius) * 2); & .join-item { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-start-radius: var(--join-es, 0); border-end-end-radius: var(--join-ee, 0); margin-inline-start: calc(var(--border, 1px) * -1) } flex-direction: row; >:only-child { --join-ss: var(--join-radius); --join-se: var(--join-radius); --join-es: var(--join-radius); --join-ee: var(--join-radius) } >:first-child:not(:only-child) { --join-ss: var(--join-radius); --join-se: 0; --join-es: var(--join-radius); --join-ee: 0 } >:last-child:not(:only-child) { --join-ss: 0; --join-se: var(--join-radius); --join-es: 0; --join-ee: var(--join-radius) } >:not(:first-child):not(:last-child) { border-radius: 0 }","join-horizontal":"flex-direction: row; >:only-child { --join-ss: var(--join-radius); --join-se: var(--join-radius); --join-es: var(--join-radius); --join-ee: var(--join-radius) } >:first-child:not(:only-child) { --join-ss: var(--join-radius); --join-se: 0; --join-es: var(--join-radius); --join-ee: 0 } >:last-child:not(:only-child) { --join-ss: 0; --join-se: var(--join-radius); --join-es: 0; --join-ee: var(--join-radius) } >:not(:first-child):not(:last-child) { border-radius: 0 } & .join-item { margin-inline-start: calc(var(--border, 1px) * -1) }","join-item":"--join-item: 1","join-vertical":"flex-direction: column; >:only-child { --join-ss: var(--join-radius); --join-se: var(--join-radius); --join-es: var(--join-radius); --join-ee: var(--join-radius) } >:first-child:not(:only-child) { --join-ss: var(--join-radius); --join-se: var(--join-radius); --join-es: 0; --join-ee: 0 } >:last-child:not(:only-child) { --join-ss: 0; --join-se: 0; --join-es: var(--join-radius); --join-ee: var(--join-radius) } >:not(:first-child):not(:last-child) { border-radius: 0 } & .join-item { margin-block-start: calc(var(--border, 1px) * -1) }","kbd":"--radius-kbd: calc(var(--border-radius) * 1.5); --color-kbd: var(--color-base-soft); --color-on-kbd: var(--color-on-base); --kbd--padding-inline: 0.5rem; --kbd--padding-block: 0.25rem; --kbd--font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--kbd--padding-inline); padding-block: var(--kbd--padding-block); font-size: var(--kbd--font-size); font-family: inherit; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; background-color: var(--color-kbd); color: var(--color-on-kbd); border-radius: var(--radius-kbd); border-width: 1px; border-style: solid; border-color: var(--color-base-active); border-block-end-width: 3px; min-width: 1.75rem; text-align: center","kbd-lg":"--kbd--padding-inline: 0.625rem; --kbd--padding-block: 0.3125rem; --kbd--font-size: 1rem","kbd-md":"--kbd--padding-inline: 0.5rem; --kbd--padding-block: 0.25rem; --kbd--font-size: 0.875rem","kbd-sm":"--kbd--padding-inline: 0.4375rem; --kbd--padding-block: 0.1875rem; --kbd--font-size: 0.8125rem","kbd-xl":"--kbd--padding-inline: 0.75rem; --kbd--padding-block: 0.375rem; --kbd--font-size: 1.125rem","kbd-xs":"--kbd--padding-inline: 0.375rem; --kbd--padding-block: 0.125rem; --kbd--font-size: 0.75rem","link":"--link--color: currentColor; cursor: pointer; color: var(--link--color); font-size: var(--link-text-size, 1rem); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: left bottom; background-repeat: no-repeat; background-size: 100% 1px; transition: opacity 200ms ease-out; &:hover { @media (hover: hover) { opacity: 0.65 } } @media (forced-colors: active) { text-decoration: underline } &:focus { outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px } } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }","link-2xl":"--link-text-size: 1.375rem","link-accent":"color: light-dark(var(--color-accent-800), var(--color-accent-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-accent-700), var(--color-accent-300)); opacity: 1 } }","link-error":"color: light-dark(var(--color-error-800), var(--color-error-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-error-700), var(--color-error-300)); opacity: 1 } }","link-hover":"background-position: right bottom; background-size: 0% 1.5px; transition: background-size 300ms ease, background-position 0s, color 200ms ease-out; &:hover { @media (hover: hover) { background-position: left bottom; background-size: 100% 1px; transition: background-size 300ms ease, background-position 0s, color 200ms ease-out } }","link-info":"color: light-dark(var(--color-info-800), var(--color-info-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-info-700), var(--color-info-300)); opacity: 1 } }","link-lg":"--link-text-size: 1.125rem","link-md":"--link-text-size: 1rem","link-neutral":"color: light-dark(var(--color-neutral-800), var(--color-neutral-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-neutral-700), var(--color-neutral-300)); opacity: 1 } }","link-primary":"color: light-dark(var(--color-primary-800), var(--color-primary-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-primary-700), var(--color-primary-300)); opacity: 1 } }","link-secondary":"color: light-dark(var(--color-secondary-800), var(--color-secondary-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-secondary-700), var(--color-secondary-300)); opacity: 1 } }","link-sm":"--link-text-size: 0.875rem","link-success":"color: light-dark(var(--color-success-800), var(--color-success-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-success-700), var(--color-success-300)); opacity: 1 } }","link-warning":"color: light-dark(var(--color-warning-800), var(--color-warning-400)); &:hover { @media (hover: hover) { color: light-dark(var(--color-warning-700), var(--color-warning-300)); opacity: 1 } }","link-xl":"--link-text-size: 1.25rem","link-xs":"--link-text-size: 0.75rem","loading":"--loading--size: 1.5rem; --loading--color: currentColor; --loading--thickness: 2px; display: inline-block; width: var(--loading--size); height: var(--loading--size); border-radius: 9999px; border-width: var(--loading--thickness); border-style: solid; border-color: var(--loading--color); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--loading--color) 25%, transparent) } border-top-color: var(--loading--color); animation: loading-spin 700ms linear infinite; flex-shrink: 0; vertical-align: middle","loading-accent":"--loading--color: var(--color-accent)","loading-bars":"--loading--size: 0.25rem; --loading--color: var(--color-primary); display: inline-flex; gap: calc(var(--loading--size) * 0.75); align-items: flex-end; height: calc(var(--loading--size) * 5); border-radius: 0; border: none; animation: none; background: transparent; width: auto; &::before, &::after { content: \"\"; display: block; width: var(--loading--size); background-color: var(--loading--color); border-radius: 2px; animation: loading-bars 1s ease-in-out infinite } &::before { height: 60%; animation-delay: -0.15s } &::after { height: 100%; animation-delay: 0s }","loading-base":"--loading--color: var(--color-base-active)","loading-current":"--loading--color: currentColor","loading-dots":"--loading--size: 0.5rem; --loading--color: var(--color-primary); display: inline-flex; gap: calc(var(--loading--size) * 0.5); align-items: center; border-radius: 0; border: none; animation: none; background: transparent; width: auto; height: auto; &::before, &::after { content: \"\"; display: block; width: var(--loading--size); height: var(--loading--size); border-radius: 9999px; background-color: var(--loading--color); animation: loading-pulse 1s ease-in-out infinite } &::before { animation-delay: -0.32s } &::after { animation-delay: 0s }","loading-error":"--loading--color: var(--color-error)","loading-info":"--loading--color: var(--color-info)","loading-lg":"--loading--size: 2rem; --loading--thickness: 2.5px","loading-md":"--loading--size: 1.5rem; --loading--thickness: 2px","loading-neutral":"--loading--color: var(--color-neutral)","loading-primary":"--loading--color: var(--color-primary)","loading-secondary":"--loading--color: var(--color-secondary)","loading-sm":"--loading--size: 1.25rem; --loading--thickness: 2px","loading-success":"--loading--color: var(--color-success)","loading-warning":"--loading--color: var(--color-warning)","loading-xl":"--loading--size: 2.5rem; --loading--thickness: 3px","loading-xs":"--loading--size: 1rem; --loading--thickness: 1.5px","marquee":"--marquee--duration: 20s; --marquee--gap: 1rem; --marquee--play-state: running; --marquee--direction: normal; --marquee--axis: calc(-100% - var(--marquee--gap)) 0%; display: flex; gap: var(--marquee--gap); overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none","marquee-fade":"position: relative; &::before, &::after { content: \"\"; pointer-events: none; position: absolute; inset-block: 0; z-index: 1; width: 4rem } &::before { inset-inline-start: 0; background: linear-gradient(to right, var(--color-base), transparent) } &::after { inset-inline-end: 0; background: linear-gradient(to left, var(--color-base), transparent) }","marquee-fast":"--marquee--duration: 10s","marquee-normal":"--marquee--duration: 20s","marquee-pause":"&:hover { --marquee--play-state: paused }","marquee-reverse":"--marquee--direction: reverse","marquee-slow":"--marquee--duration: 40s","marquee-track":"display: flex; flex-shrink: 0; gap: var(--marquee--gap); min-width: 100%; animation: marquee-scroll var(--marquee--duration) linear infinite; animation-play-state: var(--marquee--play-state); animation-direction: var(--marquee--direction); @media (prefers-reduced-motion: reduce) { animation-play-state: paused }","marquee-vertical":"flex-direction: column; --marquee--axis: 0% calc(-100% - var(--marquee--gap)); :where(&) :where(.marquee-track) { flex-direction: column; min-height: 100%; min-width: unset }","mask":"display: inline-block; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center","mask-circle":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100'/%3e%3c/svg%3e\"); --tw-mask-radial-shape: circle","mask-diamond":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e\")","mask-half-1":"-webkit-mask-size: 200%; mask-size: 200%; -webkit-mask-position: left; mask-position: left","mask-half-2":"-webkit-mask-size: 200%; mask-size: 200%; -webkit-mask-position: right; mask-position: right","mask-heart":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' fill-rule='nonzero' d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' fill-rule='nonzero' d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z'/%3e%3c/svg%3e\")","mask-hexagon":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' fill-rule='nonzero' d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' fill-rule='nonzero' d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z'/%3e%3c/svg%3e\")","mask-pentagon":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e\")","mask-squircle":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e\")","mask-star":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e\")","mask-star-2":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e\")","mask-triangle":"-webkit-mask-image: url(\"data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e\"); mask-image: url(\"data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e\")","menu":"--color-menu: var(--color-base-soft); --color-on-menu: var(--color-on-base-soft); --color-menu-active: var(--color-base-active); --radius-menu: calc(var(--border-radius) * 4); list-style: none; padding: 0; margin: 0; display: flex; width: fit-content; flex-direction: column; flex-wrap: wrap; font-size: 0.875rem; border-radius: var(--radius-menu); color: currentColor; :where(ul, li:not(:first-child)) { margin-block-start: 0.375rem } :where(li ul) { list-style: none; padding: 0; margin-block-end: 0; position: relative; margin-block-start: 0rem; margin-inline-start: 0.1rem; padding-inline-start: 1.4rem; white-space: nowrap; font-size: 0.875rem; color: currentColor; &::before { content: \"\"; background-color: var(--color-on-menu); position: absolute; inset-inline-start: 0.7rem; inset-block-start: 0.7rem; inset-block-end: 0rem; opacity: 10%; width: 1px } } :where(summary) { margin-inline: 0.75rem; margin-block: 0.375rem }","menu-active":"--tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px } color: var(--color-on-menu); background-color: var(--color-menu-active)","menu-disabled":"--menu--opacity: 20%; --menu--cursor: not-allowed; --menu--pointer-events: none; opacity: var(--menu--opacity); cursor: var(--menu--cursor); pointer-events: var(--menu--pointer-events)","menu-horizontal":"--menu-horizontal--padding-inline-end: 0.75rem; display: inline-flex; flex-direction: row; :where(ul, li) { margin-block-start: 0.375rem } & > li:not(.menu-title) > details { & > ul { background-color: var(--color-menu); position: absolute; margin-inline-start: 0rem; margin-block-start: 1rem; transform-origin: top; padding-block: 0.5rem; padding-inline-end: 0.5rem; opacity: 0%; scale: 95%; @media (prefers-reduced-motion: no-preference) { @starting-style { scale: 95%; opacity: 0 } animation: menu 0.2s; transition-property: opacity, scale, display; transition-behavior: allow-discrete; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } } &[open] > ul { opacity: 100%; scale: 100% } } & > li > details > ul { &:before { --tw-content: none; content: var(--tw-content) } }","menu-item":"background: none; border: none; font: inherit; width: 100%; color: currentColor; border-radius: calc(var(--radius-menu) / 2); padding-inline: 0.75rem; padding-block: 0.375rem; text-align: start; transition-property: color, background-color, box-shadow; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); text-wrap: balance; -webkit-user-select: none; -moz-user-select: none; user-select: none; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 0.875rem; gap: 0.5rem; display: grid; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; cursor: pointer; padding-inline-end: var(--menu-horizontal--padding-inline-end, 0.75rem); &:hover { @media (hover: hover) { background-color: var(--color-menu); color: var(--color-on-menu) } } &:focus-within { background-color: var(--color-menu); color: var(--color-on-menu); outline-style: none; cursor: pointer; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px } } :where(a, button) { &:focus-visible { outline: 2px solid transparent; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px } } }","menu-lg":":where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-block: 0.375rem; font-size: 1.125rem } --menu-title--padding-block: 0.75rem","menu-md":":where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-block: 0.375rem; font-size: 0.875rem } --menu-title--padding-block: 0.5rem","menu-sm":":where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-block: 0.25rem; font-size: 0.75rem } --menu-title--padding-block: 0.5rem","menu-title":"color: var(--color-base-700); padding-inline: 0.75rem; padding-block: var(--menu-title--padding-block, 0.375rem); font-size: 0.875rem; font-weight: 600","menu-vertical":"flex-direction: column; :where(ul, li) { margin-inline-start: 0.375rem }","menu-xl":":where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-block: 0.375rem; font-size: 1.375rem } --menu-title--padding-block: 0.75rem","menu-xs":":where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-block: 0.25rem; font-size: 0.6875rem } --menu-title--padding-block: 0.25rem","modal":"border: none; color: inherit; --radius-modal: calc(var(--border-radius) * 4); position: fixed; inset: 0; margin: 0; display: grid; align-items: center; justify-items: center; width: 100%; height: 100%; max-width: none; max-height: none; z-index: 999; padding: 0.75rem; overflow: hidden; overscroll-behavior: contain; pointer-events: none; visibility: hidden; background-color: transparent; transition: visibility 200ms ease allow-discrete, overlay 200ms ease allow-discrete; &::backdrop { background-color: light-dark( black, black ); @supports (color: color-mix(in lab, red, red)) { background-color: light-dark( color-mix(in oklch, black 10%, var(--color-base-600) 40%), color-mix(in oklch, black 10%, var(--color-base-400) 40%) ) } opacity: 0; transition: opacity 200ms ease-out } &[open] { pointer-events: auto; visibility: visible; &::backdrop { opacity: 1 } @starting-style { &::backdrop { opacity: 0 } } --modal-content--translate: 0 0; --modal-content--scale: 1; --modal-content--opacity: 1 }","modal-backdrop":"display: grid; grid-column-start: 1; grid-row-start: 1; align-self: stretch; justify-self: stretch; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; cursor: pointer; outline: none; z-index: -1; color: transparent; font-size: 0","modal-bottom":"align-items: end","modal-center":"justify-items: center","modal-content":"translate: var(--modal-content--translate, var(--modal-slide--translate, none)); scale: var(--modal-content--scale, var(--modal-slide--scale, 95%)); opacity: var(--modal-content--opacity, 0); grid-column-start: 1; grid-row-start: 1; width: calc(11 / 12 * 100%); max-width: 32rem; max-height: 100vh; padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-base); border-radius: var(--radius-modal); border: 1px solid var(--color-base-soft); box-shadow: 0 4px 6px -1px light-dark(var(--color-base-950), color-mix(in srgb, black 45%, transparent)), 0 10px 32px -4px light-dark(var(--color-base-950), color-mix(in srgb, black 55%, transparent)); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 4px 6px -1px light-dark(color-mix(in oklch, var(--color-base-950) 12%, transparent), color-mix(in oklch, black 45%, transparent)), 0 10px 32px -4px light-dark(color-mix(in oklch, var(--color-base-950) 10%, transparent), color-mix(in oklch, black 55%, transparent)) } transition: translate 200ms ease-out, scale 200ms ease-out, opacity 200ms ease-out, box-shadow 200ms ease-out; @media (forced-colors: active) { outline: 1px solid }","modal-end":"justify-items: end","modal-middle":"align-items: center","modal-slide-down":"--modal-slide--translate: 0 -100%; --modal-slide--scale: 1","modal-slide-end":"--modal-slide--translate: -100% 0; --modal-slide--scale: 1","modal-slide-start":"--modal-slide--translate: 100% 0; --modal-slide--scale: 1","modal-slide-up":"--modal-slide--translate: 0 100%; --modal-slide--scale: 1","modal-start":"justify-items: start","modal-top":"align-items: start","navbar":"display: flex; width: 100%","navbar-bottom":"--y-end: end; justify-content: var(--y-end); flex-direction: column; row-gap: 0.75rem; & > :where(.navbar-list) { flex-direction: column; align-items: start; row-gap: 0.25rem }","navbar-center":"--x-center: center; justify-self: var(--x-center); flex-direction: row; & > :where(.navbar-list) { flex-direction: row; justify-content: var(--x-center); align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem } & > :where(.navbar-list) > li { width: auto; white-space: nowrap }","navbar-end":"--x-end: end; justify-self: var(--x-end); flex-direction: row; & > :where(.navbar-list) { flex-direction: row; justify-content: var(--x-end); align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem } & > :where(.navbar-list) > li { width: auto; white-space: nowrap }","navbar-list":"display: flex; width: 100%","navbar-middle":"--y-center: center; justify-content: var(--y-center); flex-direction: column; row-gap: 0.75rem; & > :where(.navbar-list) { flex-direction: column; align-items: start; row-gap: 0.25rem }","navbar-start":"--x-start: start; justify-self: var(--x-start); flex-direction: row; & > :where(.navbar-list) { flex-direction: row; justify-content: var(--x-start); align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem } & > :where(.navbar-list) > li { width: auto; white-space: nowrap }","navbar-top":"--y-start: start; justify-content: var(--y-start); flex-direction: column; row-gap: 0.75rem; & > :where(.navbar-list) { flex-direction: column; align-items: start; row-gap: 0.25rem }","para":"text-wrap-style: pretty; font-size: var(--text-base); line-height: 1.6","para-2xl":"text-wrap-style: pretty; font-size: var(--text-2xl); line-height: 1.6","para-3xl":"text-wrap-style: pretty; font-size: var(--text-3xl); line-height: 1.6","para-4xl":"text-wrap-style: pretty; font-size: var(--text-4xl); line-height: 1.6","para-5xl":"text-wrap-style: pretty; font-size: var(--text-5xl); line-height: 1.6","para-6xl":"text-wrap-style: pretty; font-size: var(--text-6xl); line-height: 1.6","para-7xl":"text-wrap-style: pretty; font-size: var(--text-7xl); line-height: 1.6","para-8xl":"text-wrap-style: pretty; font-size: var(--text-8xl); line-height: 1.6","para-9xl":"text-wrap-style: pretty; font-size: var(--text-9xl); line-height: 1.6","para-lg":"text-wrap-style: pretty; font-size: var(--text-lg); line-height: 1.6","para-md":"text-wrap-style: pretty; line-height: 1.6; font-size: var(--text-base)","para-sm":"text-wrap-style: pretty; font-size: var(--text-sm); line-height: 1.6","para-xl":"text-wrap-style: pretty; font-size: var(--text-xl); line-height: 1.6","para-xs":"text-wrap-style: pretty; font-size: var(--text-xs); line-height: 1.6","popover":"--radius-popover: calc(var(--border-radius) * 2); --color-popover: var(--color-base); --color-popover-border: var(--color-base-soft); --popover--anchor-name: --popover-anchor; --popover--position-try: flip-block, flip-inline, flip-block flip-inline; position: relative; display: inline-block; anchor-scope: all","popover-bottom-center":"--popover--position-area: end center; --popover--position-try: none; --popover-placement--mt: 0.5rem; --popover-placement--mb: 0","popover-bottom-end":"--popover--position-area: block-end span-inline-end; --popover--position-try: none; --popover-placement--mt: 0.5rem; --popover-placement--mb: 0","popover-bottom-start":"--popover--position-area: block-end span-inline-start; --popover--position-try: none; --popover-placement--mt: 0.5rem; --popover-placement--mb: 0","popover-content":"border: none; inset: unset; margin: 0; color: inherit; border-radius: var(--radius-popover); padding: 0.6rem; visibility: var(--popover-hover--visibility, hidden); opacity: var(--popover-hover--opacity, 0); z-index: 100; width: max-content; max-width: min(20rem, 90vw); position-anchor: var(--popover--anchor-name); position-area: var(--popover--position-area, block-end span-inline-end); margin-block-start: var(--popover-placement--mt, 0); margin-block-end: var(--popover-placement--mb, 0); margin-inline-start: var(--popover-placement--ms, 0); margin-inline-end: var(--popover-placement--me, 0); position: fixed; position-try-fallbacks: var(--popover--position-try, none); background-color: var(--color-popover); outline-style: solid; outline-width: 1px; outline-color: var(--color-popover-border); transition-property: opacity, visibility, transform; transition-behavior: allow-discrete; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-delay: var(--popover-hover--transition-delay, revert); &:hover { --popover-hover--visibility: visible; --popover-hover--opacity: 1 } &[popover]:popover-open { visibility: visible; opacity: 1; @starting-style { visibility: hidden; opacity: 0 } }","popover-end-bottom":"--popover--position-area: span-end end; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--ms: 0.5rem","popover-end-center":"--popover--position-area: center end; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--ms: 0.5rem","popover-end-top":"--popover--position-area: span-start end; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--ms: 0.5rem","popover-hover":"--popover-hover--transition-delay: 0.2s; &:hover { --popover-hover--opacity: 1; --popover-hover--visibility: visible; --popover-hover--transition-delay: 0 }","popover-start-bottom":"--popover--position-area: span-end start; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--me: 0.5rem","popover-start-center":"--popover--position-area: center start; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--me: 0.5rem","popover-start-top":"--popover--position-area: span-start start; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--me: 0.5rem","popover-toggle":"anchor-name: var(--popover--anchor-name)","popover-top-center":"--popover--position-area: start center; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--mb: 0.5rem","popover-top-end":"--popover--position-area: block-start span-inline-end; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--mb: 0.5rem","popover-top-start":"--popover--position-area: block-start span-inline-start; --popover--position-try: none; --popover-placement--mt: 0; --popover-placement--mb: 0.5rem","progress":"--radius-progress: calc(var(--border-radius) * 2); --color-progress: var(--color-base-active); --color-on-progress: var(--color-base-soft); border: none; border-radius: var(--radius-progress); position: relative; height: calc(var(--spacing) * 2); width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; background-color: var(--color-on-progress); color: var(--color-progress); &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1%, currentColor 10%, #0000 10%,#0000 90%); background-size: 200%; background-position-x: 15%; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite } @supports (-moz-appearance: none) { &::-moz-progress-bar { background-color: transparent; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; background-image: repeating-linear-gradient(90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90%); background-size: 200%; background-position-x: 15% } } } } @supports (-moz-appearance: none) { &::-moz-progress-bar { border-radius: var(--radius-progress); background-color: currentcolor } } @supports (-webkit-appearance: none) { &::-webkit-progress-bar { border-radius: var(--radius-progress); background-color: transparent } &::-webkit-progress-value { border-radius: var(--radius-progress); background-color: currentColor } }","progress-accent":"--color-progress: var(--color-accent)","progress-error":"--color-progress: var(--color-error)","progress-info":"--color-progress: var(--color-info)","progress-neutral":"--color-progress: var(--color-neutral)","progress-primary":"--color-progress: var(--color-primary); --color-on-progress: var(--color-on-primary)","progress-secondary":"--color-progress: var(--color-secondary)","progress-success":"--color-progress: var(--color-success)","progress-warning":"--color-progress: var(--color-warning)","prose-frutjam":"--tw-prose-body: var(--color-body); --tw-prose-headings: var(--color-on-base); --tw-prose-lead: var(--color-on-neutral); --tw-prose-bold: var(--color-on-base); --tw-prose-links: var(--color-primary); --tw-prose-counters: var(--color-neutral); --tw-prose-bullets: var(--color-neutral); --tw-prose-hr: var(--color-base-soft); --tw-prose-quotes: var(--color-on-base); --tw-prose-quote-borders: var(--color-primary); --tw-prose-code: var(--color-on-base); --tw-prose-pre-code: var(--color-on-base); --tw-prose-pre-bg: var(--color-base-soft); --tw-prose-th-borders: var(--color-base-soft); --tw-prose-td-borders: var(--color-base-soft); --tw-prose-captions: var(--color-on-neutral); --tw-prose-kbd: var(--color-body); --tw-prose-invert-body: var(--color-on-neutral); --tw-prose-invert-headings: var(--color-on-base); --tw-prose-invert-links: var(--color-primary)","radial-progress":"--radial-progress--size: var(--size, 5rem); --radial-progress--thickness: var(--thickness, calc(var(--radial-progress--size) * 0.1)); --radial-progress--value: var(--value, 0); --radial-progress--font-size: 1rem; --color-radial-progress: currentColor; --color-radial-progress-track: var(--color-base-soft); width: var(--radial-progress--size); height: var(--radial-progress--size); border-radius: 9999px; display: inline-grid; place-items: center; position: relative; font-size: var(--radial-progress--font-size); font-weight: 600; color: var(--color-on-base); vertical-align: middle; flex-shrink: 0; background: radial-gradient( closest-side, var(--color-base) calc(100% - var(--radial-progress--thickness)), transparent calc(100% - var(--radial-progress--thickness)) ), conic-gradient( var(--color-radial-progress) calc(var(--radial-progress--value) * 1%), var(--color-radial-progress-track) 0 )","radial-progress-accent":"--color-radial-progress: var(--color-accent)","radial-progress-base":"--color-radial-progress: var(--color-base-active)","radial-progress-current":"--color-radial-progress: currentColor","radial-progress-error":"--color-radial-progress: var(--color-error)","radial-progress-info":"--color-radial-progress: var(--color-info)","radial-progress-lg":"--radial-progress--size: 7rem; --radial-progress--thickness: 0.625rem; --radial-progress--font-size: 1.25rem","radial-progress-md":"--radial-progress--size: 5rem; --radial-progress--thickness: 0.5rem; --radial-progress--font-size: 1rem","radial-progress-neutral":"--color-radial-progress: var(--color-neutral)","radial-progress-primary":"--color-radial-progress: var(--color-primary)","radial-progress-secondary":"--color-radial-progress: var(--color-secondary)","radial-progress-sm":"--radial-progress--size: 4rem; --radial-progress--thickness: 0.375rem; --radial-progress--font-size: 0.75rem","radial-progress-success":"--color-radial-progress: var(--color-success)","radial-progress-warning":"--color-radial-progress: var(--color-warning)","radial-progress-xl":"--radial-progress--size: 9rem; --radial-progress--thickness: 0.75rem; --radial-progress--font-size: 1.5rem","radial-progress-xs":"--radial-progress--size: 3rem; --radial-progress--thickness: 0.25rem; --radial-progress--font-size: 0.625rem","radio":"--radius-radio: calc(var(--border-radius) * 1.5); --color-radio: var(--color-base-soft); --color-on-radio: var(--color-on-base); --color-radio-active: var(--color-base-active); --color-radio-soft: var(--color-base-active); --color-on-radio-soft: var(--color-on-base-soft); padding: var(--radio--padding, 0.3125rem); width: var(--radio--width, 1.25rem); height: var(--radio--height, 1.25rem); aspect-ratio: 1 / 1; flex-shrink: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; vertical-align: middle; cursor: pointer; position: relative; background-color: transparent; border-radius: var(--radio--radius, var(--radius-radio)); outline-color: var(--color-radio-active); outline-style: solid; outline-width: 1px; box-shadow: var(--radio--box-shadow); transition: background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease; &::before { content: \"\"; position: absolute; inset: 4px; border-radius: 50%; clip-path: circle(50%); background-color: var(--color-radio-active); opacity: 0; transform: scale(0.4); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms linear } &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark( var(--color-base-950, currentColor), var(--color-base-50, currentColor) ); outline-offset: 3px } &:checked, &[aria-checked=\"true\"] { background-color: transparent; &::before { content: \"\"; opacity: 1; transform: scale(1) } } &:is(:disabled, [disabled], .radio-disabled) { cursor: not-allowed; opacity: 0.3 }","radio-2xl":"--radio--padding: 0.5rem; --radio--width: 2rem; --radio--height: 2rem","radio-accent":"--color-radio: var(--color-accent-soft); --color-on-radio: var(--color-on-accent); --color-radio-active: var(--color-accent-active); --color-radio-soft: var(--color-accent-soft); --color-on-radio-soft: var(--color-on-accent-soft)","radio-circle":"--radio--radius: 9999px","radio-disabled":"cursor: not-allowed; opacity: 0.3; pointer-events: none","radio-error":"--color-radio: var(--color-error-soft); --color-on-radio: var(--color-on-error); --color-radio-active: var(--color-error-active); --color-radio-soft: var(--color-error-soft); --color-on-radio-soft: var(--color-on-error-soft)","radio-info":"--color-radio: var(--color-info-soft); --color-on-radio: var(--color-on-info); --color-radio-active: var(--color-info-active); --color-radio-soft: var(--color-info-soft); --color-on-radio-soft: var(--color-on-info-soft)","radio-lg":"--radio--padding: 0.375rem; --radio--width: 1.5rem; --radio--height: 1.5rem","radio-md":"--radio--padding: 0.3125rem; --radio--width: 1.25rem; --radio--height: 1.25rem","radio-neutral":"--color-radio: var(--color-neutral-soft); --color-on-radio: var(--color-on-neutral); --color-radio-active: var(--color-neutral-active); --color-radio-soft: var(--color-neutral-soft); --color-on-radio-soft: var(--color-on-neutral-soft)","radio-primary":"--color-radio: var(--color-primary-soft); --color-on-radio: var(--color-on-primary); --color-radio-active: var(--color-primary-active); --color-radio-soft: var(--color-primary-soft); --color-on-radio-soft: var(--color-on-primary-soft)","radio-rounded":"--radio--radius: calc(var(--border-radius) * 4)","radio-secondary":"--color-radio: var(--color-secondary-soft); --color-on-radio: var(--color-on-secondary); --color-radio-active: var(--color-secondary-active); --color-radio-soft: var(--color-secondary-soft); --color-on-radio-soft: var(--color-on-secondary-soft)","radio-sm":"--radio--padding: 0.25rem; --radio--width: 1rem; --radio--height: 1rem","radio-square":"--radio--radius: calc(var(--border-radius) * 2)","radio-success":"--color-radio: var(--color-success-soft); --color-on-radio: var(--color-on-success); --color-radio-active: var(--color-success-active); --color-radio-soft: var(--color-success-soft); --color-on-radio-soft: var(--color-on-success-soft)","radio-warning":"--color-radio: var(--color-warning-soft); --color-on-radio: var(--color-on-warning); --color-radio-active: var(--color-warning-active); --color-radio-soft: var(--color-warning-soft); --color-on-radio-soft: var(--color-on-warning-soft)","radio-xl":"--radio--padding: 0.4375rem; --radio--width: 1.75rem; --radio--height: 1.75rem","radio-xs":"--radio--padding: 0.1875rem; --radio--width: 0.75rem; --radio--height: 0.75rem","range":"--radius-range: 9999px; --color-range: var(--color-base-active); --color-on-range: var(--color-base-soft); --range--height: 0.375rem; --range--thumb-size: 1.25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: var(--range--thumb-size); border-radius: var(--radius-range); background-color: transparent; cursor: pointer; outline: none; display: block; &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border: none; width: var(--range--thumb-size); height: var(--range--thumb-size); border-radius: 9999px; background-color: var(--color-range); cursor: pointer; margin-top: calc((var(--range--height) - var(--range--thumb-size)) / 2); -webkit-transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out } &::-webkit-slider-thumb:hover { transform: scale(1.15) } &::-moz-range-thumb { width: var(--range--thumb-size); height: var(--range--thumb-size); border-radius: 9999px; background-color: var(--color-range); border: none; cursor: pointer; -moz-transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out } &::-moz-range-thumb:hover { transform: scale(1.15) } &::-webkit-slider-runnable-track { background-color: var(--color-on-range); border-radius: var(--radius-range); height: var(--range--height) } &::-moz-range-track { background-color: var(--color-on-range); border-radius: var(--radius-range); height: var(--range--height) } &:focus-visible { &::-webkit-slider-thumb { outline-width: 2px; outline-style: solid; outline-color: var(--color-on-base); outline-offset: 3px } &::-moz-range-thumb { outline-width: 2px; outline-style: solid; outline-color: var(--color-on-base); outline-offset: 3px } } &:disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none }","range-accent":"--color-range: var(--color-accent); --color-on-range: var(--color-accent-soft)","range-error":"--color-range: var(--color-error); --color-on-range: var(--color-error-soft)","range-info":"--color-range: var(--color-info); --color-on-range: var(--color-info-soft)","range-lg":"--range--height: 0.5rem; --range--thumb-size: 1.5rem","range-md":"--range--height: 0.375rem; --range--thumb-size: 1.25rem","range-neutral":"--color-range: var(--color-neutral); --color-on-range: var(--color-neutral-soft)","range-primary":"--color-range: var(--color-primary); --color-on-range: var(--color-primary-soft)","range-secondary":"--color-range: var(--color-secondary); --color-on-range: var(--color-secondary-soft)","range-sm":"--range--height: 0.25rem; --range--thumb-size: 1rem","range-success":"--color-range: var(--color-success); --color-on-range: var(--color-success-soft)","range-warning":"--color-range: var(--color-warning); --color-on-range: var(--color-warning-soft)","range-xl":"--range--height: 0.625rem; --range--thumb-size: 1.75rem","range-xs":"--range--height: 0.2rem; --range--thumb-size: 0.875rem","rate":"--color-rate: var(--color-warning); --color-rate-empty: var(--color-base-soft); --rate--size: 1.5rem; --rate--fill: var(--color-rate-empty); -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; cursor: pointer; width: var(--rate--width, var(--rate--size)); height: var(--rate--size); display: inline-block; flex-shrink: 0; background-color: var(--rate--fill); -webkit-mask-size: var(--rate--mask-size, contain); mask-size: var(--rate--mask-size, contain); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: var(--rate--mask-position, center); mask-position: var(--rate--mask-position, center); transition: background-color 150ms ease-in-out; &:checked, &[aria-checked=\"true\"] { --rate--fill: var(--color-rate) } &:has(~ .rate:is(:checked, [aria-checked=\"true\"])) { --rate--fill: var(--color-rate) } &:hover { --rate--fill: var(--color-rate) } &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark(var(--color-base-950), var(--color-base-50)); outline-offset: 3px; border-radius: 2px }","rate-accent":"--color-rate: var(--color-accent)","rate-error":"--color-rate: var(--color-error)","rate-info":"--color-rate: var(--color-info)","rate-neutral":"--color-rate: var(--color-neutral)","rate-primary":"--color-rate: var(--color-primary)","rate-secondary":"--color-rate: var(--color-secondary)","rate-success":"--color-rate: var(--color-success)","rate-warning":"--color-rate: var(--color-warning)","rating":"display: inline-flex; gap: 0.125rem; align-items: center; &:hover .rate { --rate--fill: var(--color-rate) } &:hover .rate:hover ~ .rate { --rate--fill: var(--color-rate-empty) }","rating-half":"gap: 0; --rate--width: calc(var(--rate--size) / 2); --rate--mask-size: 200%; --rate--mask-position: left; :where(&) :where(.rate:nth-child(even)) { --rate--mask-position: right }","rating-lg":"--rate--size: 2rem","rating-md":"--rate--size: 1.5rem","rating-sm":"--rate--size: 1.25rem","rating-xl":"--rate--size: 2.5rem","rating-xs":"--rate--size: 1rem","select":"font: inherit; --radius-select: calc(var(--border-radius) * 2); --color-select-active: var(--color-base-active); --select--inline: 0.75rem; --select--block: 0.625rem; --select--font-size: 1rem; border-width: 1px; border-style: solid; border-color: var(--color-select-active); background-color: transparent; background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-inline: var(--select--inline); padding-inline-end: 2.5rem; padding-block: var(--select--block); font-size: var(--select--font-size); color: var(--color-on-base); display: inline-flex; align-self: flex-start; flex-shrink: 0; align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--radius-select); vertical-align: middle; white-space: nowrap; position: relative; cursor: pointer; transition: border-color 250ms; transition-timing-function: ease-in-out; &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark(var(--color-base-950), var(--color-base-50)); outline-offset: 3px } &:focus, &:focus-within { border-color: light-dark(var(--color-base-800), var(--color-base-300)); @supports (color: color-mix(in lab, red, red)) { border-color: light-dark(var(--color-base-800), color-mix(in oklab, var(--color-base-300) 80%, transparent)) } } &:disabled { cursor: not-allowed; opacity: 0.6; pointer-events: none; background-color: var(--color-base-soft); -webkit-user-select: none; -moz-user-select: none; user-select: none } @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; &::picker-icon { display: none } &::picker(select) { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; background-color: var(--color-base); color: var(--color-on-base); border-width: 1px; border-style: solid; border-color: var(--color-base-active); border-radius: var(--radius-select); padding: 0.375rem; margin-block: 0.375rem; box-shadow: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1) } option { border-radius: calc(var(--radius-select) - 2px); padding-inline: 0.625rem; padding-block: 0.375rem; cursor: pointer; transition: background-color 150ms ease-in-out; &::checkmark { color: var(--color-select-active) } &:not(:disabled) { &:hover, &:focus-visible { background-color: var(--color-base-soft); outline: none } } &:disabled { opacity: 0.4; cursor: not-allowed } } }","select-2xl":"--select--inline: 1.25rem; --select--block: 1rem; --select--font-size: 1.025rem","select-accent":"--color-select-active: var(--color-accent-active); &:focus, &:focus-within { border-color: var(--color-accent-400) }","select-dashed":"border-style: dashed","select-error":"--color-select-active: var(--color-error-active); &:focus, &:focus-within { border-color: var(--color-error-400) }","select-ghost":"border-color: transparent; background-color: transparent; &:focus, &:focus-within { border-color: var(--color-select-active) }","select-info":"--color-select-active: var(--color-info-active); &:focus, &:focus-within { border-color: var(--color-info-400) }","select-lg":"--select--inline: 0.9rem; --select--block: 0.75rem; --select--font-size: 1rem","select-md":"--select--inline: 0.75rem; --select--block: 0.625rem; --select--font-size: 1rem","select-neutral":"--color-select-active: var(--color-neutral-active); &:focus, &:focus-within { border-color: var(--color-neutral-400) }","select-primary":"--color-select-active: var(--color-primary-active); &:focus, &:focus-within { border-color: var(--color-primary-400) }","select-secondary":"--color-select-active: var(--color-secondary-active); &:focus, &:focus-within { border-color: var(--color-secondary-400) }","select-sm":"--select--inline: 0.6rem; --select--block: 0.5rem; --select--font-size: 0.875rem","select-soft":"background-color: var(--color-select-soft, var(--color-base-soft)); border-color: transparent","select-success":"--color-select-active: var(--color-success-active); &:focus, &:focus-within { border-color: var(--color-success-400) }","select-warning":"--color-select-active: var(--color-warning-active); &:focus, &:focus-within { border-color: var(--color-warning-400) }","select-xl":"--select--inline: 1rem; --select--block: 0.875rem; --select--font-size: 1rem","select-xs":"--select--inline: 0.475rem; --select--block: 0.375rem; --select--font-size: 0.75rem","sidebar":"display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto; overflow-x: hidden; position: sticky; max-height: calc(100dvh - (var(--spacing) * 14.25)); border-inline-style: solid; border-inline-width: 1px; border-color: var(--color-base-soft); background-color: var(--color-base)","skeleton":"--color-skeleton: var(--color-base-soft); --color-skeleton-shine: var(--color-base-active); --radius-skeleton: calc(var(--border-radius) * 2); border-radius: var(--radius-skeleton); background-color: var(--color-skeleton); background-image: linear-gradient( 90deg, transparent 0%, var(--color-skeleton-shine) 50%, transparent 100% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; color: transparent; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none","skeleton-circle":"border-radius: 9999px; aspect-ratio: 1 / 1","skeleton-text":"background-image: linear-gradient( 105deg, var(--color-on-base) 0% 40%, var(--color-on-base) 50%, var(--color-on-base) 60% 100% ); @supports (color: color-mix(in lab, red, red)) { background-image: linear-gradient( 105deg, color-mix(in oklch, var(--color-on-base) 20%, transparent) 0% 40%, var(--color-on-base) 50%, color-mix(in oklch, var(--color-on-base) 20%, transparent) 60% 100% ) } -webkit-background-clip: text; background-clip: text","stat":"display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 0.25rem 1rem; padding: 1.25rem 1.5rem; & + & { border-inline-start: 1px solid var(--color-base-soft) }","stat-accent":"& .stat-value { color: var(--color-accent) }","stat-desc":"font-size: 0.75rem; color: var(--color-base-700); grid-column: 1; grid-row: 3","stat-error":"& .stat-value { color: var(--color-error) }","stat-figure":"grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; color: var(--color-primary)","stat-info":"& .stat-value { color: var(--color-info) }","stat-neutral":"& .stat-value { color: var(--color-neutral) }","stat-primary":"& .stat-value { color: var(--color-primary) }","stat-secondary":"& .stat-value { color: var(--color-secondary) }","stat-success":"& .stat-value { color: var(--color-success) }","stat-title":"font-size: 0.875rem; font-weight: 500; color: var(--color-base-700); grid-column: 1; grid-row: 1; white-space: nowrap","stat-value":"font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--color-on-base); grid-column: 1; grid-row: 2; white-space: nowrap","stat-warning":"& .stat-value { color: var(--color-warning) }","stats":"display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: calc(var(--border-radius) * 3); border-width: 1px; border-style: solid; border-color: var(--color-base-soft); background-color: var(--color-base); overflow: hidden; width: fit-content","stats-horizontal":"grid-auto-flow: column; grid-auto-rows: unset; grid-auto-columns: 1fr; & .stat + .stat { border-block-start: none; border-inline-start: 1px solid var(--color-base-soft) }","stats-vertical":"grid-auto-flow: row; grid-auto-columns: unset; grid-auto-rows: 1fr; & .stat + .stat { border-inline-start: none; border-block-start: 1px solid var(--color-base-soft) }","status":"display: inline-block; vertical-align: middle; flex-shrink: 0; aspect-ratio: 1 / 1; width: var(--status--size, 0.625rem); border-radius: 9999px; background-color: var(--color-status, var(--color-on-base)); @supports (color: color-mix(in lab, red, red)) { background-color: var(--color-status, color-mix(in oklab, var(--color-on-base) 25%, transparent)) } outline: 2px solid var(--color-base); outline-offset: 1px","status-accent":"--color-status: var(--color-accent)","status-error":"--color-status: var(--color-error)","status-info":"--color-status: var(--color-info)","status-lg":"--status--size: 0.875rem","status-md":"--status--size: 0.625rem","status-neutral":"--color-status: var(--color-neutral)","status-primary":"--color-status: var(--color-primary)","status-secondary":"--color-status: var(--color-secondary)","status-sm":"--status--size: 0.5rem","status-success":"--color-status: var(--color-success)","status-warning":"--color-status: var(--color-warning)","status-xl":"--status--size: 1.125rem","status-xs":"--status--size: 0.375rem","step":"--color-step: var(--color-base-soft); --color-on-step: var(--color-on-base); --color-step-active: var(--color-primary); --color-on-step-active: var(--color-on-primary); --step--size: 2rem; --step--font-size: 0.875rem; display: grid; grid-template-columns: auto; grid-template-rows: auto 1fr; place-items: center; text-align: center; min-width: 4rem; counter-increment: step; &::before { content: \"\"; display: block; height: 2px; width: 100%; background-color: var(--color-step); grid-column: 1; grid-row: 1; margin-inline: -50%; z-index: 0; transition: background-color 200ms ease-in-out } &::after { content: counter(step); display: flex; align-items: center; justify-content: center; width: var(--step--size); height: var(--step--size); border-radius: 9999px; background-color: var(--color-step); color: var(--color-on-step); font-size: 0.75rem; font-weight: 600; z-index: 1; position: relative; grid-column: 1; grid-row: 1; transition: background-color 200ms ease-in-out, color 200ms ease-in-out } & > span, &:not(:empty) { font-size: var(--step--font-size); margin-block-start: 0.5rem; color: currentColor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch, currentColor 70%, transparent) } grid-row: 2 }","step-accent":"--color-step: var(--color-accent); --color-on-step: var(--color-on-accent); &::after { background-color: var(--color-accent); color: var(--color-on-accent) } &::before { background-color: var(--color-accent) }","step-error":"--color-step: var(--color-error); --color-on-step: var(--color-on-error); &::after { background-color: var(--color-error); color: var(--color-on-error) } &::before { background-color: var(--color-error) }","step-info":"--color-step: var(--color-info); --color-on-step: var(--color-on-info); &::after { background-color: var(--color-info); color: var(--color-on-info) } &::before { background-color: var(--color-info) }","step-neutral":"--color-step: var(--color-neutral); --color-on-step: var(--color-on-neutral); &::after { background-color: var(--color-neutral); color: var(--color-on-neutral) } &::before { background-color: var(--color-neutral) }","step-primary":"--color-step: var(--color-primary); --color-on-step: var(--color-on-primary); &::after { background-color: var(--color-primary); color: var(--color-on-primary) } &::before { background-color: var(--color-primary) }","step-secondary":"--color-step: var(--color-secondary); --color-on-step: var(--color-on-secondary); &::after { background-color: var(--color-secondary); color: var(--color-on-secondary) } &::before { background-color: var(--color-secondary) }","step-success":"--color-step: var(--color-success); --color-on-step: var(--color-on-success); &::after { background-color: var(--color-success); color: var(--color-on-success) } &::before { background-color: var(--color-success) }","step-warning":"--color-step: var(--color-warning); --color-on-step: var(--color-on-warning); &::after { background-color: var(--color-warning); color: var(--color-on-warning) } &::before { background-color: var(--color-warning) }","steps":"display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; overflow: hidden; overflow-x: auto; counter-reset: step; list-style: none; padding: 0; margin: 0","steps-horizontal":"grid-auto-flow: column; grid-auto-rows: unset; grid-auto-columns: 1fr","steps-vertical":"grid-auto-flow: row; grid-auto-columns: unset; grid-auto-rows: auto","surface":"--surface--bg-color: var(--color-base); --surface--color: var(--color-on-base); background-color: var(--surface--bg-color); color: var(--surface--color); padding: var(--surface--padding)","surface-1":"--surface--bg-color: var(--color-base-soft); --surface--color: var(--color-on-base)","surface-2":"--surface--bg-color: var(--color-base-active); --surface--color: var(--color-on-base)","surface-dashed":"background-color: transparent; border-width: 1px; border-style: dashed; border-color: var(--color-base-soft)","surface-lg":"--surface--padding: 2rem","surface-md":"--surface--padding: 1.5rem","surface-outline":"background-color: transparent; border-width: 1px; border-style: solid; border-color: var(--color-base-soft)","surface-rounded":"border-radius: calc(var(--border-radius) * 2)","surface-sm":"--surface--padding: 1rem","surface-xl":"--surface--padding: 2.5rem","surface-xs":"--surface--padding: 0.5rem","swap":"position: relative; display: inline-grid; place-items: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; :where(&) :where(input[type=\"checkbox\"]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0 } :where(&) :where(.swap-on), :where(&) :where(.swap-off), :where(&) :where(.swap-indeterminate) { grid-column: 1; grid-row: 1; transition: opacity 300ms ease-in-out, rotate 300ms ease-in-out, transform 300ms ease-in-out } :where(&) :where(.swap-on), :where(&) :where(.swap-indeterminate) { opacity: 0; pointer-events: none } :where(&) :where(.swap-off) { opacity: 1 } &:is(:has(input:checked), .swap-active) { :where(.swap-on) { opacity: 1; pointer-events: auto } :where(.swap-off) { opacity: 0; pointer-events: none } } &:has(input:indeterminate) { :where(.swap-indeterminate) { opacity: 1; pointer-events: auto } :where(.swap-on) { opacity: 0; pointer-events: none } }","swap-flip":"perspective: 16rem; :where(&) :where(.swap-on), :where(&) :where(.swap-indeterminate) { backface-visibility: hidden; transform: rotateY(180deg) } :where(&) :where(.swap-off) { backface-visibility: hidden; transform: rotateY(0deg) } &:is(:has(input:checked), .swap-active) { :where(.swap-off) { transform: rotateY(-180deg) } :where(.swap-on), :where(.swap-indeterminate) { transform: rotateY(0deg) } }","swap-rotate":":where(&) :where(.swap-on), :where(&) :where(.swap-indeterminate) { rotate: 45deg } &:is(:has(input:checked), .swap-active) :where(.swap-off) { rotate: -45deg } &:is(:has(input:checked), .swap-active) :where(.swap-on), &:is(:has(input:checked), .swap-active) :where(.swap-indeterminate) { rotate: 0deg }","tab":"--color-tab: currentColor; --color-tab-active: var(--color-primary); --tab--padding-inline: 1rem; --tab--padding-block: 0.625rem; --tab--font-size: 0.875rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: var(--tab--padding-inline); padding-block: var(--tab--padding-block); font-size: var(--tab--font-size); font-weight: 500; cursor: pointer; transition: color 200ms ease-in-out, border-color 200ms ease-in-out; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: transparent; &::after { content: attr(aria-label) } &:not(.btn) { border-radius: 0; color: var(--color-tab); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-tab) 60%, transparent) } &:hover { @media (hover: hover) { color: var(--color-tab) } } &:checked { color: var(--color-tab-active) } }","tab-active":"color: var(--color-tab-active)","tab-content":"display: none; width: 100%; order: 9999; .tab:checked + & { display: block } .tab-active + & { display: block }","tab-disabled":"cursor: not-allowed; opacity: 0.4; pointer-events: none","table":"--radius-table: calc(var(--border-radius) * 4); --color-table: var(--color-base); --color-table-soft: var(--color-base-soft); --color-on-table-soft: var(--color-on-base-soft); --color-table-active: var(--color-base-active); border-collapse: collapse; position: relative; width: 100%; text-align: start; border-radius: var(--radius-table); font-size: var(--text-base); :where(th, td) { padding-inline: 1rem; padding-block: 0.75rem; vertical-align: middle; text-align: start } :where(thead, tfoot) { font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: var(--color-on-table-soft) } :where(tfoot) { border-block-start: 1px solid var(--color-table-soft) } :where(thead tr, tbody tr:not(:last-child)) { border-block-end: 1px solid var(--color-table-soft) } display: table","table-hover":":where(&) :where(tbody tr) { transition-property: background-color; transition-duration: 150ms; transition-timing-function: linear } :where(&) :where(tbody tr):hover { background-color: var(--color-table-soft) }","table-lg":":where(&) :where(:not(thead, tfoot) tr) { font-size: 1.125rem } :where(&) :where(th, td) { padding-inline: 1.25rem; padding-block: 1rem }","table-md":":where(&) :where(:not(thead, tfoot) tr) { font-size: 0.875rem } :where(&) :where(th, td) { padding-inline: 1rem; padding-block: 0.75rem }","table-pin-cols":":where(&) :where(tr th) { position: sticky; inset-inline-start: 0; inset-inline-end: 0; background-color: var(--color-table) }","table-pin-rows":":where(&) :where(thead tr) { position: sticky; inset-block-start: 0; background-color: var(--color-table); z-index: 1 }","table-sm":":where(&) :where(:not(thead, tfoot) tr) { font-size: 0.75rem } :where(&) :where(th, td) { padding-inline: 0.75rem; padding-block: 0.5rem }","table-xl":":where(&) :where(:not(thead, tfoot) tr) { font-size: 1.375rem } :where(&) :where(th, td) { padding-inline: 1.5rem; padding-block: 1.25rem }","table-xs":":where(&) :where(:not(thead, tfoot) tr) { font-size: 0.6875rem } :where(&) :where(th, td) { padding-inline: 0.5rem; padding-block: 0.25rem }","table-zebra":":where(&) :where(tbody tr:nth-child(even)) { background-color: var(--color-table-soft) }","table-zebra-cols":":where(&) :where(tbody tr td:nth-child(even)) { background-color: var(--color-table-soft) }","table-zebra-rows":":where(&) :where(tbody tr:nth-child(even)) { background-color: var(--color-table-soft) }","tabs":"display: var(--tabs--display, flex); flex-wrap: wrap; gap: 0","tabs-bottom":"align-items: flex-start; &::after { display: none } &::before { content: \"\"; width: 100%; order: -1; border-block-end: 1px solid var(--color-base-soft) } & > .tab { border-block-start: 2px solid transparent; margin-block-start: -2px } & > .tab-active, & > .tab:checked { border-block-start-color: var(--color-tab-active); position: relative; z-index: 1 } & > .tab-content { order: -2 }","tabs-box":"background-color: var(--color-base-soft); border-radius: calc(var(--border-radius) * 2); padding: 0.25rem; gap: 0.25rem; align-items: center; &::after { display: none } & > .tab { border-radius: calc(var(--border-radius) * 1.5) } & > .tab-active, & > .tab:checked { background-color: var(--color-base); color: var(--color-on-base); box-shadow: 0 1px 3px color-mix(in oklab, oklch(0% 0 0) 10%, transparent) }","tabs-end":"justify-content: flex-end","tabs-lg":"& > .tab { --tab--padding-inline: 1.25rem; --tab--padding-block: 0.75rem; --tab--font-size: 1rem }","tabs-lifted":"align-items: flex-end; gap: 0; &::after { content: \"\"; width: 100%; order: 1; border-block-start: 1px solid var(--color-base-soft) } & > .tab { border: 1px solid transparent; border-block-end: none; &:not(.btn) { border-radius: calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) 0 0 } } & > .tab-active, & > .tab:checked { color: var(--color-on-base); border-color: var(--color-base-soft); background-color: var(--color-base); position: relative; z-index: 1; margin-block-end: -1px } & > .tab-content { border: 1px solid var(--color-base-soft); margin-block-start: -1px; border-radius: 0 calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) }","tabs-md":"& > .tab { --tab--padding-inline: 1rem; --tab--padding-block: 0.625rem; --tab--font-size: 0.875rem }","tabs-sm":"& > .tab { --tab--padding-inline: 0.75rem; --tab--padding-block: 0.5rem; --tab--font-size: 0.8125rem }","tabs-underline":"align-items: flex-end; &::after { content: \"\"; width: 100%; order: 1; border-block-start: 1px solid var(--color-base-soft) } & > .tab { border-block-end: 2px solid transparent; margin-block-end: -2px } & > .tab-active, & > .tab:checked { border-block-end-color: var(--color-tab-active); position: relative; z-index: 1 }","tabs-vertical":"--tabs--display: grid; display: grid; grid-template-columns: max-content 1fr; align-items: start; &::after { display: none } &::before { content: \"\"; grid-column: 2; grid-row: 1 / span 999; align-self: stretch; border-inline-start: 1px solid var(--color-base-soft); pointer-events: none } & > .tab { grid-column: 1; width: 100%; justify-content: flex-start; border-inline-end: 2px solid transparent; margin-inline-end: -2px; border-radius: 0 } & > .tab-active, & > .tab:checked { border-inline-end-color: var(--color-tab-active); position: relative; z-index: 1 } & > .tab-content { grid-column: 2; grid-row: 1 / span 999 }","tabs-xl":"& > .tab { --tab--padding-inline: 1.5rem; --tab--padding-block: 0.875rem; --tab--font-size: 1.125rem }","tabs-xs":"& > .tab { --tab--padding-inline: 0.625rem; --tab--padding-block: 0.375rem; --tab--font-size: 0.75rem }","tag":"--radius-tag: 9999px; --color-tag: var(--color-base-soft); --color-on-tag: var(--color-on-base); --tag--padding-inline: 0.625rem; --tag--padding-block: 0.25rem; --tag--font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 0.375rem; padding-inline: var(--tag--padding-inline); padding-block: var(--tag--padding-block); font-size: var(--tag--font-size); font-weight: 500; line-height: 1.4; border-radius: var(--radius-tag); background-color: var(--color-tag); color: var(--color-on-tag); vertical-align: middle; white-space: nowrap; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 1px; border-style: solid; border-color: transparent","tag-accent":"--color-tag: var(--color-accent); --color-on-tag: var(--color-on-accent)","tag-error":"--color-tag: var(--color-error); --color-on-tag: var(--color-on-error)","tag-info":"--color-tag: var(--color-info); --color-on-tag: var(--color-on-info)","tag-lg":"--tag--padding-inline: 0.75rem; --tag--padding-block: 0.3125rem; --tag--font-size: 0.9375rem","tag-md":"--tag--padding-inline: 0.625rem; --tag--padding-block: 0.25rem; --tag--font-size: 0.8125rem","tag-neutral":"--color-tag: var(--color-neutral); --color-on-tag: var(--color-on-neutral)","tag-outline":"background-color: transparent; border-color: var(--color-tag); color: var(--color-tag)","tag-primary":"--color-tag: var(--color-primary); --color-on-tag: var(--color-on-primary)","tag-remove":"display: inline-flex; align-items: center; justify-content: center; width: 1.125em; height: 1.125em; border-radius: 9999px; background-color: currentColor; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentColor 20%, transparent) } color: currentColor; cursor: pointer; font-size: 0.875em; line-height: 1; transition: background-color 150ms ease-in-out; flex-shrink: 0; &:hover { @media (hover: hover) { background-color: currentColor; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentColor 35%, transparent) } } }","tag-secondary":"--color-tag: var(--color-secondary); --color-on-tag: var(--color-on-secondary)","tag-sm":"--tag--padding-inline: 0.5rem; --tag--padding-block: 0.1875rem; --tag--font-size: 0.75rem","tag-soft":"background-color: var(--color-tag); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-tag) 15%, transparent) } color: var(--color-tag); border-color: transparent","tag-square":"--radius-tag: calc(var(--border-radius) * 1.5)","tag-success":"--color-tag: var(--color-success); --color-on-tag: var(--color-on-success)","tag-warning":"--color-tag: var(--color-warning); --color-on-tag: var(--color-on-warning)","tag-xl":"--tag--padding-inline: 0.875rem; --tag--padding-block: 0.375rem; --tag--font-size: 1rem","tag-xs":"--tag--padding-inline: 0.4375rem; --tag--padding-block: 0.125rem; --tag--font-size: 0.6875rem","textarea":"font: inherit; --radius-textarea: calc(var(--border-radius) * 2); --color-textarea: var(--color-base-soft); --color-on-textarea: var(--color-on-base-soft); --color-textarea-active: var(--color-base-active); --color-on-textarea-active: var(--color-on-base); --textarea--inline: 0.75rem; --textarea--block: 0.625rem; --textarea--font-size: 1rem; border-width: 1px; border-style: solid; border-color: var(--color-textarea-active); background-color: transparent; padding-inline: var(--textarea--inline); padding-block: var(--textarea--block); font-size: var(--textarea--font-size); color: var(--color-on-base); display: block; align-self: flex-start; align-items: flex-start; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--radius-textarea); vertical-align: middle; white-space: pre-wrap; position: relative; font-weight: 500; width: 100%; min-height: var(--textarea--min-height, 5rem); resize: vertical; transition: border-color 250ms; transition-timing-function: ease-in-out; &::-moz-placeholder { font-size: var(--textarea--font-size); color: var(--color-on-base); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-on-base) 30%, transparent) } font-weight: 400 } &::placeholder { font-size: var(--textarea--font-size); color: var(--color-on-base); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-on-base) 30%, transparent) } font-weight: 400 } &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark(var(--color-base-950), var(--color-base-50)); outline-offset: 3px } &:focus, &:focus-within { border-color: light-dark(var(--color-base-800), var(--color-base-300)); @supports (color: color-mix(in lab, red, red)) { border-color: light-dark(var(--color-base-800), color-mix(in oklab, var(--color-base-300) 80%, transparent)) } } &:disabled { cursor: not-allowed; opacity: 0.6; pointer-events: none; background-color: var(--color-base-soft); -webkit-user-select: none; -moz-user-select: none; user-select: none }","textarea-2xl":"--textarea--inline: 1.25rem; --textarea--block: 1rem; --textarea--font-size: 1.025rem; --textarea--min-height: 10rem","textarea-accent":"--color-textarea: var(--color-accent); --color-on-textarea: var(--color-on-accent); --color-textarea-soft: var(--color-accent-soft); --color-on-textarea-soft: var(--color-on-accent-soft); --color-textarea-active: var(--color-accent-active); --color-on-textarea-active: var(--color-on-accent); &:focus, &:focus-within { border-color: var(--color-accent-400) }","textarea-dashed":"border-style: dashed","textarea-error":"--color-textarea: var(--color-error); --color-on-textarea: var(--color-on-error); --color-textarea-soft: var(--color-error-soft); --color-on-textarea-soft: var(--color-on-error-soft); --color-textarea-active: var(--color-error-active); --color-on-textarea-active: var(--color-on-error); &:focus, &:focus-within { border-color: var(--color-error-400) }","textarea-ghost":"border-color: transparent; background-color: transparent; &:focus, &:focus-within { border-color: var(--color-textarea-active) }","textarea-info":"--color-textarea: var(--color-info); --color-on-textarea: var(--color-on-info); --color-textarea-soft: var(--color-info-soft); --color-on-textarea-soft: var(--color-on-info-soft); --color-textarea-active: var(--color-info-active); --color-on-textarea-active: var(--color-on-info); &:focus, &:focus-within { border-color: var(--color-info-400) }","textarea-lg":"--textarea--inline: 0.9rem; --textarea--block: 0.75rem; --textarea--font-size: 1rem; --textarea--min-height: 6.5rem","textarea-md":"--textarea--inline: 0.75rem; --textarea--block: 0.625rem; --textarea--font-size: 1rem; --textarea--min-height: 5rem","textarea-neutral":"--color-textarea: var(--color-neutral); --color-on-textarea: var(--color-on-neutral); --color-textarea-soft: var(--color-neutral-soft); --color-on-textarea-soft: var(--color-on-neutral-soft); --color-textarea-active: var(--color-neutral-active); --color-on-textarea-active: var(--color-on-neutral); &:focus, &:focus-within { border-color: var(--color-neutral-400) }","textarea-primary":"--color-textarea: var(--color-primary); --color-on-textarea: var(--color-on-primary); --color-textarea-soft: var(--color-primary-soft); --color-on-textarea-soft: var(--color-on-primary-soft); --color-textarea-active: var(--color-primary-active); --color-on-textarea-active: var(--color-on-primary); &:focus, &:focus-within { border-color: var(--color-primary-400) }","textarea-secondary":"--color-textarea: var(--color-secondary); --color-on-textarea: var(--color-on-secondary); --color-textarea-soft: var(--color-secondary-soft); --color-on-textarea-soft: var(--color-on-secondary-soft); --color-textarea-active: var(--color-secondary-active); --color-on-textarea-active: var(--color-on-secondary); &:focus, &:focus-within { border-color: var(--color-secondary-400) }","textarea-sm":"--textarea--inline: 0.6rem; --textarea--block: 0.5rem; --textarea--font-size: 0.875rem; --textarea--min-height: 4rem","textarea-soft":"background-color: var(--color-textarea-soft); border-color: transparent; color: var(--color-on-textarea-soft)","textarea-success":"--color-textarea: var(--color-success); --color-on-textarea: var(--color-on-success); --color-textarea-soft: var(--color-success-soft); --color-on-textarea-soft: var(--color-on-success-soft); --color-textarea-active: var(--color-success-active); --color-on-textarea-active: var(--color-on-success); &:focus, &:focus-within { border-color: var(--color-success-400) }","textarea-warning":"--color-textarea: var(--color-warning); --color-on-textarea: var(--color-on-warning); --color-textarea-soft: var(--color-warning-soft); --color-on-textarea-soft: var(--color-on-warning-soft); --color-textarea-active: var(--color-warning-active); --color-on-textarea-active: var(--color-on-warning); &:focus, &:focus-within { border-color: var(--color-warning-400) }","textarea-xl":"--textarea--inline: 1rem; --textarea--block: 0.875rem; --textarea--font-size: 1rem; --textarea--min-height: 8rem","textarea-xs":"--textarea--inline: 0.475rem; --textarea--block: 0.375rem; --textarea--font-size: 0.75rem; --textarea--min-height: 3rem","timeline":"list-style: none; padding: 0; margin: 0; position: relative; display: flex","timeline-accent":"--timeline-line-color: var(--color-accent); & .timeline-middle { background-color: var(--color-accent) }","timeline-end":"grid-column: 3; padding-inline-start: 0.5rem; font-size: 0.875rem; color: currentColor; align-self: center","timeline-error":"--timeline-line-color: var(--color-error); & .timeline-middle { background-color: var(--color-error) }","timeline-horizontal":"flex-direction: row; gap: 0","timeline-info":"--timeline-line-color: var(--color-info); & .timeline-middle { background-color: var(--color-info) }","timeline-item":"display: grid; grid-template-columns: var(--timeline-item--cols, 1fr auto 1fr); grid-template-rows: auto; align-items: start; gap: 0 1rem; position: relative; padding-block: 0.75rem; &:not(:last-child)::after { content: \"\"; position: absolute; inset-inline-start: var(--timeline-after--start, 50%); transform: var(--timeline-after--transform, translateX(-50%)); top: 1.75rem; bottom: -0.75rem; width: 2px; background-color: var(--timeline-line-color, var(--color-base-soft)); z-index: 0 }","timeline-middle":"grid-column: 2; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 9999px; background-color: var(--color-base-soft); border: 3px solid var(--color-base); z-index: 1; flex-shrink: 0; position: relative","timeline-neutral":"--timeline-line-color: var(--color-neutral); & .timeline-middle { background-color: var(--color-neutral) }","timeline-primary":"--timeline-line-color: var(--color-primary); & .timeline-middle { background-color: var(--color-primary) }","timeline-secondary":"--timeline-line-color: var(--color-secondary); & .timeline-middle { background-color: var(--color-secondary) }","timeline-snap-end":"--timeline-item--cols: 1fr auto 0; --timeline-after--start: calc(100% - 1.5rem); --timeline-after--transform: none; :where(&) :where(.timeline-end) { display: none }","timeline-snap-start":"--timeline-item--cols: 0 auto 1fr; --timeline-after--start: 1.5rem; --timeline-after--transform: none; :where(&) :where(.timeline-start) { display: none }","timeline-start":"grid-column: 1; text-align: end; padding-inline-end: 0.5rem; font-size: 0.875rem; color: currentColor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch, currentColor 60%, transparent) } align-self: center","timeline-success":"--timeline-line-color: var(--color-success); & .timeline-middle { background-color: var(--color-success) }","timeline-vertical":"flex-direction: column; gap: 0","timeline-warning":"--timeline-line-color: var(--color-warning); & .timeline-middle { background-color: var(--color-warning) }","toast":"position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; pointer-events: none; inset-block-end: 0; inset-inline-end: 0; & > * { pointer-events: auto }","toast-bottom":"inset-block-start: auto; inset-block-end: 0","toast-center":"inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%)","toast-end":"inset-inline-start: auto; inset-inline-end: 0","toast-middle":"inset-block-end: auto; inset-block-start: 50%; transform: translateY(-50%)","toast-start":"inset-inline-end: auto; inset-inline-start: 0","toast-top":"inset-block-end: auto; inset-block-start: 0","toggle":"--radius-toggle: 9999px; --color-toggle: var(--color-base-300); --color-on-toggle: var(--color-on-base); --color-toggle-checked: var(--color-primary); --color-on-toggle-checked: var(--color-on-primary); --toggle--width: 3rem; --toggle--height: 1.5rem; --toggle--thumb-size: calc(var(--toggle--height) - 0.375rem); -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; cursor: pointer; display: inline-block; width: var(--toggle--width); height: var(--toggle--height); border-radius: var(--radius-toggle); background-color: var(--color-toggle); position: relative; flex-shrink: 0; vertical-align: middle; transition: background-color 200ms ease-in-out; &::before { content: \"\"; position: absolute; top: 50%; inset-inline-start: 0.1875rem; transform: translateY(-50%); width: var(--toggle--thumb-size); height: var(--toggle--thumb-size); border-radius: 9999px; background-color: white; transition: inset-inline-start 200ms ease-in-out, transform 200ms ease-in-out; box-shadow: 0 1px 3px oklch(0% 0 0 / 20%) } &:checked, &[aria-checked=\"true\"] { background-color: var(--color-toggle-checked); &::before { inset-inline-start: calc(100% - var(--toggle--thumb-size) - 0.1875rem) } } &:focus-visible { outline-width: 2px; outline-style: solid; outline-color: light-dark(var(--color-base-950), var(--color-base-50)); outline-offset: 3px } &:disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none }","toggle-accent":"--color-toggle-checked: var(--color-accent); --color-on-toggle-checked: var(--color-on-accent)","toggle-error":"--color-toggle-checked: var(--color-error); --color-on-toggle-checked: var(--color-on-error)","toggle-info":"--color-toggle-checked: var(--color-info); --color-on-toggle-checked: var(--color-on-info)","toggle-lg":"--toggle--width: 3.5rem; --toggle--height: 1.75rem","toggle-md":"--toggle--width: 3rem; --toggle--height: 1.5rem","toggle-neutral":"--color-toggle-checked: var(--color-neutral); --color-on-toggle-checked: var(--color-on-neutral)","toggle-primary":"--color-toggle-checked: var(--color-primary); --color-on-toggle-checked: var(--color-on-primary)","toggle-secondary":"--color-toggle-checked: var(--color-secondary); --color-on-toggle-checked: var(--color-on-secondary)","toggle-sm":"--toggle--width: 2.5rem; --toggle--height: 1.25rem","toggle-success":"--color-toggle-checked: var(--color-success); --color-on-toggle-checked: var(--color-on-success)","toggle-warning":"--color-toggle-checked: var(--color-warning); --color-on-toggle-checked: var(--color-on-warning)","toggle-xl":"--toggle--width: 4rem; --toggle--height: 2rem","toggle-xs":"--toggle--width: 2rem; --toggle--height: 1rem","tooltip":"position: relative; display: inline-block; --color-tooltip: var(--color-neutral); --color-on-tooltip: var(--color-on-neutral); --tooltip-content: calc(100% + 0.5rem); --tooltip-tail: calc(100% + 1px + 0.25rem); --radius-tooltip: calc(var(--border-radius) * 2); & > .tooltip-content, &[data-tip]:before { color: var(--color-on-tooltip); border-radius: var(--radius-tooltip); position: absolute; max-width: 20rem; padding-inline: 0.5rem; padding-block: 0.25rem; opacity: 0%; text-align: center; white-space: normal; font-size: 0.875rem; line-height: 1.25; background-color: var(--color-tooltip); width: max-content; pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); transform: translateX(-50%) translateY(var(--tooltip-placement, 0.25rem)); inset: auto auto var(--tooltip-content) 50% } &:after { background-color: var(--color-tooltip); content: \"\"; pointer-events: none; width: 0.625rem; height: 0.25rem; display: block; position: absolute; opacity: 0%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -1px 0; mask-position: -1px 0; --mask-tooltip: url(\"data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A\"); -webkit-mask-image: var(--mask-tooltip); mask-image: var(--mask-tooltip); transform: translateX(-50%) translateY(var(--tooltip-placement, 0.25rem)); inset: auto auto var(--tooltip-tail) 50% } @media (prefers-reduced-motion: no-preference) { & > .tooltip-content, &[data-tip]:before, &:after { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms } } &:is([data-tip]:not([data-tip=\"\"]), :has(.tooltip-content:not(:empty))) { &:is(.tooltip-open, :hover, :focus-within) { & > .tooltip-content, &[data-tip]:before, &:after { opacity: 100%; --tooltip-placement: 0rem; @media (prefers-reduced-motion: no-preference) { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s } } } }","tooltip-accent":"--color-tooltip: var(--color-accent); --color-on-tooltip: var(--color-on-accent)","tooltip-bottom":"& > .tooltip-content, &[data-tip]:before { transform: translateX(-50%) translateY(var(--tooltip-placement, -0.25rem)); inset: var(--tooltip-content) auto auto 50%; z-index: 50 } &::after { content: \"\"; transform: translateX(-50%) translateY(var(--tooltip-placement, -0.25rem)) rotate(180deg); inset: var(--tooltip-tail) auto auto 50%; z-index: 50 }","tooltip-content":"--fj-tooltip-scope: 1","tooltip-end":"& > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tooltip-placement, -0.25rem) + 0.25rem)) translateY(-50%); inset: 50% auto auto var(--tooltip-content); z-index: 50 } &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) > .tooltip-content, &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)[data-tip]:before { transform: translateX(calc(var(--tooltip-placement, 0.25rem) - 0.25rem)) translateY(-50%); inset: 50% var(--tooltip-content) auto auto; z-index: 50 } &::after { content: \"\"; transform: translateX(var(--tooltip-placement, -0.25rem)) translateY(-50%) rotate(90deg); inset: 50% auto auto calc(var(--tooltip-tail) + 1px); z-index: 50 } &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)::after { content: \"\"; transform: translateX(var(--tooltip-placement, 0.25rem)) translateY(-50%) rotate(-90deg); inset: 50% calc(var(--tooltip-tail) + 1px) auto auto; z-index: 50 }","tooltip-error":"--color-tooltip: var(--color-error); --color-on-tooltip: var(--color-on-error)","tooltip-info":"--color-tooltip: var(--color-info); --color-on-tooltip: var(--color-on-info)","tooltip-left":"& > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tooltip-placement, 0.25rem) - 0.25rem)) translateY(-50%); inset: 50% var(--tooltip-content) auto auto; z-index: 50 } &::after { content: \"\"; transform: translateX(var(--tooltip-placement, 0.25rem)) translateY(-50%) rotate(-90deg); inset: 50% calc(var(--tooltip-tail) + 1px) auto auto; z-index: 50 }","tooltip-neutral":"--color-tooltip: var(--color-neutral); --color-on-tooltip: var(--color-on-neutral)","tooltip-primary":"--color-tooltip: var(--color-primary); --color-on-tooltip: var(--color-on-primary)","tooltip-right":"& > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tooltip-placement, -0.25rem) + 0.25rem)) translateY(-50%); inset: 50% auto auto var(--tooltip-content); z-index: 50 } &::after { content: \"\"; transform: translateX(var(--tooltip-placement, -0.25rem)) translateY(-50%) rotate(90deg); inset: 50% auto auto calc(var(--tooltip-tail) + 1px); z-index: 50 }","tooltip-secondary":"--color-tooltip: var(--color-secondary); --color-on-tooltip: var(--color-on-secondary)","tooltip-start":"& > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tooltip-placement, 0.25rem) - 0.25rem)) translateY(-50%); inset: 50% var(--tooltip-content) auto auto; z-index: 50 } &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) > .tooltip-content, &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)[data-tip]:before { transform: translateX(calc(var(--tooltip-placement, -0.25rem) + 0.25rem)) translateY(-50%); inset: 50% auto auto var(--tooltip-content); z-index: 50 } &::after { content: \"\"; transform: translateX(var(--tooltip-placement, 0.25rem)) translateY(-50%) rotate(-90deg); inset: 50% calc(var(--tooltip-tail) + 1px) auto auto; z-index: 50 } &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)::after { content: \"\"; transform: translateX(var(--tooltip-placement, -0.25rem)) translateY(-50%) rotate(90deg); inset: 50% auto auto calc(var(--tooltip-tail) + 1px); z-index: 50 }","tooltip-success":"--color-tooltip: var(--color-success); --color-on-tooltip: var(--color-on-success)","tooltip-top":"& > .tooltip-content, &[data-tip]:before { transform: translateX(-50%) translateY(var(--tooltip-placement, 0.25rem)); inset: auto auto var(--tooltip-content) 50%; z-index: 50 } &::after { content: \"\"; transform: translateX(-50%) translateY(var(--tooltip-placement, 0.25rem)); inset: auto auto var(--tooltip-tail) 50%; z-index: 50 }","tooltip-warning":"--color-tooltip: var(--color-warning); --color-on-tooltip: var(--color-on-warning)","wrapper":"box-sizing: border-box; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-2xl":"box-sizing: border-box; max-width: 1536px; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-full":"width: 100%; max-width: 100%; box-sizing: border-box; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-lg":"box-sizing: border-box; max-width: 1024px; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-md":"box-sizing: border-box; max-width: 768px; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-sm":"box-sizing: border-box; max-width: 640px; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-xl":"box-sizing: border-box; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }","wrapper-xs":"box-sizing: border-box; max-width: 320px; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 2rem } @media (width >= 64rem) { padding-inline: 4rem }"};
3
+ export const preflight = "@container countdown style(--digits: 3) { span::before { content: \"000\\A 001\\A 002\\A 003\\A 004\\A 005\\A 006\\A 007\\A 008\\A 009\\A 010\\A 011\\A 012\\A 013\\A 014\\A 015\\A 016\\A 017\\A 018\\A 019\\A 020\\A 021\\A 022\\A 023\\A 024\\A 025\\A 026\\A 027\\A 028\\A 029\\A 030\\A 031\\A 032\\A 033\\A 034\\A 035\\A 036\\A 037\\A 038\\A 039\\A 040\\A 041\\A 042\\A 043\\A 044\\A 045\\A 046\\A 047\\A 048\\A 049\\A 050\\A 051\\A 052\\A 053\\A 054\\A 055\\A 056\\A 057\\A 058\\A 059\\A 060\\A 061\\A 062\\A 063\\A 064\\A 065\\A 066\\A 067\\A 068\\A 069\\A 070\\A 071\\A 072\\A 073\\A 074\\A 075\\A 076\\A 077\\A 078\\A 079\\A 080\\A 081\\A 082\\A 083\\A 084\\A 085\\A 086\\A 087\\A 088\\A 089\\A 090\\A 091\\A 092\\A 093\\A 094\\A 095\\A 096\\A 097\\A 098\\A 099\\A 100\\A 101\\A 102\\A 103\\A 104\\A 105\\A 106\\A 107\\A 108\\A 109\\A 110\\A 111\\A 112\\A 113\\A 114\\A 115\\A 116\\A 117\\A 118\\A 119\\A 120\\A 121\\A 122\\A 123\\A 124\\A 125\\A 126\\A 127\\A 128\\A 129\\A 130\\A 131\\A 132\\A 133\\A 134\\A 135\\A 136\\A 137\\A 138\\A 139\\A 140\\A 141\\A 142\\A 143\\A 144\\A 145\\A 146\\A 147\\A 148\\A 149\\A 150\\A 151\\A 152\\A 153\\A 154\\A 155\\A 156\\A 157\\A 158\\A 159\\A 160\\A 161\\A 162\\A 163\\A 164\\A 165\\A 166\\A 167\\A 168\\A 169\\A 170\\A 171\\A 172\\A 173\\A 174\\A 175\\A 176\\A 177\\A 178\\A 179\\A 180\\A 181\\A 182\\A 183\\A 184\\A 185\\A 186\\A 187\\A 188\\A 189\\A 190\\A 191\\A 192\\A 193\\A 194\\A 195\\A 196\\A 197\\A 198\\A 199\\A 200\\A 201\\A 202\\A 203\\A 204\\A 205\\A 206\\A 207\\A 208\\A 209\\A 210\\A 211\\A 212\\A 213\\A 214\\A 215\\A 216\\A 217\\A 218\\A 219\\A 220\\A 221\\A 222\\A 223\\A 224\\A 225\\A 226\\A 227\\A 228\\A 229\\A 230\\A 231\\A 232\\A 233\\A 234\\A 235\\A 236\\A 237\\A 238\\A 239\\A 240\\A 241\\A 242\\A 243\\A 244\\A 245\\A 246\\A 247\\A 248\\A 249\\A 250\\A 251\\A 252\\A 253\\A 254\\A 255\\A 256\\A 257\\A 258\\A 259\\A 260\\A 261\\A 262\\A 263\\A 264\\A 265\\A 266\\A 267\\A 268\\A 269\\A 270\\A 271\\A 272\\A 273\\A 274\\A 275\\A 276\\A 277\\A 278\\A 279\\A 280\\A 281\\A 282\\A 283\\A 284\\A 285\\A 286\\A 287\\A 288\\A 289\\A 290\\A 291\\A 292\\A 293\\A 294\\A 295\\A 296\\A 297\\A 298\\A 299\\A 300\\A 301\\A 302\\A 303\\A 304\\A 305\\A 306\\A 307\\A 308\\A 309\\A 310\\A 311\\A 312\\A 313\\A 314\\A 315\\A 316\\A 317\\A 318\\A 319\\A 320\\A 321\\A 322\\A 323\\A 324\\A 325\\A 326\\A 327\\A 328\\A 329\\A 330\\A 331\\A 332\\A 333\\A 334\\A 335\\A 336\\A 337\\A 338\\A 339\\A 340\\A 341\\A 342\\A 343\\A 344\\A 345\\A 346\\A 347\\A 348\\A 349\\A 350\\A 351\\A 352\\A 353\\A 354\\A 355\\A 356\\A 357\\A 358\\A 359\\A 360\\A 361\\A 362\\A 363\\A 364\\A 365\\A 366\\A 367\\A 368\\A 369\\A 370\\A 371\\A 372\\A 373\\A 374\\A 375\\A 376\\A 377\\A 378\\A 379\\A 380\\A 381\\A 382\\A 383\\A 384\\A 385\\A 386\\A 387\\A 388\\A 389\\A 390\\A 391\\A 392\\A 393\\A 394\\A 395\\A 396\\A 397\\A 398\\A 399\\A 400\\A 401\\A 402\\A 403\\A 404\\A 405\\A 406\\A 407\\A 408\\A 409\\A 410\\A 411\\A 412\\A 413\\A 414\\A 415\\A 416\\A 417\\A 418\\A 419\\A 420\\A 421\\A 422\\A 423\\A 424\\A 425\\A 426\\A 427\\A 428\\A 429\\A 430\\A 431\\A 432\\A 433\\A 434\\A 435\\A 436\\A 437\\A 438\\A 439\\A 440\\A 441\\A 442\\A 443\\A 444\\A 445\\A 446\\A 447\\A 448\\A 449\\A 450\\A 451\\A 452\\A 453\\A 454\\A 455\\A 456\\A 457\\A 458\\A 459\\A 460\\A 461\\A 462\\A 463\\A 464\\A 465\\A 466\\A 467\\A 468\\A 469\\A 470\\A 471\\A 472\\A 473\\A 474\\A 475\\A 476\\A 477\\A 478\\A 479\\A 480\\A 481\\A 482\\A 483\\A 484\\A 485\\A 486\\A 487\\A 488\\A 489\\A 490\\A 491\\A 492\\A 493\\A 494\\A 495\\A 496\\A 497\\A 498\\A 499\\A 500\\A 501\\A 502\\A 503\\A 504\\A 505\\A 506\\A 507\\A 508\\A 509\\A 510\\A 511\\A 512\\A 513\\A 514\\A 515\\A 516\\A 517\\A 518\\A 519\\A 520\\A 521\\A 522\\A 523\\A 524\\A 525\\A 526\\A 527\\A 528\\A 529\\A 530\\A 531\\A 532\\A 533\\A 534\\A 535\\A 536\\A 537\\A 538\\A 539\\A 540\\A 541\\A 542\\A 543\\A 544\\A 545\\A 546\\A 547\\A 548\\A 549\\A 550\\A 551\\A 552\\A 553\\A 554\\A 555\\A 556\\A 557\\A 558\\A 559\\A 560\\A 561\\A 562\\A 563\\A 564\\A 565\\A 566\\A 567\\A 568\\A 569\\A 570\\A 571\\A 572\\A 573\\A 574\\A 575\\A 576\\A 577\\A 578\\A 579\\A 580\\A 581\\A 582\\A 583\\A 584\\A 585\\A 586\\A 587\\A 588\\A 589\\A 590\\A 591\\A 592\\A 593\\A 594\\A 595\\A 596\\A 597\\A 598\\A 599\\A 600\\A 601\\A 602\\A 603\\A 604\\A 605\\A 606\\A 607\\A 608\\A 609\\A 610\\A 611\\A 612\\A 613\\A 614\\A 615\\A 616\\A 617\\A 618\\A 619\\A 620\\A 621\\A 622\\A 623\\A 624\\A 625\\A 626\\A 627\\A 628\\A 629\\A 630\\A 631\\A 632\\A 633\\A 634\\A 635\\A 636\\A 637\\A 638\\A 639\\A 640\\A 641\\A 642\\A 643\\A 644\\A 645\\A 646\\A 647\\A 648\\A 649\\A 650\\A 651\\A 652\\A 653\\A 654\\A 655\\A 656\\A 657\\A 658\\A 659\\A 660\\A 661\\A 662\\A 663\\A 664\\A 665\\A 666\\A 667\\A 668\\A 669\\A 670\\A 671\\A 672\\A 673\\A 674\\A 675\\A 676\\A 677\\A 678\\A 679\\A 680\\A 681\\A 682\\A 683\\A 684\\A 685\\A 686\\A 687\\A 688\\A 689\\A 690\\A 691\\A 692\\A 693\\A 694\\A 695\\A 696\\A 697\\A 698\\A 699\\A 700\\A 701\\A 702\\A 703\\A 704\\A 705\\A 706\\A 707\\A 708\\A 709\\A 710\\A 711\\A 712\\A 713\\A 714\\A 715\\A 716\\A 717\\A 718\\A 719\\A 720\\A 721\\A 722\\A 723\\A 724\\A 725\\A 726\\A 727\\A 728\\A 729\\A 730\\A 731\\A 732\\A 733\\A 734\\A 735\\A 736\\A 737\\A 738\\A 739\\A 740\\A 741\\A 742\\A 743\\A 744\\A 745\\A 746\\A 747\\A 748\\A 749\\A 750\\A 751\\A 752\\A 753\\A 754\\A 755\\A 756\\A 757\\A 758\\A 759\\A 760\\A 761\\A 762\\A 763\\A 764\\A 765\\A 766\\A 767\\A 768\\A 769\\A 770\\A 771\\A 772\\A 773\\A 774\\A 775\\A 776\\A 777\\A 778\\A 779\\A 780\\A 781\\A 782\\A 783\\A 784\\A 785\\A 786\\A 787\\A 788\\A 789\\A 790\\A 791\\A 792\\A 793\\A 794\\A 795\\A 796\\A 797\\A 798\\A 799\\A 800\\A 801\\A 802\\A 803\\A 804\\A 805\\A 806\\A 807\\A 808\\A 809\\A 810\\A 811\\A 812\\A 813\\A 814\\A 815\\A 816\\A 817\\A 818\\A 819\\A 820\\A 821\\A 822\\A 823\\A 824\\A 825\\A 826\\A 827\\A 828\\A 829\\A 830\\A 831\\A 832\\A 833\\A 834\\A 835\\A 836\\A 837\\A 838\\A 839\\A 840\\A 841\\A 842\\A 843\\A 844\\A 845\\A 846\\A 847\\A 848\\A 849\\A 850\\A 851\\A 852\\A 853\\A 854\\A 855\\A 856\\A 857\\A 858\\A 859\\A 860\\A 861\\A 862\\A 863\\A 864\\A 865\\A 866\\A 867\\A 868\\A 869\\A 870\\A 871\\A 872\\A 873\\A 874\\A 875\\A 876\\A 877\\A 878\\A 879\\A 880\\A 881\\A 882\\A 883\\A 884\\A 885\\A 886\\A 887\\A 888\\A 889\\A 890\\A 891\\A 892\\A 893\\A 894\\A 895\\A 896\\A 897\\A 898\\A 899\\A 900\\A 901\\A 902\\A 903\\A 904\\A 905\\A 906\\A 907\\A 908\\A 909\\A 910\\A 911\\A 912\\A 913\\A 914\\A 915\\A 916\\A 917\\A 918\\A 919\\A 920\\A 921\\A 922\\A 923\\A 924\\A 925\\A 926\\A 927\\A 928\\A 929\\A 930\\A 931\\A 932\\A 933\\A 934\\A 935\\A 936\\A 937\\A 938\\A 939\\A 940\\A 941\\A 942\\A 943\\A 944\\A 945\\A 946\\A 947\\A 948\\A 949\\A 950\\A 951\\A 952\\A 953\\A 954\\A 955\\A 956\\A 957\\A 958\\A 959\\A 960\\A 961\\A 962\\A 963\\A 964\\A 965\\A 966\\A 967\\A 968\\A 969\\A 970\\A 971\\A 972\\A 973\\A 974\\A 975\\A 976\\A 977\\A 978\\A 979\\A 980\\A 981\\A 982\\A 983\\A 984\\A 985\\A 986\\A 987\\A 988\\A 989\\A 990\\A 991\\A 992\\A 993\\A 994\\A 995\\A 996\\A 997\\A 998\\A 999\" } } @keyframes loading-spin { to { transform: rotate(360deg) } } @keyframes loading-pulse { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5 } 40% { transform: scale(1); opacity: 1 } } @keyframes loading-bars { 0%, 100% { transform: scaleY(0.4) } 50% { transform: scaleY(1) } } @keyframes marquee-scroll { from { translate: 0 0 } to { translate: var(--marquee--axis) } } @keyframes progress { 50% { background-position-x: -115% } } @keyframes skeleton-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }";
4
+ export const base = "@layer base{:root,[data-theme]{--palette-shade-light-color:#fff;--palette-shade-dark-color:#000;--color-body:currentColor;@supports(color:color-mix(in lab,red,red)){--color-body:color-mix(in oklch, currentColor 80%, transparent)}-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:var(--scheme-color,light);color:var(--color-on-base);background-color:var(--color-base);--color-base-soft:light-dark(\n var(--color-on-base),\n var(--color-on-base)\n );@supports(color:color-mix(in lab,red,red)){--color-base-soft:light-dark(\n color-mix(in oklch, var(--color-on-base) 8%, var(--color-base) 92%),\n color-mix(in oklch, var(--color-on-base) 16%, var(--color-base) 84%)\n )}--color-on-base-soft:var(--color-on-base);--color-base-active:light-dark(\n var(--color-on-base),\n var(--color-on-base)\n );@supports(color:color-mix(in lab,red,red)){--color-base-active:light-dark(\n color-mix(in oklch, var(--color-on-base) 14%, var(--color-base) 86%),\n color-mix(in oklch, var(--color-on-base) 26%, var(--color-base) 74%)\n )}--color-base-50:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-50:color-mix(in oklch, var(--color-on-base) 4%, var(--color-base) 96%)}--color-base-100:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-100:color-mix(in oklch, var(--color-on-base) 8%, var(--color-base) 92%)}--color-base-200:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-200:color-mix(in oklch, var(--color-on-base) 16%, var(--color-base) 84%)}--color-base-300:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-300:color-mix(in oklch, var(--color-on-base) 26%, var(--color-base) 74%)}--color-base-400:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-400:color-mix(in oklch, var(--color-on-base) 36%, var(--color-base) 64%)}--color-base-500:var(--color-base);--color-base-600:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-600:color-mix(in oklch, var(--color-on-base) 50%, var(--color-base) 50%)}--color-base-700:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-700:color-mix(in oklch, var(--color-on-base) 62%, var(--color-base) 38%)}--color-base-800:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-800:color-mix(in oklch, var(--color-on-base) 74%, var(--color-base) 26%)}--color-base-900:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-900:color-mix(in oklch, var(--color-on-base) 86%, var(--color-base) 14%)}--color-base-950:var(--color-on-base);@supports(color:color-mix(in lab,red,red)){--color-base-950:color-mix(in oklch, var(--color-on-base) 92%, var(--color-base) 8%)}--color-neutral-soft:light-dark(var(--color-neutral-50), var(--color-neutral));@supports(color:color-mix(in lab,red,red)){--color-neutral-soft:light-dark(var(--color-neutral-50), color-mix(in srgb, var(--color-neutral) 20%, var(--color-base) 80%))}--color-on-neutral-soft:light-dark(var(--color-neutral-700), var(--color-neutral-300));--color-neutral-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-neutral-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-neutral) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-neutral) 85%)\n )}--color-neutral-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-neutral) 20%)}--color-neutral-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-neutral) 35%)}--color-neutral-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-neutral) 50%)}--color-neutral-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-neutral) 65%)}--color-neutral-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-neutral) 82%)}--color-neutral-500:var(--color-neutral);--color-neutral-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-neutral) 82%)}--color-neutral-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-neutral) 66%)}--color-neutral-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-neutral) 50%)}--color-neutral-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-neutral) 35%)}--color-neutral-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-neutral-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-neutral) 20%)}--color-primary-soft:light-dark(var(--color-primary-50), var(--color-primary));@supports(color:color-mix(in lab,red,red)){--color-primary-soft:light-dark(var(--color-primary-50), color-mix(in srgb, var(--color-primary) 20%, var(--color-base) 80%))}--color-on-primary-soft:light-dark(var(--color-primary-700), var(--color-primary-300));--color-primary-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-primary-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-primary) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-primary) 85%)\n )}--color-primary-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-primary-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-primary) 20%)}--color-primary-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-primary-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-primary) 35%)}--color-primary-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-primary-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-primary) 50%)}--color-primary-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-primary-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-primary) 65%)}--color-primary-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-primary-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-primary) 82%)}--color-primary-500:var(--color-primary);--color-primary-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-primary-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-primary) 82%)}--color-primary-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-primary-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-primary) 66%)}--color-primary-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-primary-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-primary) 50%)}--color-primary-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-primary-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-primary) 35%)}--color-primary-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-primary-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-primary) 20%)}--color-secondary-soft:light-dark(var(--color-secondary-50), var(--color-secondary));@supports(color:color-mix(in lab,red,red)){--color-secondary-soft:light-dark(var(--color-secondary-50), color-mix(in srgb, var(--color-secondary) 20%, var(--color-base) 80%))}--color-on-secondary-soft:light-dark(var(--color-secondary-700), var(--color-secondary-300));--color-secondary-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-secondary-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-secondary) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-secondary) 85%)\n )}--color-secondary-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-secondary) 20%)}--color-secondary-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-secondary) 35%)}--color-secondary-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-secondary) 50%)}--color-secondary-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-secondary) 65%)}--color-secondary-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-secondary) 82%)}--color-secondary-500:var(--color-secondary);--color-secondary-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-secondary) 82%)}--color-secondary-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-secondary) 66%)}--color-secondary-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-secondary) 50%)}--color-secondary-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-secondary) 35%)}--color-secondary-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-secondary-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-secondary) 20%)}--color-accent-soft:light-dark(var(--color-accent-50), var(--color-accent));@supports(color:color-mix(in lab,red,red)){--color-accent-soft:light-dark(var(--color-accent-50), color-mix(in srgb, var(--color-accent) 20%, var(--color-base) 80%))}--color-on-accent-soft:light-dark(var(--color-accent-700), var(--color-accent-300));--color-accent-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-accent-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-accent) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-accent) 85%)\n )}--color-accent-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-accent-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-accent) 20%)}--color-accent-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-accent-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-accent) 35%)}--color-accent-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-accent-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-accent) 50%)}--color-accent-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-accent-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-accent) 65%)}--color-accent-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-accent-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-accent) 82%)}--color-accent-500:var(--color-accent);--color-accent-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-accent-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-accent) 82%)}--color-accent-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-accent-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-accent) 66%)}--color-accent-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-accent-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-accent) 50%)}--color-accent-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-accent-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-accent) 35%)}--color-accent-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-accent-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-accent) 20%)}--color-info-soft:light-dark(var(--color-info-50), var(--color-info));@supports(color:color-mix(in lab,red,red)){--color-info-soft:light-dark(var(--color-info-50), color-mix(in srgb, var(--color-info) 20%, var(--color-base) 80%))}--color-on-info-soft:light-dark(var(--color-info-700), var(--color-info-300));--color-info-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-info-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-info) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-info) 85%)\n )}--color-info-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-info-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-info) 20%)}--color-info-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-info-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-info) 35%)}--color-info-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-info-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-info) 50%)}--color-info-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-info-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-info) 65%)}--color-info-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-info-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-info) 82%)}--color-info-500:var(--color-info);--color-info-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-info-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-info) 82%)}--color-info-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-info-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-info) 66%)}--color-info-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-info-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-info) 50%)}--color-info-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-info-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-info) 35%)}--color-info-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-info-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-info) 20%)}--color-success-soft:light-dark(var(--color-success-50), var(--color-success));@supports(color:color-mix(in lab,red,red)){--color-success-soft:light-dark(var(--color-success-50), color-mix(in srgb, var(--color-success) 20%, var(--color-base) 80%))}--color-on-success-soft:light-dark(var(--color-success-700), var(--color-success-300));--color-success-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-success-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-success) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-success) 85%)\n )}--color-success-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-success-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-success) 20%)}--color-success-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-success-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-success) 35%)}--color-success-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-success-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-success) 50%)}--color-success-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-success-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-success) 65%)}--color-success-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-success-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-success) 82%)}--color-success-500:var(--color-success);--color-success-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-success-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-success) 82%)}--color-success-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-success-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-success) 66%)}--color-success-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-success-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-success) 50%)}--color-success-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-success-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-success) 35%)}--color-success-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-success-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-success) 20%)}--color-warning-soft:light-dark(var(--color-warning-50), var(--color-warning));@supports(color:color-mix(in lab,red,red)){--color-warning-soft:light-dark(var(--color-warning-50), color-mix(in srgb, var(--color-warning) 20%, var(--color-base) 80%))}--color-on-warning-soft:light-dark(var(--color-warning-800), var(--color-warning-300));--color-warning-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-warning-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-warning) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-warning) 85%)\n )}--color-warning-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-warning-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-warning) 20%)}--color-warning-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-warning-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-warning) 35%)}--color-warning-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-warning-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-warning) 50%)}--color-warning-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-warning-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-warning) 65%)}--color-warning-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-warning-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-warning) 82%)}--color-warning-500:var(--color-warning);--color-warning-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-warning-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-warning) 82%)}--color-warning-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-warning-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-warning) 66%)}--color-warning-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-warning-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-warning) 50%)}--color-warning-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-warning-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-warning) 35%)}--color-warning-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-warning-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-warning) 20%)}--color-error-soft:light-dark(var(--color-error-50), var(--color-error));@supports(color:color-mix(in lab,red,red)){--color-error-soft:light-dark(var(--color-error-50), color-mix(in srgb, var(--color-error) 20%, var(--color-base) 80%))}--color-on-error-soft:light-dark(var(--color-error-700), var(--color-error-300));--color-error-active:light-dark(\n var(--palette-shade-dark-color),\n var(--palette-shade-light-color)\n );@supports(color:color-mix(in lab,red,red)){--color-error-active:light-dark(\n color-mix(in oklch, var(--palette-shade-dark-color) 15%, var(--color-error) 85%),\n color-mix(in oklch, var(--palette-shade-light-color) 15%, var(--color-error) 85%)\n )}--color-error-50:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-error-50:color-mix(in oklch, var(--palette-shade-light-color) 80%, var(--color-error) 20%)}--color-error-100:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-error-100:color-mix(in oklch, var(--palette-shade-light-color) 65%, var(--color-error) 35%)}--color-error-200:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-error-200:color-mix(in oklch, var(--palette-shade-light-color) 50%, var(--color-error) 50%)}--color-error-300:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-error-300:color-mix(in oklch, var(--palette-shade-light-color) 35%, var(--color-error) 65%)}--color-error-400:var(--palette-shade-light-color);@supports(color:color-mix(in lab,red,red)){--color-error-400:color-mix(in oklch, var(--palette-shade-light-color) 18%, var(--color-error) 82%)}--color-error-500:var(--color-error);--color-error-600:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-error-600:color-mix(in oklch, var(--palette-shade-dark-color) 18%, var(--color-error) 82%)}--color-error-700:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-error-700:color-mix(in oklch, var(--palette-shade-dark-color) 34%, var(--color-error) 66%)}--color-error-800:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-error-800:color-mix(in oklch, var(--palette-shade-dark-color) 50%, var(--color-error) 50%)}--color-error-900:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-error-900:color-mix(in oklch, var(--palette-shade-dark-color) 65%, var(--color-error) 35%)}--color-error-950:var(--palette-shade-dark-color);@supports(color:color-mix(in lab,red,red)){--color-error-950:color-mix(in oklch, var(--palette-shade-dark-color) 80%, var(--color-error) 20%)}}*,::backdrop,::file-selector-button,:after,:before{box-sizing:border-box;border:0 solid;padding:0;margin:0}:host,html{line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");-webkit-tap-highlight-color:#0000}body{line-height:inherit}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}a,hr{color:inherit}hr{height:0}table{text-indent:0;border-color:inherit;border-collapse:collapse}::file-selector-button,button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}::-webkit-search-decoration{-webkit-appearance:none}::-moz-placeholder{opacity:1;color:currentColor;@supports(color:color-mix(in lab,red,red)){color:color-mix(in oklch,currentColor 50%,transparent)}}::placeholder{opacity:1;color:currentColor;@supports(color:color-mix(in lab,red,red)){color:color-mix(in oklch,currentColor 50%,transparent)}}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block}img,video{max-width:100%;height:auto}textarea{resize:vertical}:where(:root,[data-theme]) footer,:where(:root,[data-theme]) main{background-color:var(--color-base)}:where(:root,[data-theme]) :where(p){text-wrap-style:pretty;color:var(--color-body);font-size:var(--text-base,1rem);line-height:1.7}:where(:root,[data-theme]) :where(menu,ol,ul){color:var(--color-body);font-size:var(--text-base,1rem)}:where(:root,[data-theme]) :where(strong){color:var(--color-on-base)}}hr{border-top-width:1px}:where(:root,[data-theme]) code{background-color:var(--color-base-soft);color:var(--color-on-base-soft);padding:.2em .4em;border-radius:calc(var(--border-radius) * 1.5)}:where(:root,[data-theme]) pre code{background-color:transparent;padding:0;font-size:inherit;border-radius:0}@layer theme{:is([data-theme=snowberry],[data-theme=light]),:root:not([data-theme]){--scheme-color:light;--border-radius:0.25rem;--color-base:oklch(1 0 0);--color-on-base:oklch(0.22 0 0);--color-neutral:oklch(0.15 0 0);--color-on-neutral:oklch(1 0 0);--color-primary:oklch(51.1% 0.262 276.966);--color-on-primary:oklch(96.2% 0.018 272.314);--color-secondary:oklch(0.591 0.293 322.896);--color-on-secondary:oklch(1 0 0);--color-accent:oklch(0.541 0.281 293.009);--color-on-accent:oklch(1 0 0);--color-info:oklch(0.685 0.169 237.323);--color-on-info:oklch(0.15 0 0);--color-success:oklch(0.792 0.209 151.711);--color-on-success:oklch(0.15 0 0);--color-warning:oklch(0.852 0.199 91.936);--color-on-warning:oklch(0.15 0 0);--color-error:oklch(0.577 0.245 27.325);--color-on-error:oklch(1 0 0)}:is([data-theme=darkberry],[data-theme=dark]){--scheme-color:dark;--border-radius:0.25rem;--color-base:oklch(10.889% 0.00301 17.398);--color-on-base:oklch(98% 0.01 270);--color-neutral:oklch(85% 0 0);--color-on-neutral:oklch(20% 0 0);--color-primary:oklch(66.385% 0.18368 285.592);--color-on-primary:oklch(10% 0.01 270);--color-secondary:oklch(65% 0.18 220);--color-on-secondary:oklch(10% 0.01 220);--color-accent:oklch(75% 0.18 50);--color-on-accent:oklch(10% 0.01 50);--color-info:oklch(91.67% .077 205.04);--color-on-info:oklch(10% 0.01 250);--color-success:oklch(65% 0.18 140);--color-on-success:oklch(10% 0.01 140);--color-warning:oklch(75% 0.20 85);--color-on-warning:oklch(10% 0.01 85);--color-error:oklch(60% 0.22 30);--color-on-error:oklch(10% 0.01 30)}}\n@layer theme{:is([data-theme=snowberry],[data-theme=light]),:root:not([data-theme]){--scheme-color:light;--border-radius:0.25rem;--color-base:oklch(1 0 0);--color-on-base:oklch(0.22 0 0);--color-neutral:oklch(0.15 0 0);--color-on-neutral:oklch(1 0 0);--color-primary:oklch(51.1% 0.262 276.966);--color-on-primary:oklch(96.2% 0.018 272.314);--color-secondary:oklch(0.591 0.293 322.896);--color-on-secondary:oklch(1 0 0);--color-accent:oklch(0.541 0.281 293.009);--color-on-accent:oklch(1 0 0);--color-info:oklch(0.685 0.169 237.323);--color-on-info:oklch(0.15 0 0);--color-success:oklch(0.792 0.209 151.711);--color-on-success:oklch(0.15 0 0);--color-warning:oklch(0.852 0.199 91.936);--color-on-warning:oklch(0.15 0 0);--color-error:oklch(0.577 0.245 27.325);--color-on-error:oklch(1 0 0)}}\n@layer theme{:is([data-theme=darkberry],[data-theme=dark]){--scheme-color:dark;--border-radius:0.25rem;--color-base:oklch(10.889% 0.00301 17.398);--color-on-base:oklch(98% 0.01 270);--color-neutral:oklch(85% 0 0);--color-on-neutral:oklch(20% 0 0);--color-primary:oklch(66.385% 0.18368 285.592);--color-on-primary:oklch(10% 0.01 270);--color-secondary:oklch(65% 0.18 220);--color-on-secondary:oklch(10% 0.01 220);--color-accent:oklch(75% 0.18 50);--color-on-accent:oklch(10% 0.01 50);--color-info:oklch(91.67% .077 205.04);--color-on-info:oklch(10% 0.01 250);--color-success:oklch(65% 0.18 140);--color-on-success:oklch(10% 0.01 140);--color-warning:oklch(75% 0.20 85);--color-on-warning:oklch(10% 0.01 85);--color-error:oklch(60% 0.22 30);--color-on-error:oklch(10% 0.01 30)}}";
5
+ export const components = ["accordion","alert","avatar","badge","breadcrumb","btn","card","carousel","chat","checkbox","collapsible","countdown","diff","divider","drawer","footer","header","heading","hero","indicator","input","join","kbd","link","loading","marquee","mask","menu","modal","navbar","para","popover","progress","radial-progress","radio","range","rate","rating","select","skeleton","stat","stats","status","step","steps","surface","swap","tab","table","tabs","tag","textarea","timeline","toast","toggle","tooltip","wrapper"];
package/dist/utilities/headings/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import headings from './object.js';
2
+ import { addPrefix } from '../../functions/addPrefix.js';
3
+
4
+ export default ({ addUtilities, prefix = '' }) => {
5
+ const prefixed = addPrefix(headings, prefix);
6
+ addUtilities({ ...prefixed });
7
+ };
package/dist/utilities/headings/object.js ADDED
@@ -0,0 +1 @@
1
+ export default {".heading-2xl":{"--heading-size":"1.5rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-3xl":{"--heading-size":"1.875rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-4xl":{"--heading-size":"2.25rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-5xl":{"--heading-size":"3rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-6xl":{"--heading-size":"3.75rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-7xl":{"--heading-size":"4.5rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-8xl":{"--heading-size":"6rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-9xl":{"--heading-size":"8rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-lg":{"--heading-size":"1.125rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-md":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15,"--heading-size":"1rem "},".heading-sm":{"--heading-size":"0.875rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-xl":{"--heading-size":"1.25rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading-xs":{"--heading-size":"0.75rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15},".heading":{"--heading-size":"1rem ","color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--heading-size)","line-height":1.15}};
package/dist/utilities/headings.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! frutjam v2.3.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
2
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */.heading-2xl{--heading-size:1rem ;--heading-size:1.5rem }.heading,.heading-2xl,.heading-3xl,.heading-4xl,.heading-5xl,.heading-6xl,.heading-7xl,.heading-8xl,.heading-9xl,.heading-lg,.heading-md,.heading-sm,.heading-xl,.heading-xs{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-3xl{--heading-size:1rem ;--heading-size:1.875rem }.heading-4xl{--heading-size:1rem ;--heading-size:2.25rem }.heading-5xl{--heading-size:1rem ;--heading-size:3rem }.heading-6xl{--heading-size:1rem ;--heading-size:3.75rem }.heading-7xl{--heading-size:1rem ;--heading-size:4.5rem }.heading-8xl{--heading-size:1rem ;--heading-size:6rem }.heading-9xl{--heading-size:1rem ;--heading-size:8rem }.heading-lg{--heading-size:1rem ;--heading-size:1.125rem }.heading-md,.heading-sm{--heading-size:1rem }.heading-sm{--heading-size:0.875rem }.heading-xl{--heading-size:1rem ;--heading-size:1.25rem }.heading-xs{--heading-size:1rem ;--heading-size:0.75rem }.heading{--heading-size:1rem }
package/dist/utilities/headings.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/utilities/para/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import para from './object.js';
2
+ import { addPrefix } from '../../functions/addPrefix.js';
3
+
4
+ export default ({ addUtilities, prefix = '' }) => {
5
+ const prefixed = addPrefix(para, prefix);
6
+ addUtilities({ ...prefixed });
7
+ };