@duskmoon-dev/core 1.18.5 → 1.19.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 (127) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/tailwind-plugin.cjs +2 -2
  3. package/dist/components/console-page.css +178 -0
  4. package/dist/components/home-page.css +94 -0
  5. package/dist/components/index.css +366 -0
  6. package/dist/components/sign-page.css +80 -0
  7. package/dist/components/table.css +10 -0
  8. package/dist/components/tooltip.css +1 -0
  9. package/dist/esm/components/accordion.d.ts +5 -0
  10. package/dist/esm/components/accordion.js +4 -2
  11. package/dist/esm/components/alert.d.ts +5 -0
  12. package/dist/esm/components/alert.js +4 -2
  13. package/dist/esm/components/appbar.d.ts +5 -0
  14. package/dist/esm/components/appbar.js +4 -2
  15. package/dist/esm/components/autocomplete.d.ts +5 -0
  16. package/dist/esm/components/autocomplete.js +4 -2
  17. package/dist/esm/components/avatar.d.ts +5 -0
  18. package/dist/esm/components/avatar.js +4 -2
  19. package/dist/esm/components/badge.d.ts +5 -0
  20. package/dist/esm/components/badge.js +4 -2
  21. package/dist/esm/components/bottom-navigation.d.ts +5 -0
  22. package/dist/esm/components/bottom-navigation.js +4 -2
  23. package/dist/esm/components/bottomsheet.d.ts +5 -0
  24. package/dist/esm/components/bottomsheet.js +4 -2
  25. package/dist/esm/components/button.d.ts +5 -0
  26. package/dist/esm/components/button.js +4 -2
  27. package/dist/esm/components/card.d.ts +5 -0
  28. package/dist/esm/components/card.js +4 -2
  29. package/dist/esm/components/cascader.d.ts +5 -0
  30. package/dist/esm/components/cascader.js +4 -2
  31. package/dist/esm/components/chat.d.ts +5 -0
  32. package/dist/esm/components/chat.js +4 -2
  33. package/dist/esm/components/checkbox.d.ts +5 -0
  34. package/dist/esm/components/checkbox.js +4 -2
  35. package/dist/esm/components/chip.d.ts +5 -0
  36. package/dist/esm/components/chip.js +4 -2
  37. package/dist/esm/components/circle-menu.d.ts +5 -0
  38. package/dist/esm/components/circle-menu.js +4 -2
  39. package/dist/esm/components/code-block.d.ts +5 -0
  40. package/dist/esm/components/code-block.js +4 -2
  41. package/dist/esm/components/collapse.d.ts +5 -0
  42. package/dist/esm/components/collapse.js +4 -2
  43. package/dist/esm/components/console-page.d.ts +5 -0
  44. package/dist/esm/components/console-page.js +187 -0
  45. package/dist/esm/components/datepicker.d.ts +5 -0
  46. package/dist/esm/components/datepicker.js +4 -2
  47. package/dist/esm/components/dialog.d.ts +5 -0
  48. package/dist/esm/components/dialog.js +4 -2
  49. package/dist/esm/components/divider.d.ts +5 -0
  50. package/dist/esm/components/divider.js +4 -2
  51. package/dist/esm/components/drawer.d.ts +5 -0
  52. package/dist/esm/components/drawer.js +4 -2
  53. package/dist/esm/components/file-upload.d.ts +5 -0
  54. package/dist/esm/components/file-upload.js +4 -2
  55. package/dist/esm/components/form-group.d.ts +5 -0
  56. package/dist/esm/components/form-group.js +4 -2
  57. package/dist/esm/components/form.d.ts +5 -0
  58. package/dist/esm/components/form.js +4 -2
  59. package/dist/esm/components/home-page.d.ts +5 -0
  60. package/dist/esm/components/home-page.js +103 -0
  61. package/dist/esm/components/input.d.ts +5 -0
  62. package/dist/esm/components/input.js +4 -2
  63. package/dist/esm/components/list.d.ts +5 -0
  64. package/dist/esm/components/list.js +4 -2
  65. package/dist/esm/components/markdown-body.d.ts +5 -0
  66. package/dist/esm/components/markdown-body.js +4 -2
  67. package/dist/esm/components/modal.d.ts +5 -0
  68. package/dist/esm/components/modal.js +4 -2
  69. package/dist/esm/components/multi-select.d.ts +5 -0
  70. package/dist/esm/components/multi-select.js +4 -2
  71. package/dist/esm/components/navigation.d.ts +5 -0
  72. package/dist/esm/components/navigation.js +4 -2
  73. package/dist/esm/components/nested-menu.d.ts +5 -0
  74. package/dist/esm/components/nested-menu.js +4 -2
  75. package/dist/esm/components/otp-input.d.ts +5 -0
  76. package/dist/esm/components/otp-input.js +4 -2
  77. package/dist/esm/components/pin-input.d.ts +5 -0
  78. package/dist/esm/components/pin-input.js +4 -2
  79. package/dist/esm/components/popover.d.ts +5 -0
  80. package/dist/esm/components/popover.js +4 -2
  81. package/dist/esm/components/progress.d.ts +5 -0
  82. package/dist/esm/components/progress.js +4 -2
  83. package/dist/esm/components/radio.d.ts +5 -0
  84. package/dist/esm/components/radio.js +4 -2
  85. package/dist/esm/components/rating.d.ts +5 -0
  86. package/dist/esm/components/rating.js +4 -2
  87. package/dist/esm/components/segment-control.d.ts +5 -0
  88. package/dist/esm/components/segment-control.js +4 -2
  89. package/dist/esm/components/select.d.ts +5 -0
  90. package/dist/esm/components/select.js +4 -2
  91. package/dist/esm/components/sign-page.d.ts +5 -0
  92. package/dist/esm/components/sign-page.js +89 -0
  93. package/dist/esm/components/skeleton.d.ts +5 -0
  94. package/dist/esm/components/skeleton.js +4 -2
  95. package/dist/esm/components/slider.d.ts +5 -0
  96. package/dist/esm/components/slider.js +4 -2
  97. package/dist/esm/components/snackbar.d.ts +5 -0
  98. package/dist/esm/components/snackbar.js +4 -2
  99. package/dist/esm/components/stepper.d.ts +5 -0
  100. package/dist/esm/components/stepper.js +4 -2
  101. package/dist/esm/components/switch.d.ts +5 -0
  102. package/dist/esm/components/switch.js +4 -2
  103. package/dist/esm/components/table.d.ts +5 -0
  104. package/dist/esm/components/table.js +14 -2
  105. package/dist/esm/components/textarea.d.ts +5 -0
  106. package/dist/esm/components/textarea.js +4 -2
  107. package/dist/esm/components/theme-controller.d.ts +5 -0
  108. package/dist/esm/components/theme-controller.js +4 -2
  109. package/dist/esm/components/time-input.d.ts +5 -0
  110. package/dist/esm/components/time-input.js +4 -2
  111. package/dist/esm/components/timeline.d.ts +5 -0
  112. package/dist/esm/components/timeline.js +4 -2
  113. package/dist/esm/components/toast.d.ts +5 -0
  114. package/dist/esm/components/toast.js +4 -2
  115. package/dist/esm/components/toggle.d.ts +5 -0
  116. package/dist/esm/components/toggle.js +4 -2
  117. package/dist/esm/components/tooltip.d.ts +5 -0
  118. package/dist/esm/components/tooltip.js +5 -2
  119. package/dist/esm/components/tree-select.d.ts +5 -0
  120. package/dist/esm/components/tree-select.js +4 -2
  121. package/dist/index.css +366 -0
  122. package/dist/index.min.css +1 -1
  123. package/dist/standalone/duskmoonui-themes.css +1 -1
  124. package/dist/standalone/duskmoonui.css +368 -2
  125. package/dist/standalone/duskmoonui.js +10 -6
  126. package/dist/standalone/duskmoonui.mjs +10 -6
  127. package/package.json +72 -1
package/dist/standalone/duskmoonui.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
- * @duskmoon-dev/core v1.18.5
3
- * @duskmoon-dev/css-art v1.18.5
2
+ * @duskmoon-dev/core v1.19.0
3
+ * @duskmoon-dev/css-art v1.19.0
4
4
  * Standalone Tailwind CSS v4 plugin bundle
5
5
  * https://github.com/duskmoon-dev/duskmoonui
6
6
  * @license MIT
@@ -130,7 +130,7 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
130
130
  )`, height: "100cqh", margin: "0", padding: "0.75rem 0", overflow: "visible", listStyle: "none", pointerEvents: "none" } }, ".chat-scroll-body": { "@layer components": { display: "flex", flexDirection: "column", minWidth: "0" } }, ".chat-scroll-indicator": [{ "@layer components": { display: "block", flexShrink: 0, width: "var(--chat-scroll-indicator-size)", height: "var(--chat-scroll-indicator-thickness)", border: "0", borderRadius: "999px", padding: "0", appearance: "none", backgroundColor: "color-mix(in oklch, var(--color-on-surface) 28%, transparent)", color: "inherit", font: "inherit", opacity: 0.45, pointerEvents: "auto", textDecoration: "none", cursor: "pointer", transform: "scaleX(1)", transformOrigin: "center", transition: `transform 140ms ease,
131
131
  opacity 140ms ease,
132
132
  background-color 140ms ease` } }, { "@layer components": { "@supports (animation-timeline: --chat-1)": { animationName: "chat-scroll-indicator-activate", animationDuration: "1ms", animationTimingFunction: "linear", animationFillMode: "both", animationRange: "entry 0% exit 100%" } } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none", transition: "none" } } }], ".chat-scroll-indicator:hover, \n .chat-scroll-indicator:focus-visible": { "@layer components": { transform: "scaleX(var(--chat-scroll-indicator-hover-scale)) scaleY(1.35)", backgroundColor: "var(--color-on-surface)", opacity: 1 } }, ".chat-scroll-indicator:hover + .chat-scroll-indicator, \n .chat-scroll-indicator:has(+ .chat-scroll-indicator:hover)": { "@layer components": { transform: "scaleX(var(--chat-scroll-indicator-neighbor-scale)) scaleY(1.15)", backgroundColor: "color-mix(in oklch, var(--color-on-surface) 55%, transparent)", opacity: 0.75 } }, ".chat[data-chat-tl]": { "@layer components": { scrollMarginBlockStart: "0.5rem" } }, ".chat-scroll-indicator:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent)" } }, '.chat[data-chat-tl="1"]': { "@layer components": { viewTimelineName: "--chat-1", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="2"]': { "@layer components": { viewTimelineName: "--chat-2", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="3"]': { "@layer components": { viewTimelineName: "--chat-3", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="4"]': { "@layer components": { viewTimelineName: "--chat-4", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="5"]': { "@layer components": { viewTimelineName: "--chat-5", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="6"]': { "@layer components": { viewTimelineName: "--chat-6", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="7"]': { "@layer components": { viewTimelineName: "--chat-7", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="8"]': { "@layer components": { viewTimelineName: "--chat-8", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="9"]': { "@layer components": { viewTimelineName: "--chat-9", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="10"]': { "@layer components": { viewTimelineName: "--chat-10", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="11"]': { "@layer components": { viewTimelineName: "--chat-11", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="12"]': { "@layer components": { viewTimelineName: "--chat-12", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="13"]': { "@layer components": { viewTimelineName: "--chat-13", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="14"]': { "@layer components": { viewTimelineName: "--chat-14", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="15"]': { "@layer components": { viewTimelineName: "--chat-15", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="16"]': { "@layer components": { viewTimelineName: "--chat-16", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="17"]': { "@layer components": { viewTimelineName: "--chat-17", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="18"]': { "@layer components": { viewTimelineName: "--chat-18", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="19"]': { "@layer components": { viewTimelineName: "--chat-19", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="20"]': { "@layer components": { viewTimelineName: "--chat-20", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="21"]': { "@layer components": { viewTimelineName: "--chat-21", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="22"]': { "@layer components": { viewTimelineName: "--chat-22", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="23"]': { "@layer components": { viewTimelineName: "--chat-23", viewTimelineAxis: "block" } }, '.chat[data-chat-tl="24"]': { "@layer components": { viewTimelineName: "--chat-24", viewTimelineAxis: "block" } }, '.chat-scroll-indicator[data-chat-tl="1"]': { "@layer components": { animationTimeline: "--chat-1" } }, '.chat-scroll-indicator[data-chat-tl="2"]': { "@layer components": { animationTimeline: "--chat-2" } }, '.chat-scroll-indicator[data-chat-tl="3"]': { "@layer components": { animationTimeline: "--chat-3" } }, '.chat-scroll-indicator[data-chat-tl="4"]': { "@layer components": { animationTimeline: "--chat-4" } }, '.chat-scroll-indicator[data-chat-tl="5"]': { "@layer components": { animationTimeline: "--chat-5" } }, '.chat-scroll-indicator[data-chat-tl="6"]': { "@layer components": { animationTimeline: "--chat-6" } }, '.chat-scroll-indicator[data-chat-tl="7"]': { "@layer components": { animationTimeline: "--chat-7" } }, '.chat-scroll-indicator[data-chat-tl="8"]': { "@layer components": { animationTimeline: "--chat-8" } }, '.chat-scroll-indicator[data-chat-tl="9"]': { "@layer components": { animationTimeline: "--chat-9" } }, '.chat-scroll-indicator[data-chat-tl="10"]': { "@layer components": { animationTimeline: "--chat-10" } }, '.chat-scroll-indicator[data-chat-tl="11"]': { "@layer components": { animationTimeline: "--chat-11" } }, '.chat-scroll-indicator[data-chat-tl="12"]': { "@layer components": { animationTimeline: "--chat-12" } }, '.chat-scroll-indicator[data-chat-tl="13"]': { "@layer components": { animationTimeline: "--chat-13" } }, '.chat-scroll-indicator[data-chat-tl="14"]': { "@layer components": { animationTimeline: "--chat-14" } }, '.chat-scroll-indicator[data-chat-tl="15"]': { "@layer components": { animationTimeline: "--chat-15" } }, '.chat-scroll-indicator[data-chat-tl="16"]': { "@layer components": { animationTimeline: "--chat-16" } }, '.chat-scroll-indicator[data-chat-tl="17"]': { "@layer components": { animationTimeline: "--chat-17" } }, '.chat-scroll-indicator[data-chat-tl="18"]': { "@layer components": { animationTimeline: "--chat-18" } }, '.chat-scroll-indicator[data-chat-tl="19"]': { "@layer components": { animationTimeline: "--chat-19" } }, '.chat-scroll-indicator[data-chat-tl="20"]': { "@layer components": { animationTimeline: "--chat-20" } }, '.chat-scroll-indicator[data-chat-tl="21"]': { "@layer components": { animationTimeline: "--chat-21" } }, '.chat-scroll-indicator[data-chat-tl="22"]': { "@layer components": { animationTimeline: "--chat-22" } }, '.chat-scroll-indicator[data-chat-tl="23"]': { "@layer components": { animationTimeline: "--chat-23" } }, '.chat-scroll-indicator[data-chat-tl="24"]': { "@layer components": { animationTimeline: "--chat-24" } }, "@keyframes chat-scroll-indicator-activate": { "0%,\n 100%": { width: "var(--chat-scroll-indicator-size)", backgroundColor: "color-mix(in oklch, var(--color-on-surface) 28%, transparent)", opacity: 0.45 }, "35%,\n 65%": { width: "var(--chat-scroll-indicator-active-size)", backgroundColor: "var(--color-on-surface)", opacity: 1 } }, ".chat": { "@layer components": { display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", columnGap: "0.75rem", alignItems: "end", padding: "0.25rem 0" } }, ".chat-start": { "@layer components": { gridTemplateColumns: "auto minmax(0, 1fr)" } }, ".chat-end": { "@layer components": { gridTemplateColumns: "minmax(0, 1fr) auto" } }, ".chat-avatar": { "@layer components": { gridRow: "1 / span 999", gridColumn: "1", alignSelf: "start", justifySelf: "start" } }, ".chat-end .chat-avatar": { "@layer components": { gridColumn: "2", justifySelf: "end" } }, ".chat > :not(.chat-avatar)": { "@layer components": { gridColumn: "2", justifySelf: "start", maxWidth: "100%", marginBottom: "0.25rem" } }, ".chat-end > :not(.chat-avatar)": { "@layer components": { gridColumn: "1", justifySelf: "end" } }, ".chat-header, \n .chat-footer": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.75rem", lineHeight: "1rem" } }, ".chat-header": { "@layer components": { marginBottom: "0.125rem" } }, ".chat-footer": { "@layer components": { marginTop: "0.125rem", marginBottom: "0" } }, ".chat-bubble": { "@layer components": { "--chat-bubble-bg": "var(--color-surface-container-highest)", "--chat-bubble-fg": "var(--color-on-surface)", position: "relative", display: "flex", flexDirection: "column", alignItems: "stretch", gap: "0.5rem", maxWidth: "min(80ch, 100%)", padding: "0.625rem 0.875rem", borderRadius: "1rem", backgroundColor: "var(--chat-bubble-bg)", color: "var(--chat-bubble-fg)", boxShadow: "inset 0 0 0 1px var(--color-outline-variant)", fontSize: "0.875rem", lineHeight: 1.45, overflowWrap: "anywhere", wordBreak: "break-word" } }, ".chat-bubble-content": { "@layer components": { minWidth: "0" } }, ".chat-start .chat-bubble::before, \n .chat-end .chat-bubble::before": { "@layer components": { content: '""', position: "absolute", top: "0", width: "calc(1rem - 2px)", height: "calc(1rem - 2px)", backgroundColor: "var(--chat-bubble-bg)", clipPath: "polygon(0 0, 100% 0, 100% 100%)", filter: `drop-shadow(-1px 0 0 var(--color-outline-variant))
133
- drop-shadow(0 -1px 0 var(--color-outline-variant))`, pointerEvents: "none" } }, ".chat-start .chat-bubble::before": { "@layer components": { left: "-0.5rem" } }, ".chat-start .chat-bubble": { "@layer components": { borderTopLeftRadius: "0" } }, ".chat-end .chat-bubble::before": { "@layer components": { right: "-0.5rem", transform: "scaleX(-1)" } }, ".chat-end .chat-bubble": { "@layer components": { borderTopRightRadius: "0" } }, ".chat-bubble-primary": { "@layer components": { "--chat-bubble-bg": "var(--color-primary-container)", "--chat-bubble-fg": "var(--color-on-primary-container)" } }, ".chat-bubble-secondary": { "@layer components": { "--chat-bubble-bg": "var(--color-secondary-container)", "--chat-bubble-fg": "var(--color-on-secondary-container)" } }, ".chat-bubble-tertiary": { "@layer components": { "--chat-bubble-bg": "var(--color-tertiary-container)", "--chat-bubble-fg": "var(--color-on-tertiary-container)" } }, ".chat-bubble-info": { "@layer components": { "--chat-bubble-bg": "var(--color-info-container)", "--chat-bubble-fg": "var(--color-on-info-container)" } }, ".chat-bubble-success": { "@layer components": { "--chat-bubble-bg": "var(--color-success-container)", "--chat-bubble-fg": "var(--color-on-success-container)" } }, ".chat-bubble-warning": { "@layer components": { "--chat-bubble-bg": "var(--color-warning-container)", "--chat-bubble-fg": "var(--color-on-warning-container)" } }, ".chat-bubble-error": { "@layer components": { "--chat-bubble-bg": "var(--color-error-container)", "--chat-bubble-fg": "var(--color-on-error-container)" } }, ".chat-bubble-accent": { "@layer components": { "--chat-bubble-bg": "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", "--chat-bubble-fg": "var(--color-on-surface)" } }, ".chat-bubble-neutral": { "@layer components": { "--chat-bubble-bg": "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", "--chat-bubble-fg": "var(--color-on-surface)" } }, ".chat-bubble-base": { "@layer components": { "--chat-bubble-bg": "var(--color-base-200)", "--chat-bubble-fg": "var(--color-base-content)" } }, ".chat-bubble-filled.chat-bubble-primary": { "@layer components": { "--chat-bubble-bg": "var(--color-primary)", "--chat-bubble-fg": "var(--color-primary-content)" } }, ".chat-bubble-filled.chat-bubble-secondary": { "@layer components": { "--chat-bubble-bg": "var(--color-secondary)", "--chat-bubble-fg": "var(--color-secondary-content)" } }, ".chat-bubble-filled.chat-bubble-tertiary": { "@layer components": { "--chat-bubble-bg": "var(--color-tertiary)", "--chat-bubble-fg": "var(--color-tertiary-content)" } }, ".chat-bubble-filled.chat-bubble-info": { "@layer components": { "--chat-bubble-bg": "var(--color-info)", "--chat-bubble-fg": "var(--color-info-content)" } }, ".chat-bubble-filled.chat-bubble-success": { "@layer components": { "--chat-bubble-bg": "var(--color-success)", "--chat-bubble-fg": "var(--color-success-content)" } }, ".chat-bubble-filled.chat-bubble-warning": { "@layer components": { "--chat-bubble-bg": "var(--color-warning)", "--chat-bubble-fg": "var(--color-warning-content)" } }, ".chat-bubble-filled.chat-bubble-error": { "@layer components": { "--chat-bubble-bg": "var(--color-error)", "--chat-bubble-fg": "var(--color-error-content)" } }, ".chat-bubble-filled.chat-bubble-accent": { "@layer components": { "--chat-bubble-bg": "var(--color-accent)", "--chat-bubble-fg": "var(--color-accent-content)" } }, ".chat-bubble-filled.chat-bubble-neutral": { "@layer components": { "--chat-bubble-bg": "var(--color-neutral)", "--chat-bubble-fg": "var(--color-neutral-content)" } }, ".chat-bubble-filled.chat-bubble-base": { "@layer components": { "--chat-bubble-bg": "var(--color-base-100)", "--chat-bubble-fg": "var(--color-base-content)" } }, ".chat-bubble-xs": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem" } }, ".chat-bubble-sm": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.8125rem" } }, ".chat-bubble-md": { "@layer components": { padding: "0.625rem 0.875rem", fontSize: "0.875rem" } }, ".chat-bubble-lg": { "@layer components": { padding: "0.875rem 1.125rem", fontSize: "1rem" } }, ".chat-reasoning, \n .chat-tool": { "@layer components": { width: "min(80ch, 100%)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface-container-low)", color: "var(--color-on-surface)", fontSize: "0.8125rem", lineHeight: 1.45, overflow: "hidden" } }, ".chat-bubble > .chat-reasoning, \n .chat-bubble > .chat-tool, \n .chat-reasoning .chat-tool, \n .chat-reasoning-body > .chat-tool": { "@layer components": { width: "100%", maxWidth: "none" } }, ".chat-reasoning > summary, \n .chat-tool > summary": { "@layer components": { cursor: "pointer", listStylePosition: "inside" } }, ".chat-reasoning > summary": { "@layer components": { padding: "0.5rem 0.75rem", color: "var(--color-on-surface-variant)", fontWeight: 500 } }, ".chat-reasoning-body": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem", padding: "0 0.75rem 0.75rem", color: "var(--color-on-surface-variant)" } }, ".chat-reasoning-body > :not(.chat-tool)": { "@layer components": { fontStyle: "italic" } }, ".chat-reasoning > div:not(.chat-tool):not(.chat-reasoning-body)": { "@layer components": { padding: "0 0.75rem 0.75rem", color: "var(--color-on-surface-variant)", fontStyle: "italic" } }, ".chat-reasoning > .chat-tool": { "@layer components": { margin: "0 0.75rem 0.75rem" } }, ".chat-tool-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", color: "var(--color-on-surface)", fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace', fontSize: "0.75rem", fontWeight: 600 } }, ".chat-tool-status": { "@layer components": { display: "inline-flex", alignItems: "center", minHeight: "1.25rem", padding: "0.125rem 0.5rem", borderRadius: "999px", marginLeft: "auto", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: 1 } }, ".chat-tool-call, \n .chat-tool-result": { "@layer components": { padding: "0.75rem", borderTop: "1px solid var(--color-outline)", fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace', fontSize: "0.75rem", overflowX: "auto" } }, ".chat-tool-result": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-surface-container) 65%, transparent)" } }, ".chat-tool-pending .chat-tool-status": { "@layer components": { border: "1px solid var(--color-outline)", color: "var(--color-on-surface-variant)" } }, ".chat-tool-running .chat-tool-status": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".chat-tool-running .chat-tool-header::before": { "@layer components": { content: '""', width: "0.875rem", height: "0.875rem", border: "2px solid currentColor", borderTopColor: "transparent", borderRadius: "999px", animation: "chat-tool-spin 800ms linear infinite" } }, ".chat-tool-success .chat-tool-status": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".chat-tool-error .chat-tool-status": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".chat-typing": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", minWidth: "2.25rem" } }, ".chat-typing::before, \n .chat-typing::after, \n .chat-typing span": { "@layer components": { content: '""', width: "0.375rem", height: "0.375rem", borderRadius: "999px", backgroundColor: "currentColor", opacity: 0.55, animation: "chat-typing-dot 1.4s ease-in-out infinite" } }, ".chat-typing span": { "@layer components": { animationDelay: "150ms" } }, ".chat-typing::after": { "@layer components": { animationDelay: "300ms" } }, ".chat-bubble-streaming::after, \n .chat-bubble-content.chat-bubble-streaming::after": { "@layer components": { content: '""', position: "static", inset: "auto", display: "inline-block", width: "1px", height: "1em", marginLeft: "0.25rem", backgroundColor: "currentColor", clipPath: "none", transform: "none", verticalAlign: "-0.125em", animation: "chat-stream-caret 1s step-end infinite" } }, ".chat-bubble.chat-bubble-streaming:not(:has(.chat-reasoning, .chat-tool, .chat-bubble-content))": { "@layer components": { display: "block" } }, ".chat-bubble.chat-bubble-streaming:has(.chat-reasoning, .chat-tool, .chat-bubble-content)::after": { "@layer components": { content: "none" } }, ".chat-reasoning > summary:focus-visible, \n .chat-tool > summary:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, "@keyframes chat-typing-dot": { "0%,\n 80%,\n 100%": { opacity: 0.45, transform: "translateY(0)" }, "40%": { opacity: 1, transform: "translateY(-0.1875rem)" } }, "@keyframes chat-stream-caret": { "0%,\n 49%": { opacity: 1 }, "50%,\n 100%": { opacity: 0 } }, "@keyframes chat-tool-spin": { to: { transform: "rotate(360deg)" } }, ".chat-typing::before, \n .chat-typing::after, \n .chat-typing span, \n .chat-bubble-streaming::after, \n .chat-bubble-content.chat-bubble-streaming::after, \n .chat-tool-running .chat-tool-header::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }, ".chat-bubble-streaming::after, \n .chat-bubble-content.chat-bubble-streaming::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { opacity: 1 } } }, ".chip": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem", padding: "0.375rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", border: "1px solid currentColor", cursor: "default", transition: "all 150ms ease-in-out" } }, ".chip-clickable": { "@layer components": { cursor: "pointer" } }, ".chip-clickable:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".chip-clickable:active": { "@layer components": { transform: "scale(0.98)" } }, ".chip:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".chip-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".chip-primary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary), black 10%)" } }, ".chip-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)", borderColor: "var(--color-secondary)" } }, ".chip-secondary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary), black 10%)" } }, ".chip-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)", borderColor: "var(--color-tertiary)" } }, ".chip-tertiary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary), black 10%)" } }, ".chip-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)", borderColor: "var(--color-accent)" } }, ".chip-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent), black 10%)" } }, ".chip-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)", borderColor: "var(--color-neutral)" } }, ".chip-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral), black 10%)" } }, ".chip-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)", borderColor: "var(--color-base-100)" } }, ".chip-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".chip-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)", borderColor: "var(--color-info)" } }, ".chip-info:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-info), black 10%)" } }, ".chip-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)", borderColor: "var(--color-success)" } }, ".chip-success:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-success), black 10%)" } }, ".chip-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)", borderColor: "var(--color-warning)" } }, ".chip-warning:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-warning), black 10%)" } }, ".chip-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)", borderColor: "var(--color-error)" } }, ".chip-error:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-error), black 10%)" } }, ".chip-outlined": { "@layer components": { backgroundColor: "transparent", borderColor: "var(--color-outline)" } }, ".chip-outlined:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".chip-outlined.chip-primary": { "@layer components": { color: "var(--color-primary)" } }, ".chip-outlined.chip-primary:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".chip-outlined.chip-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".chip-outlined.chip-secondary:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".chip-outlined.chip-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".chip-outlined.chip-tertiary:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)" } }, ".chip-outlined.chip-accent": { "@layer components": { color: "var(--color-accent)" } }, ".chip-outlined.chip-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".chip-outlined.chip-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".chip-outlined.chip-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".chip-outlined.chip-base": { "@layer components": { color: "var(--color-base-content)" } }, ".chip-outlined.chip-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".chip-outlined.chip-info": { "@layer components": { color: "var(--color-info)" } }, ".chip-outlined.chip-info:hover": { "@layer components": { backgroundColor: "var(--color-info-container)" } }, ".chip-outlined.chip-success": { "@layer components": { color: "var(--color-success)" } }, ".chip-outlined.chip-success:hover": { "@layer components": { backgroundColor: "var(--color-success-container)" } }, ".chip-outlined.chip-warning": { "@layer components": { color: "var(--color-warning)" } }, ".chip-outlined.chip-warning:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)" } }, ".chip-outlined.chip-error": { "@layer components": { color: "var(--color-error)" } }, ".chip-outlined.chip-error:hover": { "@layer components": { backgroundColor: "var(--color-error-container)" } }, ".chip-tonal": { "@layer components": { backgroundColor: "var(--color-surface-container-high)", borderColor: "transparent" } }, ".chip-tonal.chip-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".chip-tonal.chip-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".chip-tonal.chip-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".chip-tonal.chip-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".chip-tonal.chip-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".chip-tonal.chip-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".chip-tonal.chip-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".chip-tonal.chip-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".chip-tonal.chip-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".chip-tonal.chip-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".chip-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".chip-ghost:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".chip-ghost.chip-primary": { "@layer components": { backgroundColor: "transparent", color: "var(--color-primary)" } }, ".chip-ghost.chip-secondary": { "@layer components": { backgroundColor: "transparent", color: "var(--color-secondary)" } }, ".chip-ghost.chip-tertiary": { "@layer components": { backgroundColor: "transparent", color: "var(--color-tertiary)" } }, ".chip-ghost.chip-info": { "@layer components": { backgroundColor: "transparent", color: "var(--color-info)" } }, ".chip-ghost.chip-success": { "@layer components": { backgroundColor: "transparent", color: "var(--color-success)" } }, ".chip-ghost.chip-warning": { "@layer components": { backgroundColor: "transparent", color: "var(--color-warning)" } }, ".chip-ghost.chip-error": { "@layer components": { backgroundColor: "transparent", color: "var(--color-error)" } }, ".chip-ghost.chip-accent": { "@layer components": { backgroundColor: "transparent", color: "var(--color-accent)" } }, ".chip-ghost.chip-neutral": { "@layer components": { backgroundColor: "transparent", color: "var(--color-neutral)" } }, ".chip-ghost.chip-base": { "@layer components": { backgroundColor: "transparent", color: "var(--color-base-content)" } }, ".chip-ghost.chip-primary:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".chip-ghost.chip-secondary:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".chip-ghost.chip-tertiary:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)" } }, ".chip-ghost.chip-info:hover": { "@layer components": { backgroundColor: "var(--color-info-container)" } }, ".chip-ghost.chip-success:hover": { "@layer components": { backgroundColor: "var(--color-success-container)" } }, ".chip-ghost.chip-warning:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)" } }, ".chip-ghost.chip-error:hover": { "@layer components": { backgroundColor: "var(--color-error-container)" } }, ".chip-ghost.chip-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".chip-ghost.chip-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".chip-ghost.chip-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".chip-sm": { "@layer components": { padding: "0.25rem 0.5rem", fontSize: "0.75rem", lineHeight: "1rem", gap: "0.25rem" } }, ".chip-lg": { "@layer components": { padding: "0.5rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", gap: "0.5rem" } }, ".chip-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.125rem", height: "1.125rem", fontSize: "1rem" } }, ".chip-label": { "@layer components": { display: "inline-flex" } }, ".chip-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.125rem", height: "1.125rem", marginLeft: "0.125rem", fontSize: "1rem", color: "currentColor", opacity: 0.7, backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "opacity 150ms ease-in-out" } }, ".chip-close:hover": { "@layer components": { opacity: 1 } }, ".chip-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".chip-selected.chip-outlined": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".chip:disabled, \n .chip-disabled": { "@layer components": { opacity: 0.7, pointerEvents: "none", cursor: "not-allowed" } }, ".chip-group": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, ".chip, \n .chip-delete": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".list": { "@layer components": { display: "flex", flexDirection: "column", margin: "0", padding: "0.5rem 0", listStyle: "none" } }, ".list-item": [{ "@layer components": { display: "flex", alignItems: "center", gap: "1rem", padding: "0.75rem 1rem", color: "var(--color-on-surface)", textDecoration: "none", transition: "background-color 150ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], "a.list-item, \n button.list-item, \n .list-item-clickable": { "@layer components": { cursor: "pointer" } }, "a.list-item:hover, \n button.list-item:hover, \n .list-item-clickable:hover, \n .list-hoverable .list-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".list-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", backgroundColor: "var(--color-surface-container)" } }, ".list-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".list-item-content": { "@layer components": { display: "flex", flexDirection: "column", flex: 1, minWidth: "0" } }, ".list-item-title": { "@layer components": { fontSize: "1rem", fontWeight: 500, lineHeight: "1.5rem", color: "var(--color-on-surface)" } }, ".list-item-subtitle": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".list-item-action": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", flexShrink: 0, color: "var(--color-on-surface-variant)" } }, ".list-bordered": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", padding: "0" } }, ".list-bordered .list-item": { "@layer components": { borderBottom: "1px solid var(--color-outline)" } }, ".list-bordered .list-item:last-child": { "@layer components": { borderBottom: "none" } }, ".list-compact .list-item": { "@layer components": { padding: "0.5rem 1rem" } }, ".list-compact .list-item-title": { "@layer components": { fontSize: "0.875rem" } }, ".list-compact .list-item-subtitle": { "@layer components": { fontSize: "0.75rem" } }, ".list-divider": { "@layer components": { height: "1px", margin: "0.5rem 0", backgroundColor: "var(--color-outline-variant)" } }, ".list-divider-inset": { "@layer components": { marginLeft: "3.5rem" } }, ".list-subheader": { "@layer components": { padding: "0.75rem 1rem", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".list-item-active, \n .list-item.active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".list-item-active .list-item-icon, \n .list-item.active .list-item-icon": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".list-item:disabled, \n .list-item-disabled": { "@layer components": { opacity: 0.7, pointerEvents: "none", cursor: "not-allowed" } }, ".list-dense .list-item": { "@layer components": { padding: "0.375rem 1rem" } }, ".list-dense .list-item-icon": { "@layer components": { width: "1.25rem", height: "1.25rem", fontSize: "1rem" } }, ".list-two-line .list-item": { "@layer components": { padding: "0.5rem 1rem" } }, ".list-three-line .list-item": { "@layer components": { alignItems: "flex-start", padding: "0.75rem 1rem" } }, ".list-three-line .list-item-content": { "@layer components": { gap: "0.25rem" } }, ".table": { "@layer components": { width: "100%", borderCollapse: "collapse", borderSpacing: "0", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".table-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".table thead, \n .table-header": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".table th, \n .table-header-cell": { "@layer components": { padding: "0.75rem 1rem", fontWeight: 600, textAlign: "left", color: "var(--color-on-surface)", borderBottom: "2px solid var(--color-outline)" } }, ".table tbody, \n .table-body": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".table td, \n .table-cell": { "@layer components": { padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-outline-variant)", verticalAlign: "middle" } }, ".table tr:last-child td, \n .table-row:last-child .table-cell": { "@layer components": { borderBottom: "none" } }, ".table tfoot, \n .table-footer": { "@layer components": { backgroundColor: "var(--color-surface-container)", fontWeight: 500 } }, ".table tfoot td": { "@layer components": { borderTop: "2px solid var(--color-outline)", borderBottom: "none" } }, ".table-zebra tbody tr:nth-child(even), \n .table-zebra .table-row:nth-child(even), \n .table-striped tbody tr:nth-child(even), \n .table-striped .table-row:nth-child(even)": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".table-hover tbody tr:hover, \n .table-hover .table-row:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".table-bordered": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", overflow: "hidden" } }, ".table-bordered th, \n .table-bordered td": { "@layer components": { border: "1px solid var(--color-outline-variant)" } }, ".table-borderless, \n .table-borderless th, \n .table-borderless td, \n .table-borderless tfoot td, \n .table-borderless .table-header-cell, \n .table-borderless .table-cell": { "@layer components": { border: "none" } }, ".table-compact th, \n .table-compact td": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.8125rem" } }, ".table-comfortable th, \n .table-comfortable td": { "@layer components": { padding: "1rem 1.25rem" } }, ".table-fixed": { "@layer components": { tableLayout: "fixed" } }, ".table-sticky thead, \n .table-sticky .table-header": { "@layer components": { position: "sticky", top: "0", zIndex: 10, backgroundColor: "var(--color-surface-container)", boxShadow: "var(--shadow-xs)" } }, ".table-sortable th": { "@layer components": { cursor: "pointer", userSelect: "none" } }, ".table-sortable th:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".table-sort-asc::after": { "@layer components": { content: "' ↑'", opacity: 0.7 } }, ".table-sort-desc::after": { "@layer components": { content: "' ↓'", opacity: 0.7 } }, ".table-selectable tbody tr, \n .table-selectable .table-row": { "@layer components": { cursor: "pointer" } }, ".table-selectable tbody tr:hover, \n .table-selectable .table-row:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 8%, transparent)" } }, ".table-row-selected, \n .table tr.selected, \n .table-selectable tbody tr.table-row-selected, \n .table-selectable .table-row.table-row-selected, \n .table-selectable tbody tr.selected, \n .table-selectable .table-row.selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".table-row-clickable, \n .table tbody tr[data-href]": { "@layer components": { cursor: "pointer" } }, ".table-responsive": { "@layer components": { display: "block", width: "100%", overflowX: "auto", WebkitOverflowScrolling: "touch" } }, ".table-responsive .table": { "@layer components": { minWidth: "100%" } }, ".table caption, \n .table-caption": { "@layer components": { padding: "0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface-variant)", textAlign: "left", captionSide: "bottom" } }, ".table-empty": { "@layer components": { textAlign: "center", padding: "2rem", color: "var(--color-on-surface-variant)" } }, ".table-loading": { "@layer components": { position: "relative" } }, ".table-loading::after": { "@layer components": { content: "''", position: "absolute", inset: "0", backgroundColor: "var(--color-surface)", opacity: 0.7 } }, ".table-pin-left": { "@layer components": { position: "sticky", left: "0", backgroundColor: "inherit", zIndex: 1 } }, ".table-pin-right": { "@layer components": { position: "sticky", right: "0", backgroundColor: "inherit", zIndex: 1 } }, ".table tr:focus-visible, \n .table-row:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".autocomplete": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".autocomplete-input": { "@layer components": { width: "100%", padding: "0.75rem 1rem", fontSize: "0.875rem", lineHeight: 1.5, color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".autocomplete-input:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".autocomplete-input:disabled": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", cursor: "not-allowed", opacity: 0.6 } }, ".autocomplete-dropdown": [{ "@layer components": { position: "absolute", top: "100%", left: "0", right: "0", zIndex: 1000, maxHeight: "15rem", marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-lg)", overflowY: "auto", opacity: 0, visibility: "hidden", transform: "translateY(-0.5rem)", transition: "opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".autocomplete.autocomplete-open .autocomplete-dropdown, \n .autocomplete-dropdown.show": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".autocomplete-option": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".autocomplete-option:hover, \n .autocomplete-option:focus, \n .autocomplete-option.highlighted": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".autocomplete-option.selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".autocomplete-option:disabled, \n .autocomplete-option.disabled": { "@layer components": { color: "var(--color-on-surface-variant)", cursor: "not-allowed", opacity: 0.6 } }, ".autocomplete-option-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", flexShrink: 0 } }, ".autocomplete-option-content": { "@layer components": { flex: 1, minWidth: "0" } }, ".autocomplete-option-label": { "@layer components": { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".autocomplete-option-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".autocomplete-highlight": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", fontWeight: 600, borderRadius: "var(--radius-xs)" } }, ".autocomplete-group-header": { "@layer components": { padding: "0.5rem 1rem", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", color: "var(--color-on-surface-variant)", backgroundColor: "var(--color-surface-container)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".autocomplete-no-results": { "@layer components": { padding: "1rem", textAlign: "center", fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".autocomplete-loading": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "1rem", color: "var(--color-on-surface-variant)" } }, ".autocomplete-clear": { "@layer components": { position: "absolute", right: "0.75rem", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".autocomplete-clear:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".autocomplete-clearable .autocomplete-input": { "@layer components": { paddingRight: "2.5rem" } }, ".autocomplete-tags": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", padding: "0.375rem", paddingRight: "2.5rem", minHeight: "2.75rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".autocomplete-tags:focus-within": { "@layer components": { borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px var(--color-primary-container)" } }, ".autocomplete-tag": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", padding: "0.25rem 0.5rem", fontSize: "0.75rem", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "var(--radius-xs)" } }, ".autocomplete-tag-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", fontSize: "0.75rem", backgroundColor: "transparent", border: "none", cursor: "pointer", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".autocomplete-tag-remove:hover": { "@layer components": { backgroundColor: "var(--color-on-primary-container)", color: "var(--color-primary-container)" } }, ".autocomplete-tags-input": { "@layer components": { flex: 1, minWidth: "5rem", padding: "0.25rem", fontSize: "0.875rem", backgroundColor: "transparent", border: "none", outline: "none" } }, ".autocomplete-primary .autocomplete-input": { "@layer components": { color: "var(--color-primary)" } }, ".autocomplete-primary .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".autocomplete-secondary .autocomplete-input": { "@layer components": { color: "var(--color-secondary)" } }, ".autocomplete-secondary .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".autocomplete-tertiary .autocomplete-input": { "@layer components": { color: "var(--color-tertiary)" } }, ".autocomplete-tertiary .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".autocomplete-info .autocomplete-input": { "@layer components": { color: "var(--color-info)" } }, ".autocomplete-info .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".autocomplete-success .autocomplete-input": { "@layer components": { color: "var(--color-success)" } }, ".autocomplete-success .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".autocomplete-warning .autocomplete-input": { "@layer components": { color: "var(--color-warning)" } }, ".autocomplete-warning .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".autocomplete-error .autocomplete-input": { "@layer components": { color: "var(--color-error)" } }, ".autocomplete-error .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".autocomplete-accent .autocomplete-input": { "@layer components": { color: "var(--color-accent)" } }, ".autocomplete-accent .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".autocomplete-neutral .autocomplete-input": { "@layer components": { color: "var(--color-neutral)" } }, ".autocomplete-neutral .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".autocomplete-base .autocomplete-input": { "@layer components": { color: "var(--color-base-content)" } }, ".autocomplete-base .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".autocomplete-ghost .autocomplete-input": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".autocomplete-ghost .autocomplete-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".autocomplete-sm .autocomplete-input": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem" } }, ".autocomplete-lg .autocomplete-input": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1rem" } }, ".cascader": [{ "@layer components": { position: "relative", display: "inline-flex", flexDirection: "column", width: "100%" } }, { "@layer components": { "@supports not (anchor-name: --anchor)": { position: "relative" } } }], ".cascader-trigger": [{ "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, { "@layer components": { "@supports (anchor-name: --anchor)": { anchorName: "--cascader-anchor" } } }], ".cascader-trigger:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".cascader-trigger:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".cascader-trigger:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".cascader-value": { "@layer components": { flex: 1, display: "flex", alignItems: "center", gap: "0.5rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--color-on-surface)" } }, ".cascader-placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".cascader-path": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".cascader-path-separator": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".cascader-arrow": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", flexShrink: 0, transition: "transform 150ms ease-in-out" } }, ".cascader-open .cascader-arrow": { "@layer components": { transform: "rotate(180deg)" } }, ".cascader-clear": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", padding: "0", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", flexShrink: 0, transition: "background-color 150ms ease-in-out" } }, ".cascader-clear:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".cascader-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", zIndex: 50, display: "none", marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", overflow: "hidden" } }, ".cascader-open .cascader-dropdown": { "@layer components": { display: "flex" } }, ".cascader-dropdown[popover]": [{ "@layer components": { inset: "unset", margin: "0", border: "1px solid var(--color-outline-variant)" } }, { "@layer components": { "@supports (anchor-name: --anchor)": { positionAnchor: "--cascader-anchor", top: "anchor(bottom)", left: "anchor(left)", marginTop: "0.25rem", positionTryFallbacks: "flip-block" } } }], ".cascader-dropdown[popover]:popover-open": [{ "@layer components": { display: "flex" } }, { "@layer components": { "@supports not (anchor-name: --anchor)": { position: "absolute", top: "100%", left: "0", marginTop: "0.25rem" } } }], ".cascader-panels": { "@layer components": { display: "flex", maxHeight: "16rem" } }, ".cascader-panel": { "@layer components": { display: "flex", flexDirection: "column", minWidth: "10rem", maxWidth: "14rem", overflowY: "auto", borderRight: "1px solid var(--color-outline-variant)" } }, ".cascader-panel:last-child": { "@layer components": { borderRight: "none" } }, ".cascader-panel-header": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", fontWeight: 600, color: "var(--color-on-surface-variant)", textTransform: "uppercase", letterSpacing: "0.05em", backgroundColor: "var(--color-surface-container)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".cascader-options": { "@layer components": { display: "flex", flexDirection: "column", padding: "0.25rem", flex: 1, overflowY: "auto" } }, ".cascader-option": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", width: "100%", transition: "background-color 150ms ease-in-out" } }, ".cascader-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".cascader-option-active": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".cascader-option-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".cascader-option-selected:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".cascader-option-disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".cascader-option-disabled:hover": { "@layer components": { backgroundColor: "transparent" } }, ".cascader-option-label": { "@layer components": { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".cascader-option-arrow": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".cascader-option-selected .cascader-option-arrow": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".cascader-search": { "@layer components": { display: "flex", padding: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".cascader-search-input": { "@layer components": { flex: 1, padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-xs)", outline: "none" } }, ".cascader-search-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".cascader-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".cascader-empty": { "@layer components": { padding: "1.5rem", textAlign: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".cascader-sm .cascader-trigger": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".cascader-sm .cascader-panel": { "@layer components": { minWidth: "8rem", maxWidth: "12rem" } }, ".cascader-sm .cascader-option": { "@layer components": { padding: "0.375rem 0.5rem", fontSize: "0.8125rem" } }, ".cascader-lg .cascader-trigger": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".cascader-lg .cascader-panel": { "@layer components": { minWidth: "12rem", maxWidth: "16rem" } }, ".cascader-lg .cascader-option": { "@layer components": { padding: "0.625rem 1rem", fontSize: "1rem" } }, ".cascader-outlined .cascader-trigger": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)" } }, ".cascader-filled .cascader-trigger": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".cascader-filled .cascader-trigger:focus": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".cascader-primary .cascader-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".cascader-primary .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".cascader-secondary .cascader-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".cascader-secondary .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".cascader-tertiary .cascader-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".cascader-tertiary .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".cascader-info .cascader-trigger": { "@layer components": { color: "var(--color-info)" } }, ".cascader-info .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".cascader-success .cascader-trigger": { "@layer components": { color: "var(--color-success)" } }, ".cascader-success .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".cascader-warning .cascader-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".cascader-warning .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".cascader-error .cascader-trigger": { "@layer components": { color: "var(--color-error)" } }, ".cascader-error .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".cascader-accent .cascader-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".cascader-accent .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".cascader-neutral .cascader-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".cascader-neutral .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".cascader-base .cascader-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".cascader-base .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".cascader-ghost .cascader-trigger": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".cascader-ghost .cascader-trigger:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".cascader-disabled .cascader-trigger": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".cascader-loading .cascader-trigger": { "@layer components": { cursor: "wait" } }, ".cascader-spinner": [{ "@layer components": { display: "inline-block", width: "1rem", height: "1rem", border: "2px solid var(--color-outline)", borderTopColor: "var(--color-primary)", borderRadius: "var(--radius-full)", animation: "cascader-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes cascader-spin": { to: { transform: "rotate(360deg)" } }, ".cascader-trigger, \n .cascader-arrow, \n .cascader-option, \n .cascader-clear": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".checkbox::before": { "@layer components": { content: '""', width: "0.65em", height: "0.35em", transform: "scale(0) rotate(-45deg)", transformOrigin: "center", borderBottom: "2px solid var(--color-primary-content)", borderLeft: "2px solid var(--color-primary-content)", transition: "transform 150ms ease-in-out" } }, ".checkbox:checked::before": { "@layer components": { transform: "scale(1) rotate(-45deg)" } }, ".checkbox:indeterminate": { "@layer components": { backgroundColor: "var(--checkbox-color)", borderColor: "var(--checkbox-color)" } }, ".checkbox:indeterminate::before": { "@layer components": { width: "0.5em", height: "0", borderBottom: "2px solid var(--color-primary-content)", borderLeft: "0", transform: "scale(1) rotate(0deg)" } }, ".checkbox:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "var(--color-on-surface)" } }, ".checkbox:checked:hover:not(:disabled), \n .checkbox:indeterminate:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--checkbox-color), black 10%)", borderColor: "color-mix(in oklch, var(--checkbox-color), black 10%)" } }, ".checkbox-md": { "@layer components": { "--checkbox-size": "1.25rem" } }, ".checkbox-xl": { "@layer components": { "--checkbox-size": "1.75rem" } }, ".checkbox-primary": { "@layer components": { "--checkbox-color": "var(--color-primary)" } }, ".checkbox-primary:checked::before, \n .checkbox-primary:indeterminate::before": { "@layer components": { borderColor: "var(--color-primary-content)" } }, ".checkbox-secondary": { "@layer components": { "--checkbox-color": "var(--color-secondary)" } }, ".checkbox-secondary:checked::before, \n .checkbox-secondary:indeterminate::before": { "@layer components": { borderColor: "var(--color-secondary-content)" } }, ".checkbox-tertiary": { "@layer components": { "--checkbox-color": "var(--color-tertiary)" } }, ".checkbox-tertiary:checked::before, \n .checkbox-tertiary:indeterminate::before": { "@layer components": { borderColor: "var(--color-tertiary-content)" } }, ".checkbox-success": { "@layer components": { "--checkbox-color": "var(--color-success)" } }, ".checkbox-success:checked::before, \n .checkbox-success:indeterminate::before": { "@layer components": { borderColor: "var(--color-success-content)" } }, ".checkbox-warning": { "@layer components": { "--checkbox-color": "var(--color-warning)" } }, ".checkbox-warning:checked::before, \n .checkbox-warning:indeterminate::before": { "@layer components": { borderColor: "var(--color-warning-content)" } }, ".checkbox-error": { "@layer components": { "--checkbox-color": "var(--color-error)" } }, ".checkbox-error:checked::before, \n .checkbox-error:indeterminate::before": { "@layer components": { borderColor: "var(--color-error-content)" } }, ".checkbox-info": { "@layer components": { "--checkbox-color": "var(--color-info)" } }, ".checkbox-info:checked::before, \n .checkbox-info:indeterminate::before": { "@layer components": { borderColor: "var(--color-info-content)" } }, ".checkbox-accent": { "@layer components": { "--checkbox-color": "var(--color-accent)" } }, ".checkbox-accent:checked::before, \n .checkbox-accent:indeterminate::before": { "@layer components": { borderColor: "var(--color-accent-content)" } }, ".checkbox-neutral": { "@layer components": { "--checkbox-color": "var(--color-neutral)" } }, ".checkbox-neutral:checked::before, \n .checkbox-neutral:indeterminate::before": { "@layer components": { borderColor: "var(--color-neutral-content)" } }, ".checkbox-base": { "@layer components": { "--checkbox-color": "var(--color-base-100)" } }, ".checkbox-base:checked::before, \n .checkbox-base:indeterminate::before": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".checkbox-ghost": { "@layer components": { "--checkbox-border-color": "transparent" } }, ".checkbox-ghost:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "transparent" } }, ".checkbox-label": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".checkbox-label:has(.checkbox:disabled)": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".checkbox-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".checkbox-group-horizontal": { "@layer components": { flexDirection: "row", flexWrap: "wrap", gap: "1.5rem" } }, ".checkbox-group-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", marginBottom: "0.5rem" } }, ".checkbox, \n .checkbox::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".datepicker": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".datepicker-input": { "@layer components": { width: "100%", padding: "0.75rem 2.5rem 0.75rem 1rem", fontSize: "0.875rem", lineHeight: 1.5, color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, '.datepicker-input-container .datepicker-input[type="date"]::-webkit-calendar-picker-indicator': { "@layer components": { display: "none", WebkitAppearance: "none" } }, '.datepicker-input-container .datepicker-input[type="date"]::-webkit-inner-spin-button, \n .datepicker-input-container .datepicker-input[type="date"]::-webkit-clear-button': { "@layer components": { display: "none", WebkitAppearance: "none" } }, ".datepicker-input:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".datepicker-input:disabled": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", cursor: "not-allowed", opacity: 0.6 } }, ".datepicker-icon": { "@layer components": { position: "absolute", right: "0.75rem", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", pointerEvents: "none" } }, ".datepicker-input-container": { "@layer components": { position: "relative", display: "flex", alignItems: "center", width: "100%" } }, ".datepicker-input-container .datepicker-input": { "@layer components": { paddingRight: "2.5rem" } }, ".datepicker-trigger": { "@layer components": { position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", padding: "0", background: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", color: "var(--color-on-surface-variant)", transition: "background-color 150ms ease-in-out" } }, ".datepicker-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-trigger .datepicker-icon": { "@layer components": { position: "static", transform: "none" } }, ".datepicker-dropdown:not([popover])": { "@layer components": { position: "absolute", top: "100%", left: "0", zIndex: 1000, marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", opacity: 0, visibility: "hidden", transform: "translateY(-0.5rem)", transition: "opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out" } }, ".datepicker.datepicker-open .datepicker-dropdown:not([popover]), \n .datepicker-dropdown:not([popover]).show, \n .datepicker-dropdown-open:not([popover])": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".datepicker-dropdown[popover]": { "@layer components": { inset: "unset", margin: "0", padding: "0", minWidth: "18rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)" } }, ".datepicker-header": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datepicker-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".datepicker-nav": { "@layer components": { display: "flex", gap: "0.25rem" } }, ".datepicker-nav-btn": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".datepicker-nav-btn:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".datepicker-nav-btn:disabled": { "@layer components": { opacity: 0.4, cursor: "not-allowed" } }, ".datepicker-calendar": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0.125rem", padding: "0.5rem" } }, ".datepicker-weekdays": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0.125rem", marginBottom: "0.25rem" } }, ".datepicker-weekday": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", aspectRatio: "1", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-on-surface-variant)" } }, ".datepicker-days": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0.125rem" } }, ".datepicker-day": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", aspectRatio: "1", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".datepicker-day:hover:not(:disabled):not(.datepicker-day-selected)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-day:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".datepicker-day-other-month": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.9 } }, ".datepicker-day-today": { "@layer components": { border: "1px solid var(--color-primary)" } }, ".datepicker-day-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datepicker-day-selected:hover": { "@layer components": { backgroundColor: "var(--color-primary)", opacity: 0.9 } }, ".datepicker-day:disabled": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.4, cursor: "not-allowed" } }, ".datepicker-day-in-range": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "0" } }, ".datepicker-day-range-start": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderRadius: "var(--radius-full) 0 0 var(--radius-full)" } }, ".datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderRadius: "0 var(--radius-full) var(--radius-full) 0" } }, ".datepicker-months, \n .datepicker-years": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.5rem", padding: "0.5rem", minWidth: "16rem" } }, ".datepicker-month, \n .datepicker-year": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", padding: "0.75rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".datepicker-month:hover, \n .datepicker-year:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-month.selected, \n .datepicker-month-selected, \n .datepicker-year.selected, \n .datepicker-year-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datepicker-day-disabled": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.9, cursor: "not-allowed", pointerEvents: "none" } }, ".datepicker-footer": { "@layer components": { display: "flex", justifyContent: "flex-end", gap: "0.5rem", padding: "0.75rem", borderTop: "1px solid var(--color-outline-variant)" } }, ".datepicker-time": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", padding: "0.75rem", borderTop: "1px solid var(--color-outline-variant)" } }, ".datepicker-time-input": { "@layer components": { width: "3rem", padding: "0.5rem", fontSize: "1rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-xs)" } }, ".datepicker-time-input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)" } }, ".datepicker-time-separator": { "@layer components": { fontSize: "1rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".datepicker-time-period": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.125rem", marginLeft: "0.5rem" } }, ".datepicker-time-period-btn": { "@layer components": { padding: "0.25rem 0.5rem", fontSize: "0.625rem", fontWeight: 500, color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "1px solid var(--color-outline)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".datepicker-time-period-btn:first-child": { "@layer components": { borderRadius: "var(--radius-xs) var(--radius-xs) 0 0" } }, ".datepicker-time-period-btn:last-child": { "@layer components": { borderRadius: "0 0 var(--radius-xs) var(--radius-xs)", borderTop: "none" } }, ".datepicker-time-period-btn.active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".datepicker-sm .datepicker-input": { "@layer components": { padding: "0.5rem 2rem 0.5rem 0.75rem", fontSize: "0.75rem" } }, ".datepicker-lg .datepicker-input": { "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1rem" } }, ".datepicker-range": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".datepicker-range-separator": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".datepicker-range-input": { "@layer components": { flex: 1 } }, ".datepicker-dual-calendar": { "@layer components": { display: "flex", gap: "1rem", padding: "0.5rem" } }, ".datepicker-dual-calendar .datepicker-calendar": { "@layer components": { flex: 1 } }, ".datepicker-presets": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", padding: "0.5rem", borderRight: "1px solid var(--color-outline-variant)", minWidth: "8rem" } }, ".datepicker-preset": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".datepicker-preset:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-preset-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".datepicker-range-display": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem", backgroundColor: "var(--color-surface-container-lowest)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datepicker-range-date": { "@layer components": { flex: 1, textAlign: "center" } }, ".datepicker-range-date-label": { "@layer components": { fontSize: "0.625rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textTransform: "uppercase", marginBottom: "0.25rem" } }, ".datepicker-range-date-value": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".datepicker-range-arrow": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".datetime-picker": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".datetime-picker-input": { "@layer components": { width: "100%", padding: "0.75rem 2.5rem 0.75rem 1rem", fontSize: "0.875rem", lineHeight: 1.5, color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".datetime-picker-input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".datetime-picker-dropdown": { "@layer components": { display: "flex", flexDirection: "column" } }, ".datetime-picker-body": { "@layer components": { display: "flex" } }, ".datetime-picker-calendar": { "@layer components": { flex: 1 } }, ".datetime-picker-time-panel": { "@layer components": { display: "flex", flexDirection: "column", minWidth: "5rem", borderLeft: "1px solid var(--color-outline-variant)" } }, ".datetime-picker-time-header": { "@layer components": { padding: "0.5rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textAlign: "center", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datetime-picker-time-columns": { "@layer components": { display: "flex", flex: 1, maxHeight: "16rem" } }, ".datetime-picker-time-column": { "@layer components": { flex: 1, display: "flex", flexDirection: "column", overflowY: "auto", borderRight: "1px solid var(--color-outline-variant)" } }, ".datetime-picker-time-column:last-child": { "@layer components": { borderRight: "none" } }, ".datetime-picker-time-option": { "@layer components": { padding: "0.375rem 0.5rem", fontSize: "0.75rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".datetime-picker-time-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datetime-picker-time-option-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datetime-picker-time-option:disabled": { "@layer components": { opacity: 0.4, cursor: "not-allowed" } }, ".datetime-range-picker": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".datetime-range-picker-inputs": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".datetime-range-picker-input": { "@layer components": { flex: 1, padding: "0.75rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out" } }, ".datetime-range-picker-input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".datetime-range-picker-dropdown": { "@layer components": { minWidth: "40rem" } }, ".datetime-range-picker-body": { "@layer components": { display: "flex" } }, ".datetime-range-picker-panel": { "@layer components": { flex: 1, borderRight: "1px solid var(--color-outline-variant)" } }, ".datetime-range-picker-panel:last-child": { "@layer components": { borderRight: "none" } }, ".datetime-range-picker-panel-header": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textAlign: "center", backgroundColor: "var(--color-surface-container-lowest)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datepicker-inline": { "@layer components": { position: "static" } }, ".datepicker-inline .datepicker-dropdown, \n .datepicker-dropdown.datepicker-inline": { "@layer components": { position: "static", display: "block", opacity: 1, visibility: "visible", transform: "none", marginTop: "0", boxShadow: "none" } }, ".datepicker-primary .datepicker-input": { "@layer components": { color: "var(--color-primary)" } }, ".datepicker-primary .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".datepicker-secondary .datepicker-input": { "@layer components": { color: "var(--color-secondary)" } }, ".datepicker-secondary .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".datepicker-tertiary .datepicker-input": { "@layer components": { color: "var(--color-tertiary)" } }, ".datepicker-tertiary .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".datepicker-info .datepicker-input": { "@layer components": { color: "var(--color-info)" } }, ".datepicker-info .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".datepicker-info .datepicker-day-selected, \n .datepicker-info .datepicker-day-range-start, \n .datepicker-info .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".datepicker-success .datepicker-input": { "@layer components": { color: "var(--color-success)" } }, ".datepicker-success .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".datepicker-success .datepicker-day-selected, \n .datepicker-success .datepicker-day-range-start, \n .datepicker-success .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".datepicker-warning .datepicker-input": { "@layer components": { color: "var(--color-warning)" } }, ".datepicker-warning .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".datepicker-warning .datepicker-day-selected, \n .datepicker-warning .datepicker-day-range-start, \n .datepicker-warning .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".datepicker-accent .datepicker-input": { "@layer components": { color: "var(--color-accent)" } }, ".datepicker-accent .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".datepicker-accent .datepicker-day-selected, \n .datepicker-accent .datepicker-day-range-start, \n .datepicker-accent .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".datepicker-neutral .datepicker-input": { "@layer components": { color: "var(--color-neutral)" } }, ".datepicker-neutral .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".datepicker-neutral .datepicker-day-selected, \n .datepicker-neutral .datepicker-day-range-start, \n .datepicker-neutral .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".datepicker-base .datepicker-input": { "@layer components": { color: "var(--color-base-content)" } }, ".datepicker-base .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".datepicker-base .datepicker-day-selected, \n .datepicker-base .datepicker-day-range-start, \n .datepicker-base .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".datepicker-primary .datepicker-day-selected, \n .datepicker-primary .datepicker-day-range-start, \n .datepicker-primary .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datepicker-secondary .datepicker-day-selected, \n .datepicker-secondary .datepicker-day-range-start, \n .datepicker-secondary .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".datepicker-tertiary .datepicker-day-selected, \n .datepicker-tertiary .datepicker-day-range-start, \n .datepicker-tertiary .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".datepicker-error .datepicker-input, \n .datetime-picker-error .datetime-picker-input": { "@layer components": { color: "var(--color-error)" } }, ".datepicker-error .datepicker-input:focus, \n .datetime-picker-error .datetime-picker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".datepicker-ghost .datepicker-input": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".datepicker-ghost .datepicker-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".datepicker-dropdown, \n .datepicker-nav-btn, \n .datepicker-day, \n .datepicker-month, \n .datepicker-year, \n .datepicker-preset, \n .datetime-picker-time-option": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".file-upload": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".file-upload-dropzone": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.75rem", minHeight: "10rem", padding: "2rem", backgroundColor: "var(--color-surface)", border: "2px dashed currentColor", borderRadius: "var(--radius-md)", cursor: "pointer", transition: "border-color 150ms ease-in-out, background-color 150ms ease-in-out" } }, ".file-upload-dropzone:hover": { "@layer components": { borderColor: "currentColor", backgroundColor: "var(--color-surface-container)" } }, ".file-upload-dropzone:focus-within": { "@layer components": { borderColor: "currentColor", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-upload-dropzone.dragging": { "@layer components": { borderColor: "currentColor", backgroundColor: "color-mix(in oklch, currentColor 10%, var(--color-surface))" } }, ".file-upload-dropzone.disabled": { "@layer components": { opacity: 0.6, cursor: "not-allowed", pointerEvents: "none" } }, ".file-upload-input": { "@layer components": { position: "absolute", width: "0", height: "0", opacity: 0, overflow: "hidden" } }, ".file-upload-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "3rem", height: "3rem", fontSize: "2rem" } }, ".file-upload-text": { "@layer components": { textAlign: "center" } }, ".file-upload-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".file-upload-subtitle": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".file-upload-browse": { "@layer components": { color: "currentColor", fontWeight: 500, textDecoration: "underline", cursor: "pointer" } }, ".file-upload-list": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".file-upload-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-sm)" } }, ".file-upload-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "var(--radius-sm)", fontSize: "1.25rem", flexShrink: 0 } }, ".file-upload-item-info": { "@layer components": { flex: 1, minWidth: "0" } }, ".file-upload-item-name": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".file-upload-item-size": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".file-upload-item-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", flexShrink: 0 } }, ".file-upload-item-remove:hover": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".file-upload-progress": { "@layer components": { position: "relative", height: "0.25rem", marginTop: "0.5rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-full)", overflow: "hidden" } }, ".file-upload-progress-bar": { "@layer components": { position: "absolute", top: "0", left: "0", height: "100%", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)", transition: "width 150ms ease-in-out" } }, ".file-upload-item.uploading .file-upload-item-icon": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".file-upload-item.success .file-upload-item-icon": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".file-upload-item.error .file-upload-item-icon": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".file-upload-item.error .file-upload-progress-bar": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".file-upload-error": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".file-upload-preview": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(6rem, 1fr))", gap: "0.75rem" } }, ".file-upload-preview-item": { "@layer components": { position: "relative", aspectRatio: "1", borderRadius: "var(--radius-sm)", overflow: "hidden", backgroundColor: "var(--color-surface-container)" } }, ".file-upload-preview-image": { "@layer components": { width: "100%", height: "100%", objectFit: "cover" } }, ".file-upload-preview-remove": { "@layer components": { position: "absolute", top: "0.25rem", right: "0.25rem", display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", opacity: 0, transition: "opacity 150ms ease-in-out" } }, ".file-upload-preview-item:hover .file-upload-preview-remove": { "@layer components": { opacity: 1 } }, ".file-upload-compact .file-upload-dropzone": { "@layer components": { flexDirection: "row", minHeight: "auto", padding: "1rem", gap: "1rem" } }, ".file-upload-compact .file-upload-icon": { "@layer components": { width: "2rem", height: "2rem", fontSize: "1.5rem" } }, ".file-upload-compact .file-upload-text": { "@layer components": { textAlign: "left" } }, ".file-upload-button": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.75rem 1.5rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary-content)", backgroundColor: "var(--color-primary)", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "background-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".file-upload-button:hover": { "@layer components": { boxShadow: "var(--shadow-md)" } }, ".file-upload-button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-upload-button:disabled": { "@layer components": { opacity: 0.6, cursor: "not-allowed" } }, ".file-upload-primary .file-upload-dropzone": { "@layer components": { color: "var(--color-primary)" } }, ".file-upload-primary .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".file-upload-secondary .file-upload-dropzone": { "@layer components": { color: "var(--color-secondary)" } }, ".file-upload-secondary .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".file-upload-tertiary .file-upload-dropzone": { "@layer components": { color: "var(--color-tertiary)" } }, ".file-upload-tertiary .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".file-upload-info .file-upload-dropzone": { "@layer components": { color: "var(--color-info)" } }, ".file-upload-info .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".file-upload-success .file-upload-dropzone": { "@layer components": { color: "var(--color-success)" } }, ".file-upload-success .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".file-upload-warning .file-upload-dropzone": { "@layer components": { color: "var(--color-warning)" } }, ".file-upload-warning .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".file-upload-error .file-upload-dropzone": { "@layer components": { color: "var(--color-error)" } }, ".file-upload-error .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".file-upload-accent .file-upload-dropzone": { "@layer components": { color: "var(--color-accent)" } }, ".file-upload-accent .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".file-upload-neutral .file-upload-dropzone": { "@layer components": { color: "var(--color-neutral)" } }, ".file-upload-neutral .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".file-upload-base .file-upload-dropzone": { "@layer components": { color: "var(--color-base-content)" } }, ".file-upload-base .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".file-upload-ghost .file-upload-dropzone": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".file-upload-ghost .file-upload-dropzone:focus-within": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-upload-sm .file-upload-dropzone": { "@layer components": { minHeight: "6rem", padding: "1rem" } }, ".file-upload-lg .file-upload-dropzone": { "@layer components": { minHeight: "14rem", padding: "3rem" } }, ".file-upload-dropzone, \n .file-upload-progress-bar, \n .file-upload-preview-remove": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".form-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%" } }, ".form-group-horizontal": { "@layer components": { flexDirection: "row", alignItems: "flex-start", gap: "1rem" } }, ".form-group-horizontal .form-label": { "@layer components": { minWidth: "8rem", paddingTop: "0.75rem" } }, ".form-group-horizontal .form-control": { "@layer components": { flex: 1 } }, ".form-label": { "@layer components": { display: "block", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".form-label-required::after": { "@layer components": { content: "' *'", color: "var(--color-error)" } }, ".form-label-optional::after": { "@layer components": { content: "' (optional)'", fontSize: "0.75rem", fontWeight: 400, color: "var(--color-on-surface-variant)" } }, ".form-label-sm": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem" } }, ".form-label-lg": { "@layer components": { fontSize: "1rem", lineHeight: "1.5rem" } }, ".helper-text-error": { "@layer components": { color: "var(--color-error)" } }, ".helper-text-success": { "@layer components": { color: "var(--color-success)" } }, ".helper-text-warning": { "@layer components": { color: "var(--color-warning)" } }, ".helper-text-info": { "@layer components": { color: "var(--color-info)" } }, ".helper-text-icon": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem" } }, ".helper-text-icon svg, \n .helper-text-icon .icon": { "@layer components": { width: "0.875rem", height: "0.875rem" } }, ".form-hint": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", marginBottom: "0.25rem" } }, ".fieldset": { "@layer components": { display: "flex", flexDirection: "column", gap: "1rem", padding: "1rem", margin: "0", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", backgroundColor: "transparent" } }, ".fieldset-legend": { "@layer components": { padding: "0 0.5rem", fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem", color: "var(--color-on-surface)" } }, ".fieldset-filled": { "@layer components": { backgroundColor: "var(--color-surface-container-lowest)", borderColor: "transparent" } }, ".fieldset-borderless": { "@layer components": { border: "none", padding: "0" } }, ".fieldset-card": { "@layer components": { backgroundColor: "var(--color-surface)", borderColor: "transparent", boxShadow: "var(--shadow-xs)", padding: "1.5rem" } }, ".form-row": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "1rem" } }, ".form-row > .form-group": { "@layer components": { flex: 1, minWidth: "200px" } }, ".form-grid": { "@layer components": { display: "grid", gap: "1rem" } }, ".form-grid-2": { "@layer components": { gridTemplateColumns: "repeat(2, 1fr)" } }, ".form-grid-3": { "@layer components": { gridTemplateColumns: "repeat(3, 1fr)" } }, ".form-grid-4": { "@layer components": { gridTemplateColumns: "repeat(4, 1fr)" } }, ".form-grid-2, \n .form-grid-3, \n .form-grid-4": { "@layer components": { "@media (max-width: 640px)": { gridTemplateColumns: "1fr" } } }, ".form-actions": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", marginTop: "1rem" } }, ".form-actions-right": { "@layer components": { justifyContent: "flex-end" } }, ".form-actions-center": { "@layer components": { justifyContent: "center" } }, ".form-actions-between": { "@layer components": { justifyContent: "space-between" } }, ".form-divider": { "@layer components": { height: "1px", backgroundColor: "var(--color-outline-variant)", margin: "1rem 0" } }, ".form-divider-text": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem", color: "var(--color-on-surface-variant)", fontSize: "0.75rem", textTransform: "uppercase" } }, ".form-divider-text::before, \n .form-divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".form-section": { "@layer components": { display: "flex", flexDirection: "column", gap: "1rem" } }, ".form-section-title": { "@layer components": { fontSize: "1rem", fontWeight: 600, color: "var(--color-on-surface)", marginBottom: "0.5rem" } }, ".form-section-description": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)", marginBottom: "1rem" } }, ".form-inline": { "@layer components": { display: "flex", flexWrap: "wrap", alignItems: "flex-end", gap: "0.75rem" } }, ".form-inline .form-group": { "@layer components": { flex: "none", width: "auto" } }, ".form-counter": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", textAlign: "right", marginTop: "0.25rem" } }, ".form-counter-error": { "@layer components": { color: "var(--color-error)" } }, ".form-group-error .form-label": { "@layer components": { color: "var(--color-error)" } }, ".form-group-error .input, \n .form-group-error .select, \n .form-group-error .textarea": { "@layer components": { borderColor: "var(--color-error)" } }, ".form-group-error .input:focus-visible, \n .form-group-error .select:focus-visible, \n .form-group-error .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-error)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".form-group-success .form-label": { "@layer components": { color: "var(--color-success)" } }, ".form-group-success .input, \n .form-group-success .select, \n .form-group-success .textarea": { "@layer components": { borderColor: "var(--color-success)" } }, ".form-group-success .input:focus-visible, \n .form-group-success .select:focus-visible, \n .form-group-success .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-success)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".form-group-warning .form-label": { "@layer components": { color: "var(--color-warning)" } }, ".form-group-warning .input, \n .form-group-warning .select, \n .form-group-warning .textarea": { "@layer components": { borderColor: "var(--color-warning)" } }, ".form-group-warning .input:focus-visible, \n .form-group-warning .select:focus-visible, \n .form-group-warning .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-warning)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".form-group-info .form-label": { "@layer components": { color: "var(--color-info)" } }, ".form-group-info .input, \n .form-group-info .select, \n .form-group-info .textarea": { "@layer components": { borderColor: "var(--color-info)" } }, ".form-group-info .input:focus-visible, \n .form-group-info .select:focus-visible, \n .form-group-info .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-info)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".form-group-disabled": { "@layer components": { opacity: 0.5, pointerEvents: "none" } }, '.input[aria-invalid="true"], \n .select[aria-invalid="true"], \n .textarea[aria-invalid="true"]': { "@layer components": { borderColor: "var(--color-error)", color: "var(--color-error)" } }, '.input[aria-invalid="true"]:focus-visible, \n .select[aria-invalid="true"]:focus-visible, \n .textarea[aria-invalid="true"]:focus-visible': { "@layer components": { borderColor: "var(--color-error)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, '.checkbox[aria-invalid="true"], \n .radio[aria-invalid="true"], \n .file-input[aria-invalid="true"]': { "@layer components": { borderColor: "var(--color-error)" } }, '.checkbox[aria-invalid="true"]:focus-visible, \n .radio[aria-invalid="true"]:focus-visible, \n .file-input[aria-invalid="true"]:focus-visible': { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, '.switch[aria-invalid="true"]': { "@layer components": { borderColor: "var(--color-error)" } }, '.switch[aria-invalid="true"]:focus-visible': { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, '.form-label[aria-required="true"]::after': { "@layer components": { content: "' *'", color: "var(--color-error)" } }, ".validate .input:invalid, \n .validate .select:invalid, \n .validate .textarea:invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".validate .input:valid, \n .validate .select:valid, \n .validate .textarea:valid": { "@layer components": { borderColor: "var(--color-success)" } }, ".input:user-invalid, \n .select:user-invalid, \n .textarea:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".input:user-invalid:focus-visible, \n .select:user-invalid:focus-visible, \n .textarea:user-invalid:focus-visible": { "@layer components": { borderColor: "var(--color-error)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".input:user-valid, \n .select:user-valid, \n .textarea:user-valid": { "@layer components": { borderColor: "var(--color-success)" } }, ".input:user-valid:focus-visible, \n .select:user-valid:focus-visible, \n .textarea:user-valid:focus-visible": { "@layer components": { borderColor: "var(--color-success)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".checkbox:user-invalid, \n .radio:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".checkbox:user-invalid:focus-visible, \n .radio:user-invalid:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".checkbox:user-valid:checked, \n .radio:user-valid:checked": { "@layer components": { borderColor: "var(--color-success)", backgroundColor: "var(--color-success)" } }, ".switch:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".switch:user-invalid:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".switch:user-valid:checked": { "@layer components": { backgroundColor: "var(--color-success)", borderColor: "var(--color-success)" } }, ".file-input:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".file-input:user-invalid:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".input-filled:user-invalid": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".input-filled:user-invalid:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)", boxShadow: "none" } }, ".input-filled:user-valid": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".input-filled:user-valid:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)", boxShadow: "none" } }, ".multi-select": { "@layer components": { position: "relative", display: "inline-flex", flexDirection: "column", width: "100%" } }, ".multi-select-trigger": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", minHeight: "2.75rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "1rem", lineHeight: "1.5rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".multi-select-trigger:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".multi-select-trigger:focus-within": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".multi-select-placeholder": { "@layer components": { flex: 1, color: "var(--color-on-surface-variant)" } }, ".multi-select-tags": { "@layer components": { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".multi-select-tag": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", maxWidth: "100%", padding: "0.125rem 0.375rem 0.125rem 0.5rem", fontSize: "0.75rem", lineHeight: "1.25rem", backgroundColor: "var(--color-surface-container-high)", color: "var(--color-on-surface)", borderRadius: "var(--radius-lg)" } }, ".multi-select-tag-text": { "@layer components": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".multi-select-tag-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", padding: "0", fontSize: "0.875rem", color: "inherit", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", opacity: 0.7, transition: "opacity 150ms ease-in-out, background-color 150ms ease-in-out" } }, ".multi-select-tag-remove:hover": { "@layer components": { opacity: 1, backgroundColor: "color-mix(in oklch, currentColor 15%, transparent)" } }, ".multi-select-tag-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".multi-select-tag-outlined": { "@layer components": { backgroundColor: "transparent", border: "1px solid var(--color-outline)", color: "var(--color-on-surface)" } }, ".multi-select-tag-overflow": { "@layer components": { display: "inline-flex", alignItems: "center", padding: "0.125rem 0.5rem", fontSize: "0.75rem", lineHeight: "1.25rem", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", borderRadius: "var(--radius-lg)" } }, ".multi-select-input": { "@layer components": { flex: 1, minWidth: "4rem", padding: "0.125rem 0", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", outline: "none" } }, ".multi-select-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".multi-select-arrow": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", marginLeft: "auto", color: "var(--color-on-surface-variant)", flexShrink: 0, transition: "transform 150ms ease-in-out" } }, ".multi-select-open .multi-select-arrow": { "@layer components": { transform: "rotate(180deg)" } }, ".multi-select-clear-all": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", padding: "0", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", flexShrink: 0, transition: "background-color 150ms ease-in-out" } }, ".multi-select-clear-all:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".multi-select-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", right: "0", zIndex: 50, display: "none", maxHeight: "16rem", marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", overflow: "hidden" } }, ".multi-select-open .multi-select-dropdown": { "@layer components": { display: "flex", flexDirection: "column" } }, ".multi-select-dropdown[popover]": { "@layer components": { inset: "unset", margin: "0", padding: "0", border: "1px solid var(--color-outline-variant)" } }, ".multi-select-dropdown[popover]:popover-open": { "@layer components": { display: "flex", flexDirection: "column" } }, ".multi-select-search": { "@layer components": { padding: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".multi-select-search-input": { "@layer components": { width: "100%", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-xs)", outline: "none" } }, ".multi-select-search-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".multi-select-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".multi-select-options": { "@layer components": { flex: 1, overflowY: "auto", padding: "0.25rem" } }, ".multi-select-option": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", width: "100%", padding: "0.625rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".multi-select-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".multi-select-option-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".multi-select-option-selected:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".multi-select-option-disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".multi-select-option-disabled:hover": { "@layer components": { backgroundColor: "transparent" } }, ".multi-select-option-focused": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".multi-select-option-checkbox": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", backgroundColor: "transparent", border: "2px solid var(--color-on-surface-variant)", borderRadius: "var(--radius-xs)", flexShrink: 0 } }, ".multi-select-option-selected .multi-select-option-checkbox": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".multi-select-option-selected .multi-select-option-checkbox svg": { "@layer components": { color: "var(--color-primary-content)" } }, ".multi-select-option-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".multi-select-option-text": { "@layer components": { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".multi-select-option-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".multi-select-group": { "@layer components": { padding: "0.25rem 0" } }, ".multi-select-group-header": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", fontWeight: 600, color: "var(--color-on-surface-variant)", textTransform: "uppercase", letterSpacing: "0.05em" } }, ".multi-select-empty": { "@layer components": { padding: "1.5rem", textAlign: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".multi-select-actions": { "@layer components": { display: "flex", gap: "0.5rem", padding: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".multi-select-action": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".multi-select-action:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".multi-select-counter": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: "1.25rem", height: "1.25rem", padding: "0 0.375rem", fontSize: "0.625rem", fontWeight: 600, color: "var(--color-primary-content)", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-sm)" } }, ".multi-select-sm .multi-select-trigger": { "@layer components": { minHeight: "2.25rem", padding: "0.375rem 0.5rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".multi-select-sm .multi-select-tag": { "@layer components": { fontSize: "0.625rem", padding: "0 0.25rem 0 0.375rem" } }, ".multi-select-lg .multi-select-trigger": { "@layer components": { minHeight: "3.25rem", padding: "0.625rem 1rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".multi-select-outlined .multi-select-trigger": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)" } }, ".multi-select-filled .multi-select-trigger": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".multi-select-filled .multi-select-trigger:focus-within": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".multi-select-primary .multi-select-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".multi-select-primary .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".multi-select-secondary .multi-select-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".multi-select-secondary .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".multi-select-tertiary .multi-select-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".multi-select-tertiary .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".multi-select-info .multi-select-trigger": { "@layer components": { color: "var(--color-info)" } }, ".multi-select-info .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".multi-select-success .multi-select-trigger": { "@layer components": { color: "var(--color-success)" } }, ".multi-select-success .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".multi-select-warning .multi-select-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".multi-select-warning .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".multi-select-error .multi-select-trigger": { "@layer components": { color: "var(--color-error)" } }, ".multi-select-error .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".multi-select-accent .multi-select-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".multi-select-accent .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".multi-select-neutral .multi-select-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".multi-select-neutral .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".multi-select-base .multi-select-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".multi-select-base .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".multi-select-ghost .multi-select-trigger": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".multi-select-ghost .multi-select-trigger:focus-within": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".multi-select-disabled .multi-select-trigger": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".multi-select-disabled .multi-select-tag-remove": { "@layer components": { pointerEvents: "none" } }, ".multi-select-loading .multi-select-trigger": { "@layer components": { cursor: "wait" } }, ".multi-select-spinner": [{ "@layer components": { display: "inline-block", width: "1rem", height: "1rem", border: "2px solid var(--color-outline)", borderTopColor: "var(--color-primary)", borderRadius: "var(--radius-full)", animation: "multi-select-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes multi-select-spin": { to: { transform: "rotate(360deg)" } }, ".multi-select-trigger, \n .multi-select-arrow, \n .multi-select-tag-remove, \n .multi-select-clear-all, \n .multi-select-option": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".otp-input": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem" } }, ".otp-input-field": [{ "@layer components": { width: "3rem", height: "3.5rem", padding: "0", fontSize: "1.5rem", fontWeight: 600, textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "2px solid currentColor", borderRadius: "var(--radius-sm)", outline: "none", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out", caretColor: "var(--color-primary)" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".otp-input-field::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.5 } }, ".otp-input-field:hover:not(:disabled):not(:focus)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".otp-input-field:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed", backgroundColor: "var(--color-surface-container)" } }, ".otp-input-field-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "var(--color-primary)" } }, ".otp-separator": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "0.25rem", backgroundColor: "var(--color-outline)", borderRadius: "var(--radius-xs)" } }, ".otp-input-sm .otp-input-field": { "@layer components": { width: "2.5rem", height: "3rem", fontSize: "1.25rem", borderRadius: "var(--radius-xs)" } }, ".otp-input-lg .otp-input-field": { "@layer components": { width: "3.5rem", height: "4rem", fontSize: "1.75rem", borderRadius: "var(--radius-sm)" } }, ".otp-input-compact": { "@layer components": { gap: "0.25rem" } }, ".otp-input-wide": { "@layer components": { gap: "1rem" } }, ".otp-input-filled .otp-input-field": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".otp-input-filled .otp-input-field:focus": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".otp-input-outlined .otp-input-field": { "@layer components": { backgroundColor: "transparent" } }, ".otp-input-underline .otp-input-field": { "@layer components": { backgroundColor: "transparent", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "0" } }, ".otp-input-underline .otp-input-field:focus": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".otp-input-primary .otp-input-field": { "@layer components": { color: "var(--color-primary)" } }, ".otp-input-primary .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".otp-input-secondary .otp-input-field": { "@layer components": { color: "var(--color-secondary)" } }, ".otp-input-secondary .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".otp-input-tertiary .otp-input-field": { "@layer components": { color: "var(--color-tertiary)" } }, ".otp-input-tertiary .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".otp-input-info .otp-input-field": { "@layer components": { color: "var(--color-info)" } }, ".otp-input-info .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".otp-input-success .otp-input-field": { "@layer components": { color: "var(--color-success)" } }, ".otp-input-success .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".otp-input-warning .otp-input-field": { "@layer components": { color: "var(--color-warning)" } }, ".otp-input-warning .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".otp-input-error .otp-input-field": { "@layer components": { color: "var(--color-error)" } }, ".otp-input-error .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".otp-input-accent .otp-input-field": { "@layer components": { color: "var(--color-accent)" } }, ".otp-input-accent .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".otp-input-neutral .otp-input-field": { "@layer components": { color: "var(--color-neutral)" } }, ".otp-input-neutral .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".otp-input-base .otp-input-field": { "@layer components": { color: "var(--color-base-content)" } }, ".otp-input-base .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".otp-input-ghost .otp-input-field": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".otp-input-ghost .otp-input-field:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".otp-input-masked .otp-input-field": { "@layer components": { WebkitTextSecurity: "disc", fontFamily: "text-security-disc" } }, ".otp-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".otp-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".otp-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".otp-error-message": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".pin-input": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem" } }, ".pin-input-field": [{ "@layer components": { width: "3rem", height: "3.5rem", padding: "0", fontSize: "1.5rem", fontWeight: 600, textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "2px solid currentColor", borderRadius: "var(--radius-sm)", outline: "none", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out", caretColor: "var(--color-primary)", WebkitTextSecurity: "disc" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".pin-input-field::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.3 } }, ".pin-input-field:hover:not(:disabled):not(:focus)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".pin-input-field:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed", backgroundColor: "var(--color-surface-container)" } }, ".pin-input-visible .pin-input-field": { "@layer components": { WebkitTextSecurity: "none" } }, ".pin-input-sm .pin-input-field": { "@layer components": { width: "2.5rem", height: "3rem", fontSize: "1.25rem", borderRadius: "var(--radius-xs)" } }, ".pin-input-lg .pin-input-field": { "@layer components": { width: "3.5rem", height: "4rem", fontSize: "1.75rem", borderRadius: "var(--radius-sm)" } }, ".pin-input-compact": { "@layer components": { gap: "0.25rem" } }, ".pin-input-filled .pin-input-field": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".pin-input-filled .pin-input-field:focus": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".pin-input-circle .pin-input-field": { "@layer components": { width: "3rem", height: "3rem", borderRadius: "var(--radius-full)" } }, ".pin-input-circle.pin-input-sm .pin-input-field": { "@layer components": { width: "2.5rem", height: "2.5rem" } }, ".pin-input-circle.pin-input-lg .pin-input-field": { "@layer components": { width: "3.5rem", height: "3.5rem" } }, ".pin-input-dots .pin-input-field": { "@layer components": { fontSize: "2rem", letterSpacing: "-0.25rem" } }, ".pin-input-primary .pin-input-field": { "@layer components": { color: "var(--color-primary)" } }, ".pin-input-primary .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".pin-input-secondary .pin-input-field": { "@layer components": { color: "var(--color-secondary)" } }, ".pin-input-secondary .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".pin-input-tertiary .pin-input-field": { "@layer components": { color: "var(--color-tertiary)" } }, ".pin-input-tertiary .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".pin-input-info .pin-input-field": { "@layer components": { color: "var(--color-info)" } }, ".pin-input-info .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".pin-input-success .pin-input-field": { "@layer components": { color: "var(--color-success)" } }, ".pin-input-success .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".pin-input-warning .pin-input-field": { "@layer components": { color: "var(--color-warning)" } }, ".pin-input-warning .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".pin-input-error .pin-input-field": [{ "@layer components": { color: "var(--color-error)", animation: "pin-shake 300ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], ".pin-input-error .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".pin-input-accent .pin-input-field": { "@layer components": { color: "var(--color-accent)" } }, ".pin-input-accent .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".pin-input-neutral .pin-input-field": { "@layer components": { color: "var(--color-neutral)" } }, ".pin-input-neutral .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".pin-input-base .pin-input-field": { "@layer components": { color: "var(--color-base-content)" } }, ".pin-input-base .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, "@keyframes pin-shake": { "0%, 100%": { transform: "translateX(0)" }, "20%, 60%": { transform: "translateX(-4px)" }, "40%, 80%": { transform: "translateX(4px)" } }, ".pin-input-ghost .pin-input-field": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".pin-input-ghost .pin-input-field:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".pin-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".pin-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".pin-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".pin-error-message": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".radio::before": { "@layer components": { content: '""', width: "0.5em", height: "0.5em", borderRadius: "var(--radius-full)", backgroundColor: "var(--radio-color)", transform: "scale(0)", transition: "transform 150ms ease-in-out" } }, ".radio:checked::before": { "@layer components": { transform: "scale(1)" } }, ".radio:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "var(--color-on-surface)" } }, ".radio:checked:hover:not(:disabled)": { "@layer components": { borderColor: "color-mix(in oklch, var(--radio-color), black 10%)" } }, ".radio:checked:hover:not(:disabled)::before": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--radio-color), black 10%)" } }, ".radio-xs": { "@layer components": { "--radio-size": "0.875rem" } }, ".radio-sm": { "@layer components": { "--radio-size": "1rem" } }, ".radio-md": { "@layer components": { "--radio-size": "1.25rem" } }, ".radio-lg": { "@layer components": { "--radio-size": "1.5rem" } }, ".radio-xl": { "@layer components": { "--radio-size": "1.75rem" } }, ".radio-primary": { "@layer components": { "--radio-color": "var(--color-primary)" } }, ".radio-secondary": { "@layer components": { "--radio-color": "var(--color-secondary)" } }, ".radio-tertiary": { "@layer components": { "--radio-color": "var(--color-tertiary)" } }, ".radio-success": { "@layer components": { "--radio-color": "var(--color-success)" } }, ".radio-warning": { "@layer components": { "--radio-color": "var(--color-warning)" } }, ".radio-error": { "@layer components": { "--radio-color": "var(--color-error)" } }, ".radio-info": { "@layer components": { "--radio-color": "var(--color-info)" } }, ".radio-accent": { "@layer components": { "--radio-color": "var(--color-accent)" } }, ".radio-neutral": { "@layer components": { "--radio-color": "var(--color-neutral)" } }, ".radio-base": { "@layer components": { "--radio-color": "var(--color-base-content)" } }, ".radio-ghost": { "@layer components": { "--radio-border-color": "transparent" } }, ".radio-ghost:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "transparent" } }, ".radio-label": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".radio-label:has(.radio:disabled)": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".radio-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".radio-group-horizontal": { "@layer components": { flexDirection: "row", flexWrap: "wrap", gap: "1.5rem" } }, ".radio-group-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", marginBottom: "0.5rem" } }, ".radio, \n .radio::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".rating": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.125rem", color: "var(--color-on-surface)" } }, ".rating-item": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-outline)", cursor: "pointer", transition: "color 150ms ease-in-out, transform 150ms ease-in-out" } }, ".rating-item:hover": { "@layer components": { transform: "scale(1.1)" } }, ".rating-item.active": { "@layer components": { color: "var(--color-warning-container)" } }, ".rating-item.filled": { "@layer components": { color: "var(--color-warning)" } }, ".rating-input": { "@layer components": { position: "absolute", width: "0", height: "0", opacity: 0, overflow: "hidden" } }, ".rating-icon": { "@layer components": { width: "1.5rem", height: "1.5rem", fontSize: "1.5rem", lineHeight: 1 } }, ".rating-half": { "@layer components": { position: "relative", overflow: "hidden" } }, ".rating-half .rating-icon-empty": { "@layer components": { color: "var(--color-outline)" } }, ".rating-half .rating-icon-filled": { "@layer components": { position: "absolute", left: "0", top: "0", width: "50%", overflow: "hidden", color: "var(--color-warning)" } }, ".rating-xs .rating-icon": { "@layer components": { width: "0.875rem", height: "0.875rem", fontSize: "0.875rem" } }, ".rating-sm .rating-icon": { "@layer components": { width: "1.25rem", height: "1.25rem", fontSize: "1.25rem" } }, ".rating-lg .rating-icon": { "@layer components": { width: "2rem", height: "2rem", fontSize: "2rem" } }, ".rating-xl .rating-icon": { "@layer components": { width: "2.5rem", height: "2.5rem", fontSize: "2.5rem" } }, ".rating-primary .rating-item.filled": { "@layer components": { color: "var(--color-primary)" } }, ".rating-secondary .rating-item.filled": { "@layer components": { color: "var(--color-secondary)" } }, ".rating-error .rating-item.filled": { "@layer components": { color: "var(--color-error)" } }, ".rating-success .rating-item.filled": { "@layer components": { color: "var(--color-success)" } }, ".rating-tertiary .rating-item.filled": { "@layer components": { color: "var(--color-tertiary)" } }, ".rating-info .rating-item.filled": { "@layer components": { color: "var(--color-info)" } }, ".rating-warning .rating-item.filled": { "@layer components": { color: "var(--color-warning)" } }, ".rating-accent .rating-item.filled": { "@layer components": { color: "var(--color-accent)" } }, ".rating-neutral .rating-item.filled": { "@layer components": { color: "var(--color-neutral)" } }, ".rating-base .rating-item.filled": { "@layer components": { color: "var(--color-base-content)" } }, ".rating-readonly .rating-item": { "@layer components": { cursor: "default" } }, ".rating-readonly .rating-item:hover": { "@layer components": { transform: "none" } }, ".rating-disabled": { "@layer components": { opacity: 0.6, pointerEvents: "none" } }, ".rating-labeled": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".rating-label": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".rating-count": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginLeft: "0.25rem" } }, ".rating:not(.rating-readonly) .rating-item:hover ~ .rating-item": { "@layer components": { color: "var(--color-outline)" } }, ".rating:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-warning)" } }, ".rating-primary:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-primary)" } }, ".rating-secondary:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-secondary)" } }, ".rating-tertiary:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-tertiary)" } }, ".rating-info:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-info)" } }, ".rating-success:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-success)" } }, ".rating-error:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-error)" } }, ".rating-accent:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-accent)" } }, ".rating-neutral:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-neutral)" } }, ".rating-base:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-base-content)" } }, ".rating-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent)", borderRadius: "var(--radius-xs)" } }, ".rating-primary .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent)" } }, ".rating-secondary .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 20%, transparent)" } }, ".rating-tertiary .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 20%, transparent)" } }, ".rating-info .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 20%, transparent)" } }, ".rating-success .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 20%, transparent)" } }, ".rating-error .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".rating-warning .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent)" } }, ".rating-accent .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 20%, transparent)" } }, ".rating-neutral .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 20%, transparent)" } }, ".rating-base .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 20%, transparent)" } }, ".rating-display": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem" } }, ".rating-display-value": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".rating-display-stars": { "@layer components": { display: "flex", gap: "0.0625rem", color: "var(--color-warning)" } }, ".rating-display-max": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".rating-compact": { "@layer components": { gap: "0" } }, ".rating-compact .rating-item": { "@layer components": { padding: "0.125rem" } }, ".rating-animated .rating-item": { "@layer components": { transition: "color 150ms ease-in-out, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)" } }, ".rating-animated .rating-item.filled": [{ "@layer components": { animation: "rating-pop 300ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes rating-pop": { "0%": { transform: "scale(1)" }, "50%": { transform: "scale(1.3)" }, "100%": { transform: "scale(1)" } }, ".rating-item, \n .rating-animated .rating-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "color 0ms" } } }, ".segment-control": { "@layer components": { display: "inline-flex", alignItems: "stretch", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-xl)", padding: "0.25rem", gap: "0.25rem" } }, ".segment-item": [{ "@layer components": { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "0.5rem 1rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-lg)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", userSelect: "none", whiteSpace: "nowrap" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".segment-item:hover:not(:disabled):not(.segment-item-active)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".segment-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".segment-item:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed" } }, ".segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".segment-item-active:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".segment-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.125rem", height: "1.125rem" } }, ".segment-control-sm": { "@layer components": { padding: "0.125rem", gap: "0.125rem", borderRadius: "var(--radius-lg)" } }, ".segment-control-sm .segment-item": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-md)" } }, ".segment-control-lg": { "@layer components": { padding: "0.375rem", gap: "0.375rem", borderRadius: "var(--radius-2xl)" } }, ".segment-control-lg .segment-item": { "@layer components": { padding: "0.75rem 1.5rem", fontSize: "1rem", lineHeight: "1.5rem", borderRadius: "var(--radius-xl)" } }, ".segment-control-primary .segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".segment-control-secondary .segment-item-active": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".segment-control-tertiary .segment-item-active": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".segment-control-info .segment-item-active": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".segment-control-success .segment-item-active": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".segment-control-warning .segment-item-active": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".segment-control-error .segment-item-active": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".segment-control-accent .segment-item-active": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".segment-control-neutral .segment-item-active": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".segment-control-base .segment-item-active": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".segment-control-full": { "@layer components": { display: "flex", width: "100%" } }, ".segment-control-full .segment-item": { "@layer components": { flex: 1 } }, ".segment-control-outlined": { "@layer components": { backgroundColor: "transparent", padding: "0", gap: "0" } }, ".segment-control-outlined .segment-item": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "0", marginLeft: "-1px" } }, ".segment-control-outlined .segment-item:first-child": { "@layer components": { marginLeft: "0", borderTopLeftRadius: "1.25rem", borderBottomLeftRadius: "1.25rem" } }, ".segment-control-outlined .segment-item:last-child": { "@layer components": { borderTopRightRadius: "1.25rem", borderBottomRightRadius: "1.25rem" } }, ".segment-control-outlined .segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary)", zIndex: 1 } }, ".segment-control-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".segment-control-icon-only .segment-item": { "@layer components": { padding: "0.625rem" } }, ".segment-control-icon-only.segment-control-sm .segment-item": { "@layer components": { padding: "0.5rem" } }, ".segment-control-icon-only.segment-control-lg .segment-item": { "@layer components": { padding: "0.75rem" } }, ".segment-control-multi .segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".select:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".select-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".select-filled:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)", borderBottomColor: "var(--color-on-surface)" } }, ".select-filled:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".select-filled.select-primary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)" } }, ".select-filled.select-secondary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-secondary)" } }, ".select-filled.select-tertiary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-tertiary)" } }, ".select-filled.select-info:focus-visible": { "@layer components": { borderBottomColor: "var(--color-info)" } }, ".select-filled.select-success:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".select-filled.select-warning:focus-visible": { "@layer components": { borderBottomColor: "var(--color-warning)" } }, ".select-filled.select-error:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".select-filled.select-accent:focus-visible": { "@layer components": { borderBottomColor: "var(--color-accent)" } }, ".select-filled.select-neutral:focus-visible": { "@layer components": { borderBottomColor: "var(--color-neutral)" } }, ".select-filled.select-base:focus-visible": { "@layer components": { borderBottomColor: "var(--color-base-content)" } }, ".select-outlined": { "@layer components": { backgroundColor: "transparent", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".select-primary": { "@layer components": { color: "var(--color-primary)" } }, ".select-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".select-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".select-info": { "@layer components": { color: "var(--color-info)" } }, ".select-success": { "@layer components": { color: "var(--color-success)" } }, ".select-warning": { "@layer components": { color: "var(--color-warning)" } }, ".select-error": { "@layer components": { color: "var(--color-error)" } }, ".select-accent": { "@layer components": { color: "var(--color-accent)" } }, ".select-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".select-base": { "@layer components": { color: "var(--color-base-content)" } }, ".select-container": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%" } }, ".select-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".select-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".select-container-error .select-helper": { "@layer components": { color: "var(--color-error)" } }, ".select-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem" } }, ".select-multiple": { "@layer components": { padding: "0.5rem", height: "auto", minHeight: "6rem", backgroundImage: "none" } }, ".select-multiple option": { "@layer components": { padding: "0.5rem 0.75rem", borderRadius: "var(--radius-xs)" } }, ".select-multiple option:checked": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".select-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".select-ghost:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent" } }, ".select-ghost:focus-visible": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".slider": { "@layer components": { position: "relative", display: "flex", alignItems: "center", width: "100%", height: "2.5rem", touchAction: "none", userSelect: "none", color: "var(--color-on-surface)" } }, ".slider-track": { "@layer components": { position: "relative", width: "100%", height: "0.25rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-full)" } }, ".slider-track-filled": { "@layer components": { position: "absolute", top: "0", left: "0", height: "100%", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)" } }, ".slider-thumb": { "@layer components": { position: "absolute", top: "50%", width: "1.25rem", height: "1.25rem", backgroundColor: "var(--color-primary)", border: "none", borderRadius: "var(--radius-full)", boxShadow: "0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)", transform: "translate(-50%, -50%)", cursor: "grab", transition: "box-shadow 150ms ease-in-out, transform 150ms ease-in-out" } }, ".slider-thumb:hover": { "@layer components": { boxShadow: "0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-thumb:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-thumb:active": { "@layer components": { cursor: "grabbing", transform: "translate(-50%, -50%) scale(1.1)" } }, ".slider-thumb-label": { "@layer components": { position: "absolute", bottom: "100%", left: "50%", transform: "translateX(-50%)", padding: "0.25rem 0.5rem", marginBottom: "0.5rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary-content)", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-xs)", whiteSpace: "nowrap", opacity: 0, visibility: "hidden", transition: "opacity 150ms ease-out, visibility 150ms ease-out" } }, ".slider-thumb-label::after": { "@layer components": { content: "''", position: "absolute", top: "100%", left: "50%", transform: "translateX(-50%)", border: "0.25rem solid transparent", borderTopColor: "var(--color-primary)" } }, ".slider-thumb:hover .slider-thumb-label, \n .slider-thumb:focus-visible .slider-thumb-label, \n .slider-thumb:active .slider-thumb-label": { "@layer components": { opacity: 1, visibility: "visible" } }, ".slider-labels-always .slider-thumb-label": { "@layer components": { opacity: 1, visibility: "visible" } }, ".slider-marks": { "@layer components": { position: "absolute", top: "50%", left: "0", right: "0", display: "flex", justifyContent: "space-between", transform: "translateY(-50%)", pointerEvents: "none" } }, ".slider-mark": { "@layer components": { position: "relative", width: "0.125rem", height: "0.5rem", backgroundColor: "var(--color-outline)", borderRadius: "var(--radius-full)" } }, ".slider-mark-active": { "@layer components": { backgroundColor: "var(--color-primary-content)" } }, ".slider-mark-label": { "@layer components": { position: "absolute", top: "1rem", left: "50%", transform: "translateX(-50%)", fontSize: "0.75rem", color: "var(--color-on-surface-variant)", whiteSpace: "nowrap" } }, ".slider-labels": { "@layer components": { display: "flex", justifyContent: "space-between", marginTop: "0.25rem", fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".slider-sm": { "@layer components": { height: "2rem" } }, ".slider-sm .slider-track": { "@layer components": { height: "0.125rem" } }, ".slider-sm .slider-thumb": { "@layer components": { width: "1rem", height: "1rem" } }, ".slider-lg": { "@layer components": { height: "3rem" } }, ".slider-lg .slider-track": { "@layer components": { height: "0.375rem" } }, ".slider-lg .slider-thumb": { "@layer components": { width: "1.5rem", height: "1.5rem" } }, ".slider-primary .slider-track-filled, \n .slider-primary .slider-thumb": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".slider-primary .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-primary-content)" } }, ".slider-primary .slider-thumb:hover, \n .slider-primary .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-primary .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".slider-primary .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-primary)" } }, ".slider-secondary .slider-track-filled, \n .slider-secondary .slider-thumb": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".slider-secondary .slider-thumb:hover, \n .slider-secondary .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-secondary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-secondary .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-secondary-content)" } }, ".slider-secondary .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".slider-secondary .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-secondary)" } }, ".slider-tertiary .slider-track-filled, \n .slider-tertiary .slider-thumb": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".slider-tertiary .slider-thumb:hover, \n .slider-tertiary .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-tertiary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-tertiary .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-tertiary-content)" } }, ".slider-tertiary .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".slider-tertiary .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-tertiary)" } }, ".slider-info .slider-track-filled, \n .slider-info .slider-thumb": { "@layer components": { backgroundColor: "var(--color-info)" } }, ".slider-info .slider-thumb:hover, \n .slider-info .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-info-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-info .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-info-content)" } }, ".slider-info .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".slider-info .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-info)" } }, ".slider-success .slider-track-filled, \n .slider-success .slider-thumb": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".slider-success .slider-thumb:hover, \n .slider-success .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-success-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-success .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-success-content)" } }, ".slider-success .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".slider-success .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-success)" } }, ".slider-warning .slider-track-filled, \n .slider-warning .slider-thumb": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".slider-warning .slider-thumb:hover, \n .slider-warning .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-warning-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-warning .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-warning-content)" } }, ".slider-warning .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".slider-warning .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-warning)" } }, ".slider-error .slider-track-filled, \n .slider-error .slider-thumb": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".slider-error .slider-thumb:hover, \n .slider-error .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-error-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-error .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-error-content)" } }, ".slider-error .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".slider-error .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-error)" } }, ".slider-accent .slider-track-filled, \n .slider-accent .slider-thumb": { "@layer components": { backgroundColor: "var(--color-accent)" } }, ".slider-accent .slider-thumb:hover, \n .slider-accent .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px color-mix(in oklch, var(--color-accent) 15%, var(--color-surface)), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-accent .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-accent-content)" } }, ".slider-accent .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".slider-accent .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-accent)" } }, ".slider-neutral .slider-track-filled, \n .slider-neutral .slider-thumb": { "@layer components": { backgroundColor: "var(--color-neutral)" } }, ".slider-neutral .slider-thumb:hover, \n .slider-neutral .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface)), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-neutral .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-neutral-content)" } }, ".slider-neutral .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".slider-neutral .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-neutral)" } }, ".slider-base .slider-track-filled, \n .slider-base .slider-thumb": { "@layer components": { backgroundColor: "var(--color-base-100)" } }, ".slider-base .slider-thumb:hover, \n .slider-base .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-base-200), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-base .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-base-content)" } }, ".slider-base .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".slider-base .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-base-100)" } }, ".slider-disabled": { "@layer components": { opacity: 0.6, pointerEvents: "none" } }, ".slider-disabled .slider-thumb": { "@layer components": { cursor: "not-allowed" } }, ".slider-range .slider-track-filled": { "@layer components": { left: "var(--slider-start, 0%)", width: "var(--slider-range, 100%)" } }, ".slider-vertical": { "@layer components": { flexDirection: "column", width: "2.5rem", height: "12rem" } }, ".slider-vertical .slider-track": { "@layer components": { width: "0.25rem", height: "100%" } }, ".slider-vertical .slider-track-filled": { "@layer components": { width: "100%", height: "auto", bottom: "0", top: "auto" } }, ".slider-vertical .slider-thumb": { "@layer components": { left: "50%", top: "auto", transform: "translate(-50%, 50%)" } }, ".slider-vertical .slider-thumb-label": { "@layer components": { bottom: "auto", left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: "0.5rem", marginBottom: "0" } }, ".slider-vertical .slider-thumb-label::after": { "@layer components": { top: "50%", left: "auto", right: "100%", transform: "translateY(-50%)", borderTopColor: "transparent", borderRightColor: "var(--color-primary)" } }, ".slider-secondary.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-secondary)" } }, ".slider-tertiary.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-tertiary)" } }, ".slider-info.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-info)" } }, ".slider-success.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-success)" } }, ".slider-warning.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-warning)" } }, ".slider-error.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-error)" } }, ".slider-accent.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-accent)" } }, ".slider-neutral.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-neutral)" } }, ".slider-base.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-base-100)" } }, ".slider-vertical .slider-marks": { "@layer components": { flexDirection: "column", top: "0", bottom: "0", left: "50%", right: "auto", transform: "translateX(-50%)" } }, ".slider-vertical .slider-mark-label": { "@layer components": { top: "50%", left: "1rem", transform: "translateY(-50%)" } }, ".slider-with-input": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem" } }, ".slider-with-input .slider": { "@layer components": { flex: 1 } }, ".slider-input": { "@layer components": { width: "4rem", padding: "0.5rem", fontSize: "0.875rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-xs)" } }, ".slider-input:focus": { "@layer components": { outline: "none", borderColor: "currentColor", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".slider-thumb, \n .slider-thumb-label": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".switch": { "@layer components": { "--switch-width": "3.25rem", "--switch-height": "2rem", color: "var(--color-on-surface)", "--switch-thumb-size": "1rem", "--switch-color": "var(--color-primary)", "--switch-content-color": "var(--color-primary-content)", "--switch-container-color": "var(--color-primary-container)", "--switch-track-color": "var(--color-surface-container-highest)", "--switch-border-color": "var(--color-outline)", "--switch-thumb-color": "var(--color-outline)", position: "relative", display: "inline-grid", gridTemplateColumns: "0fr 1fr 1fr", alignItems: "center", width: "var(--switch-width)", height: "var(--switch-height)", margin: "0", padding: "0.25rem", cursor: "pointer", appearance: "none", backgroundColor: "var(--switch-track-color)", border: "2px solid var(--switch-border-color)", borderRadius: "var(--switch-height)", transition: `background-color 200ms ease-in-out,
133
+ drop-shadow(0 -1px 0 var(--color-outline-variant))`, pointerEvents: "none" } }, ".chat-start .chat-bubble::before": { "@layer components": { left: "-0.5rem" } }, ".chat-start .chat-bubble": { "@layer components": { borderTopLeftRadius: "0" } }, ".chat-end .chat-bubble::before": { "@layer components": { right: "-0.5rem", transform: "scaleX(-1)" } }, ".chat-end .chat-bubble": { "@layer components": { borderTopRightRadius: "0" } }, ".chat-bubble-primary": { "@layer components": { "--chat-bubble-bg": "var(--color-primary-container)", "--chat-bubble-fg": "var(--color-on-primary-container)" } }, ".chat-bubble-secondary": { "@layer components": { "--chat-bubble-bg": "var(--color-secondary-container)", "--chat-bubble-fg": "var(--color-on-secondary-container)" } }, ".chat-bubble-tertiary": { "@layer components": { "--chat-bubble-bg": "var(--color-tertiary-container)", "--chat-bubble-fg": "var(--color-on-tertiary-container)" } }, ".chat-bubble-info": { "@layer components": { "--chat-bubble-bg": "var(--color-info-container)", "--chat-bubble-fg": "var(--color-on-info-container)" } }, ".chat-bubble-success": { "@layer components": { "--chat-bubble-bg": "var(--color-success-container)", "--chat-bubble-fg": "var(--color-on-success-container)" } }, ".chat-bubble-warning": { "@layer components": { "--chat-bubble-bg": "var(--color-warning-container)", "--chat-bubble-fg": "var(--color-on-warning-container)" } }, ".chat-bubble-error": { "@layer components": { "--chat-bubble-bg": "var(--color-error-container)", "--chat-bubble-fg": "var(--color-on-error-container)" } }, ".chat-bubble-accent": { "@layer components": { "--chat-bubble-bg": "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", "--chat-bubble-fg": "var(--color-on-surface)" } }, ".chat-bubble-neutral": { "@layer components": { "--chat-bubble-bg": "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", "--chat-bubble-fg": "var(--color-on-surface)" } }, ".chat-bubble-base": { "@layer components": { "--chat-bubble-bg": "var(--color-base-200)", "--chat-bubble-fg": "var(--color-base-content)" } }, ".chat-bubble-filled.chat-bubble-primary": { "@layer components": { "--chat-bubble-bg": "var(--color-primary)", "--chat-bubble-fg": "var(--color-primary-content)" } }, ".chat-bubble-filled.chat-bubble-secondary": { "@layer components": { "--chat-bubble-bg": "var(--color-secondary)", "--chat-bubble-fg": "var(--color-secondary-content)" } }, ".chat-bubble-filled.chat-bubble-tertiary": { "@layer components": { "--chat-bubble-bg": "var(--color-tertiary)", "--chat-bubble-fg": "var(--color-tertiary-content)" } }, ".chat-bubble-filled.chat-bubble-info": { "@layer components": { "--chat-bubble-bg": "var(--color-info)", "--chat-bubble-fg": "var(--color-info-content)" } }, ".chat-bubble-filled.chat-bubble-success": { "@layer components": { "--chat-bubble-bg": "var(--color-success)", "--chat-bubble-fg": "var(--color-success-content)" } }, ".chat-bubble-filled.chat-bubble-warning": { "@layer components": { "--chat-bubble-bg": "var(--color-warning)", "--chat-bubble-fg": "var(--color-warning-content)" } }, ".chat-bubble-filled.chat-bubble-error": { "@layer components": { "--chat-bubble-bg": "var(--color-error)", "--chat-bubble-fg": "var(--color-error-content)" } }, ".chat-bubble-filled.chat-bubble-accent": { "@layer components": { "--chat-bubble-bg": "var(--color-accent)", "--chat-bubble-fg": "var(--color-accent-content)" } }, ".chat-bubble-filled.chat-bubble-neutral": { "@layer components": { "--chat-bubble-bg": "var(--color-neutral)", "--chat-bubble-fg": "var(--color-neutral-content)" } }, ".chat-bubble-filled.chat-bubble-base": { "@layer components": { "--chat-bubble-bg": "var(--color-base-100)", "--chat-bubble-fg": "var(--color-base-content)" } }, ".chat-bubble-xs": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem" } }, ".chat-bubble-sm": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.8125rem" } }, ".chat-bubble-md": { "@layer components": { padding: "0.625rem 0.875rem", fontSize: "0.875rem" } }, ".chat-bubble-lg": { "@layer components": { padding: "0.875rem 1.125rem", fontSize: "1rem" } }, ".chat-reasoning, \n .chat-tool": { "@layer components": { width: "min(80ch, 100%)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface-container-low)", color: "var(--color-on-surface)", fontSize: "0.8125rem", lineHeight: 1.45, overflow: "hidden" } }, ".chat-bubble > .chat-reasoning, \n .chat-bubble > .chat-tool, \n .chat-reasoning .chat-tool, \n .chat-reasoning-body > .chat-tool": { "@layer components": { width: "100%", maxWidth: "none" } }, ".chat-reasoning > summary, \n .chat-tool > summary": { "@layer components": { cursor: "pointer", listStylePosition: "inside" } }, ".chat-reasoning > summary": { "@layer components": { padding: "0.5rem 0.75rem", color: "var(--color-on-surface-variant)", fontWeight: 500 } }, ".chat-reasoning-body": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem", padding: "0 0.75rem 0.75rem", color: "var(--color-on-surface-variant)" } }, ".chat-reasoning-body > :not(.chat-tool)": { "@layer components": { fontStyle: "italic" } }, ".chat-reasoning > div:not(.chat-tool):not(.chat-reasoning-body)": { "@layer components": { padding: "0 0.75rem 0.75rem", color: "var(--color-on-surface-variant)", fontStyle: "italic" } }, ".chat-reasoning > .chat-tool": { "@layer components": { margin: "0 0.75rem 0.75rem" } }, ".chat-tool-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", color: "var(--color-on-surface)", fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace', fontSize: "0.75rem", fontWeight: 600 } }, ".chat-tool-status": { "@layer components": { display: "inline-flex", alignItems: "center", minHeight: "1.25rem", padding: "0.125rem 0.5rem", borderRadius: "999px", marginLeft: "auto", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: 1 } }, ".chat-tool-call, \n .chat-tool-result": { "@layer components": { padding: "0.75rem", borderTop: "1px solid var(--color-outline)", fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace', fontSize: "0.75rem", overflowX: "auto" } }, ".chat-tool-result": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-surface-container) 65%, transparent)" } }, ".chat-tool-pending .chat-tool-status": { "@layer components": { border: "1px solid var(--color-outline)", color: "var(--color-on-surface-variant)" } }, ".chat-tool-running .chat-tool-status": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".chat-tool-running .chat-tool-header::before": { "@layer components": { content: '""', width: "0.875rem", height: "0.875rem", border: "2px solid currentColor", borderTopColor: "transparent", borderRadius: "999px", animation: "chat-tool-spin 800ms linear infinite" } }, ".chat-tool-success .chat-tool-status": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".chat-tool-error .chat-tool-status": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".chat-typing": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", minWidth: "2.25rem" } }, ".chat-typing::before, \n .chat-typing::after, \n .chat-typing span": { "@layer components": { content: '""', width: "0.375rem", height: "0.375rem", borderRadius: "999px", backgroundColor: "currentColor", opacity: 0.55, animation: "chat-typing-dot 1.4s ease-in-out infinite" } }, ".chat-typing span": { "@layer components": { animationDelay: "150ms" } }, ".chat-typing::after": { "@layer components": { animationDelay: "300ms" } }, ".chat-bubble-streaming::after, \n .chat-bubble-content.chat-bubble-streaming::after": { "@layer components": { content: '""', position: "static", inset: "auto", display: "inline-block", width: "1px", height: "1em", marginLeft: "0.25rem", backgroundColor: "currentColor", clipPath: "none", transform: "none", verticalAlign: "-0.125em", animation: "chat-stream-caret 1s step-end infinite" } }, ".chat-bubble.chat-bubble-streaming:not(:has(.chat-reasoning, .chat-tool, .chat-bubble-content))": { "@layer components": { display: "block" } }, ".chat-bubble.chat-bubble-streaming:has(.chat-reasoning, .chat-tool, .chat-bubble-content)::after": { "@layer components": { content: "none" } }, ".chat-reasoning > summary:focus-visible, \n .chat-tool > summary:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, "@keyframes chat-typing-dot": { "0%,\n 80%,\n 100%": { opacity: 0.45, transform: "translateY(0)" }, "40%": { opacity: 1, transform: "translateY(-0.1875rem)" } }, "@keyframes chat-stream-caret": { "0%,\n 49%": { opacity: 1 }, "50%,\n 100%": { opacity: 0 } }, "@keyframes chat-tool-spin": { to: { transform: "rotate(360deg)" } }, ".chat-typing::before, \n .chat-typing::after, \n .chat-typing span, \n .chat-bubble-streaming::after, \n .chat-bubble-content.chat-bubble-streaming::after, \n .chat-tool-running .chat-tool-header::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }, ".chat-bubble-streaming::after, \n .chat-bubble-content.chat-bubble-streaming::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { opacity: 1 } } }, ".chip": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem", padding: "0.375rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", border: "1px solid currentColor", cursor: "default", transition: "all 150ms ease-in-out" } }, ".chip-clickable": { "@layer components": { cursor: "pointer" } }, ".chip-clickable:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".chip-clickable:active": { "@layer components": { transform: "scale(0.98)" } }, ".chip:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".chip-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".chip-primary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary), black 10%)" } }, ".chip-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)", borderColor: "var(--color-secondary)" } }, ".chip-secondary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary), black 10%)" } }, ".chip-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)", borderColor: "var(--color-tertiary)" } }, ".chip-tertiary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary), black 10%)" } }, ".chip-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)", borderColor: "var(--color-accent)" } }, ".chip-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent), black 10%)" } }, ".chip-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)", borderColor: "var(--color-neutral)" } }, ".chip-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral), black 10%)" } }, ".chip-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)", borderColor: "var(--color-base-100)" } }, ".chip-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".chip-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)", borderColor: "var(--color-info)" } }, ".chip-info:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-info), black 10%)" } }, ".chip-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)", borderColor: "var(--color-success)" } }, ".chip-success:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-success), black 10%)" } }, ".chip-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)", borderColor: "var(--color-warning)" } }, ".chip-warning:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-warning), black 10%)" } }, ".chip-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)", borderColor: "var(--color-error)" } }, ".chip-error:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-error), black 10%)" } }, ".chip-outlined": { "@layer components": { backgroundColor: "transparent", borderColor: "var(--color-outline)" } }, ".chip-outlined:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".chip-outlined.chip-primary": { "@layer components": { color: "var(--color-primary)" } }, ".chip-outlined.chip-primary:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".chip-outlined.chip-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".chip-outlined.chip-secondary:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".chip-outlined.chip-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".chip-outlined.chip-tertiary:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)" } }, ".chip-outlined.chip-accent": { "@layer components": { color: "var(--color-accent)" } }, ".chip-outlined.chip-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".chip-outlined.chip-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".chip-outlined.chip-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".chip-outlined.chip-base": { "@layer components": { color: "var(--color-base-content)" } }, ".chip-outlined.chip-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".chip-outlined.chip-info": { "@layer components": { color: "var(--color-info)" } }, ".chip-outlined.chip-info:hover": { "@layer components": { backgroundColor: "var(--color-info-container)" } }, ".chip-outlined.chip-success": { "@layer components": { color: "var(--color-success)" } }, ".chip-outlined.chip-success:hover": { "@layer components": { backgroundColor: "var(--color-success-container)" } }, ".chip-outlined.chip-warning": { "@layer components": { color: "var(--color-warning)" } }, ".chip-outlined.chip-warning:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)" } }, ".chip-outlined.chip-error": { "@layer components": { color: "var(--color-error)" } }, ".chip-outlined.chip-error:hover": { "@layer components": { backgroundColor: "var(--color-error-container)" } }, ".chip-tonal": { "@layer components": { backgroundColor: "var(--color-surface-container-high)", borderColor: "transparent" } }, ".chip-tonal.chip-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".chip-tonal.chip-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".chip-tonal.chip-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".chip-tonal.chip-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".chip-tonal.chip-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".chip-tonal.chip-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".chip-tonal.chip-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".chip-tonal.chip-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".chip-tonal.chip-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".chip-tonal.chip-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".chip-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".chip-ghost:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".chip-ghost.chip-primary": { "@layer components": { backgroundColor: "transparent", color: "var(--color-primary)" } }, ".chip-ghost.chip-secondary": { "@layer components": { backgroundColor: "transparent", color: "var(--color-secondary)" } }, ".chip-ghost.chip-tertiary": { "@layer components": { backgroundColor: "transparent", color: "var(--color-tertiary)" } }, ".chip-ghost.chip-info": { "@layer components": { backgroundColor: "transparent", color: "var(--color-info)" } }, ".chip-ghost.chip-success": { "@layer components": { backgroundColor: "transparent", color: "var(--color-success)" } }, ".chip-ghost.chip-warning": { "@layer components": { backgroundColor: "transparent", color: "var(--color-warning)" } }, ".chip-ghost.chip-error": { "@layer components": { backgroundColor: "transparent", color: "var(--color-error)" } }, ".chip-ghost.chip-accent": { "@layer components": { backgroundColor: "transparent", color: "var(--color-accent)" } }, ".chip-ghost.chip-neutral": { "@layer components": { backgroundColor: "transparent", color: "var(--color-neutral)" } }, ".chip-ghost.chip-base": { "@layer components": { backgroundColor: "transparent", color: "var(--color-base-content)" } }, ".chip-ghost.chip-primary:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".chip-ghost.chip-secondary:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".chip-ghost.chip-tertiary:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)" } }, ".chip-ghost.chip-info:hover": { "@layer components": { backgroundColor: "var(--color-info-container)" } }, ".chip-ghost.chip-success:hover": { "@layer components": { backgroundColor: "var(--color-success-container)" } }, ".chip-ghost.chip-warning:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)" } }, ".chip-ghost.chip-error:hover": { "@layer components": { backgroundColor: "var(--color-error-container)" } }, ".chip-ghost.chip-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".chip-ghost.chip-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".chip-ghost.chip-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".chip-sm": { "@layer components": { padding: "0.25rem 0.5rem", fontSize: "0.75rem", lineHeight: "1rem", gap: "0.25rem" } }, ".chip-lg": { "@layer components": { padding: "0.5rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", gap: "0.5rem" } }, ".chip-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.125rem", height: "1.125rem", fontSize: "1rem" } }, ".chip-label": { "@layer components": { display: "inline-flex" } }, ".chip-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.125rem", height: "1.125rem", marginLeft: "0.125rem", fontSize: "1rem", color: "currentColor", opacity: 0.7, backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "opacity 150ms ease-in-out" } }, ".chip-close:hover": { "@layer components": { opacity: 1 } }, ".chip-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".chip-selected.chip-outlined": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".chip:disabled, \n .chip-disabled": { "@layer components": { opacity: 0.7, pointerEvents: "none", cursor: "not-allowed" } }, ".chip-group": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, ".chip, \n .chip-delete": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".list": { "@layer components": { display: "flex", flexDirection: "column", margin: "0", padding: "0.5rem 0", listStyle: "none" } }, ".list-item": [{ "@layer components": { display: "flex", alignItems: "center", gap: "1rem", padding: "0.75rem 1rem", color: "var(--color-on-surface)", textDecoration: "none", transition: "background-color 150ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], "a.list-item, \n button.list-item, \n .list-item-clickable": { "@layer components": { cursor: "pointer" } }, "a.list-item:hover, \n button.list-item:hover, \n .list-item-clickable:hover, \n .list-hoverable .list-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".list-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", backgroundColor: "var(--color-surface-container)" } }, ".list-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".list-item-content": { "@layer components": { display: "flex", flexDirection: "column", flex: 1, minWidth: "0" } }, ".list-item-title": { "@layer components": { fontSize: "1rem", fontWeight: 500, lineHeight: "1.5rem", color: "var(--color-on-surface)" } }, ".list-item-subtitle": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".list-item-action": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", flexShrink: 0, color: "var(--color-on-surface-variant)" } }, ".list-bordered": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", padding: "0" } }, ".list-bordered .list-item": { "@layer components": { borderBottom: "1px solid var(--color-outline)" } }, ".list-bordered .list-item:last-child": { "@layer components": { borderBottom: "none" } }, ".list-compact .list-item": { "@layer components": { padding: "0.5rem 1rem" } }, ".list-compact .list-item-title": { "@layer components": { fontSize: "0.875rem" } }, ".list-compact .list-item-subtitle": { "@layer components": { fontSize: "0.75rem" } }, ".list-divider": { "@layer components": { height: "1px", margin: "0.5rem 0", backgroundColor: "var(--color-outline-variant)" } }, ".list-divider-inset": { "@layer components": { marginLeft: "3.5rem" } }, ".list-subheader": { "@layer components": { padding: "0.75rem 1rem", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".list-item-active, \n .list-item.active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".list-item-active .list-item-icon, \n .list-item.active .list-item-icon": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".list-item:disabled, \n .list-item-disabled": { "@layer components": { opacity: 0.7, pointerEvents: "none", cursor: "not-allowed" } }, ".list-dense .list-item": { "@layer components": { padding: "0.375rem 1rem" } }, ".list-dense .list-item-icon": { "@layer components": { width: "1.25rem", height: "1.25rem", fontSize: "1rem" } }, ".list-two-line .list-item": { "@layer components": { padding: "0.5rem 1rem" } }, ".list-three-line .list-item": { "@layer components": { alignItems: "flex-start", padding: "0.75rem 1rem" } }, ".list-three-line .list-item-content": { "@layer components": { gap: "0.25rem" } }, ".table": { "@layer components": { width: "100%", borderCollapse: "collapse", borderSpacing: "0", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".table-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".table thead, \n .table-header": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".table th, \n .table-header-cell": { "@layer components": { padding: "0.75rem 1rem", fontWeight: 600, textAlign: "left", color: "var(--color-on-surface)", borderBottom: "2px solid var(--color-outline)" } }, ".table tbody, \n .table-body": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".table td, \n .table-cell": { "@layer components": { padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-outline-variant)", verticalAlign: "middle" } }, ".table tr:last-child td, \n .table-row:last-child .table-cell": { "@layer components": { borderBottom: "none" } }, ".table tfoot, \n .table-footer": { "@layer components": { backgroundColor: "var(--color-surface-container)", fontWeight: 500 } }, ".table tfoot td": { "@layer components": { borderTop: "2px solid var(--color-outline)", borderBottom: "none" } }, ".table-zebra tbody tr:nth-child(even), \n .table-zebra .table-row:nth-child(even), \n .table-striped tbody tr:nth-child(even), \n .table-striped .table-row:nth-child(even)": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".table-hover tbody tr:hover, \n .table-hover .table-row:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".table-bordered": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", overflow: "hidden" } }, ".table-bordered th, \n .table-bordered td": { "@layer components": { border: "1px solid var(--color-outline-variant)" } }, ".table-borderless, \n .table-borderless th, \n .table-borderless td, \n .table-borderless tfoot td, \n .table-borderless .table-header-cell, \n .table-borderless .table-cell": { "@layer components": { border: "none" } }, ".table-compact th, \n .table-compact td": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.8125rem" } }, ".table-comfortable th, \n .table-comfortable td": { "@layer components": { padding: "1rem 1.25rem" } }, ".table-fixed": { "@layer components": { tableLayout: "fixed" } }, ".table-sticky thead, \n .table-sticky .table-header": { "@layer components": { position: "sticky", top: "0", zIndex: 10, backgroundColor: "var(--color-surface-container)", boxShadow: "var(--shadow-xs)" } }, ".table-sticky th, \n .table-sticky thead th, \n .table-sticky .table-header-cell": { "@layer components": { position: "sticky", top: "0", zIndex: 10, backgroundColor: "var(--color-surface-container)", boxShadow: "var(--shadow-xs)" } }, ".table-sortable th": { "@layer components": { cursor: "pointer", userSelect: "none" } }, ".table-sortable th:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".table-sort-asc::after": { "@layer components": { content: "' ↑'", opacity: 0.7 } }, ".table-sort-desc::after": { "@layer components": { content: "' ↓'", opacity: 0.7 } }, ".table-selectable tbody tr, \n .table-selectable .table-row": { "@layer components": { cursor: "pointer" } }, ".table-selectable tbody tr:hover, \n .table-selectable .table-row:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 8%, transparent)" } }, ".table-row-selected, \n .table tr.selected, \n .table-selectable tbody tr.table-row-selected, \n .table-selectable .table-row.table-row-selected, \n .table-selectable tbody tr.selected, \n .table-selectable .table-row.selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".table-row-clickable, \n .table tbody tr[data-href]": { "@layer components": { cursor: "pointer" } }, ".table-responsive": { "@layer components": { display: "block", width: "100%", overflowX: "auto", WebkitOverflowScrolling: "touch" } }, ".table-responsive .table": { "@layer components": { minWidth: "100%" } }, ".table caption, \n .table-caption": { "@layer components": { padding: "0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface-variant)", textAlign: "left", captionSide: "bottom" } }, ".table-empty": { "@layer components": { textAlign: "center", padding: "2rem", color: "var(--color-on-surface-variant)" } }, ".table-loading": { "@layer components": { position: "relative" } }, ".table-loading::after": { "@layer components": { content: "''", position: "absolute", inset: "0", backgroundColor: "var(--color-surface)", opacity: 0.7 } }, ".table-pin-left": { "@layer components": { position: "sticky", left: "0", backgroundColor: "inherit", zIndex: 1 } }, ".table-pin-right": { "@layer components": { position: "sticky", right: "0", backgroundColor: "inherit", zIndex: 1 } }, ".table tr:focus-visible, \n .table-row:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".autocomplete": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".autocomplete-input": { "@layer components": { width: "100%", padding: "0.75rem 1rem", fontSize: "0.875rem", lineHeight: 1.5, color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".autocomplete-input:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".autocomplete-input:disabled": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", cursor: "not-allowed", opacity: 0.6 } }, ".autocomplete-dropdown": [{ "@layer components": { position: "absolute", top: "100%", left: "0", right: "0", zIndex: 1000, maxHeight: "15rem", marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-lg)", overflowY: "auto", opacity: 0, visibility: "hidden", transform: "translateY(-0.5rem)", transition: "opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".autocomplete.autocomplete-open .autocomplete-dropdown, \n .autocomplete-dropdown.show": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".autocomplete-option": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".autocomplete-option:hover, \n .autocomplete-option:focus, \n .autocomplete-option.highlighted": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".autocomplete-option.selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".autocomplete-option:disabled, \n .autocomplete-option.disabled": { "@layer components": { color: "var(--color-on-surface-variant)", cursor: "not-allowed", opacity: 0.6 } }, ".autocomplete-option-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", flexShrink: 0 } }, ".autocomplete-option-content": { "@layer components": { flex: 1, minWidth: "0" } }, ".autocomplete-option-label": { "@layer components": { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".autocomplete-option-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".autocomplete-highlight": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", fontWeight: 600, borderRadius: "var(--radius-xs)" } }, ".autocomplete-group-header": { "@layer components": { padding: "0.5rem 1rem", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", color: "var(--color-on-surface-variant)", backgroundColor: "var(--color-surface-container)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".autocomplete-no-results": { "@layer components": { padding: "1rem", textAlign: "center", fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".autocomplete-loading": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "1rem", color: "var(--color-on-surface-variant)" } }, ".autocomplete-clear": { "@layer components": { position: "absolute", right: "0.75rem", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".autocomplete-clear:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".autocomplete-clearable .autocomplete-input": { "@layer components": { paddingRight: "2.5rem" } }, ".autocomplete-tags": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", padding: "0.375rem", paddingRight: "2.5rem", minHeight: "2.75rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".autocomplete-tags:focus-within": { "@layer components": { borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px var(--color-primary-container)" } }, ".autocomplete-tag": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", padding: "0.25rem 0.5rem", fontSize: "0.75rem", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "var(--radius-xs)" } }, ".autocomplete-tag-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", fontSize: "0.75rem", backgroundColor: "transparent", border: "none", cursor: "pointer", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".autocomplete-tag-remove:hover": { "@layer components": { backgroundColor: "var(--color-on-primary-container)", color: "var(--color-primary-container)" } }, ".autocomplete-tags-input": { "@layer components": { flex: 1, minWidth: "5rem", padding: "0.25rem", fontSize: "0.875rem", backgroundColor: "transparent", border: "none", outline: "none" } }, ".autocomplete-primary .autocomplete-input": { "@layer components": { color: "var(--color-primary)" } }, ".autocomplete-primary .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".autocomplete-secondary .autocomplete-input": { "@layer components": { color: "var(--color-secondary)" } }, ".autocomplete-secondary .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".autocomplete-tertiary .autocomplete-input": { "@layer components": { color: "var(--color-tertiary)" } }, ".autocomplete-tertiary .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".autocomplete-info .autocomplete-input": { "@layer components": { color: "var(--color-info)" } }, ".autocomplete-info .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".autocomplete-success .autocomplete-input": { "@layer components": { color: "var(--color-success)" } }, ".autocomplete-success .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".autocomplete-warning .autocomplete-input": { "@layer components": { color: "var(--color-warning)" } }, ".autocomplete-warning .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".autocomplete-error .autocomplete-input": { "@layer components": { color: "var(--color-error)" } }, ".autocomplete-error .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".autocomplete-accent .autocomplete-input": { "@layer components": { color: "var(--color-accent)" } }, ".autocomplete-accent .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".autocomplete-neutral .autocomplete-input": { "@layer components": { color: "var(--color-neutral)" } }, ".autocomplete-neutral .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".autocomplete-base .autocomplete-input": { "@layer components": { color: "var(--color-base-content)" } }, ".autocomplete-base .autocomplete-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".autocomplete-ghost .autocomplete-input": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".autocomplete-ghost .autocomplete-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".autocomplete-sm .autocomplete-input": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem" } }, ".autocomplete-lg .autocomplete-input": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1rem" } }, ".cascader": [{ "@layer components": { position: "relative", display: "inline-flex", flexDirection: "column", width: "100%" } }, { "@layer components": { "@supports not (anchor-name: --anchor)": { position: "relative" } } }], ".cascader-trigger": [{ "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, { "@layer components": { "@supports (anchor-name: --anchor)": { anchorName: "--cascader-anchor" } } }], ".cascader-trigger:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".cascader-trigger:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".cascader-trigger:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".cascader-value": { "@layer components": { flex: 1, display: "flex", alignItems: "center", gap: "0.5rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--color-on-surface)" } }, ".cascader-placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".cascader-path": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".cascader-path-separator": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".cascader-arrow": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", flexShrink: 0, transition: "transform 150ms ease-in-out" } }, ".cascader-open .cascader-arrow": { "@layer components": { transform: "rotate(180deg)" } }, ".cascader-clear": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", padding: "0", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", flexShrink: 0, transition: "background-color 150ms ease-in-out" } }, ".cascader-clear:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".cascader-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", zIndex: 50, display: "none", marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", overflow: "hidden" } }, ".cascader-open .cascader-dropdown": { "@layer components": { display: "flex" } }, ".cascader-dropdown[popover]": [{ "@layer components": { inset: "unset", margin: "0", border: "1px solid var(--color-outline-variant)" } }, { "@layer components": { "@supports (anchor-name: --anchor)": { positionAnchor: "--cascader-anchor", top: "anchor(bottom)", left: "anchor(left)", marginTop: "0.25rem", positionTryFallbacks: "flip-block" } } }], ".cascader-dropdown[popover]:popover-open": [{ "@layer components": { display: "flex" } }, { "@layer components": { "@supports not (anchor-name: --anchor)": { position: "absolute", top: "100%", left: "0", marginTop: "0.25rem" } } }], ".cascader-panels": { "@layer components": { display: "flex", maxHeight: "16rem" } }, ".cascader-panel": { "@layer components": { display: "flex", flexDirection: "column", minWidth: "10rem", maxWidth: "14rem", overflowY: "auto", borderRight: "1px solid var(--color-outline-variant)" } }, ".cascader-panel:last-child": { "@layer components": { borderRight: "none" } }, ".cascader-panel-header": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", fontWeight: 600, color: "var(--color-on-surface-variant)", textTransform: "uppercase", letterSpacing: "0.05em", backgroundColor: "var(--color-surface-container)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".cascader-options": { "@layer components": { display: "flex", flexDirection: "column", padding: "0.25rem", flex: 1, overflowY: "auto" } }, ".cascader-option": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", width: "100%", transition: "background-color 150ms ease-in-out" } }, ".cascader-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".cascader-option-active": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".cascader-option-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".cascader-option-selected:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".cascader-option-disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".cascader-option-disabled:hover": { "@layer components": { backgroundColor: "transparent" } }, ".cascader-option-label": { "@layer components": { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".cascader-option-arrow": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".cascader-option-selected .cascader-option-arrow": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".cascader-search": { "@layer components": { display: "flex", padding: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".cascader-search-input": { "@layer components": { flex: 1, padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-xs)", outline: "none" } }, ".cascader-search-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".cascader-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".cascader-empty": { "@layer components": { padding: "1.5rem", textAlign: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".cascader-sm .cascader-trigger": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".cascader-sm .cascader-panel": { "@layer components": { minWidth: "8rem", maxWidth: "12rem" } }, ".cascader-sm .cascader-option": { "@layer components": { padding: "0.375rem 0.5rem", fontSize: "0.8125rem" } }, ".cascader-lg .cascader-trigger": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".cascader-lg .cascader-panel": { "@layer components": { minWidth: "12rem", maxWidth: "16rem" } }, ".cascader-lg .cascader-option": { "@layer components": { padding: "0.625rem 1rem", fontSize: "1rem" } }, ".cascader-outlined .cascader-trigger": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)" } }, ".cascader-filled .cascader-trigger": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".cascader-filled .cascader-trigger:focus": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".cascader-primary .cascader-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".cascader-primary .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".cascader-secondary .cascader-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".cascader-secondary .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".cascader-tertiary .cascader-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".cascader-tertiary .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".cascader-info .cascader-trigger": { "@layer components": { color: "var(--color-info)" } }, ".cascader-info .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".cascader-success .cascader-trigger": { "@layer components": { color: "var(--color-success)" } }, ".cascader-success .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".cascader-warning .cascader-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".cascader-warning .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".cascader-error .cascader-trigger": { "@layer components": { color: "var(--color-error)" } }, ".cascader-error .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".cascader-accent .cascader-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".cascader-accent .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".cascader-neutral .cascader-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".cascader-neutral .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".cascader-base .cascader-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".cascader-base .cascader-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".cascader-ghost .cascader-trigger": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".cascader-ghost .cascader-trigger:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".cascader-disabled .cascader-trigger": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".cascader-loading .cascader-trigger": { "@layer components": { cursor: "wait" } }, ".cascader-spinner": [{ "@layer components": { display: "inline-block", width: "1rem", height: "1rem", border: "2px solid var(--color-outline)", borderTopColor: "var(--color-primary)", borderRadius: "var(--radius-full)", animation: "cascader-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes cascader-spin": { to: { transform: "rotate(360deg)" } }, ".cascader-trigger, \n .cascader-arrow, \n .cascader-option, \n .cascader-clear": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".checkbox::before": { "@layer components": { content: '""', width: "0.65em", height: "0.35em", transform: "scale(0) rotate(-45deg)", transformOrigin: "center", borderBottom: "2px solid var(--color-primary-content)", borderLeft: "2px solid var(--color-primary-content)", transition: "transform 150ms ease-in-out" } }, ".checkbox:checked::before": { "@layer components": { transform: "scale(1) rotate(-45deg)" } }, ".checkbox:indeterminate": { "@layer components": { backgroundColor: "var(--checkbox-color)", borderColor: "var(--checkbox-color)" } }, ".checkbox:indeterminate::before": { "@layer components": { width: "0.5em", height: "0", borderBottom: "2px solid var(--color-primary-content)", borderLeft: "0", transform: "scale(1) rotate(0deg)" } }, ".checkbox:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "var(--color-on-surface)" } }, ".checkbox:checked:hover:not(:disabled), \n .checkbox:indeterminate:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--checkbox-color), black 10%)", borderColor: "color-mix(in oklch, var(--checkbox-color), black 10%)" } }, ".checkbox-md": { "@layer components": { "--checkbox-size": "1.25rem" } }, ".checkbox-xl": { "@layer components": { "--checkbox-size": "1.75rem" } }, ".checkbox-primary": { "@layer components": { "--checkbox-color": "var(--color-primary)" } }, ".checkbox-primary:checked::before, \n .checkbox-primary:indeterminate::before": { "@layer components": { borderColor: "var(--color-primary-content)" } }, ".checkbox-secondary": { "@layer components": { "--checkbox-color": "var(--color-secondary)" } }, ".checkbox-secondary:checked::before, \n .checkbox-secondary:indeterminate::before": { "@layer components": { borderColor: "var(--color-secondary-content)" } }, ".checkbox-tertiary": { "@layer components": { "--checkbox-color": "var(--color-tertiary)" } }, ".checkbox-tertiary:checked::before, \n .checkbox-tertiary:indeterminate::before": { "@layer components": { borderColor: "var(--color-tertiary-content)" } }, ".checkbox-success": { "@layer components": { "--checkbox-color": "var(--color-success)" } }, ".checkbox-success:checked::before, \n .checkbox-success:indeterminate::before": { "@layer components": { borderColor: "var(--color-success-content)" } }, ".checkbox-warning": { "@layer components": { "--checkbox-color": "var(--color-warning)" } }, ".checkbox-warning:checked::before, \n .checkbox-warning:indeterminate::before": { "@layer components": { borderColor: "var(--color-warning-content)" } }, ".checkbox-error": { "@layer components": { "--checkbox-color": "var(--color-error)" } }, ".checkbox-error:checked::before, \n .checkbox-error:indeterminate::before": { "@layer components": { borderColor: "var(--color-error-content)" } }, ".checkbox-info": { "@layer components": { "--checkbox-color": "var(--color-info)" } }, ".checkbox-info:checked::before, \n .checkbox-info:indeterminate::before": { "@layer components": { borderColor: "var(--color-info-content)" } }, ".checkbox-accent": { "@layer components": { "--checkbox-color": "var(--color-accent)" } }, ".checkbox-accent:checked::before, \n .checkbox-accent:indeterminate::before": { "@layer components": { borderColor: "var(--color-accent-content)" } }, ".checkbox-neutral": { "@layer components": { "--checkbox-color": "var(--color-neutral)" } }, ".checkbox-neutral:checked::before, \n .checkbox-neutral:indeterminate::before": { "@layer components": { borderColor: "var(--color-neutral-content)" } }, ".checkbox-base": { "@layer components": { "--checkbox-color": "var(--color-base-100)" } }, ".checkbox-base:checked::before, \n .checkbox-base:indeterminate::before": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".checkbox-ghost": { "@layer components": { "--checkbox-border-color": "transparent" } }, ".checkbox-ghost:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "transparent" } }, ".checkbox-label": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".checkbox-label:has(.checkbox:disabled)": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".checkbox-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".checkbox-group-horizontal": { "@layer components": { flexDirection: "row", flexWrap: "wrap", gap: "1.5rem" } }, ".checkbox-group-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", marginBottom: "0.5rem" } }, ".checkbox, \n .checkbox::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".datepicker": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".datepicker-input": { "@layer components": { width: "100%", padding: "0.75rem 2.5rem 0.75rem 1rem", fontSize: "0.875rem", lineHeight: 1.5, color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, '.datepicker-input-container .datepicker-input[type="date"]::-webkit-calendar-picker-indicator': { "@layer components": { display: "none", WebkitAppearance: "none" } }, '.datepicker-input-container .datepicker-input[type="date"]::-webkit-inner-spin-button, \n .datepicker-input-container .datepicker-input[type="date"]::-webkit-clear-button': { "@layer components": { display: "none", WebkitAppearance: "none" } }, ".datepicker-input:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".datepicker-input:disabled": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", cursor: "not-allowed", opacity: 0.6 } }, ".datepicker-icon": { "@layer components": { position: "absolute", right: "0.75rem", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", pointerEvents: "none" } }, ".datepicker-input-container": { "@layer components": { position: "relative", display: "flex", alignItems: "center", width: "100%" } }, ".datepicker-input-container .datepicker-input": { "@layer components": { paddingRight: "2.5rem" } }, ".datepicker-trigger": { "@layer components": { position: "absolute", right: "0.5rem", top: "50%", transform: "translateY(-50%)", zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", padding: "0", background: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", color: "var(--color-on-surface-variant)", transition: "background-color 150ms ease-in-out" } }, ".datepicker-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-trigger .datepicker-icon": { "@layer components": { position: "static", transform: "none" } }, ".datepicker-dropdown:not([popover])": { "@layer components": { position: "absolute", top: "100%", left: "0", zIndex: 1000, marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", opacity: 0, visibility: "hidden", transform: "translateY(-0.5rem)", transition: "opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out" } }, ".datepicker.datepicker-open .datepicker-dropdown:not([popover]), \n .datepicker-dropdown:not([popover]).show, \n .datepicker-dropdown-open:not([popover])": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".datepicker-dropdown[popover]": { "@layer components": { inset: "unset", margin: "0", padding: "0", minWidth: "18rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)" } }, ".datepicker-header": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datepicker-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".datepicker-nav": { "@layer components": { display: "flex", gap: "0.25rem" } }, ".datepicker-nav-btn": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".datepicker-nav-btn:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".datepicker-nav-btn:disabled": { "@layer components": { opacity: 0.4, cursor: "not-allowed" } }, ".datepicker-calendar": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0.125rem", padding: "0.5rem" } }, ".datepicker-weekdays": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0.125rem", marginBottom: "0.25rem" } }, ".datepicker-weekday": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", aspectRatio: "1", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-on-surface-variant)" } }, ".datepicker-days": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0.125rem" } }, ".datepicker-day": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", aspectRatio: "1", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".datepicker-day:hover:not(:disabled):not(.datepicker-day-selected)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-day:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".datepicker-day-other-month": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.9 } }, ".datepicker-day-today": { "@layer components": { border: "1px solid var(--color-primary)" } }, ".datepicker-day-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datepicker-day-selected:hover": { "@layer components": { backgroundColor: "var(--color-primary)", opacity: 0.9 } }, ".datepicker-day:disabled": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.4, cursor: "not-allowed" } }, ".datepicker-day-in-range": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "0" } }, ".datepicker-day-range-start": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderRadius: "var(--radius-full) 0 0 var(--radius-full)" } }, ".datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderRadius: "0 var(--radius-full) var(--radius-full) 0" } }, ".datepicker-months, \n .datepicker-years": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.5rem", padding: "0.5rem", minWidth: "16rem" } }, ".datepicker-month, \n .datepicker-year": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", padding: "0.75rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".datepicker-month:hover, \n .datepicker-year:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-month.selected, \n .datepicker-month-selected, \n .datepicker-year.selected, \n .datepicker-year-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datepicker-day-disabled": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.9, cursor: "not-allowed", pointerEvents: "none" } }, ".datepicker-footer": { "@layer components": { display: "flex", justifyContent: "flex-end", gap: "0.5rem", padding: "0.75rem", borderTop: "1px solid var(--color-outline-variant)" } }, ".datepicker-time": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", padding: "0.75rem", borderTop: "1px solid var(--color-outline-variant)" } }, ".datepicker-time-input": { "@layer components": { width: "3rem", padding: "0.5rem", fontSize: "1rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-xs)" } }, ".datepicker-time-input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)" } }, ".datepicker-time-separator": { "@layer components": { fontSize: "1rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".datepicker-time-period": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.125rem", marginLeft: "0.5rem" } }, ".datepicker-time-period-btn": { "@layer components": { padding: "0.25rem 0.5rem", fontSize: "0.625rem", fontWeight: 500, color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "1px solid var(--color-outline)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".datepicker-time-period-btn:first-child": { "@layer components": { borderRadius: "var(--radius-xs) var(--radius-xs) 0 0" } }, ".datepicker-time-period-btn:last-child": { "@layer components": { borderRadius: "0 0 var(--radius-xs) var(--radius-xs)", borderTop: "none" } }, ".datepicker-time-period-btn.active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".datepicker-sm .datepicker-input": { "@layer components": { padding: "0.5rem 2rem 0.5rem 0.75rem", fontSize: "0.75rem" } }, ".datepicker-lg .datepicker-input": { "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1rem" } }, ".datepicker-range": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".datepicker-range-separator": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".datepicker-range-input": { "@layer components": { flex: 1 } }, ".datepicker-dual-calendar": { "@layer components": { display: "flex", gap: "1rem", padding: "0.5rem" } }, ".datepicker-dual-calendar .datepicker-calendar": { "@layer components": { flex: 1 } }, ".datepicker-presets": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", padding: "0.5rem", borderRight: "1px solid var(--color-outline-variant)", minWidth: "8rem" } }, ".datepicker-preset": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".datepicker-preset:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datepicker-preset-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".datepicker-range-display": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem", backgroundColor: "var(--color-surface-container-lowest)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datepicker-range-date": { "@layer components": { flex: 1, textAlign: "center" } }, ".datepicker-range-date-label": { "@layer components": { fontSize: "0.625rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textTransform: "uppercase", marginBottom: "0.25rem" } }, ".datepicker-range-date-value": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".datepicker-range-arrow": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".datetime-picker": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".datetime-picker-input": { "@layer components": { width: "100%", padding: "0.75rem 2.5rem 0.75rem 1rem", fontSize: "0.875rem", lineHeight: 1.5, color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".datetime-picker-input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".datetime-picker-dropdown": { "@layer components": { display: "flex", flexDirection: "column" } }, ".datetime-picker-body": { "@layer components": { display: "flex" } }, ".datetime-picker-calendar": { "@layer components": { flex: 1 } }, ".datetime-picker-time-panel": { "@layer components": { display: "flex", flexDirection: "column", minWidth: "5rem", borderLeft: "1px solid var(--color-outline-variant)" } }, ".datetime-picker-time-header": { "@layer components": { padding: "0.5rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textAlign: "center", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datetime-picker-time-columns": { "@layer components": { display: "flex", flex: 1, maxHeight: "16rem" } }, ".datetime-picker-time-column": { "@layer components": { flex: 1, display: "flex", flexDirection: "column", overflowY: "auto", borderRight: "1px solid var(--color-outline-variant)" } }, ".datetime-picker-time-column:last-child": { "@layer components": { borderRight: "none" } }, ".datetime-picker-time-option": { "@layer components": { padding: "0.375rem 0.5rem", fontSize: "0.75rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".datetime-picker-time-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".datetime-picker-time-option-selected": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datetime-picker-time-option:disabled": { "@layer components": { opacity: 0.4, cursor: "not-allowed" } }, ".datetime-range-picker": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".datetime-range-picker-inputs": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".datetime-range-picker-input": { "@layer components": { flex: 1, padding: "0.75rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out" } }, ".datetime-range-picker-input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".datetime-range-picker-dropdown": { "@layer components": { minWidth: "40rem" } }, ".datetime-range-picker-body": { "@layer components": { display: "flex" } }, ".datetime-range-picker-panel": { "@layer components": { flex: 1, borderRight: "1px solid var(--color-outline-variant)" } }, ".datetime-range-picker-panel:last-child": { "@layer components": { borderRight: "none" } }, ".datetime-range-picker-panel-header": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textAlign: "center", backgroundColor: "var(--color-surface-container-lowest)", borderBottom: "1px solid var(--color-outline-variant)" } }, ".datepicker-inline": { "@layer components": { position: "static" } }, ".datepicker-inline .datepicker-dropdown, \n .datepicker-dropdown.datepicker-inline": { "@layer components": { position: "static", display: "block", opacity: 1, visibility: "visible", transform: "none", marginTop: "0", boxShadow: "none" } }, ".datepicker-primary .datepicker-input": { "@layer components": { color: "var(--color-primary)" } }, ".datepicker-primary .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".datepicker-secondary .datepicker-input": { "@layer components": { color: "var(--color-secondary)" } }, ".datepicker-secondary .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".datepicker-tertiary .datepicker-input": { "@layer components": { color: "var(--color-tertiary)" } }, ".datepicker-tertiary .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".datepicker-info .datepicker-input": { "@layer components": { color: "var(--color-info)" } }, ".datepicker-info .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".datepicker-info .datepicker-day-selected, \n .datepicker-info .datepicker-day-range-start, \n .datepicker-info .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".datepicker-success .datepicker-input": { "@layer components": { color: "var(--color-success)" } }, ".datepicker-success .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".datepicker-success .datepicker-day-selected, \n .datepicker-success .datepicker-day-range-start, \n .datepicker-success .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".datepicker-warning .datepicker-input": { "@layer components": { color: "var(--color-warning)" } }, ".datepicker-warning .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".datepicker-warning .datepicker-day-selected, \n .datepicker-warning .datepicker-day-range-start, \n .datepicker-warning .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".datepicker-accent .datepicker-input": { "@layer components": { color: "var(--color-accent)" } }, ".datepicker-accent .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".datepicker-accent .datepicker-day-selected, \n .datepicker-accent .datepicker-day-range-start, \n .datepicker-accent .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".datepicker-neutral .datepicker-input": { "@layer components": { color: "var(--color-neutral)" } }, ".datepicker-neutral .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".datepicker-neutral .datepicker-day-selected, \n .datepicker-neutral .datepicker-day-range-start, \n .datepicker-neutral .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".datepicker-base .datepicker-input": { "@layer components": { color: "var(--color-base-content)" } }, ".datepicker-base .datepicker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".datepicker-base .datepicker-day-selected, \n .datepicker-base .datepicker-day-range-start, \n .datepicker-base .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".datepicker-primary .datepicker-day-selected, \n .datepicker-primary .datepicker-day-range-start, \n .datepicker-primary .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".datepicker-secondary .datepicker-day-selected, \n .datepicker-secondary .datepicker-day-range-start, \n .datepicker-secondary .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".datepicker-tertiary .datepicker-day-selected, \n .datepicker-tertiary .datepicker-day-range-start, \n .datepicker-tertiary .datepicker-day-range-end": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".datepicker-error .datepicker-input, \n .datetime-picker-error .datetime-picker-input": { "@layer components": { color: "var(--color-error)" } }, ".datepicker-error .datepicker-input:focus, \n .datetime-picker-error .datetime-picker-input:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".datepicker-ghost .datepicker-input": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".datepicker-ghost .datepicker-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".datepicker-dropdown, \n .datepicker-nav-btn, \n .datepicker-day, \n .datepicker-month, \n .datepicker-year, \n .datepicker-preset, \n .datetime-picker-time-option": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".file-upload": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".file-upload-dropzone": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.75rem", minHeight: "10rem", padding: "2rem", backgroundColor: "var(--color-surface)", border: "2px dashed currentColor", borderRadius: "var(--radius-md)", cursor: "pointer", transition: "border-color 150ms ease-in-out, background-color 150ms ease-in-out" } }, ".file-upload-dropzone:hover": { "@layer components": { borderColor: "currentColor", backgroundColor: "var(--color-surface-container)" } }, ".file-upload-dropzone:focus-within": { "@layer components": { borderColor: "currentColor", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-upload-dropzone.dragging": { "@layer components": { borderColor: "currentColor", backgroundColor: "color-mix(in oklch, currentColor 10%, var(--color-surface))" } }, ".file-upload-dropzone.disabled": { "@layer components": { opacity: 0.6, cursor: "not-allowed", pointerEvents: "none" } }, ".file-upload-input": { "@layer components": { position: "absolute", width: "0", height: "0", opacity: 0, overflow: "hidden" } }, ".file-upload-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "3rem", height: "3rem", fontSize: "2rem" } }, ".file-upload-text": { "@layer components": { textAlign: "center" } }, ".file-upload-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".file-upload-subtitle": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".file-upload-browse": { "@layer components": { color: "currentColor", fontWeight: 500, textDecoration: "underline", cursor: "pointer" } }, ".file-upload-list": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".file-upload-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-sm)" } }, ".file-upload-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "var(--radius-sm)", fontSize: "1.25rem", flexShrink: 0 } }, ".file-upload-item-info": { "@layer components": { flex: 1, minWidth: "0" } }, ".file-upload-item-name": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".file-upload-item-size": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".file-upload-item-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", flexShrink: 0 } }, ".file-upload-item-remove:hover": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".file-upload-progress": { "@layer components": { position: "relative", height: "0.25rem", marginTop: "0.5rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-full)", overflow: "hidden" } }, ".file-upload-progress-bar": { "@layer components": { position: "absolute", top: "0", left: "0", height: "100%", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)", transition: "width 150ms ease-in-out" } }, ".file-upload-item.uploading .file-upload-item-icon": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".file-upload-item.success .file-upload-item-icon": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".file-upload-item.error .file-upload-item-icon": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".file-upload-item.error .file-upload-progress-bar": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".file-upload-error": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".file-upload-preview": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(6rem, 1fr))", gap: "0.75rem" } }, ".file-upload-preview-item": { "@layer components": { position: "relative", aspectRatio: "1", borderRadius: "var(--radius-sm)", overflow: "hidden", backgroundColor: "var(--color-surface-container)" } }, ".file-upload-preview-image": { "@layer components": { width: "100%", height: "100%", objectFit: "cover" } }, ".file-upload-preview-remove": { "@layer components": { position: "absolute", top: "0.25rem", right: "0.25rem", display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", opacity: 0, transition: "opacity 150ms ease-in-out" } }, ".file-upload-preview-item:hover .file-upload-preview-remove": { "@layer components": { opacity: 1 } }, ".file-upload-compact .file-upload-dropzone": { "@layer components": { flexDirection: "row", minHeight: "auto", padding: "1rem", gap: "1rem" } }, ".file-upload-compact .file-upload-icon": { "@layer components": { width: "2rem", height: "2rem", fontSize: "1.5rem" } }, ".file-upload-compact .file-upload-text": { "@layer components": { textAlign: "left" } }, ".file-upload-button": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.75rem 1.5rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary-content)", backgroundColor: "var(--color-primary)", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "background-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".file-upload-button:hover": { "@layer components": { boxShadow: "var(--shadow-md)" } }, ".file-upload-button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-upload-button:disabled": { "@layer components": { opacity: 0.6, cursor: "not-allowed" } }, ".file-upload-primary .file-upload-dropzone": { "@layer components": { color: "var(--color-primary)" } }, ".file-upload-primary .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".file-upload-secondary .file-upload-dropzone": { "@layer components": { color: "var(--color-secondary)" } }, ".file-upload-secondary .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".file-upload-tertiary .file-upload-dropzone": { "@layer components": { color: "var(--color-tertiary)" } }, ".file-upload-tertiary .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".file-upload-info .file-upload-dropzone": { "@layer components": { color: "var(--color-info)" } }, ".file-upload-info .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".file-upload-success .file-upload-dropzone": { "@layer components": { color: "var(--color-success)" } }, ".file-upload-success .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".file-upload-warning .file-upload-dropzone": { "@layer components": { color: "var(--color-warning)" } }, ".file-upload-warning .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".file-upload-error .file-upload-dropzone": { "@layer components": { color: "var(--color-error)" } }, ".file-upload-error .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".file-upload-accent .file-upload-dropzone": { "@layer components": { color: "var(--color-accent)" } }, ".file-upload-accent .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".file-upload-neutral .file-upload-dropzone": { "@layer components": { color: "var(--color-neutral)" } }, ".file-upload-neutral .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".file-upload-base .file-upload-dropzone": { "@layer components": { color: "var(--color-base-content)" } }, ".file-upload-base .file-upload-dropzone:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".file-upload-ghost .file-upload-dropzone": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".file-upload-ghost .file-upload-dropzone:focus-within": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-upload-sm .file-upload-dropzone": { "@layer components": { minHeight: "6rem", padding: "1rem" } }, ".file-upload-lg .file-upload-dropzone": { "@layer components": { minHeight: "14rem", padding: "3rem" } }, ".file-upload-dropzone, \n .file-upload-progress-bar, \n .file-upload-preview-remove": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".form-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%" } }, ".form-group-horizontal": { "@layer components": { flexDirection: "row", alignItems: "flex-start", gap: "1rem" } }, ".form-group-horizontal .form-label": { "@layer components": { minWidth: "8rem", paddingTop: "0.75rem" } }, ".form-group-horizontal .form-control": { "@layer components": { flex: 1 } }, ".form-label": { "@layer components": { display: "block", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".form-label-required::after": { "@layer components": { content: "' *'", color: "var(--color-error)" } }, ".form-label-optional::after": { "@layer components": { content: "' (optional)'", fontSize: "0.75rem", fontWeight: 400, color: "var(--color-on-surface-variant)" } }, ".form-label-sm": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem" } }, ".form-label-lg": { "@layer components": { fontSize: "1rem", lineHeight: "1.5rem" } }, ".helper-text-error": { "@layer components": { color: "var(--color-error)" } }, ".helper-text-success": { "@layer components": { color: "var(--color-success)" } }, ".helper-text-warning": { "@layer components": { color: "var(--color-warning)" } }, ".helper-text-info": { "@layer components": { color: "var(--color-info)" } }, ".helper-text-icon": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem" } }, ".helper-text-icon svg, \n .helper-text-icon .icon": { "@layer components": { width: "0.875rem", height: "0.875rem" } }, ".form-hint": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", marginBottom: "0.25rem" } }, ".fieldset": { "@layer components": { display: "flex", flexDirection: "column", gap: "1rem", padding: "1rem", margin: "0", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", backgroundColor: "transparent" } }, ".fieldset-legend": { "@layer components": { padding: "0 0.5rem", fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem", color: "var(--color-on-surface)" } }, ".fieldset-filled": { "@layer components": { backgroundColor: "var(--color-surface-container-lowest)", borderColor: "transparent" } }, ".fieldset-borderless": { "@layer components": { border: "none", padding: "0" } }, ".fieldset-card": { "@layer components": { backgroundColor: "var(--color-surface)", borderColor: "transparent", boxShadow: "var(--shadow-xs)", padding: "1.5rem" } }, ".form-row": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "1rem" } }, ".form-row > .form-group": { "@layer components": { flex: 1, minWidth: "200px" } }, ".form-grid": { "@layer components": { display: "grid", gap: "1rem" } }, ".form-grid-2": { "@layer components": { gridTemplateColumns: "repeat(2, 1fr)" } }, ".form-grid-3": { "@layer components": { gridTemplateColumns: "repeat(3, 1fr)" } }, ".form-grid-4": { "@layer components": { gridTemplateColumns: "repeat(4, 1fr)" } }, ".form-grid-2, \n .form-grid-3, \n .form-grid-4": { "@layer components": { "@media (max-width: 640px)": { gridTemplateColumns: "1fr" } } }, ".form-actions": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", marginTop: "1rem" } }, ".form-actions-right": { "@layer components": { justifyContent: "flex-end" } }, ".form-actions-center": { "@layer components": { justifyContent: "center" } }, ".form-actions-between": { "@layer components": { justifyContent: "space-between" } }, ".form-divider": { "@layer components": { height: "1px", backgroundColor: "var(--color-outline-variant)", margin: "1rem 0" } }, ".form-divider-text": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem", color: "var(--color-on-surface-variant)", fontSize: "0.75rem", textTransform: "uppercase" } }, ".form-divider-text::before, \n .form-divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".form-section": { "@layer components": { display: "flex", flexDirection: "column", gap: "1rem" } }, ".form-section-title": { "@layer components": { fontSize: "1rem", fontWeight: 600, color: "var(--color-on-surface)", marginBottom: "0.5rem" } }, ".form-section-description": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)", marginBottom: "1rem" } }, ".form-inline": { "@layer components": { display: "flex", flexWrap: "wrap", alignItems: "flex-end", gap: "0.75rem" } }, ".form-inline .form-group": { "@layer components": { flex: "none", width: "auto" } }, ".form-counter": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", textAlign: "right", marginTop: "0.25rem" } }, ".form-counter-error": { "@layer components": { color: "var(--color-error)" } }, ".form-group-error .form-label": { "@layer components": { color: "var(--color-error)" } }, ".form-group-error .input, \n .form-group-error .select, \n .form-group-error .textarea": { "@layer components": { borderColor: "var(--color-error)" } }, ".form-group-error .input:focus-visible, \n .form-group-error .select:focus-visible, \n .form-group-error .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-error)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".form-group-success .form-label": { "@layer components": { color: "var(--color-success)" } }, ".form-group-success .input, \n .form-group-success .select, \n .form-group-success .textarea": { "@layer components": { borderColor: "var(--color-success)" } }, ".form-group-success .input:focus-visible, \n .form-group-success .select:focus-visible, \n .form-group-success .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-success)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".form-group-warning .form-label": { "@layer components": { color: "var(--color-warning)" } }, ".form-group-warning .input, \n .form-group-warning .select, \n .form-group-warning .textarea": { "@layer components": { borderColor: "var(--color-warning)" } }, ".form-group-warning .input:focus-visible, \n .form-group-warning .select:focus-visible, \n .form-group-warning .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-warning)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".form-group-info .form-label": { "@layer components": { color: "var(--color-info)" } }, ".form-group-info .input, \n .form-group-info .select, \n .form-group-info .textarea": { "@layer components": { borderColor: "var(--color-info)" } }, ".form-group-info .input:focus-visible, \n .form-group-info .select:focus-visible, \n .form-group-info .textarea:focus-visible": { "@layer components": { borderColor: "var(--color-info)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".form-group-disabled": { "@layer components": { opacity: 0.5, pointerEvents: "none" } }, '.input[aria-invalid="true"], \n .select[aria-invalid="true"], \n .textarea[aria-invalid="true"]': { "@layer components": { borderColor: "var(--color-error)", color: "var(--color-error)" } }, '.input[aria-invalid="true"]:focus-visible, \n .select[aria-invalid="true"]:focus-visible, \n .textarea[aria-invalid="true"]:focus-visible': { "@layer components": { borderColor: "var(--color-error)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, '.checkbox[aria-invalid="true"], \n .radio[aria-invalid="true"], \n .file-input[aria-invalid="true"]': { "@layer components": { borderColor: "var(--color-error)" } }, '.checkbox[aria-invalid="true"]:focus-visible, \n .radio[aria-invalid="true"]:focus-visible, \n .file-input[aria-invalid="true"]:focus-visible': { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, '.switch[aria-invalid="true"]': { "@layer components": { borderColor: "var(--color-error)" } }, '.switch[aria-invalid="true"]:focus-visible': { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, '.form-label[aria-required="true"]::after': { "@layer components": { content: "' *'", color: "var(--color-error)" } }, ".validate .input:invalid, \n .validate .select:invalid, \n .validate .textarea:invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".validate .input:valid, \n .validate .select:valid, \n .validate .textarea:valid": { "@layer components": { borderColor: "var(--color-success)" } }, ".input:user-invalid, \n .select:user-invalid, \n .textarea:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".input:user-invalid:focus-visible, \n .select:user-invalid:focus-visible, \n .textarea:user-invalid:focus-visible": { "@layer components": { borderColor: "var(--color-error)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".input:user-valid, \n .select:user-valid, \n .textarea:user-valid": { "@layer components": { borderColor: "var(--color-success)" } }, ".input:user-valid:focus-visible, \n .select:user-valid:focus-visible, \n .textarea:user-valid:focus-visible": { "@layer components": { borderColor: "var(--color-success)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".checkbox:user-invalid, \n .radio:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".checkbox:user-invalid:focus-visible, \n .radio:user-invalid:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".checkbox:user-valid:checked, \n .radio:user-valid:checked": { "@layer components": { borderColor: "var(--color-success)", backgroundColor: "var(--color-success)" } }, ".switch:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".switch:user-invalid:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".switch:user-valid:checked": { "@layer components": { backgroundColor: "var(--color-success)", borderColor: "var(--color-success)" } }, ".file-input:user-invalid": { "@layer components": { borderColor: "var(--color-error)" } }, ".file-input:user-invalid:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".input-filled:user-invalid": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".input-filled:user-invalid:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)", boxShadow: "none" } }, ".input-filled:user-valid": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".input-filled:user-valid:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)", boxShadow: "none" } }, ".multi-select": { "@layer components": { position: "relative", display: "inline-flex", flexDirection: "column", width: "100%" } }, ".multi-select-trigger": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", minHeight: "2.75rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "1rem", lineHeight: "1.5rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".multi-select-trigger:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".multi-select-trigger:focus-within": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".multi-select-placeholder": { "@layer components": { flex: 1, color: "var(--color-on-surface-variant)" } }, ".multi-select-tags": { "@layer components": { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".multi-select-tag": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", maxWidth: "100%", padding: "0.125rem 0.375rem 0.125rem 0.5rem", fontSize: "0.75rem", lineHeight: "1.25rem", backgroundColor: "var(--color-surface-container-high)", color: "var(--color-on-surface)", borderRadius: "var(--radius-lg)" } }, ".multi-select-tag-text": { "@layer components": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".multi-select-tag-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", padding: "0", fontSize: "0.875rem", color: "inherit", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", opacity: 0.7, transition: "opacity 150ms ease-in-out, background-color 150ms ease-in-out" } }, ".multi-select-tag-remove:hover": { "@layer components": { opacity: 1, backgroundColor: "color-mix(in oklch, currentColor 15%, transparent)" } }, ".multi-select-tag-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".multi-select-tag-outlined": { "@layer components": { backgroundColor: "transparent", border: "1px solid var(--color-outline)", color: "var(--color-on-surface)" } }, ".multi-select-tag-overflow": { "@layer components": { display: "inline-flex", alignItems: "center", padding: "0.125rem 0.5rem", fontSize: "0.75rem", lineHeight: "1.25rem", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", borderRadius: "var(--radius-lg)" } }, ".multi-select-input": { "@layer components": { flex: 1, minWidth: "4rem", padding: "0.125rem 0", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", outline: "none" } }, ".multi-select-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".multi-select-arrow": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", marginLeft: "auto", color: "var(--color-on-surface-variant)", flexShrink: 0, transition: "transform 150ms ease-in-out" } }, ".multi-select-open .multi-select-arrow": { "@layer components": { transform: "rotate(180deg)" } }, ".multi-select-clear-all": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", padding: "0", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", flexShrink: 0, transition: "background-color 150ms ease-in-out" } }, ".multi-select-clear-all:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".multi-select-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", right: "0", zIndex: 50, display: "none", maxHeight: "16rem", marginTop: "0.25rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", overflow: "hidden" } }, ".multi-select-open .multi-select-dropdown": { "@layer components": { display: "flex", flexDirection: "column" } }, ".multi-select-dropdown[popover]": { "@layer components": { inset: "unset", margin: "0", padding: "0", border: "1px solid var(--color-outline-variant)" } }, ".multi-select-dropdown[popover]:popover-open": { "@layer components": { display: "flex", flexDirection: "column" } }, ".multi-select-search": { "@layer components": { padding: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".multi-select-search-input": { "@layer components": { width: "100%", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-xs)", outline: "none" } }, ".multi-select-search-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".multi-select-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".multi-select-options": { "@layer components": { flex: 1, overflowY: "auto", padding: "0.25rem" } }, ".multi-select-option": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", width: "100%", padding: "0.625rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".multi-select-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".multi-select-option-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".multi-select-option-selected:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".multi-select-option-disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".multi-select-option-disabled:hover": { "@layer components": { backgroundColor: "transparent" } }, ".multi-select-option-focused": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".multi-select-option-checkbox": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", backgroundColor: "transparent", border: "2px solid var(--color-on-surface-variant)", borderRadius: "var(--radius-xs)", flexShrink: 0 } }, ".multi-select-option-selected .multi-select-option-checkbox": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".multi-select-option-selected .multi-select-option-checkbox svg": { "@layer components": { color: "var(--color-primary-content)" } }, ".multi-select-option-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".multi-select-option-text": { "@layer components": { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".multi-select-option-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".multi-select-group": { "@layer components": { padding: "0.25rem 0" } }, ".multi-select-group-header": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.75rem", fontWeight: 600, color: "var(--color-on-surface-variant)", textTransform: "uppercase", letterSpacing: "0.05em" } }, ".multi-select-empty": { "@layer components": { padding: "1.5rem", textAlign: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".multi-select-actions": { "@layer components": { display: "flex", gap: "0.5rem", padding: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".multi-select-action": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".multi-select-action:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".multi-select-counter": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: "1.25rem", height: "1.25rem", padding: "0 0.375rem", fontSize: "0.625rem", fontWeight: 600, color: "var(--color-primary-content)", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-sm)" } }, ".multi-select-sm .multi-select-trigger": { "@layer components": { minHeight: "2.25rem", padding: "0.375rem 0.5rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".multi-select-sm .multi-select-tag": { "@layer components": { fontSize: "0.625rem", padding: "0 0.25rem 0 0.375rem" } }, ".multi-select-lg .multi-select-trigger": { "@layer components": { minHeight: "3.25rem", padding: "0.625rem 1rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".multi-select-outlined .multi-select-trigger": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)" } }, ".multi-select-filled .multi-select-trigger": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".multi-select-filled .multi-select-trigger:focus-within": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".multi-select-primary .multi-select-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".multi-select-primary .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".multi-select-secondary .multi-select-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".multi-select-secondary .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".multi-select-tertiary .multi-select-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".multi-select-tertiary .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".multi-select-info .multi-select-trigger": { "@layer components": { color: "var(--color-info)" } }, ".multi-select-info .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".multi-select-success .multi-select-trigger": { "@layer components": { color: "var(--color-success)" } }, ".multi-select-success .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".multi-select-warning .multi-select-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".multi-select-warning .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".multi-select-error .multi-select-trigger": { "@layer components": { color: "var(--color-error)" } }, ".multi-select-error .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".multi-select-accent .multi-select-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".multi-select-accent .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".multi-select-neutral .multi-select-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".multi-select-neutral .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".multi-select-base .multi-select-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".multi-select-base .multi-select-trigger:focus-within": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".multi-select-ghost .multi-select-trigger": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".multi-select-ghost .multi-select-trigger:focus-within": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".multi-select-disabled .multi-select-trigger": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".multi-select-disabled .multi-select-tag-remove": { "@layer components": { pointerEvents: "none" } }, ".multi-select-loading .multi-select-trigger": { "@layer components": { cursor: "wait" } }, ".multi-select-spinner": [{ "@layer components": { display: "inline-block", width: "1rem", height: "1rem", border: "2px solid var(--color-outline)", borderTopColor: "var(--color-primary)", borderRadius: "var(--radius-full)", animation: "multi-select-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes multi-select-spin": { to: { transform: "rotate(360deg)" } }, ".multi-select-trigger, \n .multi-select-arrow, \n .multi-select-tag-remove, \n .multi-select-clear-all, \n .multi-select-option": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".otp-input": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem" } }, ".otp-input-field": [{ "@layer components": { width: "3rem", height: "3.5rem", padding: "0", fontSize: "1.5rem", fontWeight: 600, textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "2px solid currentColor", borderRadius: "var(--radius-sm)", outline: "none", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out", caretColor: "var(--color-primary)" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".otp-input-field::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.5 } }, ".otp-input-field:hover:not(:disabled):not(:focus)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".otp-input-field:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed", backgroundColor: "var(--color-surface-container)" } }, ".otp-input-field-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "var(--color-primary)" } }, ".otp-separator": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "0.25rem", backgroundColor: "var(--color-outline)", borderRadius: "var(--radius-xs)" } }, ".otp-input-sm .otp-input-field": { "@layer components": { width: "2.5rem", height: "3rem", fontSize: "1.25rem", borderRadius: "var(--radius-xs)" } }, ".otp-input-lg .otp-input-field": { "@layer components": { width: "3.5rem", height: "4rem", fontSize: "1.75rem", borderRadius: "var(--radius-sm)" } }, ".otp-input-compact": { "@layer components": { gap: "0.25rem" } }, ".otp-input-wide": { "@layer components": { gap: "1rem" } }, ".otp-input-filled .otp-input-field": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".otp-input-filled .otp-input-field:focus": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".otp-input-outlined .otp-input-field": { "@layer components": { backgroundColor: "transparent" } }, ".otp-input-underline .otp-input-field": { "@layer components": { backgroundColor: "transparent", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "0" } }, ".otp-input-underline .otp-input-field:focus": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".otp-input-primary .otp-input-field": { "@layer components": { color: "var(--color-primary)" } }, ".otp-input-primary .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".otp-input-secondary .otp-input-field": { "@layer components": { color: "var(--color-secondary)" } }, ".otp-input-secondary .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".otp-input-tertiary .otp-input-field": { "@layer components": { color: "var(--color-tertiary)" } }, ".otp-input-tertiary .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".otp-input-info .otp-input-field": { "@layer components": { color: "var(--color-info)" } }, ".otp-input-info .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".otp-input-success .otp-input-field": { "@layer components": { color: "var(--color-success)" } }, ".otp-input-success .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".otp-input-warning .otp-input-field": { "@layer components": { color: "var(--color-warning)" } }, ".otp-input-warning .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".otp-input-error .otp-input-field": { "@layer components": { color: "var(--color-error)" } }, ".otp-input-error .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".otp-input-accent .otp-input-field": { "@layer components": { color: "var(--color-accent)" } }, ".otp-input-accent .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".otp-input-neutral .otp-input-field": { "@layer components": { color: "var(--color-neutral)" } }, ".otp-input-neutral .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".otp-input-base .otp-input-field": { "@layer components": { color: "var(--color-base-content)" } }, ".otp-input-base .otp-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".otp-input-ghost .otp-input-field": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".otp-input-ghost .otp-input-field:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".otp-input-masked .otp-input-field": { "@layer components": { WebkitTextSecurity: "disc", fontFamily: "text-security-disc" } }, ".otp-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".otp-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".otp-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".otp-error-message": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".pin-input": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem" } }, ".pin-input-field": [{ "@layer components": { width: "3rem", height: "3.5rem", padding: "0", fontSize: "1.5rem", fontWeight: 600, textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "2px solid currentColor", borderRadius: "var(--radius-sm)", outline: "none", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out", caretColor: "var(--color-primary)", WebkitTextSecurity: "disc" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".pin-input-field::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.3 } }, ".pin-input-field:hover:not(:disabled):not(:focus)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".pin-input-field:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed", backgroundColor: "var(--color-surface-container)" } }, ".pin-input-visible .pin-input-field": { "@layer components": { WebkitTextSecurity: "none" } }, ".pin-input-sm .pin-input-field": { "@layer components": { width: "2.5rem", height: "3rem", fontSize: "1.25rem", borderRadius: "var(--radius-xs)" } }, ".pin-input-lg .pin-input-field": { "@layer components": { width: "3.5rem", height: "4rem", fontSize: "1.75rem", borderRadius: "var(--radius-sm)" } }, ".pin-input-compact": { "@layer components": { gap: "0.25rem" } }, ".pin-input-filled .pin-input-field": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".pin-input-filled .pin-input-field:focus": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".pin-input-circle .pin-input-field": { "@layer components": { width: "3rem", height: "3rem", borderRadius: "var(--radius-full)" } }, ".pin-input-circle.pin-input-sm .pin-input-field": { "@layer components": { width: "2.5rem", height: "2.5rem" } }, ".pin-input-circle.pin-input-lg .pin-input-field": { "@layer components": { width: "3.5rem", height: "3.5rem" } }, ".pin-input-dots .pin-input-field": { "@layer components": { fontSize: "2rem", letterSpacing: "-0.25rem" } }, ".pin-input-primary .pin-input-field": { "@layer components": { color: "var(--color-primary)" } }, ".pin-input-primary .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".pin-input-secondary .pin-input-field": { "@layer components": { color: "var(--color-secondary)" } }, ".pin-input-secondary .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".pin-input-tertiary .pin-input-field": { "@layer components": { color: "var(--color-tertiary)" } }, ".pin-input-tertiary .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".pin-input-info .pin-input-field": { "@layer components": { color: "var(--color-info)" } }, ".pin-input-info .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".pin-input-success .pin-input-field": { "@layer components": { color: "var(--color-success)" } }, ".pin-input-success .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".pin-input-warning .pin-input-field": { "@layer components": { color: "var(--color-warning)" } }, ".pin-input-warning .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".pin-input-error .pin-input-field": [{ "@layer components": { color: "var(--color-error)", animation: "pin-shake 300ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], ".pin-input-error .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".pin-input-accent .pin-input-field": { "@layer components": { color: "var(--color-accent)" } }, ".pin-input-accent .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".pin-input-neutral .pin-input-field": { "@layer components": { color: "var(--color-neutral)" } }, ".pin-input-neutral .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".pin-input-base .pin-input-field": { "@layer components": { color: "var(--color-base-content)" } }, ".pin-input-base .pin-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, "@keyframes pin-shake": { "0%, 100%": { transform: "translateX(0)" }, "20%, 60%": { transform: "translateX(-4px)" }, "40%, 80%": { transform: "translateX(4px)" } }, ".pin-input-ghost .pin-input-field": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".pin-input-ghost .pin-input-field:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".pin-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".pin-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".pin-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".pin-error-message": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".radio::before": { "@layer components": { content: '""', width: "0.5em", height: "0.5em", borderRadius: "var(--radius-full)", backgroundColor: "var(--radio-color)", transform: "scale(0)", transition: "transform 150ms ease-in-out" } }, ".radio:checked::before": { "@layer components": { transform: "scale(1)" } }, ".radio:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "var(--color-on-surface)" } }, ".radio:checked:hover:not(:disabled)": { "@layer components": { borderColor: "color-mix(in oklch, var(--radio-color), black 10%)" } }, ".radio:checked:hover:not(:disabled)::before": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--radio-color), black 10%)" } }, ".radio-xs": { "@layer components": { "--radio-size": "0.875rem" } }, ".radio-sm": { "@layer components": { "--radio-size": "1rem" } }, ".radio-md": { "@layer components": { "--radio-size": "1.25rem" } }, ".radio-lg": { "@layer components": { "--radio-size": "1.5rem" } }, ".radio-xl": { "@layer components": { "--radio-size": "1.75rem" } }, ".radio-primary": { "@layer components": { "--radio-color": "var(--color-primary)" } }, ".radio-secondary": { "@layer components": { "--radio-color": "var(--color-secondary)" } }, ".radio-tertiary": { "@layer components": { "--radio-color": "var(--color-tertiary)" } }, ".radio-success": { "@layer components": { "--radio-color": "var(--color-success)" } }, ".radio-warning": { "@layer components": { "--radio-color": "var(--color-warning)" } }, ".radio-error": { "@layer components": { "--radio-color": "var(--color-error)" } }, ".radio-info": { "@layer components": { "--radio-color": "var(--color-info)" } }, ".radio-accent": { "@layer components": { "--radio-color": "var(--color-accent)" } }, ".radio-neutral": { "@layer components": { "--radio-color": "var(--color-neutral)" } }, ".radio-base": { "@layer components": { "--radio-color": "var(--color-base-content)" } }, ".radio-ghost": { "@layer components": { "--radio-border-color": "transparent" } }, ".radio-ghost:hover:not(:disabled):not(:checked)": { "@layer components": { borderColor: "transparent" } }, ".radio-label": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".radio-label:has(.radio:disabled)": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".radio-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".radio-group-horizontal": { "@layer components": { flexDirection: "row", flexWrap: "wrap", gap: "1.5rem" } }, ".radio-group-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", marginBottom: "0.5rem" } }, ".radio, \n .radio::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".rating": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.125rem", color: "var(--color-on-surface)" } }, ".rating-item": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-outline)", cursor: "pointer", transition: "color 150ms ease-in-out, transform 150ms ease-in-out" } }, ".rating-item:hover": { "@layer components": { transform: "scale(1.1)" } }, ".rating-item.active": { "@layer components": { color: "var(--color-warning-container)" } }, ".rating-item.filled": { "@layer components": { color: "var(--color-warning)" } }, ".rating-input": { "@layer components": { position: "absolute", width: "0", height: "0", opacity: 0, overflow: "hidden" } }, ".rating-icon": { "@layer components": { width: "1.5rem", height: "1.5rem", fontSize: "1.5rem", lineHeight: 1 } }, ".rating-half": { "@layer components": { position: "relative", overflow: "hidden" } }, ".rating-half .rating-icon-empty": { "@layer components": { color: "var(--color-outline)" } }, ".rating-half .rating-icon-filled": { "@layer components": { position: "absolute", left: "0", top: "0", width: "50%", overflow: "hidden", color: "var(--color-warning)" } }, ".rating-xs .rating-icon": { "@layer components": { width: "0.875rem", height: "0.875rem", fontSize: "0.875rem" } }, ".rating-sm .rating-icon": { "@layer components": { width: "1.25rem", height: "1.25rem", fontSize: "1.25rem" } }, ".rating-lg .rating-icon": { "@layer components": { width: "2rem", height: "2rem", fontSize: "2rem" } }, ".rating-xl .rating-icon": { "@layer components": { width: "2.5rem", height: "2.5rem", fontSize: "2.5rem" } }, ".rating-primary .rating-item.filled": { "@layer components": { color: "var(--color-primary)" } }, ".rating-secondary .rating-item.filled": { "@layer components": { color: "var(--color-secondary)" } }, ".rating-error .rating-item.filled": { "@layer components": { color: "var(--color-error)" } }, ".rating-success .rating-item.filled": { "@layer components": { color: "var(--color-success)" } }, ".rating-tertiary .rating-item.filled": { "@layer components": { color: "var(--color-tertiary)" } }, ".rating-info .rating-item.filled": { "@layer components": { color: "var(--color-info)" } }, ".rating-warning .rating-item.filled": { "@layer components": { color: "var(--color-warning)" } }, ".rating-accent .rating-item.filled": { "@layer components": { color: "var(--color-accent)" } }, ".rating-neutral .rating-item.filled": { "@layer components": { color: "var(--color-neutral)" } }, ".rating-base .rating-item.filled": { "@layer components": { color: "var(--color-base-content)" } }, ".rating-readonly .rating-item": { "@layer components": { cursor: "default" } }, ".rating-readonly .rating-item:hover": { "@layer components": { transform: "none" } }, ".rating-disabled": { "@layer components": { opacity: 0.6, pointerEvents: "none" } }, ".rating-labeled": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".rating-label": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".rating-count": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginLeft: "0.25rem" } }, ".rating:not(.rating-readonly) .rating-item:hover ~ .rating-item": { "@layer components": { color: "var(--color-outline)" } }, ".rating:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-warning)" } }, ".rating-primary:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-primary)" } }, ".rating-secondary:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-secondary)" } }, ".rating-tertiary:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-tertiary)" } }, ".rating-info:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-info)" } }, ".rating-success:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-success)" } }, ".rating-error:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-error)" } }, ".rating-accent:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-accent)" } }, ".rating-neutral:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-neutral)" } }, ".rating-base:not(.rating-readonly):hover .rating-item": { "@layer components": { color: "var(--color-base-content)" } }, ".rating-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent)", borderRadius: "var(--radius-xs)" } }, ".rating-primary .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent)" } }, ".rating-secondary .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 20%, transparent)" } }, ".rating-tertiary .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 20%, transparent)" } }, ".rating-info .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 20%, transparent)" } }, ".rating-success .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 20%, transparent)" } }, ".rating-error .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent)" } }, ".rating-warning .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent)" } }, ".rating-accent .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 20%, transparent)" } }, ".rating-neutral .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 20%, transparent)" } }, ".rating-base .rating-item:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 20%, transparent)" } }, ".rating-display": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem" } }, ".rating-display-value": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".rating-display-stars": { "@layer components": { display: "flex", gap: "0.0625rem", color: "var(--color-warning)" } }, ".rating-display-max": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".rating-compact": { "@layer components": { gap: "0" } }, ".rating-compact .rating-item": { "@layer components": { padding: "0.125rem" } }, ".rating-animated .rating-item": { "@layer components": { transition: "color 150ms ease-in-out, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)" } }, ".rating-animated .rating-item.filled": [{ "@layer components": { animation: "rating-pop 300ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes rating-pop": { "0%": { transform: "scale(1)" }, "50%": { transform: "scale(1.3)" }, "100%": { transform: "scale(1)" } }, ".rating-item, \n .rating-animated .rating-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "color 0ms" } } }, ".segment-control": { "@layer components": { display: "inline-flex", alignItems: "stretch", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-xl)", padding: "0.25rem", gap: "0.25rem" } }, ".segment-item": [{ "@layer components": { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "0.5rem 1rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-lg)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", userSelect: "none", whiteSpace: "nowrap" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".segment-item:hover:not(:disabled):not(.segment-item-active)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".segment-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".segment-item:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed" } }, ".segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".segment-item-active:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".segment-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.125rem", height: "1.125rem" } }, ".segment-control-sm": { "@layer components": { padding: "0.125rem", gap: "0.125rem", borderRadius: "var(--radius-lg)" } }, ".segment-control-sm .segment-item": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-md)" } }, ".segment-control-lg": { "@layer components": { padding: "0.375rem", gap: "0.375rem", borderRadius: "var(--radius-2xl)" } }, ".segment-control-lg .segment-item": { "@layer components": { padding: "0.75rem 1.5rem", fontSize: "1rem", lineHeight: "1.5rem", borderRadius: "var(--radius-xl)" } }, ".segment-control-primary .segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".segment-control-secondary .segment-item-active": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".segment-control-tertiary .segment-item-active": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".segment-control-info .segment-item-active": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".segment-control-success .segment-item-active": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".segment-control-warning .segment-item-active": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".segment-control-error .segment-item-active": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".segment-control-accent .segment-item-active": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".segment-control-neutral .segment-item-active": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".segment-control-base .segment-item-active": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".segment-control-full": { "@layer components": { display: "flex", width: "100%" } }, ".segment-control-full .segment-item": { "@layer components": { flex: 1 } }, ".segment-control-outlined": { "@layer components": { backgroundColor: "transparent", padding: "0", gap: "0" } }, ".segment-control-outlined .segment-item": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "0", marginLeft: "-1px" } }, ".segment-control-outlined .segment-item:first-child": { "@layer components": { marginLeft: "0", borderTopLeftRadius: "1.25rem", borderBottomLeftRadius: "1.25rem" } }, ".segment-control-outlined .segment-item:last-child": { "@layer components": { borderTopRightRadius: "1.25rem", borderBottomRightRadius: "1.25rem" } }, ".segment-control-outlined .segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary)", zIndex: 1 } }, ".segment-control-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".segment-control-icon-only .segment-item": { "@layer components": { padding: "0.625rem" } }, ".segment-control-icon-only.segment-control-sm .segment-item": { "@layer components": { padding: "0.5rem" } }, ".segment-control-icon-only.segment-control-lg .segment-item": { "@layer components": { padding: "0.75rem" } }, ".segment-control-multi .segment-item-active": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".select:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".select-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".select-filled:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)", borderBottomColor: "var(--color-on-surface)" } }, ".select-filled:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".select-filled.select-primary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)" } }, ".select-filled.select-secondary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-secondary)" } }, ".select-filled.select-tertiary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-tertiary)" } }, ".select-filled.select-info:focus-visible": { "@layer components": { borderBottomColor: "var(--color-info)" } }, ".select-filled.select-success:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".select-filled.select-warning:focus-visible": { "@layer components": { borderBottomColor: "var(--color-warning)" } }, ".select-filled.select-error:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".select-filled.select-accent:focus-visible": { "@layer components": { borderBottomColor: "var(--color-accent)" } }, ".select-filled.select-neutral:focus-visible": { "@layer components": { borderBottomColor: "var(--color-neutral)" } }, ".select-filled.select-base:focus-visible": { "@layer components": { borderBottomColor: "var(--color-base-content)" } }, ".select-outlined": { "@layer components": { backgroundColor: "transparent", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".select-primary": { "@layer components": { color: "var(--color-primary)" } }, ".select-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".select-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".select-info": { "@layer components": { color: "var(--color-info)" } }, ".select-success": { "@layer components": { color: "var(--color-success)" } }, ".select-warning": { "@layer components": { color: "var(--color-warning)" } }, ".select-error": { "@layer components": { color: "var(--color-error)" } }, ".select-accent": { "@layer components": { color: "var(--color-accent)" } }, ".select-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".select-base": { "@layer components": { color: "var(--color-base-content)" } }, ".select-container": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%" } }, ".select-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".select-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".select-container-error .select-helper": { "@layer components": { color: "var(--color-error)" } }, ".select-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem" } }, ".select-multiple": { "@layer components": { padding: "0.5rem", height: "auto", minHeight: "6rem", backgroundImage: "none" } }, ".select-multiple option": { "@layer components": { padding: "0.5rem 0.75rem", borderRadius: "var(--radius-xs)" } }, ".select-multiple option:checked": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".select-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".select-ghost:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent" } }, ".select-ghost:focus-visible": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".slider": { "@layer components": { position: "relative", display: "flex", alignItems: "center", width: "100%", height: "2.5rem", touchAction: "none", userSelect: "none", color: "var(--color-on-surface)" } }, ".slider-track": { "@layer components": { position: "relative", width: "100%", height: "0.25rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-full)" } }, ".slider-track-filled": { "@layer components": { position: "absolute", top: "0", left: "0", height: "100%", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)" } }, ".slider-thumb": { "@layer components": { position: "absolute", top: "50%", width: "1.25rem", height: "1.25rem", backgroundColor: "var(--color-primary)", border: "none", borderRadius: "var(--radius-full)", boxShadow: "0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)", transform: "translate(-50%, -50%)", cursor: "grab", transition: "box-shadow 150ms ease-in-out, transform 150ms ease-in-out" } }, ".slider-thumb:hover": { "@layer components": { boxShadow: "0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-thumb:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-thumb:active": { "@layer components": { cursor: "grabbing", transform: "translate(-50%, -50%) scale(1.1)" } }, ".slider-thumb-label": { "@layer components": { position: "absolute", bottom: "100%", left: "50%", transform: "translateX(-50%)", padding: "0.25rem 0.5rem", marginBottom: "0.5rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary-content)", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-xs)", whiteSpace: "nowrap", opacity: 0, visibility: "hidden", transition: "opacity 150ms ease-out, visibility 150ms ease-out" } }, ".slider-thumb-label::after": { "@layer components": { content: "''", position: "absolute", top: "100%", left: "50%", transform: "translateX(-50%)", border: "0.25rem solid transparent", borderTopColor: "var(--color-primary)" } }, ".slider-thumb:hover .slider-thumb-label, \n .slider-thumb:focus-visible .slider-thumb-label, \n .slider-thumb:active .slider-thumb-label": { "@layer components": { opacity: 1, visibility: "visible" } }, ".slider-labels-always .slider-thumb-label": { "@layer components": { opacity: 1, visibility: "visible" } }, ".slider-marks": { "@layer components": { position: "absolute", top: "50%", left: "0", right: "0", display: "flex", justifyContent: "space-between", transform: "translateY(-50%)", pointerEvents: "none" } }, ".slider-mark": { "@layer components": { position: "relative", width: "0.125rem", height: "0.5rem", backgroundColor: "var(--color-outline)", borderRadius: "var(--radius-full)" } }, ".slider-mark-active": { "@layer components": { backgroundColor: "var(--color-primary-content)" } }, ".slider-mark-label": { "@layer components": { position: "absolute", top: "1rem", left: "50%", transform: "translateX(-50%)", fontSize: "0.75rem", color: "var(--color-on-surface-variant)", whiteSpace: "nowrap" } }, ".slider-labels": { "@layer components": { display: "flex", justifyContent: "space-between", marginTop: "0.25rem", fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".slider-sm": { "@layer components": { height: "2rem" } }, ".slider-sm .slider-track": { "@layer components": { height: "0.125rem" } }, ".slider-sm .slider-thumb": { "@layer components": { width: "1rem", height: "1rem" } }, ".slider-lg": { "@layer components": { height: "3rem" } }, ".slider-lg .slider-track": { "@layer components": { height: "0.375rem" } }, ".slider-lg .slider-thumb": { "@layer components": { width: "1.5rem", height: "1.5rem" } }, ".slider-primary .slider-track-filled, \n .slider-primary .slider-thumb": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".slider-primary .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-primary-content)" } }, ".slider-primary .slider-thumb:hover, \n .slider-primary .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-primary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-primary .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".slider-primary .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-primary)" } }, ".slider-secondary .slider-track-filled, \n .slider-secondary .slider-thumb": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".slider-secondary .slider-thumb:hover, \n .slider-secondary .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-secondary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-secondary .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-secondary-content)" } }, ".slider-secondary .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".slider-secondary .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-secondary)" } }, ".slider-tertiary .slider-track-filled, \n .slider-tertiary .slider-thumb": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".slider-tertiary .slider-thumb:hover, \n .slider-tertiary .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-tertiary-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-tertiary .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-tertiary-content)" } }, ".slider-tertiary .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".slider-tertiary .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-tertiary)" } }, ".slider-info .slider-track-filled, \n .slider-info .slider-thumb": { "@layer components": { backgroundColor: "var(--color-info)" } }, ".slider-info .slider-thumb:hover, \n .slider-info .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-info-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-info .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-info-content)" } }, ".slider-info .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".slider-info .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-info)" } }, ".slider-success .slider-track-filled, \n .slider-success .slider-thumb": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".slider-success .slider-thumb:hover, \n .slider-success .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-success-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-success .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-success-content)" } }, ".slider-success .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".slider-success .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-success)" } }, ".slider-warning .slider-track-filled, \n .slider-warning .slider-thumb": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".slider-warning .slider-thumb:hover, \n .slider-warning .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-warning-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-warning .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-warning-content)" } }, ".slider-warning .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".slider-warning .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-warning)" } }, ".slider-error .slider-track-filled, \n .slider-error .slider-thumb": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".slider-error .slider-thumb:hover, \n .slider-error .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-error-container), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-error .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-error-content)" } }, ".slider-error .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".slider-error .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-error)" } }, ".slider-accent .slider-track-filled, \n .slider-accent .slider-thumb": { "@layer components": { backgroundColor: "var(--color-accent)" } }, ".slider-accent .slider-thumb:hover, \n .slider-accent .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px color-mix(in oklch, var(--color-accent) 15%, var(--color-surface)), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-accent .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-accent-content)" } }, ".slider-accent .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".slider-accent .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-accent)" } }, ".slider-neutral .slider-track-filled, \n .slider-neutral .slider-thumb": { "@layer components": { backgroundColor: "var(--color-neutral)" } }, ".slider-neutral .slider-thumb:hover, \n .slider-neutral .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface)), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-neutral .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-neutral-content)" } }, ".slider-neutral .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".slider-neutral .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-neutral)" } }, ".slider-base .slider-track-filled, \n .slider-base .slider-thumb": { "@layer components": { backgroundColor: "var(--color-base-100)" } }, ".slider-base .slider-thumb:hover, \n .slider-base .slider-thumb:focus-visible": { "@layer components": { boxShadow: "0 0 0 8px var(--color-base-200), 0 2px 4px color-mix(in srgb, var(--color-shadow) 20%, transparent)" } }, ".slider-base .slider-mark-active": { "@layer components": { backgroundColor: "var(--color-base-content)" } }, ".slider-base .slider-thumb-label": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".slider-base .slider-thumb-label::after": { "@layer components": { borderTopColor: "var(--color-base-100)" } }, ".slider-disabled": { "@layer components": { opacity: 0.6, pointerEvents: "none" } }, ".slider-disabled .slider-thumb": { "@layer components": { cursor: "not-allowed" } }, ".slider-range .slider-track-filled": { "@layer components": { left: "var(--slider-start, 0%)", width: "var(--slider-range, 100%)" } }, ".slider-vertical": { "@layer components": { flexDirection: "column", width: "2.5rem", height: "12rem" } }, ".slider-vertical .slider-track": { "@layer components": { width: "0.25rem", height: "100%" } }, ".slider-vertical .slider-track-filled": { "@layer components": { width: "100%", height: "auto", bottom: "0", top: "auto" } }, ".slider-vertical .slider-thumb": { "@layer components": { left: "50%", top: "auto", transform: "translate(-50%, 50%)" } }, ".slider-vertical .slider-thumb-label": { "@layer components": { bottom: "auto", left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: "0.5rem", marginBottom: "0" } }, ".slider-vertical .slider-thumb-label::after": { "@layer components": { top: "50%", left: "auto", right: "100%", transform: "translateY(-50%)", borderTopColor: "transparent", borderRightColor: "var(--color-primary)" } }, ".slider-secondary.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-secondary)" } }, ".slider-tertiary.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-tertiary)" } }, ".slider-info.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-info)" } }, ".slider-success.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-success)" } }, ".slider-warning.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-warning)" } }, ".slider-error.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-error)" } }, ".slider-accent.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-accent)" } }, ".slider-neutral.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-neutral)" } }, ".slider-base.slider-vertical .slider-thumb-label::after": { "@layer components": { borderRightColor: "var(--color-base-100)" } }, ".slider-vertical .slider-marks": { "@layer components": { flexDirection: "column", top: "0", bottom: "0", left: "50%", right: "auto", transform: "translateX(-50%)" } }, ".slider-vertical .slider-mark-label": { "@layer components": { top: "50%", left: "1rem", transform: "translateY(-50%)" } }, ".slider-with-input": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem" } }, ".slider-with-input .slider": { "@layer components": { flex: 1 } }, ".slider-input": { "@layer components": { width: "4rem", padding: "0.5rem", fontSize: "0.875rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-xs)" } }, ".slider-input:focus": { "@layer components": { outline: "none", borderColor: "currentColor", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".slider-thumb, \n .slider-thumb-label": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".switch": { "@layer components": { "--switch-width": "3.25rem", "--switch-height": "2rem", color: "var(--color-on-surface)", "--switch-thumb-size": "1rem", "--switch-color": "var(--color-primary)", "--switch-content-color": "var(--color-primary-content)", "--switch-container-color": "var(--color-primary-container)", "--switch-track-color": "var(--color-surface-container-highest)", "--switch-border-color": "var(--color-outline)", "--switch-thumb-color": "var(--color-outline)", position: "relative", display: "inline-grid", gridTemplateColumns: "0fr 1fr 1fr", alignItems: "center", width: "var(--switch-width)", height: "var(--switch-height)", margin: "0", padding: "0.25rem", cursor: "pointer", appearance: "none", backgroundColor: "var(--switch-track-color)", border: "2px solid var(--switch-border-color)", borderRadius: "var(--switch-height)", transition: `background-color 200ms ease-in-out,
134
134
  border-color 200ms ease-in-out,
135
135
  grid-template-columns 200ms ease-in-out !important` } }, ".switch::before": { "@layer components": { content: '""', gridColumn: "2", width: "var(--switch-thumb-size)", height: "var(--switch-thumb-size)", backgroundColor: "var(--switch-thumb-color)", borderRadius: "var(--radius-full)", transition: `background-color 200ms ease-in-out,
136
136
  width 200ms ease-in-out,
@@ -149,10 +149,14 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
149
149
  transparent,
150
150
  rgba(255, 255, 255, 0.3),
151
151
  transparent
152
- )`, animation: "skeleton-wave 1.5s infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes skeleton-wave": { "100%": { transform: "translateX(100%)" } }, ".skeleton-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".skeleton-card-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".skeleton-card-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem" } }, ".skeleton-card-body": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".skeleton-table": { "@layer components": { width: "100%" } }, ".skeleton-table-row": { "@layer components": { display: "flex", gap: "1rem", padding: "0.75rem 0", borderBottom: "1px solid var(--color-outline-variant)" } }, ".skeleton-table-cell": { "@layer components": { flex: 1, height: "1rem", borderRadius: "var(--radius-xs)" } }, ".skeleton-list": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".skeleton-list-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.5rem 0" } }, ".snackbar-container": [{ "@layer components": { position: "fixed", zIndex: 1100, display: "flex", flexDirection: "column", gap: "0.5rem", padding: "1rem", pointerEvents: "none" } }, { "@layer components": { "@media (max-width: 640px)": { left: "0", right: "0", transform: "none" } } }], ".snackbar-container-bottom": { "@layer components": { bottom: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".snackbar-container-bottom-left": { "@layer components": { bottom: "0", left: "0", alignItems: "flex-start" } }, ".snackbar-container-bottom-right": { "@layer components": { bottom: "0", right: "0", alignItems: "flex-end" } }, ".snackbar-container-top": { "@layer components": { top: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".snackbar-container-top-left": { "@layer components": { top: "0", left: "0", alignItems: "flex-start" } }, ".snackbar-container-top-right": { "@layer components": { top: "0", right: "0", alignItems: "flex-end" } }, ".snackbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", minWidth: "20rem", maxWidth: "40rem", padding: "0.875rem 1rem", backgroundColor: "var(--color-surface-container-highest)", color: "var(--color-on-surface)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", pointerEvents: "auto", opacity: 0, transform: "translateY(100%)", transition: "opacity 200ms ease-out, transform 200ms ease-out" } }, { "@layer components": { "@media (max-width: 640px)": { minWidth: "calc(100vw - 2rem)", maxWidth: "calc(100vw - 2rem)" } } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "opacity 0ms, transform 0ms" } } }], ".snackbar-container-top .snackbar, \n .snackbar-container-top-left .snackbar, \n .snackbar-container-top-right .snackbar": { "@layer components": { transform: "translateY(-100%)" } }, ".snackbar.snackbar-open, \n .snackbar.snackbar-show, \n .snackbar.show": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".snackbar.snackbar-bottom": { "@layer components": { position: "fixed", bottom: "1rem", left: "50%", transform: "translateX(-50%) translateY(100%)", zIndex: 1100 } }, ".snackbar.snackbar-bottom.snackbar-show": { "@layer components": { transform: "translateX(-50%) translateY(0)" } }, ".snackbar.snackbar-bottom-left": { "@layer components": { position: "fixed", bottom: "1rem", left: "1rem", zIndex: 1100 } }, ".snackbar.snackbar-bottom-right": { "@layer components": { position: "fixed", bottom: "1rem", right: "1rem", zIndex: 1100 } }, ".snackbar.snackbar-top": { "@layer components": { position: "fixed", top: "1rem", left: "50%", transform: "translateX(-50%) translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top.snackbar-show": { "@layer components": { transform: "translateX(-50%) translateY(0)" } }, ".snackbar.snackbar-top-left": { "@layer components": { position: "fixed", top: "1rem", left: "1rem", transform: "translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top-left.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar.snackbar-top-right": { "@layer components": { position: "fixed", top: "1rem", right: "1rem", transform: "translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top-right.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar.snackbar-bottom-left.snackbar-show, \n .snackbar.snackbar-bottom-right.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar-message": { "@layer components": { flex: 1, fontSize: "0.875rem", lineHeight: "1.25rem" } }, ".snackbar-action": { "@layer components": { display: "inline-flex", alignItems: "center", padding: "0.375rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out", whiteSpace: "nowrap", flexShrink: 0 } }, ".snackbar-action:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".snackbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".snackbar-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".snackbar-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".snackbar-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".snackbar-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".snackbar-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".snackbar-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".snackbar-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".snackbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".snackbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".snackbar-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".snackbar-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".snackbar-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".snackbar-dark": { "@layer components": { backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)" } }, ".snackbar-dark .snackbar-action": { "@layer components": { color: "var(--color-primary-container)" } }, ".snackbar-dark .snackbar-close": { "@layer components": { color: "var(--color-surface)" } }, ".snackbar-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: "1.25rem" } }, ".snackbar-multiline": { "@layer components": { flexWrap: "wrap", minHeight: "4rem" } }, ".snackbar-multiline .snackbar-message": { "@layer components": { width: "100%", marginBottom: "0.5rem" } }, ".snackbar-multiline .snackbar-action": { "@layer components": { marginLeft: "auto" } }, ".snackbar-container-bottom, \n .snackbar-container-top": { "@layer components": { "@media (max-width: 640px)": { alignItems: "stretch" } } }, ".toast-container": { "@layer components": { position: "fixed", zIndex: 1200, display: "flex", flexDirection: "column", gap: "0.5rem", padding: "1rem", pointerEvents: "none" } }, ".toast-container-top-right": { "@layer components": { top: "0", right: "0", alignItems: "flex-end" } }, ".toast-container-top-left": { "@layer components": { top: "0", left: "0", alignItems: "flex-start" } }, ".toast-container-top-center": { "@layer components": { top: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".toast-container-bottom-right": { "@layer components": { bottom: "0", right: "0", alignItems: "flex-end" } }, ".toast-container-bottom-left": { "@layer components": { bottom: "0", left: "0", alignItems: "flex-start" } }, ".toast-container-bottom-center": { "@layer components": { bottom: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".toast": [{ "@layer components": { display: "flex", alignItems: "flex-start", gap: "0.75rem", width: "22rem", maxWidth: "calc(100vw - 2rem)", padding: "1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", pointerEvents: "auto", opacity: 0, transform: "translateX(100%)", transition: "opacity 300ms ease-out, transform 300ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "opacity 0ms", transform: "none" } } }], ".toast-container-top-left .toast, \n .toast-container-bottom-left .toast": { "@layer components": { transform: "translateX(-100%)" } }, ".toast-container-top-center .toast, \n .toast-container-bottom-center .toast": { "@layer components": { transform: "translateY(-20px)" } }, ".toast.toast-open, \n .toast.show, \n .toast-show": { "@layer components": { opacity: 1, transform: "translateX(0) translateY(0)" } }, ".toast-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", flexShrink: 0 } }, ".toast-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".toast-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem", color: "var(--color-on-surface)" } }, ".toast-message": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".toast-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", flexShrink: 0, marginLeft: "auto" } }, ".toast-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".toast-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toast-actions": { "@layer components": { display: "flex", gap: "0.5rem", marginTop: "0.5rem" } }, ".toast-info": { "@layer components": { borderColor: "var(--color-info)" } }, ".toast-info .toast-icon": { "@layer components": { color: "var(--color-info)" } }, ".toast-success": { "@layer components": { borderColor: "var(--color-success)" } }, ".toast-success .toast-icon": { "@layer components": { color: "var(--color-success)" } }, ".toast-warning": { "@layer components": { borderColor: "var(--color-warning)" } }, ".toast-warning .toast-icon": { "@layer components": { color: "var(--color-warning)" } }, ".toast-error": { "@layer components": { borderColor: "var(--color-error)" } }, ".toast-error .toast-icon": { "@layer components": { color: "var(--color-error)" } }, ".toast-primary": { "@layer components": { borderColor: "var(--color-primary)" } }, ".toast-primary .toast-icon": { "@layer components": { color: "var(--color-primary)" } }, ".toast-secondary": { "@layer components": { borderColor: "var(--color-secondary)" } }, ".toast-secondary .toast-icon": { "@layer components": { color: "var(--color-secondary)" } }, ".toast-tertiary": { "@layer components": { borderColor: "var(--color-tertiary)" } }, ".toast-tertiary .toast-icon": { "@layer components": { color: "var(--color-tertiary)" } }, ".toast-accent": { "@layer components": { borderColor: "var(--color-accent)" } }, ".toast-accent .toast-icon": { "@layer components": { color: "var(--color-accent)" } }, ".toast-neutral": { "@layer components": { borderColor: "var(--color-neutral)" } }, ".toast-neutral .toast-icon": { "@layer components": { color: "var(--color-neutral)" } }, ".toast-base": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".toast-base .toast-icon": { "@layer components": { color: "var(--color-base-content)" } }, ".toast-filled.toast-info": { "@layer components": { backgroundColor: "var(--color-info-container)", borderColor: "transparent", color: "var(--color-on-info-container)" } }, ".toast-filled.toast-success": { "@layer components": { backgroundColor: "var(--color-success-container)", borderColor: "transparent", color: "var(--color-on-success-container)" } }, ".toast-filled.toast-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", borderColor: "transparent", color: "var(--color-on-warning-container)" } }, ".toast-filled.toast-error": { "@layer components": { backgroundColor: "var(--color-error-container)", borderColor: "transparent", color: "var(--color-on-error-container)" } }, ".toast-filled.toast-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "transparent", color: "var(--color-on-primary-container)" } }, ".toast-filled.toast-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", borderColor: "transparent", color: "var(--color-on-secondary-container)" } }, ".toast-filled.toast-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", borderColor: "transparent", color: "var(--color-on-tertiary-container)" } }, ".toast-filled.toast-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", borderColor: "transparent", color: "var(--color-on-surface)" } }, ".toast-filled.toast-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", borderColor: "transparent", color: "var(--color-on-surface)" } }, ".toast-filled.toast-base": { "@layer components": { backgroundColor: "var(--color-base-200)", borderColor: "transparent", color: "var(--color-base-content)" } }, ".toast-filled .toast-title, \n .toast-filled .toast-message": { "@layer components": { color: "inherit" } }, ".toast-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".toast-ghost.toast-primary": { "@layer components": { color: "var(--color-primary)" } }, ".toast-ghost.toast-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".toast-ghost.toast-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".toast-ghost.toast-info": { "@layer components": { color: "var(--color-info)" } }, ".toast-ghost.toast-success": { "@layer components": { color: "var(--color-success)" } }, ".toast-ghost.toast-warning": { "@layer components": { color: "var(--color-warning)" } }, ".toast-ghost.toast-error": { "@layer components": { color: "var(--color-error)" } }, ".toast-ghost.toast-accent": { "@layer components": { color: "var(--color-accent)" } }, ".toast-ghost.toast-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".toast-ghost.toast-base": { "@layer components": { color: "var(--color-base-content)" } }, ".toast-ghost .toast-title, \n .toast-ghost .toast-message": { "@layer components": { color: "inherit" } }, ".toast-progress": [{ "@layer components": { position: "absolute", bottom: "0", left: "0", height: "3px", backgroundColor: "currentColor", borderRadius: "0 0 var(--radius-md) var(--radius-md)", animation: "toast-progress linear forwards" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes toast-progress": { from: { width: "100%" }, to: { width: "0%" } }, ".tooltip[popover]": [{ "@layer components": { "--tooltip-bg": "var(--color-on-surface)", "--tooltip-fg": "var(--color-surface)", position: "absolute", inset: "auto", zIndex: 1000, margin: "0.5rem", padding: "0.375rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", whiteSpace: "nowrap", backgroundColor: "var(--tooltip-bg)", color: "var(--tooltip-fg)", border: "none", borderRadius: "var(--radius-xs)", boxShadow: "var(--shadow-md)", pointerEvents: "none", opacity: 0, transform: "scale(0.95)", positionArea: "top", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", transition: `opacity 150ms ease-out,
152
+ )`, animation: "skeleton-wave 1.5s infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes skeleton-wave": { "100%": { transform: "translateX(100%)" } }, ".skeleton-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".skeleton-card-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".skeleton-card-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem" } }, ".skeleton-card-body": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".skeleton-table": { "@layer components": { width: "100%" } }, ".skeleton-table-row": { "@layer components": { display: "flex", gap: "1rem", padding: "0.75rem 0", borderBottom: "1px solid var(--color-outline-variant)" } }, ".skeleton-table-cell": { "@layer components": { flex: 1, height: "1rem", borderRadius: "var(--radius-xs)" } }, ".skeleton-list": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".skeleton-list-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.5rem 0" } }, ".snackbar-container": [{ "@layer components": { position: "fixed", zIndex: 1100, display: "flex", flexDirection: "column", gap: "0.5rem", padding: "1rem", pointerEvents: "none" } }, { "@layer components": { "@media (max-width: 640px)": { left: "0", right: "0", transform: "none" } } }], ".snackbar-container-bottom": { "@layer components": { bottom: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".snackbar-container-bottom-left": { "@layer components": { bottom: "0", left: "0", alignItems: "flex-start" } }, ".snackbar-container-bottom-right": { "@layer components": { bottom: "0", right: "0", alignItems: "flex-end" } }, ".snackbar-container-top": { "@layer components": { top: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".snackbar-container-top-left": { "@layer components": { top: "0", left: "0", alignItems: "flex-start" } }, ".snackbar-container-top-right": { "@layer components": { top: "0", right: "0", alignItems: "flex-end" } }, ".snackbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", minWidth: "20rem", maxWidth: "40rem", padding: "0.875rem 1rem", backgroundColor: "var(--color-surface-container-highest)", color: "var(--color-on-surface)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", pointerEvents: "auto", opacity: 0, transform: "translateY(100%)", transition: "opacity 200ms ease-out, transform 200ms ease-out" } }, { "@layer components": { "@media (max-width: 640px)": { minWidth: "calc(100vw - 2rem)", maxWidth: "calc(100vw - 2rem)" } } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "opacity 0ms, transform 0ms" } } }], ".snackbar-container-top .snackbar, \n .snackbar-container-top-left .snackbar, \n .snackbar-container-top-right .snackbar": { "@layer components": { transform: "translateY(-100%)" } }, ".snackbar.snackbar-open, \n .snackbar.snackbar-show, \n .snackbar.show": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".snackbar.snackbar-bottom": { "@layer components": { position: "fixed", bottom: "1rem", left: "50%", transform: "translateX(-50%) translateY(100%)", zIndex: 1100 } }, ".snackbar.snackbar-bottom.snackbar-show": { "@layer components": { transform: "translateX(-50%) translateY(0)" } }, ".snackbar.snackbar-bottom-left": { "@layer components": { position: "fixed", bottom: "1rem", left: "1rem", zIndex: 1100 } }, ".snackbar.snackbar-bottom-right": { "@layer components": { position: "fixed", bottom: "1rem", right: "1rem", zIndex: 1100 } }, ".snackbar.snackbar-top": { "@layer components": { position: "fixed", top: "1rem", left: "50%", transform: "translateX(-50%) translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top.snackbar-show": { "@layer components": { transform: "translateX(-50%) translateY(0)" } }, ".snackbar.snackbar-top-left": { "@layer components": { position: "fixed", top: "1rem", left: "1rem", transform: "translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top-left.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar.snackbar-top-right": { "@layer components": { position: "fixed", top: "1rem", right: "1rem", transform: "translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top-right.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar.snackbar-bottom-left.snackbar-show, \n .snackbar.snackbar-bottom-right.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar-message": { "@layer components": { flex: 1, fontSize: "0.875rem", lineHeight: "1.25rem" } }, ".snackbar-action": { "@layer components": { display: "inline-flex", alignItems: "center", padding: "0.375rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out", whiteSpace: "nowrap", flexShrink: 0 } }, ".snackbar-action:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".snackbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".snackbar-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".snackbar-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".snackbar-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".snackbar-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".snackbar-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".snackbar-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".snackbar-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".snackbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".snackbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".snackbar-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".snackbar-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".snackbar-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".snackbar-dark": { "@layer components": { backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)" } }, ".snackbar-dark .snackbar-action": { "@layer components": { color: "var(--color-primary-container)" } }, ".snackbar-dark .snackbar-close": { "@layer components": { color: "var(--color-surface)" } }, ".snackbar-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: "1.25rem" } }, ".snackbar-multiline": { "@layer components": { flexWrap: "wrap", minHeight: "4rem" } }, ".snackbar-multiline .snackbar-message": { "@layer components": { width: "100%", marginBottom: "0.5rem" } }, ".snackbar-multiline .snackbar-action": { "@layer components": { marginLeft: "auto" } }, ".snackbar-container-bottom, \n .snackbar-container-top": { "@layer components": { "@media (max-width: 640px)": { alignItems: "stretch" } } }, ".toast-container": { "@layer components": { position: "fixed", zIndex: 1200, display: "flex", flexDirection: "column", gap: "0.5rem", padding: "1rem", pointerEvents: "none" } }, ".toast-container-top-right": { "@layer components": { top: "0", right: "0", alignItems: "flex-end" } }, ".toast-container-top-left": { "@layer components": { top: "0", left: "0", alignItems: "flex-start" } }, ".toast-container-top-center": { "@layer components": { top: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".toast-container-bottom-right": { "@layer components": { bottom: "0", right: "0", alignItems: "flex-end" } }, ".toast-container-bottom-left": { "@layer components": { bottom: "0", left: "0", alignItems: "flex-start" } }, ".toast-container-bottom-center": { "@layer components": { bottom: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".toast": [{ "@layer components": { display: "flex", alignItems: "flex-start", gap: "0.75rem", width: "22rem", maxWidth: "calc(100vw - 2rem)", padding: "1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", pointerEvents: "auto", opacity: 0, transform: "translateX(100%)", transition: "opacity 300ms ease-out, transform 300ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "opacity 0ms", transform: "none" } } }], ".toast-container-top-left .toast, \n .toast-container-bottom-left .toast": { "@layer components": { transform: "translateX(-100%)" } }, ".toast-container-top-center .toast, \n .toast-container-bottom-center .toast": { "@layer components": { transform: "translateY(-20px)" } }, ".toast.toast-open, \n .toast.show, \n .toast-show": { "@layer components": { opacity: 1, transform: "translateX(0) translateY(0)" } }, ".toast-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", flexShrink: 0 } }, ".toast-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".toast-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem", color: "var(--color-on-surface)" } }, ".toast-message": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".toast-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", flexShrink: 0, marginLeft: "auto" } }, ".toast-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".toast-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toast-actions": { "@layer components": { display: "flex", gap: "0.5rem", marginTop: "0.5rem" } }, ".toast-info": { "@layer components": { borderColor: "var(--color-info)" } }, ".toast-info .toast-icon": { "@layer components": { color: "var(--color-info)" } }, ".toast-success": { "@layer components": { borderColor: "var(--color-success)" } }, ".toast-success .toast-icon": { "@layer components": { color: "var(--color-success)" } }, ".toast-warning": { "@layer components": { borderColor: "var(--color-warning)" } }, ".toast-warning .toast-icon": { "@layer components": { color: "var(--color-warning)" } }, ".toast-error": { "@layer components": { borderColor: "var(--color-error)" } }, ".toast-error .toast-icon": { "@layer components": { color: "var(--color-error)" } }, ".toast-primary": { "@layer components": { borderColor: "var(--color-primary)" } }, ".toast-primary .toast-icon": { "@layer components": { color: "var(--color-primary)" } }, ".toast-secondary": { "@layer components": { borderColor: "var(--color-secondary)" } }, ".toast-secondary .toast-icon": { "@layer components": { color: "var(--color-secondary)" } }, ".toast-tertiary": { "@layer components": { borderColor: "var(--color-tertiary)" } }, ".toast-tertiary .toast-icon": { "@layer components": { color: "var(--color-tertiary)" } }, ".toast-accent": { "@layer components": { borderColor: "var(--color-accent)" } }, ".toast-accent .toast-icon": { "@layer components": { color: "var(--color-accent)" } }, ".toast-neutral": { "@layer components": { borderColor: "var(--color-neutral)" } }, ".toast-neutral .toast-icon": { "@layer components": { color: "var(--color-neutral)" } }, ".toast-base": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".toast-base .toast-icon": { "@layer components": { color: "var(--color-base-content)" } }, ".toast-filled.toast-info": { "@layer components": { backgroundColor: "var(--color-info-container)", borderColor: "transparent", color: "var(--color-on-info-container)" } }, ".toast-filled.toast-success": { "@layer components": { backgroundColor: "var(--color-success-container)", borderColor: "transparent", color: "var(--color-on-success-container)" } }, ".toast-filled.toast-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", borderColor: "transparent", color: "var(--color-on-warning-container)" } }, ".toast-filled.toast-error": { "@layer components": { backgroundColor: "var(--color-error-container)", borderColor: "transparent", color: "var(--color-on-error-container)" } }, ".toast-filled.toast-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "transparent", color: "var(--color-on-primary-container)" } }, ".toast-filled.toast-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", borderColor: "transparent", color: "var(--color-on-secondary-container)" } }, ".toast-filled.toast-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", borderColor: "transparent", color: "var(--color-on-tertiary-container)" } }, ".toast-filled.toast-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", borderColor: "transparent", color: "var(--color-on-surface)" } }, ".toast-filled.toast-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", borderColor: "transparent", color: "var(--color-on-surface)" } }, ".toast-filled.toast-base": { "@layer components": { backgroundColor: "var(--color-base-200)", borderColor: "transparent", color: "var(--color-base-content)" } }, ".toast-filled .toast-title, \n .toast-filled .toast-message": { "@layer components": { color: "inherit" } }, ".toast-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".toast-ghost.toast-primary": { "@layer components": { color: "var(--color-primary)" } }, ".toast-ghost.toast-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".toast-ghost.toast-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".toast-ghost.toast-info": { "@layer components": { color: "var(--color-info)" } }, ".toast-ghost.toast-success": { "@layer components": { color: "var(--color-success)" } }, ".toast-ghost.toast-warning": { "@layer components": { color: "var(--color-warning)" } }, ".toast-ghost.toast-error": { "@layer components": { color: "var(--color-error)" } }, ".toast-ghost.toast-accent": { "@layer components": { color: "var(--color-accent)" } }, ".toast-ghost.toast-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".toast-ghost.toast-base": { "@layer components": { color: "var(--color-base-content)" } }, ".toast-ghost .toast-title, \n .toast-ghost .toast-message": { "@layer components": { color: "inherit" } }, ".toast-progress": [{ "@layer components": { position: "absolute", bottom: "0", left: "0", height: "3px", backgroundColor: "currentColor", borderRadius: "0 0 var(--radius-md) var(--radius-md)", animation: "toast-progress linear forwards" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes toast-progress": { from: { width: "100%" }, to: { width: "0%" } }, ".tooltip[popover]": [{ "@layer components": { "--tooltip-bg": "var(--color-on-surface)", "--tooltip-fg": "var(--color-surface)", position: "absolute", inset: "auto", zIndex: 1000, margin: "0.5rem", padding: "0.375rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", whiteSpace: "nowrap", backgroundColor: "var(--tooltip-bg)", color: "var(--tooltip-fg)", border: "none", borderRadius: "var(--radius-xs)", boxShadow: "var(--shadow-md)", pointerEvents: "none", opacity: 0, transform: "scale(0.95)", overflow: "visible", positionArea: "top", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", transition: `opacity 150ms ease-out,
153
153
  transform 150ms ease-out,
154
154
  overlay 150ms ease-out allow-discrete,
155
- display 150ms ease-out allow-discrete` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".tooltip[popover]:popover-open": [{ "@layer components": { opacity: 1, transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".tooltip-top[popover]": { "@layer components": { positionArea: "top" } }, ".tooltip-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".tooltip-left[popover]": { "@layer components": { positionArea: "left" } }, ".tooltip-right[popover]": { "@layer components": { positionArea: "right" } }, ".tooltip[popover]::before": { "@layer components": { content: "''", position: "absolute", width: "0", height: "0", border: "0.375rem solid transparent" } }, ".tooltip-top[popover]::before, \n .tooltip[popover]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before": { "@layer components": { top: "100%", left: "50%", transform: "translateX(-50%)", borderTopColor: "var(--tooltip-bg)" } }, ".tooltip-bottom[popover]::before": { "@layer components": { bottom: "100%", top: "auto", left: "50%", transform: "translateX(-50%)", borderBottomColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-left[popover]::before": { "@layer components": { left: "100%", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderLeftColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-right[popover]::before": { "@layer components": { right: "100%", left: "auto", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderRightColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-light[popover]": { "@layer components": { "--tooltip-bg": "var(--color-surface)", "--tooltip-fg": "var(--color-on-surface)", border: "1px solid var(--color-outline)" } }, ".tooltip-primary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-primary)", "--tooltip-fg": "var(--color-primary-content)" } }, ".tooltip-secondary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-secondary)", "--tooltip-fg": "var(--color-secondary-content)" } }, ".tooltip-tertiary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-tertiary)", "--tooltip-fg": "var(--color-tertiary-content)" } }, ".tooltip-info[popover]": { "@layer components": { "--tooltip-bg": "var(--color-info)", "--tooltip-fg": "var(--color-info-content)" } }, ".tooltip-success[popover]": { "@layer components": { "--tooltip-bg": "var(--color-success)", "--tooltip-fg": "var(--color-success-content)" } }, ".tooltip-warning[popover]": { "@layer components": { "--tooltip-bg": "var(--color-warning)", "--tooltip-fg": "var(--color-warning-content)" } }, ".tooltip-error[popover]": { "@layer components": { "--tooltip-bg": "var(--color-error)", "--tooltip-fg": "var(--color-error-content)" } }, ".tooltip-accent[popover]": { "@layer components": { "--tooltip-bg": "var(--color-accent)", "--tooltip-fg": "var(--color-accent-content)" } }, ".tooltip-neutral[popover]": { "@layer components": { "--tooltip-bg": "var(--color-neutral)", "--tooltip-fg": "var(--color-neutral-content)" } }, ".tooltip-base[popover]": { "@layer components": { "--tooltip-bg": "var(--color-base-100)", "--tooltip-fg": "var(--color-base-content)" } }, ".tooltip-multiline[popover]": { "@layer components": { whiteSpace: "normal", maxWidth: "16rem", textAlign: "center" } }, ".tooltip-rich[popover]": { "@layer components": { padding: "0.75rem 1rem", maxWidth: "20rem", whiteSpace: "normal", textAlign: "left" } }, ".tooltip-rich-title": { "@layer components": { fontSize: "0.8125rem", fontWeight: 600, marginBottom: "0.25rem" } }, ".tooltip-rich-description": { "@layer components": { fontSize: "0.75rem", fontWeight: 400, opacity: 0.9 } }, ".tooltip-delay": { "@layer components": { interestDelay: "300ms" } }, ".tooltip-delay-long": { "@layer components": { interestDelay: "500ms" } }, ".tooltip-interactive[popover]": { "@layer components": { pointerEvents: "auto" } }, ".appbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", minHeight: "4rem", padding: "0 1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-sm)" } }, { "@layer components": { "@media (max-width: 640px)": { padding: "0 0.5rem" } } }], ".appbar-static": { "@layer components": { position: "static" } }, ".appbar-fixed": { "@layer components": { position: "fixed", top: "0", left: "0", right: "0", zIndex: 1000 } }, ".appbar-sticky": { "@layer components": { position: "sticky", top: "0", zIndex: 1000 } }, ".appbar-top": { "@layer components": { top: "0" } }, ".appbar-bottom": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", top: "auto", zIndex: 1000 } }, ".appbar-elevated": { "@layer components": { boxShadow: "var(--shadow-sm)" } }, ".appbar-flat": { "@layer components": { boxShadow: "none" } }, ".appbar-bordered": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)", boxShadow: "none" } }, ".appbar-transparent": { "@layer components": { backgroundColor: "transparent", boxShadow: "none" } }, ".appbar-blur": { "@layer components": { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } }, ".appbar-nav": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-nav:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-nav:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-title": [{ "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, { "@layer components": { "@media (max-width: 640px)": { fontSize: "1rem" } } }], ".appbar-subtitle": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-title-group": { "@layer components": { flex: 1, minWidth: "0" } }, ".appbar-title-group .appbar-title": { "@layer components": { fontSize: "1rem", lineHeight: "1.25rem" } }, ".appbar-actions": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-action": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".appbar-action:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".appbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-brand": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", flexShrink: 0 } }, ".appbar-logo": { "@layer components": { height: "2rem", width: "auto" } }, ".appbar-sm": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-sm .appbar-title": { "@layer components": { fontSize: "1rem" } }, ".appbar-lg": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-lg .appbar-title": { "@layer components": { fontSize: "1.5rem" } }, ".appbar-compact": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-compact .appbar-title, \n .appbar-compact .appbar-heading": { "@layer components": { fontSize: "1rem", lineHeight: "1.5rem" } }, ".appbar-compact .appbar-nav, \n .appbar-compact .appbar-action, \n .appbar-compact .appbar-back": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-comfortable": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-comfortable .appbar-title, \n .appbar-comfortable .appbar-heading": { "@layer components": { fontSize: "1.5rem", lineHeight: "2rem" } }, ".appbar-leading": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-trailing": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexGrow: 1, justifyContent: "flex-end", marginLeft: "auto" } }, ".appbar-heading": { "@layer components": { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", margin: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-back": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-back:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar .appbar-search, \n input.appbar-search": { "@layer components": { flex: 1, maxWidth: "32rem", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar .appbar-search:focus, \n input.appbar-search:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar .appbar-search::placeholder, \n input.appbar-search::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav, \n .appbar-primary .appbar-action, \n .appbar-primary .appbar-back": { "@layer components": { color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav:hover, \n .appbar-primary .appbar-action:hover, \n .appbar-primary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".appbar-primary .appbar-subtitle": { "@layer components": { color: "var(--color-primary-content)", opacity: 0.8 } }, ".appbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav, \n .appbar-secondary .appbar-action, \n .appbar-secondary .appbar-back": { "@layer components": { color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav:hover, \n .appbar-secondary .appbar-action:hover, \n .appbar-secondary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".appbar-secondary .appbar-subtitle": { "@layer components": { color: "var(--color-secondary-content)", opacity: 0.8 } }, ".appbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav, \n .appbar-tertiary .appbar-action, \n .appbar-tertiary .appbar-back": { "@layer components": { color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav:hover, \n .appbar-tertiary .appbar-action:hover, \n .appbar-tertiary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".appbar-tertiary .appbar-subtitle": { "@layer components": { color: "var(--color-tertiary-content)", opacity: 0.8 } }, ".appbar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav, \n .appbar-accent .appbar-action, \n .appbar-accent .appbar-back": { "@layer components": { color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav:hover, \n .appbar-accent .appbar-action:hover, \n .appbar-accent .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-accent)" } }, ".appbar-accent .appbar-subtitle": { "@layer components": { color: "var(--color-accent-content)", opacity: 0.8 } }, ".appbar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav, \n .appbar-neutral .appbar-action, \n .appbar-neutral .appbar-back": { "@layer components": { color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav:hover, \n .appbar-neutral .appbar-action:hover, \n .appbar-neutral .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-neutral)" } }, ".appbar-neutral .appbar-subtitle": { "@layer components": { color: "var(--color-neutral-content)", opacity: 0.8 } }, ".appbar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav, \n .appbar-base .appbar-action, \n .appbar-base .appbar-back": { "@layer components": { color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav:hover, \n .appbar-base .appbar-action:hover, \n .appbar-base .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-subtitle": { "@layer components": { color: "var(--color-base-content)", opacity: 0.8 } }, ".appbar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav, \n .appbar-info .appbar-action, \n .appbar-info .appbar-back": { "@layer components": { color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav:hover, \n .appbar-info .appbar-action:hover, \n .appbar-info .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".appbar-info .appbar-subtitle": { "@layer components": { color: "var(--color-info-content)", opacity: 0.8 } }, ".appbar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav, \n .appbar-success .appbar-action, \n .appbar-success .appbar-back": { "@layer components": { color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav:hover, \n .appbar-success .appbar-action:hover, \n .appbar-success .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".appbar-success .appbar-subtitle": { "@layer components": { color: "var(--color-success-content)", opacity: 0.8 } }, ".appbar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav, \n .appbar-warning .appbar-action, \n .appbar-warning .appbar-back": { "@layer components": { color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav:hover, \n .appbar-warning .appbar-action:hover, \n .appbar-warning .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".appbar-warning .appbar-subtitle": { "@layer components": { color: "var(--color-warning-content)", opacity: 0.8 } }, ".appbar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav, \n .appbar-error .appbar-action, \n .appbar-error .appbar-back": { "@layer components": { color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav:hover, \n .appbar-error .appbar-action:hover, \n .appbar-error .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".appbar-error .appbar-subtitle": { "@layer components": { color: "var(--color-error-content)", opacity: 0.8 } }, ".appbar-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".appbar-surface-container": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-surface-container-low": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".appbar-surface-container-high": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-surface-container-highest": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)" } }, ".appbar-center": { "@layer components": { justifyContent: "space-between" } }, ".appbar-center .appbar-title": { "@layer components": { position: "absolute", left: "50%", transform: "translateX(-50%)", flex: "none" } }, ".appbar-dense": { "@layer components": { minHeight: "3rem", padding: "0 0.5rem" } }, ".appbar-dense .appbar-nav, \n .appbar-dense .appbar-action": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-prominent": { "@layer components": { flexDirection: "column", alignItems: "flex-start", minHeight: "8rem", padding: "1rem" } }, ".appbar-prominent .appbar-row": { "@layer components": { display: "flex", alignItems: "center", width: "100%", gap: "0.5rem" } }, ".appbar-prominent .appbar-title": { "@layer components": { fontSize: "2rem", fontWeight: 400, marginTop: "auto", paddingBottom: "0.5rem" } }, ".appbar-search": [{ "@layer components": { flex: 1, maxWidth: "32rem", margin: "0 1rem" } }, { "@layer components": { "@media (max-width: 640px)": { margin: "0 0.5rem" } } }], ".appbar-search-input": { "@layer components": { width: "100%", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar-search-input:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-nav, \n .appbar-action, \n .appbar-search-input": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".divider": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider::before, \n .divider::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-vertical": { "@layer components": { flexDirection: "column", width: "auto", margin: "0 1rem", alignSelf: "stretch" } }, ".divider-vertical::before, \n .divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-thin::before, \n .divider-thin::after": { "@layer components": { height: "1px" } }, ".divider-thin.divider-vertical::before, \n .divider-thin.divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-medium::before, \n .divider-medium::after": { "@layer components": { height: "2px" } }, ".divider-medium.divider-vertical::before, \n .divider-medium.divider-vertical::after": { "@layer components": { width: "2px", height: "unset" } }, ".divider-thick::before, \n .divider-thick::after": { "@layer components": { height: "4px" } }, ".divider-thick.divider-vertical::before, \n .divider-thick.divider-vertical::after": { "@layer components": { width: "4px", height: "unset" } }, ".divider-dashed::before, \n .divider-dashed::after": { "@layer components": { backgroundColor: "transparent", backgroundImage: `linear-gradient(
155
+ display 150ms ease-out allow-discrete` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".tooltip[popover]:popover-open": [{ "@layer components": { opacity: 1, transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".tooltip-top[popover]": { "@layer components": { positionArea: "top" } }, ".tooltip-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".tooltip-left[popover]": { "@layer components": { positionArea: "left" } }, ".tooltip-right[popover]": { "@layer components": { positionArea: "right" } }, ".tooltip[popover]::before": { "@layer components": { content: "''", position: "absolute", width: "0", height: "0", border: "0.375rem solid transparent" } }, ".tooltip-top[popover]::before, \n .tooltip[popover]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before": { "@layer components": { top: "100%", left: "50%", transform: "translateX(-50%)", borderTopColor: "var(--tooltip-bg)" } }, ".tooltip-bottom[popover]::before": { "@layer components": { bottom: "100%", top: "auto", left: "50%", transform: "translateX(-50%)", borderBottomColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-left[popover]::before": { "@layer components": { left: "100%", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderLeftColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-right[popover]::before": { "@layer components": { right: "100%", left: "auto", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderRightColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-light[popover]": { "@layer components": { "--tooltip-bg": "var(--color-surface)", "--tooltip-fg": "var(--color-on-surface)", border: "1px solid var(--color-outline)" } }, ".tooltip-primary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-primary)", "--tooltip-fg": "var(--color-primary-content)" } }, ".tooltip-secondary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-secondary)", "--tooltip-fg": "var(--color-secondary-content)" } }, ".tooltip-tertiary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-tertiary)", "--tooltip-fg": "var(--color-tertiary-content)" } }, ".tooltip-info[popover]": { "@layer components": { "--tooltip-bg": "var(--color-info)", "--tooltip-fg": "var(--color-info-content)" } }, ".tooltip-success[popover]": { "@layer components": { "--tooltip-bg": "var(--color-success)", "--tooltip-fg": "var(--color-success-content)" } }, ".tooltip-warning[popover]": { "@layer components": { "--tooltip-bg": "var(--color-warning)", "--tooltip-fg": "var(--color-warning-content)" } }, ".tooltip-error[popover]": { "@layer components": { "--tooltip-bg": "var(--color-error)", "--tooltip-fg": "var(--color-error-content)" } }, ".tooltip-accent[popover]": { "@layer components": { "--tooltip-bg": "var(--color-accent)", "--tooltip-fg": "var(--color-accent-content)" } }, ".tooltip-neutral[popover]": { "@layer components": { "--tooltip-bg": "var(--color-neutral)", "--tooltip-fg": "var(--color-neutral-content)" } }, ".tooltip-base[popover]": { "@layer components": { "--tooltip-bg": "var(--color-base-100)", "--tooltip-fg": "var(--color-base-content)" } }, ".tooltip-multiline[popover]": { "@layer components": { whiteSpace: "normal", maxWidth: "16rem", textAlign: "center" } }, ".tooltip-rich[popover]": { "@layer components": { padding: "0.75rem 1rem", maxWidth: "20rem", whiteSpace: "normal", textAlign: "left" } }, ".tooltip-rich-title": { "@layer components": { fontSize: "0.8125rem", fontWeight: 600, marginBottom: "0.25rem" } }, ".tooltip-rich-description": { "@layer components": { fontSize: "0.75rem", fontWeight: 400, opacity: 0.9 } }, ".tooltip-delay": { "@layer components": { interestDelay: "300ms" } }, ".tooltip-delay-long": { "@layer components": { interestDelay: "500ms" } }, ".tooltip-interactive[popover]": { "@layer components": { pointerEvents: "auto" } }, ".appbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", minHeight: "4rem", padding: "0 1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-sm)" } }, { "@layer components": { "@media (max-width: 640px)": { padding: "0 0.5rem" } } }], ".appbar-static": { "@layer components": { position: "static" } }, ".appbar-fixed": { "@layer components": { position: "fixed", top: "0", left: "0", right: "0", zIndex: 1000 } }, ".appbar-sticky": { "@layer components": { position: "sticky", top: "0", zIndex: 1000 } }, ".appbar-top": { "@layer components": { top: "0" } }, ".appbar-bottom": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", top: "auto", zIndex: 1000 } }, ".appbar-elevated": { "@layer components": { boxShadow: "var(--shadow-sm)" } }, ".appbar-flat": { "@layer components": { boxShadow: "none" } }, ".appbar-bordered": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)", boxShadow: "none" } }, ".appbar-transparent": { "@layer components": { backgroundColor: "transparent", boxShadow: "none" } }, ".appbar-blur": { "@layer components": { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } }, ".appbar-nav": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-nav:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-nav:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-title": [{ "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, { "@layer components": { "@media (max-width: 640px)": { fontSize: "1rem" } } }], ".appbar-subtitle": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-title-group": { "@layer components": { flex: 1, minWidth: "0" } }, ".appbar-title-group .appbar-title": { "@layer components": { fontSize: "1rem", lineHeight: "1.25rem" } }, ".appbar-actions": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-action": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".appbar-action:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".appbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-brand": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", flexShrink: 0 } }, ".appbar-logo": { "@layer components": { height: "2rem", width: "auto" } }, ".appbar-sm": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-sm .appbar-title": { "@layer components": { fontSize: "1rem" } }, ".appbar-lg": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-lg .appbar-title": { "@layer components": { fontSize: "1.5rem" } }, ".appbar-compact": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-compact .appbar-title, \n .appbar-compact .appbar-heading": { "@layer components": { fontSize: "1rem", lineHeight: "1.5rem" } }, ".appbar-compact .appbar-nav, \n .appbar-compact .appbar-action, \n .appbar-compact .appbar-back": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-comfortable": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-comfortable .appbar-title, \n .appbar-comfortable .appbar-heading": { "@layer components": { fontSize: "1.5rem", lineHeight: "2rem" } }, ".appbar-leading": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-trailing": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexGrow: 1, justifyContent: "flex-end", marginLeft: "auto" } }, ".appbar-heading": { "@layer components": { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", margin: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-back": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-back:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar .appbar-search, \n input.appbar-search": { "@layer components": { flex: 1, maxWidth: "32rem", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar .appbar-search:focus, \n input.appbar-search:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar .appbar-search::placeholder, \n input.appbar-search::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav, \n .appbar-primary .appbar-action, \n .appbar-primary .appbar-back": { "@layer components": { color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav:hover, \n .appbar-primary .appbar-action:hover, \n .appbar-primary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".appbar-primary .appbar-subtitle": { "@layer components": { color: "var(--color-primary-content)", opacity: 0.8 } }, ".appbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav, \n .appbar-secondary .appbar-action, \n .appbar-secondary .appbar-back": { "@layer components": { color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav:hover, \n .appbar-secondary .appbar-action:hover, \n .appbar-secondary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".appbar-secondary .appbar-subtitle": { "@layer components": { color: "var(--color-secondary-content)", opacity: 0.8 } }, ".appbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav, \n .appbar-tertiary .appbar-action, \n .appbar-tertiary .appbar-back": { "@layer components": { color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav:hover, \n .appbar-tertiary .appbar-action:hover, \n .appbar-tertiary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".appbar-tertiary .appbar-subtitle": { "@layer components": { color: "var(--color-tertiary-content)", opacity: 0.8 } }, ".appbar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav, \n .appbar-accent .appbar-action, \n .appbar-accent .appbar-back": { "@layer components": { color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav:hover, \n .appbar-accent .appbar-action:hover, \n .appbar-accent .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-accent)" } }, ".appbar-accent .appbar-subtitle": { "@layer components": { color: "var(--color-accent-content)", opacity: 0.8 } }, ".appbar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav, \n .appbar-neutral .appbar-action, \n .appbar-neutral .appbar-back": { "@layer components": { color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav:hover, \n .appbar-neutral .appbar-action:hover, \n .appbar-neutral .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-neutral)" } }, ".appbar-neutral .appbar-subtitle": { "@layer components": { color: "var(--color-neutral-content)", opacity: 0.8 } }, ".appbar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav, \n .appbar-base .appbar-action, \n .appbar-base .appbar-back": { "@layer components": { color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav:hover, \n .appbar-base .appbar-action:hover, \n .appbar-base .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-subtitle": { "@layer components": { color: "var(--color-base-content)", opacity: 0.8 } }, ".appbar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav, \n .appbar-info .appbar-action, \n .appbar-info .appbar-back": { "@layer components": { color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav:hover, \n .appbar-info .appbar-action:hover, \n .appbar-info .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".appbar-info .appbar-subtitle": { "@layer components": { color: "var(--color-info-content)", opacity: 0.8 } }, ".appbar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav, \n .appbar-success .appbar-action, \n .appbar-success .appbar-back": { "@layer components": { color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav:hover, \n .appbar-success .appbar-action:hover, \n .appbar-success .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".appbar-success .appbar-subtitle": { "@layer components": { color: "var(--color-success-content)", opacity: 0.8 } }, ".appbar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav, \n .appbar-warning .appbar-action, \n .appbar-warning .appbar-back": { "@layer components": { color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav:hover, \n .appbar-warning .appbar-action:hover, \n .appbar-warning .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".appbar-warning .appbar-subtitle": { "@layer components": { color: "var(--color-warning-content)", opacity: 0.8 } }, ".appbar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav, \n .appbar-error .appbar-action, \n .appbar-error .appbar-back": { "@layer components": { color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav:hover, \n .appbar-error .appbar-action:hover, \n .appbar-error .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".appbar-error .appbar-subtitle": { "@layer components": { color: "var(--color-error-content)", opacity: 0.8 } }, ".appbar-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".appbar-surface-container": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-surface-container-low": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".appbar-surface-container-high": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-surface-container-highest": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)" } }, ".appbar-center": { "@layer components": { justifyContent: "space-between" } }, ".appbar-center .appbar-title": { "@layer components": { position: "absolute", left: "50%", transform: "translateX(-50%)", flex: "none" } }, ".appbar-dense": { "@layer components": { minHeight: "3rem", padding: "0 0.5rem" } }, ".appbar-dense .appbar-nav, \n .appbar-dense .appbar-action": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-prominent": { "@layer components": { flexDirection: "column", alignItems: "flex-start", minHeight: "8rem", padding: "1rem" } }, ".appbar-prominent .appbar-row": { "@layer components": { display: "flex", alignItems: "center", width: "100%", gap: "0.5rem" } }, ".appbar-prominent .appbar-title": { "@layer components": { fontSize: "2rem", fontWeight: 400, marginTop: "auto", paddingBottom: "0.5rem" } }, ".appbar-search": [{ "@layer components": { flex: 1, maxWidth: "32rem", margin: "0 1rem" } }, { "@layer components": { "@media (max-width: 640px)": { margin: "0 0.5rem" } } }], ".appbar-search-input": { "@layer components": { width: "100%", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar-search-input:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-nav, \n .appbar-action, \n .appbar-search-input": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".console-page": { "@layer components": { "--console-page-sidebar-width": "17.5rem", "--console-page-sidebar-compact-width": "5rem", containerType: "inline-size", containerName: "console-page", width: "100%", minWidth: "0", minHeight: "var(--console-page-min-height, 100dvh)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".console-page-frame": [{ "@layer components": { display: "grid", minHeight: "inherit", gridTemplateAreas: `"appbar"
156
+ "main"`, gridTemplateColumns: "minmax(0, 1fr)", gridTemplateRows: "auto minmax(0, 1fr)", transition: "grid-template-columns 240ms ease-out" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { gridTemplateAreas: `"appbar appbar"
157
+ "sidebar main"`, gridTemplateColumns: "var(--console-page-sidebar-width) minmax(0, 1fr)" } } }], ".console-page-appbar": { "@layer components": { gridArea: "appbar", zIndex: 20 } }, ".console-page-sidebar": [{ "@layer components": { display: "none", gridArea: "sidebar", minWidth: "0", overflow: "hidden", backgroundColor: "var(--color-surface-container-low)", borderInlineEnd: "1px solid var(--color-outline-variant)", transition: `opacity 160ms ease-out,
158
+ visibility 160ms ease-out` } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "flex", flexDirection: "column" } } }], ".console-page-sidebar-header, \n .console-page-sidebar-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", minHeight: "4rem", padding: "0.75rem 1rem", flexShrink: 0 } }, ".console-page-sidebar-header": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)" } }, ".console-page-sidebar-body": { "@layer components": { flex: 1, minHeight: "0", overflowY: "auto", overflowX: "hidden", paddingBlock: "0.5rem" } }, ".console-page-sidebar-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)" } }, ".console-page-main": { "@layer components": { gridArea: "main", minWidth: "0", overflow: "auto", padding: "clamp(1rem, 4cqi, 2.5rem)", backgroundColor: "var(--color-surface)" } }, ".console-page-nav-label": { "@layer components": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".console-page-sidebar-toggle": [{ "@layer components": { display: "none" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "inline-flex" } } }], ".console-page-menu-trigger": [{ "@layer components": { display: "inline-flex" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }], ".console-page-mobile-menu": [{ "@layer components": { maxWidth: "min(20rem, calc(100cqi - 2rem))" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }], ".console-page-sidebar-compact .console-page-frame": { "@layer components": { "@container console-page (min-width: 48rem)": { gridTemplateColumns: "var(--console-page-sidebar-compact-width) minmax(0, 1fr)" } } }, ".console-page-sidebar-compact .console-page-nav-label": { "@layer components": { "@container console-page (min-width: 48rem)": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } } }, ".console-page-sidebar-compact .console-page-sidebar-header, \n .console-page-sidebar-compact .console-page-sidebar-footer": { "@layer components": { "@container console-page (min-width: 48rem)": { justifyContent: "center", paddingInline: "0.75rem" } } }, ".console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu li > a, .nested-menu li > button, .nested-menu summary)": { "@layer components": { "@container console-page (min-width: 48rem)": { justifyContent: "center", paddingInline: "0.75rem" } } }, ".console-page-sidebar-compact .console-page-sidebar-body .drawer-item": { "@layer components": { "@container console-page (min-width: 48rem)": { justifyContent: "center", paddingInline: "0.75rem" } } }, ".console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu-title, details > ul, summary::after)": { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }, ".console-page-sidebar-hidden .console-page-frame": { "@layer components": { "@container console-page (min-width: 48rem)": { gridTemplateAreas: `"appbar"
159
+ "main"`, gridTemplateColumns: "minmax(0, 1fr)" } } }, ".console-page-sidebar-hidden .console-page-sidebar": { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }, ".console-page-frame, \n .console-page-sidebar": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".divider": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider::before, \n .divider::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-vertical": { "@layer components": { flexDirection: "column", width: "auto", margin: "0 1rem", alignSelf: "stretch" } }, ".divider-vertical::before, \n .divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-thin::before, \n .divider-thin::after": { "@layer components": { height: "1px" } }, ".divider-thin.divider-vertical::before, \n .divider-thin.divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-medium::before, \n .divider-medium::after": { "@layer components": { height: "2px" } }, ".divider-medium.divider-vertical::before, \n .divider-medium.divider-vertical::after": { "@layer components": { width: "2px", height: "unset" } }, ".divider-thick::before, \n .divider-thick::after": { "@layer components": { height: "4px" } }, ".divider-thick.divider-vertical::before, \n .divider-thick.divider-vertical::after": { "@layer components": { width: "4px", height: "unset" } }, ".divider-dashed::before, \n .divider-dashed::after": { "@layer components": { backgroundColor: "transparent", backgroundImage: `linear-gradient(
156
160
  to right,
157
161
  var(--color-outline-variant) 50%,
158
162
  transparent 50%
@@ -188,7 +192,7 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
188
192
  var(--color-outline-variant) 20%,
189
193
  var(--color-outline-variant) 80%,
190
194
  transparent
191
- )` } }, ".divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-compact": { "@layer components": { margin: "0.25rem 0" } }, ".divider-compact:not(:empty)": { "@layer components": { gap: "0.5rem" } }, ".divider-compact.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-comfortable": { "@layer components": { margin: "1.5rem 0" } }, ".divider-comfortable.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-spacious": { "@layer components": { margin: "2rem 0" } }, ".divider-spacious:not(:empty)": { "@layer components": { gap: "1.5rem" } }, ".divider-spacious.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-none": { "@layer components": { margin: "0" } }, ".divider-xs": { "@layer components": { margin: "0.25rem 0" } }, ".divider-xs.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-sm": { "@layer components": { margin: "0.5rem 0" } }, ".divider-sm.divider-vertical": { "@layer components": { margin: "0 0.5rem" } }, ".divider-lg": { "@layer components": { margin: "1.5rem 0" } }, ".divider-lg.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-xl": { "@layer components": { margin: "2rem 0" } }, ".divider-xl.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-inset": { "@layer components": { paddingLeft: "4rem" } }, ".divider-inset-right": { "@layer components": { paddingRight: "4rem" } }, ".divider-inset-both": { "@layer components": { paddingLeft: "4rem", paddingRight: "4rem" } }, ".divider-list": { "@layer components": { margin: "0", paddingLeft: "1rem" } }, ".divider-card": { "@layer components": { margin: "0", marginLeft: "-1rem", marginRight: "-1rem" } }, ".divider-text": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider-text:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider-text::before, \n .divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-text-left::before, \n .divider-text-left.divider-text::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-text-right::after, \n .divider-text-right.divider-text::after": { "@layer components": { flex: "0 0 2rem" } }, ".bottom-nav": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1000, display: "flex", alignItems: "stretch", justifyContent: "space-around", minHeight: "5rem", paddingBottom: "env(safe-area-inset-bottom, 0)", backgroundColor: "var(--color-surface)", boxShadow: "0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, minWidth: "4rem", maxWidth: "10rem", padding: "0.75rem 0.25rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "color 150ms ease-in-out", textDecoration: "none", gap: "0.25rem" } }, ".bottom-nav-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-item:focus-visible": { "@layer components": { outline: "none" } }, ".bottom-nav-item:focus-visible .bottom-nav-indicator": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottom-nav-item.active": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-indicator": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "4rem", height: "2rem", borderRadius: "var(--radius-lg)", transition: "background-color 150ms ease-in-out" } }, ".bottom-nav-item:hover .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".bottom-nav-icon": { "@layer components": { fontSize: "1.5rem", lineHeight: 1, transition: "font-size 150ms ease-in-out" } }, ".bottom-nav-label": { "@layer components": { fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } }, ".bottom-nav-item.active .bottom-nav-label": { "@layer components": { fontWeight: 600 } }, ".bottom-nav-badge": { "@layer components": { position: "absolute", top: "0", right: "0.5rem", minWidth: "1rem", height: "1rem", padding: "0 0.25rem", fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", color: "var(--color-error-content)", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", textAlign: "center" } }, ".bottom-nav-badge-dot": { "@layer components": { minWidth: "0.5rem", width: "0.5rem", height: "0.5rem", padding: "0", top: "0.125rem", right: "0.75rem" } }, ".bottom-nav-elevated": { "@layer components": { boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-bordered": { "@layer components": { boxShadow: "none", borderTop: "1px solid var(--color-outline-variant)" } }, ".bottom-nav-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-primary .bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".bottom-nav-primary .bottom-nav-item.active": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".bottom-nav-icons-only .bottom-nav-label": { "@layer components": { display: "none" } }, ".bottom-nav-icons-only .bottom-nav-item": { "@layer components": { padding: "1rem 0.25rem" } }, ".bottom-nav-labels-active .bottom-nav-label": { "@layer components": { opacity: 0, maxHeight: "0", overflow: "hidden", transition: "opacity 150ms ease-in-out, max-height 150ms ease-in-out" } }, ".bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, maxHeight: "1rem" } }, ".bottom-nav-shifting .bottom-nav-item": { "@layer components": { flex: "0 1 4rem", transition: "flex 200ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active": { "@layer components": { flex: "1 1 6rem" } }, ".bottom-nav-shifting .bottom-nav-label": { "@layer components": { opacity: 0, transform: "translateY(0.5rem)", transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".nav-rail": { "@layer components": { position: "fixed", left: "0", top: "0", bottom: "0", zIndex: 1000, display: "flex", flexDirection: "column", alignItems: "center", width: "5rem", padding: "1rem 0", backgroundColor: "var(--color-surface)", borderRight: "1px solid var(--color-outline-variant)" } }, ".nav-rail .bottom-nav-item": { "@layer components": { width: "100%", padding: "0.5rem", margin: "0.25rem 0" } }, ".nav-rail .bottom-nav-indicator": { "@layer components": { width: "3.5rem", height: "2rem" } }, ".bottom-nav-responsive": { "@layer components": { "@media (min-width: 768px)": { position: "relative", bottom: "auto", justifyContent: "flex-start", gap: "0.5rem", minHeight: "3rem", padding: "0 1rem", boxShadow: "none", borderBottom: "1px solid var(--color-outline-variant)" } } }, ".bottom-nav-responsive .bottom-nav-item": { "@layer components": { "@media (min-width: 768px)": { flex: "0 0 auto", flexDirection: "row", gap: "0.5rem", padding: "0.75rem 1rem" } } }, ".bottom-nav-responsive .bottom-nav-indicator": { "@layer components": { "@media (min-width: 768px)": { width: "auto", height: "auto", backgroundColor: "transparent !important" } } }, ".bottom-nav-responsive .bottom-nav-item.active": { "@layer components": { "@media (min-width: 768px)": { borderBottom: "2px solid var(--color-primary)" } } }, ".bottom-nav-item, \n .bottom-nav-indicator, \n .bottom-nav-icon, \n .bottom-nav-label, \n .bottom-nav-shifting .bottom-nav-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu": { "@layer components": { "--circle-menu-size": "3rem", "--circle-menu-item-size": "3rem", "--circle-menu-radius": "5.5rem", "--circle-menu-icon-size": "1.25rem", "--circle-menu-bar-width": "1.125rem", "--circle-menu-bar-height": "0.1875rem", "--circle-menu-bar-gap": "0.375rem", "--circle-menu-btn-bg": "var(--color-primary-container)", "--circle-menu-bar-color": "var(--color-on-primary-container)", "--circle-menu-item-bg": "var(--color-primary-container)", "--circle-menu-item-color": "var(--color-on-primary-container)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 30%, transparent)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)" } }, ".circle-menu-toggler": { "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", zIndex: 10, opacity: 0, cursor: "pointer" } }, ".circle-menu-label": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", display: "block", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-btn-bg)", zIndex: 1, pointerEvents: "none", transition: "background-color 0.3s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-label::before": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", boxShadow: `0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color),
195
+ )` } }, ".divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-compact": { "@layer components": { margin: "0.25rem 0" } }, ".divider-compact:not(:empty)": { "@layer components": { gap: "0.5rem" } }, ".divider-compact.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-comfortable": { "@layer components": { margin: "1.5rem 0" } }, ".divider-comfortable.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-spacious": { "@layer components": { margin: "2rem 0" } }, ".divider-spacious:not(:empty)": { "@layer components": { gap: "1.5rem" } }, ".divider-spacious.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-none": { "@layer components": { margin: "0" } }, ".divider-xs": { "@layer components": { margin: "0.25rem 0" } }, ".divider-xs.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-sm": { "@layer components": { margin: "0.5rem 0" } }, ".divider-sm.divider-vertical": { "@layer components": { margin: "0 0.5rem" } }, ".divider-lg": { "@layer components": { margin: "1.5rem 0" } }, ".divider-lg.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-xl": { "@layer components": { margin: "2rem 0" } }, ".divider-xl.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-inset": { "@layer components": { paddingLeft: "4rem" } }, ".divider-inset-right": { "@layer components": { paddingRight: "4rem" } }, ".divider-inset-both": { "@layer components": { paddingLeft: "4rem", paddingRight: "4rem" } }, ".divider-list": { "@layer components": { margin: "0", paddingLeft: "1rem" } }, ".divider-card": { "@layer components": { margin: "0", marginLeft: "-1rem", marginRight: "-1rem" } }, ".divider-text": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider-text:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider-text::before, \n .divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-text-left::before, \n .divider-text-left.divider-text::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-text-right::after, \n .divider-text-right.divider-text::after": { "@layer components": { flex: "0 0 2rem" } }, ".home-page": { "@layer components": { containerType: "inline-size", containerName: "home-page", width: "100%", minWidth: "0", minHeight: "var(--home-page-min-height, 100dvh)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".home-page-frame": { "@layer components": { display: "grid", minHeight: "inherit", gridTemplateRows: "auto minmax(0, 1fr) auto" } }, ".home-page-header": { "@layer components": { zIndex: 10 } }, ".home-page-nav": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-actions": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-menu-trigger": [{ "@layer components": { display: "inline-flex" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-mobile-menu": [{ "@layer components": { maxWidth: "min(20rem, calc(100cqi - 2rem))" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-main": { "@layer components": { minWidth: "0" } }, ".home-page-content": [{ "@layer components": { width: "min(100%, 80rem)", marginInline: "auto", padding: "clamp(1rem, 5cqi, 3rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { paddingInline: "clamp(2rem, 5cqi, 5rem)" } } }], ".home-page-hero": [{ "@layer components": { display: "grid", alignItems: "center", gridTemplateColumns: "minmax(0, 1fr)", gap: "clamp(2rem, 5cqi, 4rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { gridTemplateColumns: "minmax(0, 1fr) minmax(18rem, 0.8fr)" } } }], ".home-page-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)", backgroundColor: "var(--color-surface-container-low)" } }, ".sign-page": { "@layer components": { containerType: "inline-size", containerName: "sign-page", width: "100%", minWidth: "0", minHeight: "var(--sign-page-min-height, 100dvh)", overflow: "hidden", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".sign-page-frame": [{ "@layer components": { display: "grid", minHeight: "inherit", gridTemplateColumns: "minmax(0, 1fr)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { gridTemplateColumns: "minmax(20rem, 1.15fr) minmax(24rem, 0.85fr)" } } }], ".sign-page-aside": [{ "@layer components": { display: "none", position: "relative", isolation: "isolate", overflow: "hidden", padding: "clamp(2rem, 6cqi, 5rem)", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { display: "flex", flexDirection: "column", justifyContent: "space-between" } } }], ".sign-page-aside::before, \n .sign-page-aside::after": { "@layer components": { content: '""', position: "absolute", zIndex: -1, borderRadius: "var(--radius-full)", background: "color-mix(in oklch, var(--color-tertiary) 24%, transparent)", filter: "blur(1px)" } }, ".sign-page-aside::before": { "@layer components": { width: "22rem", height: "22rem", inset: "-8rem -6rem auto auto" } }, ".sign-page-aside::after": { "@layer components": { width: "15rem", height: "15rem", inset: "auto auto -5rem -4rem", background: "color-mix(in oklch, var(--color-secondary) 22%, transparent)" } }, ".sign-page-main": { "@layer components": { display: "grid", placeItems: "center", minWidth: "0", padding: "clamp(1rem, 6cqi, 4rem)", backgroundColor: "var(--color-surface)" } }, ".sign-page-content": { "@layer components": { width: "min(100%, 30rem)" } }, ".bottom-nav": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1000, display: "flex", alignItems: "stretch", justifyContent: "space-around", minHeight: "5rem", paddingBottom: "env(safe-area-inset-bottom, 0)", backgroundColor: "var(--color-surface)", boxShadow: "0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, minWidth: "4rem", maxWidth: "10rem", padding: "0.75rem 0.25rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "color 150ms ease-in-out", textDecoration: "none", gap: "0.25rem" } }, ".bottom-nav-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-item:focus-visible": { "@layer components": { outline: "none" } }, ".bottom-nav-item:focus-visible .bottom-nav-indicator": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottom-nav-item.active": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-indicator": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "4rem", height: "2rem", borderRadius: "var(--radius-lg)", transition: "background-color 150ms ease-in-out" } }, ".bottom-nav-item:hover .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".bottom-nav-icon": { "@layer components": { fontSize: "1.5rem", lineHeight: 1, transition: "font-size 150ms ease-in-out" } }, ".bottom-nav-label": { "@layer components": { fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } }, ".bottom-nav-item.active .bottom-nav-label": { "@layer components": { fontWeight: 600 } }, ".bottom-nav-badge": { "@layer components": { position: "absolute", top: "0", right: "0.5rem", minWidth: "1rem", height: "1rem", padding: "0 0.25rem", fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", color: "var(--color-error-content)", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", textAlign: "center" } }, ".bottom-nav-badge-dot": { "@layer components": { minWidth: "0.5rem", width: "0.5rem", height: "0.5rem", padding: "0", top: "0.125rem", right: "0.75rem" } }, ".bottom-nav-elevated": { "@layer components": { boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-bordered": { "@layer components": { boxShadow: "none", borderTop: "1px solid var(--color-outline-variant)" } }, ".bottom-nav-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-primary .bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".bottom-nav-primary .bottom-nav-item.active": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".bottom-nav-icons-only .bottom-nav-label": { "@layer components": { display: "none" } }, ".bottom-nav-icons-only .bottom-nav-item": { "@layer components": { padding: "1rem 0.25rem" } }, ".bottom-nav-labels-active .bottom-nav-label": { "@layer components": { opacity: 0, maxHeight: "0", overflow: "hidden", transition: "opacity 150ms ease-in-out, max-height 150ms ease-in-out" } }, ".bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, maxHeight: "1rem" } }, ".bottom-nav-shifting .bottom-nav-item": { "@layer components": { flex: "0 1 4rem", transition: "flex 200ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active": { "@layer components": { flex: "1 1 6rem" } }, ".bottom-nav-shifting .bottom-nav-label": { "@layer components": { opacity: 0, transform: "translateY(0.5rem)", transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".nav-rail": { "@layer components": { position: "fixed", left: "0", top: "0", bottom: "0", zIndex: 1000, display: "flex", flexDirection: "column", alignItems: "center", width: "5rem", padding: "1rem 0", backgroundColor: "var(--color-surface)", borderRight: "1px solid var(--color-outline-variant)" } }, ".nav-rail .bottom-nav-item": { "@layer components": { width: "100%", padding: "0.5rem", margin: "0.25rem 0" } }, ".nav-rail .bottom-nav-indicator": { "@layer components": { width: "3.5rem", height: "2rem" } }, ".bottom-nav-responsive": { "@layer components": { "@media (min-width: 768px)": { position: "relative", bottom: "auto", justifyContent: "flex-start", gap: "0.5rem", minHeight: "3rem", padding: "0 1rem", boxShadow: "none", borderBottom: "1px solid var(--color-outline-variant)" } } }, ".bottom-nav-responsive .bottom-nav-item": { "@layer components": { "@media (min-width: 768px)": { flex: "0 0 auto", flexDirection: "row", gap: "0.5rem", padding: "0.75rem 1rem" } } }, ".bottom-nav-responsive .bottom-nav-indicator": { "@layer components": { "@media (min-width: 768px)": { width: "auto", height: "auto", backgroundColor: "transparent !important" } } }, ".bottom-nav-responsive .bottom-nav-item.active": { "@layer components": { "@media (min-width: 768px)": { borderBottom: "2px solid var(--color-primary)" } } }, ".bottom-nav-item, \n .bottom-nav-indicator, \n .bottom-nav-icon, \n .bottom-nav-label, \n .bottom-nav-shifting .bottom-nav-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu": { "@layer components": { "--circle-menu-size": "3rem", "--circle-menu-item-size": "3rem", "--circle-menu-radius": "5.5rem", "--circle-menu-icon-size": "1.25rem", "--circle-menu-bar-width": "1.125rem", "--circle-menu-bar-height": "0.1875rem", "--circle-menu-bar-gap": "0.375rem", "--circle-menu-btn-bg": "var(--color-primary-container)", "--circle-menu-bar-color": "var(--color-on-primary-container)", "--circle-menu-item-bg": "var(--color-primary-container)", "--circle-menu-item-color": "var(--color-on-primary-container)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 30%, transparent)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)" } }, ".circle-menu-toggler": { "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", zIndex: 10, opacity: 0, cursor: "pointer" } }, ".circle-menu-label": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", display: "block", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-btn-bg)", zIndex: 1, pointerEvents: "none", transition: "background-color 0.3s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-label::before": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", boxShadow: `0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color),
192
196
  0 calc(-1 * var(--circle-menu-bar-gap)) 0 var(--circle-menu-bar-color)`, transform: "translate(-50%, -50%)", transition: `transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
193
197
  box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1)` } }, ".circle-menu-label::after": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", transform: "translate(-50%, -50%) rotate(-45deg)", opacity: 0, transition: "opacity 0.25s ease" } }, ".circle-menu-toggler:hover + .circle-menu-label": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--circle-menu-btn-bg) 80%, var(--circle-menu-bar-color))" } }, ".circle-menu-toggler:focus-visible + .circle-menu-label": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px var(--circle-menu-item-ring)" } }, ".circle-menu-toggler:checked + .circle-menu-label::before": { "@layer components": { boxShadow: "none", transform: "translate(-50%, -50%) rotate(45deg)" } }, ".circle-menu-toggler:checked + .circle-menu-label::after": { "@layer components": { opacity: 1 } }, ".circle-menu-list": { "@layer components": { position: "absolute", inset: "0", margin: "0", padding: "0", listStyle: "none", pointerEvents: "none" } }, ".circle-menu-item": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-item-size)", height: "var(--circle-menu-item-size)", opacity: 0, transition: `transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
194
198
  opacity 0.3s ease` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-item a, \n .circle-menu-item button": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", borderRadius: "var(--radius-full)", textDecoration: "none", fontSize: "var(--circle-menu-icon-size)", color: "var(--circle-menu-item-color)", backgroundColor: "var(--circle-menu-item-bg)", border: "none", cursor: "pointer", pointerEvents: "none", transition: `box-shadow 0.2s ease,