@duskmoon-dev/core 1.19.3 → 1.19.4
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.
- package/README.md +1 -1
- package/dist/base.css +484 -0
- package/dist/components/accordion.css +33 -9
- package/dist/components/autocomplete.css +67 -13
- package/dist/components/avatar.css +39 -15
- package/dist/components/badge.css +15 -3
- package/dist/components/card.css +12 -0
- package/dist/components/carousel.css +28 -0
- package/dist/components/chat.css +15 -11
- package/dist/components/checkbox.css +83 -13
- package/dist/components/collapse.css +67 -16
- package/dist/components/countdown.css +22 -0
- package/dist/components/datepicker.css +76 -0
- package/dist/components/diff.css +33 -0
- package/dist/components/file-input.css +107 -0
- package/dist/components/filter-group.css +452 -0
- package/dist/components/form-group.css +95 -204
- package/dist/components/form.css +1551 -421
- package/dist/components/index.css +5991 -6060
- package/dist/components/input.css +114 -31
- package/dist/components/kbd.css +28 -0
- package/dist/components/list.css +22 -3
- package/dist/components/otp-input.css +124 -6
- package/dist/components/radio.css +70 -0
- package/dist/components/range.css +41 -0
- package/dist/components/rating.css +39 -12
- package/dist/components/select.css +74 -0
- package/dist/components/stat.css +40 -0
- package/dist/components/switch.css +70 -0
- package/dist/components/table.css +8 -0
- package/dist/components/textarea.css +74 -0
- package/dist/components/timeline.css +40 -25
- package/dist/components/toggle-switch.css +165 -0
- package/dist/components/toggle.css +198 -32
- package/dist/components/validator.css +66 -0
- package/dist/effects/aura.css +22 -0
- package/dist/effects/hover-3d.css +8 -0
- package/dist/effects/hover-gallery.css +14 -0
- package/dist/effects/index.css +65 -0
- package/dist/effects/text-rotate.css +16 -0
- package/dist/esm/components/accordion.js +33 -9
- package/dist/esm/components/autocomplete.js +67 -13
- package/dist/esm/components/avatar.js +39 -15
- package/dist/esm/components/badge.js +15 -3
- package/dist/esm/components/card.js +12 -0
- package/dist/esm/components/carousel.d.ts +5 -0
- package/dist/esm/components/carousel.js +37 -0
- package/dist/esm/components/chat.js +15 -11
- package/dist/esm/components/checkbox.js +84 -14
- package/dist/esm/components/collapse.js +67 -16
- package/dist/esm/components/countdown.d.ts +5 -0
- package/dist/esm/components/countdown.js +31 -0
- package/dist/esm/components/datepicker.js +77 -1
- package/dist/esm/components/diff.d.ts +5 -0
- package/dist/esm/components/diff.js +42 -0
- package/dist/esm/components/file-input.d.ts +5 -0
- package/dist/esm/components/file-input.js +116 -0
- package/dist/esm/components/filter-group.d.ts +5 -0
- package/dist/esm/components/filter-group.js +461 -0
- package/dist/esm/components/form-group.js +96 -205
- package/dist/esm/components/form.js +1539 -409
- package/dist/esm/components/input.js +115 -32
- package/dist/esm/components/kbd.d.ts +5 -0
- package/dist/esm/components/kbd.js +37 -0
- package/dist/esm/components/list.js +22 -3
- package/dist/esm/components/otp-input.js +125 -7
- package/dist/esm/components/radio.js +71 -1
- package/dist/esm/components/range.d.ts +5 -0
- package/dist/esm/components/range.js +50 -0
- package/dist/esm/components/rating.js +39 -12
- package/dist/esm/components/select.js +75 -1
- package/dist/esm/components/stat.d.ts +5 -0
- package/dist/esm/components/stat.js +49 -0
- package/dist/esm/components/switch.js +71 -1
- package/dist/esm/components/table.js +8 -0
- package/dist/esm/components/textarea.js +75 -1
- package/dist/esm/components/timeline.js +40 -25
- package/dist/esm/components/toggle-switch.d.ts +5 -0
- package/dist/esm/components/toggle-switch.js +174 -0
- package/dist/esm/components/toggle.js +198 -32
- package/dist/esm/components/validator.d.ts +5 -0
- package/dist/esm/components/validator.js +75 -0
- package/dist/esm/effects/aura.d.ts +5 -0
- package/dist/esm/effects/aura.js +31 -0
- package/dist/esm/effects/hover-3d.d.ts +5 -0
- package/dist/esm/effects/hover-3d.js +17 -0
- package/dist/esm/effects/hover-gallery.d.ts +5 -0
- package/dist/esm/effects/hover-gallery.js +23 -0
- package/dist/esm/effects/index.d.ts +5 -0
- package/dist/esm/effects/index.js +74 -0
- package/dist/esm/effects/text-rotate.d.ts +5 -0
- package/dist/esm/effects/text-rotate.js +25 -0
- package/dist/index.css +5977 -6047
- package/dist/index.min.css +1 -1
- package/dist/standalone/duskmoonui-themes.css +1 -1
- package/dist/standalone/duskmoonui.css +6967 -7028
- package/dist/standalone/duskmoonui.js +11 -12
- package/dist/standalone/duskmoonui.mjs +11 -12
- package/dist/types/types/plugin.d.ts +1 -1
- package/dist/types/types/plugin.d.ts.map +1 -1
- package/package.json +98 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @duskmoon-dev/core v1.19.
|
|
3
|
-
* @duskmoon-dev/css-art v1.19.
|
|
2
|
+
* @duskmoon-dev/core v1.19.4
|
|
3
|
+
* @duskmoon-dev/css-art v1.19.4
|
|
4
4
|
* Standalone Tailwind CSS v4 plugin bundle
|
|
5
5
|
* https://github.com/duskmoon-dev/duskmoonui
|
|
6
6
|
* @license MIT
|
|
@@ -147,10 +147,10 @@ var tailwind_plugin_default = duskmoonPlugin;
|
|
|
147
147
|
|
|
148
148
|
// dist/standalone/.standalone-entry.ts
|
|
149
149
|
var baseStyles = { html: { scrollBehavior: "smooth", WebkitTextSizeAdjust: "100%", textSizeAdjust: "100%" }, ":root,\n[data-theme]": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" }, ":focus-visible": { outline: "2px solid var(--color-primary)", outlineOffset: "2px" }, "[disabled],\n.disabled": { pointerEvents: "none", opacity: 0.5 }, "::selection": { backgroundColor: "color-mix(in oklch, var(--color-primary) 20%, transparent)", color: "var(--color-base-content)" }, "::-webkit-scrollbar": { width: "8px", height: "8px" }, "::-webkit-scrollbar-track": { background: "var(--color-base-200)" }, "::-webkit-scrollbar-thumb": { background: "var(--color-base-300)", borderRadius: "4px" }, "::-webkit-scrollbar-thumb:hover": { background: "color-mix(in oklch, var(--color-base-content) 30%, transparent)" }, "*": { scrollbarWidth: "thin", scrollbarColor: "var(--color-base-300) var(--color-base-200)" }, "@media (prefers-reduced-motion: reduce)": { "*,\n *::before,\n *::after": { animationDuration: "0.01ms !important", animationIterationCount: "1 !important", transitionDuration: "0.01ms !important", scrollBehavior: "auto !important" } }, ":root": [{ colorScheme: "light", "--theme-name": '"sunshine"', "--theme-mode": '"light"', "--theme-family": '"duskmoon"', "--theme-pair": '"moonlight"', "--theme-description": '"Warm amber/coral"', "--color-primary": "oklch(52% 0.17 75)", "--color-primary-content": "oklch(100% 0 0)", "--color-primary-container": "oklch(95% 0.035 95.91)", "--color-on-primary-container": "oklch(25% 0.03 95.91)", "--color-secondary": "oklch(55% 0.19 20)", "--color-secondary-content": "oklch(100% 0 0)", "--color-secondary-container": "oklch(94% 0.05 87.01)", "--color-on-secondary-container": "oklch(25% 0.05 87.01)", "--color-tertiary": "oklch(52% 0.085 235)", "--color-tertiary-content": "oklch(100% 0 0)", "--color-tertiary-container": "oklch(95% 0.035 235)", "--color-on-tertiary-container": "oklch(22% 0.012 235)", "--color-accent": "oklch(52% 0.14 327)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(0% 0 0)", "--color-neutral-content": "oklch(80% 0.015 50)", "--color-neutral-variant": "oklch(50% 0.02 260)", "--color-surface": "oklch(100% 0 0)", "--color-surface-dim": "oklch(96% 0.01 85)", "--color-surface-bright": "oklch(100% 0 0)", "--color-surface-container-lowest": "oklch(100% 0 0)", "--color-surface-container-low": "oklch(99% 0.01 85)", "--color-surface-container": "oklch(97% 0.01 85)", "--color-surface-container-high": "oklch(96% 0.01 85)", "--color-surface-container-highest": "oklch(94% 0.01 85)", "--color-surface-variant": "oklch(94% 0.02 85)", "--color-on-surface": "oklch(27% 0.02 260)", "--color-on-surface-variant": "oklch(50% 0.02 260)", "--color-base-100": "oklch(100% 0.005 255)", "--color-base-200": "oklch(95% 0.008 255)", "--color-base-300": "oklch(90% 0.01 255)", "--color-base-400": "oklch(55% 0.06 255)", "--color-base-500": "oklch(45% 0.05 255)", "--color-base-600": "oklch(35% 0.04 255)", "--color-base-700": "oklch(25% 0.03 255)", "--color-base-800": "oklch(18% 0.02 255)", "--color-base-900": "oklch(12% 0.01 255)", "--color-base-content": "oklch(10% 0 255)", "--color-outline": "oklch(75% 0.01 260)", "--color-outline-variant": "oklch(85% 0.01 260)", "--color-inverse-surface": "oklch(25% 0.02 260)", "--color-inverse-on-surface": "oklch(95% 0.01 260)", "--color-inverse-primary": "oklch(80% 0.14 55)", "--color-shadow": "oklch(0% 0 0)", "--color-scrim": "oklch(0% 0 0 / 50%)", "--color-info": "oklch(41.94% 0.114 254.39)", "--color-info-content": "oklch(91.94% 0.114 254.39)", "--color-info-container": "oklch(95% 0.03 235)", "--color-on-info-container": "oklch(35% 0.08 235)", "--color-success": "oklch(50% 0.19 133.55)", "--color-success-content": "oklch(100% 0 0)", "--color-success-container": "oklch(93% 0.04 150)", "--color-on-success-container": "oklch(30% 0.08 150)", "--color-warning": "oklch(52% 0.203 42.44)", "--color-warning-content": "oklch(100% 0 0)", "--color-warning-container": "oklch(93% 0.05 80)", "--color-on-warning-container": "oklch(38% 0.10 80)", "--color-error": "oklch(52% 0.237 28.15)", "--color-error-content": "oklch(100% 0 0)", "--color-error-container": "oklch(93% 0.04 25)", "--color-on-error-container": "oklch(32% 0.10 25)", "--radius-selector": "0.25rem", "--radius-field": "0.625rem", "--radius-box": "2rem", "--size-selector": "0.1875rem", "--size-field": "0.1875rem", "--border": "0.5px", "--depth": "1", "--noise": "1", "--spacing-0": "0px", "--spacing-1": "4px", "--spacing-2": "8px", "--spacing-3": "12px", "--spacing-4": "16px", "--spacing-5": "20px", "--spacing-6": "24px", "--spacing-7": "28px", "--spacing-8": "32px", "--spacing-10": "40px", "--spacing-12": "48px", "--spacing-16": "64px", "--spacing-20": "80px", "--spacing-24": "96px", "--radius-none": "0px", "--radius-xs": "4px", "--radius-sm": "8px", "--radius-md": "12px", "--radius-lg": "16px", "--radius-xl": "20px", "--radius-2xl": "28px", "--radius-full": "9999px", "--elevation-level0": "0px", "--elevation-level1": "1px", "--elevation-level2": "3px", "--elevation-level3": "6px", "--elevation-level4": "8px", "--elevation-level5": "12px" }, { "--shadow-xs": "0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 5%, transparent)", "--shadow-sm": "0 1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)", "--shadow-md": "0 4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-shadow) 10%, transparent)", "--shadow-lg": "0 10px 15px -3px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent)", "--shadow-xl": "0 20px 25px -5px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--color-shadow) 10%, transparent)", "--shadow-2xl": "0 25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent)", "--shadow-elevation-0": "none", "--shadow-elevation-1": "var(--shadow-xs)", "--shadow-elevation-2": "var(--shadow-sm)", "--shadow-elevation-3": "var(--shadow-md)", "--shadow-elevation-4": "var(--shadow-lg)", "--shadow-elevation-5": "var(--shadow-xl)" }], "@media (prefers-color-scheme: dark)": { ":root:not([data-theme])": { colorScheme: "dark", "--theme-name": '"moonlight"', "--theme-mode": '"dark"', "--theme-family": '"duskmoon"', "--theme-pair": '"sunshine"', "--theme-description": '"Neutral white/gold"', "--color-primary": "oklch(85.45% 0 0)", "--color-primary-content": "oklch(14.94% 0.031 39.947)", "--color-primary-container": "oklch(25% 0.01 0)", "--color-on-primary-container": "oklch(85% 0.01 0)", "--color-secondary": "oklch(83.33% 0.0981 73.78)", "--color-secondary-content": "oklch(14.507% 0.035 2.72)", "--color-secondary-container": "oklch(28% 0.03 73.78)", "--color-on-secondary-container": "oklch(88% 0.03 73.78)", "--color-tertiary": "oklch(72% 0.090 255)", "--color-tertiary-content": "oklch(14% 0.012 255)", "--color-tertiary-container": "oklch(28% 0.030 255)", "--color-on-tertiary-container": "oklch(88% 0.010 255)", "--color-accent": "oklch(75.65% 0.1303 335.51)", "--color-accent-content": "oklch(14.258% 0.033 299.844)", "--color-neutral": "oklch(23% 0 0)", "--color-neutral-content": "oklch(52.43% 0 0)", "--color-neutral-variant": "oklch(55% 0.01 260)", "--color-surface": "oklch(20% 0.02 260)", "--color-surface-dim": "oklch(17% 0.02 260)", "--color-surface-bright": "oklch(28% 0.02 260)", "--color-surface-container-lowest": "oklch(14% 0.02 260)", "--color-surface-container-low": "oklch(20% 0.02 260)", "--color-surface-container": "oklch(22% 0.02 260)", "--color-surface-container-high": "oklch(25% 0.02 260)", "--color-surface-container-highest": "oklch(28% 0.01 260)", "--color-surface-variant": "oklch(30% 0.02 260)", "--color-on-surface": "oklch(95% 0.01 260)", "--color-on-surface-variant": "oklch(75% 0.01 260)", "--color-base-100": "oklch(22% 0.019 237.69)", "--color-base-200": "oklch(20% 0.019 237.69)", "--color-base-300": "oklch(18% 0.019 237.69)", "--color-base-400": "oklch(26% 0.019 237.69)", "--color-base-500": "oklch(32% 0.019 237.69)", "--color-base-600": "oklch(40% 0.018 237.69)", "--color-base-700": "oklch(55% 0.017 237.69)", "--color-base-800": "oklch(70% 0.016 237.69)", "--color-base-900": "oklch(85% 0.015 237.69)", "--color-base-content": "oklch(77.383% 0.043 245.096)", "--color-outline": "oklch(44% 0.01 260)", "--color-outline-variant": "oklch(35% 0.01 260)", "--color-inverse-surface": "oklch(95% 0.01 260)", "--color-inverse-on-surface": "oklch(25% 0.02 260)", "--color-inverse-primary": "oklch(55% 0.16 255)", "--color-shadow": "oklch(0% 0 0)", "--color-scrim": "oklch(0% 0 0 / 60%)", "--color-info": "oklch(82.42% 0.09757279812867503 240.7677443360475)", "--color-info-content": "oklch(17.111% 0.017 206.015)", "--color-info-container": "oklch(32% 0.06 235)", "--color-on-info-container": "oklch(88% 0.06 235)", "--color-success": "oklch(82.19% 0.0621 133.3)", "--color-success-content": "oklch(17.112% 0.017 144.778)", "--color-success-container": "oklch(30% 0.05 150)", "--color-on-success-container": "oklch(85% 0.06 150)", "--color-warning": "oklch(76.36% 0.1752731353930708 61.96388739129725)", "--color-warning-content": "oklch(17.113% 0.016 74.427)", "--color-warning-container": "oklch(35% 0.06 80)", "--color-on-warning-container": "oklch(90% 0.06 80)", "--color-error": "oklch(46.38% 0.1898 29.17)", "--color-error-content": "oklch(86.38% 0.298 39.17)", "--color-error-container": "oklch(30% 0.08 25)", "--color-on-error-container": "oklch(88% 0.06 25)", "--radius-selector": "0.125rem", "--radius-field": "0.375rem", "--radius-box": "1rem", "--size-selector": "0.125rem", "--size-field": "0.125rem", "--border": "1px", "--depth": "0.8", "--noise": "0.6" } }, '[data-theme="sunshine"]': { colorScheme: "light", "--theme-name": '"sunshine"', "--theme-mode": '"light"', "--theme-family": '"duskmoon"', "--theme-pair": '"moonlight"', "--theme-description": '"Warm amber/coral"', "--color-primary": "oklch(52% 0.17 75)", "--color-primary-content": "oklch(100% 0 0)", "--color-primary-container": "oklch(95% 0.035 95.91)", "--color-on-primary-container": "oklch(25% 0.03 95.91)", "--color-secondary": "oklch(55% 0.19 20)", "--color-secondary-content": "oklch(100% 0 0)", "--color-secondary-container": "oklch(94% 0.05 87.01)", "--color-on-secondary-container": "oklch(25% 0.05 87.01)", "--color-tertiary": "oklch(52% 0.085 235)", "--color-tertiary-content": "oklch(100% 0 0)", "--color-tertiary-container": "oklch(95% 0.035 235)", "--color-on-tertiary-container": "oklch(22% 0.012 235)", "--color-accent": "oklch(52% 0.14 327)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(0% 0 0)", "--color-neutral-content": "oklch(80% 0.015 50)", "--color-neutral-variant": "oklch(50% 0.02 260)", "--color-surface": "oklch(100% 0 0)", "--color-surface-dim": "oklch(96% 0.01 85)", "--color-surface-bright": "oklch(100% 0 0)", "--color-surface-container-lowest": "oklch(100% 0 0)", "--color-surface-container-low": "oklch(99% 0.01 85)", "--color-surface-container": "oklch(97% 0.01 85)", "--color-surface-container-high": "oklch(96% 0.01 85)", "--color-surface-container-highest": "oklch(94% 0.01 85)", "--color-surface-variant": "oklch(94% 0.02 85)", "--color-on-surface": "oklch(27% 0.02 260)", "--color-on-surface-variant": "oklch(50% 0.02 260)", "--color-base-100": "oklch(100% 0.005 255)", "--color-base-200": "oklch(95% 0.008 255)", "--color-base-300": "oklch(90% 0.01 255)", "--color-base-400": "oklch(55% 0.06 255)", "--color-base-500": "oklch(45% 0.05 255)", "--color-base-600": "oklch(35% 0.04 255)", "--color-base-700": "oklch(25% 0.03 255)", "--color-base-800": "oklch(18% 0.02 255)", "--color-base-900": "oklch(12% 0.01 255)", "--color-base-content": "oklch(10% 0 255)", "--color-outline": "oklch(75% 0.01 260)", "--color-outline-variant": "oklch(85% 0.01 260)", "--color-inverse-surface": "oklch(25% 0.02 260)", "--color-inverse-on-surface": "oklch(95% 0.01 260)", "--color-inverse-primary": "oklch(80% 0.14 55)", "--color-shadow": "oklch(0% 0 0)", "--color-scrim": "oklch(0% 0 0 / 50%)", "--color-info": "oklch(41.94% 0.114 254.39)", "--color-info-content": "oklch(91.94% 0.114 254.39)", "--color-info-container": "oklch(95% 0.03 235)", "--color-on-info-container": "oklch(35% 0.08 235)", "--color-success": "oklch(50% 0.19 133.55)", "--color-success-content": "oklch(100% 0 0)", "--color-success-container": "oklch(93% 0.04 150)", "--color-on-success-container": "oklch(30% 0.08 150)", "--color-warning": "oklch(52% 0.203 42.44)", "--color-warning-content": "oklch(100% 0 0)", "--color-warning-container": "oklch(93% 0.05 80)", "--color-on-warning-container": "oklch(38% 0.10 80)", "--color-error": "oklch(52% 0.237 28.15)", "--color-error-content": "oklch(100% 0 0)", "--color-error-container": "oklch(93% 0.04 25)", "--color-on-error-container": "oklch(32% 0.10 25)", "--radius-selector": "0.25rem", "--radius-field": "0.625rem", "--radius-box": "2rem", "--size-selector": "0.1875rem", "--size-field": "0.1875rem", "--border": "0.5px", "--depth": "1", "--noise": "1" }, '[data-theme="moonlight"]': { colorScheme: "dark", "--theme-name": '"moonlight"', "--theme-mode": '"dark"', "--theme-family": '"duskmoon"', "--theme-pair": '"sunshine"', "--theme-description": '"Neutral white/gold"', "--color-primary": "oklch(85.45% 0 0)", "--color-primary-content": "oklch(14.94% 0.031 39.947)", "--color-primary-container": "oklch(25% 0.01 0)", "--color-on-primary-container": "oklch(85% 0.01 0)", "--color-secondary": "oklch(83.33% 0.0981 73.78)", "--color-secondary-content": "oklch(14.507% 0.035 2.72)", "--color-secondary-container": "oklch(28% 0.03 73.78)", "--color-on-secondary-container": "oklch(88% 0.03 73.78)", "--color-tertiary": "oklch(72% 0.090 255)", "--color-tertiary-content": "oklch(14% 0.012 255)", "--color-tertiary-container": "oklch(28% 0.030 255)", "--color-on-tertiary-container": "oklch(88% 0.010 255)", "--color-accent": "oklch(75.65% 0.1303 335.51)", "--color-accent-content": "oklch(14.258% 0.033 299.844)", "--color-neutral": "oklch(23% 0 0)", "--color-neutral-content": "oklch(52.43% 0 0)", "--color-neutral-variant": "oklch(55% 0.01 260)", "--color-surface": "oklch(20% 0.02 260)", "--color-surface-dim": "oklch(17% 0.02 260)", "--color-surface-bright": "oklch(28% 0.02 260)", "--color-surface-container-lowest": "oklch(14% 0.02 260)", "--color-surface-container-low": "oklch(20% 0.02 260)", "--color-surface-container": "oklch(22% 0.02 260)", "--color-surface-container-high": "oklch(25% 0.02 260)", "--color-surface-container-highest": "oklch(28% 0.01 260)", "--color-surface-variant": "oklch(30% 0.02 260)", "--color-on-surface": "oklch(95% 0.01 260)", "--color-on-surface-variant": "oklch(75% 0.01 260)", "--color-base-100": "oklch(22% 0.019 237.69)", "--color-base-200": "oklch(20% 0.019 237.69)", "--color-base-300": "oklch(18% 0.019 237.69)", "--color-base-400": "oklch(26% 0.019 237.69)", "--color-base-500": "oklch(32% 0.019 237.69)", "--color-base-600": "oklch(40% 0.018 237.69)", "--color-base-700": "oklch(55% 0.017 237.69)", "--color-base-800": "oklch(70% 0.016 237.69)", "--color-base-900": "oklch(85% 0.015 237.69)", "--color-base-content": "oklch(77.383% 0.043 245.096)", "--color-outline": "oklch(44% 0.01 260)", "--color-outline-variant": "oklch(35% 0.01 260)", "--color-inverse-surface": "oklch(95% 0.01 260)", "--color-inverse-on-surface": "oklch(25% 0.02 260)", "--color-inverse-primary": "oklch(55% 0.16 255)", "--color-shadow": "oklch(0% 0 0)", "--color-scrim": "oklch(0% 0 0 / 60%)", "--color-info": "oklch(82.42% 0.09757279812867503 240.7677443360475)", "--color-info-content": "oklch(17.111% 0.017 206.015)", "--color-info-container": "oklch(32% 0.06 235)", "--color-on-info-container": "oklch(88% 0.06 235)", "--color-success": "oklch(82.19% 0.0621 133.3)", "--color-success-content": "oklch(17.112% 0.017 144.778)", "--color-success-container": "oklch(30% 0.05 150)", "--color-on-success-container": "oklch(85% 0.06 150)", "--color-warning": "oklch(76.36% 0.1752731353930708 61.96388739129725)", "--color-warning-content": "oklch(17.113% 0.016 74.427)", "--color-warning-container": "oklch(35% 0.06 80)", "--color-on-warning-container": "oklch(90% 0.06 80)", "--color-error": "oklch(46.38% 0.1898 29.17)", "--color-error-content": "oklch(86.38% 0.298 39.17)", "--color-error-container": "oklch(30% 0.08 25)", "--color-on-error-container": "oklch(88% 0.06 25)", "--radius-selector": "0.125rem", "--radius-field": "0.375rem", "--radius-box": "1rem", "--size-selector": "0.125rem", "--size-field": "0.125rem", "--border": "1px", "--depth": "0.8", "--noise": "0.6" }, '[data-theme="ocean"]': { colorScheme: "dark", "--theme-name": '"ocean"', "--theme-mode": '"dark"', "--theme-family": '"ecotone"', "--theme-pair": '"forest"', "--theme-description": '"Cool blue"', "--color-primary": "oklch(72% 0.12 210)", "--color-primary-content": "oklch(15% 0.02 210)", "--color-primary-container": "oklch(30% 0.08 210)", "--color-on-primary-container": "oklch(90% 0.04 210)", "--color-secondary": "oklch(75% 0.10 175)", "--color-secondary-content": "oklch(15% 0.02 175)", "--color-secondary-container": "oklch(28% 0.06 175)", "--color-on-secondary-container": "oklch(90% 0.04 175)", "--color-tertiary": "oklch(72% 0.10 280)", "--color-tertiary-content": "oklch(15% 0.02 280)", "--color-tertiary-container": "oklch(28% 0.06 280)", "--color-on-tertiary-container": "oklch(90% 0.04 280)", "--color-accent": "oklch(70% 0.12 190)", "--color-accent-content": "oklch(15% 0.03 190)", "--color-neutral": "oklch(90% 0.01 210)", "--color-neutral-content": "oklch(16% 0.02 220)", "--color-neutral-variant": "oklch(50% 0.02 220)", "--color-surface": "oklch(16% 0.02 220)", "--color-surface-dim": "oklch(10% 0.015 220)", "--color-surface-bright": "oklch(24% 0.025 220)", "--color-surface-container-lowest": "oklch(8% 0.01 220)", "--color-surface-container-low": "oklch(12% 0.015 220)", "--color-surface-container": "oklch(16% 0.02 220)", "--color-surface-container-high": "oklch(20% 0.022 220)", "--color-surface-container-highest": "oklch(24% 0.025 220)", "--color-surface-variant": "oklch(22% 0.025 220)", "--color-on-surface": "oklch(90% 0.01 210)", "--color-on-surface-variant": "oklch(70% 0.015 210)", "--color-base-100": "oklch(16% 0.02 220)", "--color-base-200": "oklch(14% 0.015 220)", "--color-base-300": "oklch(10% 0.01 220)", "--color-base-400": "oklch(30% 0.02 220)", "--color-base-500": "oklch(40% 0.02 220)", "--color-base-600": "oklch(55% 0.015 220)", "--color-base-700": "oklch(70% 0.01 220)", "--color-base-800": "oklch(82% 0.01 220)", "--color-base-900": "oklch(92% 0.005 220)", "--color-base-content": "oklch(90% 0.01 210)", "--color-outline": "oklch(45% 0.02 220)", "--color-outline-variant": "oklch(32% 0.015 220)", "--color-inverse-surface": "oklch(90% 0.01 210)", "--color-inverse-on-surface": "oklch(16% 0.02 220)", "--color-inverse-primary": "oklch(45% 0.12 210)", "--color-shadow": "oklch(0% 0 0)", "--color-scrim": "oklch(0% 0 0 / 60%)", "--color-info": "oklch(70% 0.12 230)", "--color-info-content": "oklch(15% 0.03 230)", "--color-info-container": "oklch(28% 0.06 230)", "--color-on-info-container": "oklch(88% 0.04 230)", "--color-success": "oklch(72% 0.15 155)", "--color-success-content": "oklch(15% 0.03 155)", "--color-success-container": "oklch(28% 0.06 155)", "--color-on-success-container": "oklch(88% 0.04 155)", "--color-warning": "oklch(75% 0.14 75)", "--color-warning-content": "oklch(18% 0.04 75)", "--color-warning-container": "oklch(30% 0.06 75)", "--color-on-warning-container": "oklch(88% 0.05 75)", "--color-error": "oklch(70% 0.16 20)", "--color-error-content": "oklch(15% 0.03 20)", "--color-error-container": "oklch(28% 0.06 20)", "--color-on-error-container": "oklch(88% 0.05 20)", "--radius-selector": "0.25rem", "--radius-field": "0.75rem", "--radius-box": "1.5rem", "--size-selector": "0.125rem", "--size-field": "0.125rem", "--border": "1px", "--depth": "0.7", "--noise": "0.3" }, '[data-theme="forest"]': { colorScheme: "light", "--theme-name": '"forest"', "--theme-mode": '"light"', "--theme-family": '"ecotone"', "--theme-pair": '"ocean"', "--theme-description": '"Cool green/teal"', "--color-primary": "oklch(50% 0.14 150)", "--color-primary-content": "oklch(98% 0.01 150)", "--color-primary-container": "oklch(92% 0.04 150)", "--color-on-primary-container": "oklch(22% 0.06 150)", "--color-secondary": "oklch(52% 0.10 55)", "--color-secondary-content": "oklch(98% 0.01 55)", "--color-secondary-container": "oklch(92% 0.03 55)", "--color-on-secondary-container": "oklch(24% 0.05 55)", "--color-tertiary": "oklch(58% 0.08 175)", "--color-tertiary-content": "oklch(98% 0.01 175)", "--color-tertiary-container": "oklch(93% 0.03 175)", "--color-on-tertiary-container": "oklch(22% 0.04 175)", "--color-accent": "oklch(60% 0.12 85)", "--color-accent-content": "oklch(20% 0.04 85)", "--color-neutral": "oklch(14% 0.01 100)", "--color-neutral-content": "oklch(92% 0.01 100)", "--color-neutral-variant": "oklch(48% 0.015 100)", "--color-surface": "oklch(99% 0.005 100)", "--color-surface-dim": "oklch(95% 0.01 100)", "--color-surface-bright": "oklch(100% 0 0)", "--color-surface-container-lowest": "oklch(100% 0 0)", "--color-surface-container-low": "oklch(98% 0.008 100)", "--color-surface-container": "oklch(96% 0.01 100)", "--color-surface-container-high": "oklch(94% 0.012 100)", "--color-surface-container-highest": "oklch(92% 0.015 100)", "--color-surface-variant": "oklch(93% 0.02 100)", "--color-on-surface": "oklch(22% 0.02 100)", "--color-on-surface-variant": "oklch(42% 0.02 100)", "--color-base-100": "oklch(99% 0.005 100)", "--color-base-200": "oklch(92% 0.01 100)", "--color-base-300": "oklch(80% 0.01 100)", "--color-base-400": "oklch(60% 0.01 100)", "--color-base-500": "oklch(48% 0.01 100)", "--color-base-600": "oklch(38% 0.01 100)", "--color-base-700": "oklch(28% 0.01 100)", "--color-base-800": "oklch(20% 0.008 100)", "--color-base-900": "oklch(14% 0.005 100)", "--color-base-content": "oklch(14% 0.01 100)", "--color-outline": "oklch(60% 0.015 100)", "--color-outline-variant": "oklch(78% 0.01 100)", "--color-inverse-surface": "oklch(22% 0.02 100)", "--color-inverse-on-surface": "oklch(95% 0.01 100)", "--color-inverse-primary": "oklch(75% 0.10 150)", "--color-shadow": "oklch(0% 0 0)", "--color-scrim": "oklch(0% 0 0 / 40%)", "--color-info": "oklch(48% 0.12 240)", "--color-info-content": "oklch(98% 0.01 240)", "--color-info-container": "oklch(94% 0.03 240)", "--color-on-info-container": "oklch(28% 0.06 240)", "--color-success": "oklch(55% 0.16 145)", "--color-success-content": "oklch(98% 0.01 145)", "--color-success-container": "oklch(93% 0.04 145)", "--color-on-success-container": "oklch(25% 0.07 145)", "--color-warning": "oklch(62% 0.16 65)", "--color-warning-content": "oklch(18% 0.04 65)", "--color-warning-container": "oklch(93% 0.04 65)", "--color-on-warning-container": "oklch(32% 0.08 65)", "--color-error": "oklch(52% 0.18 15)", "--color-error-content": "oklch(98% 0.01 15)", "--color-error-container": "oklch(93% 0.04 15)", "--color-on-error-container": "oklch(28% 0.08 15)", "--radius-selector": "0.125rem", "--radius-field": "0.375rem", "--radius-box": "1rem", "--size-selector": "0.1875rem", "--size-field": "0.1875rem", "--border": "1px", "--depth": "0.5", "--noise": "0.8" }, '\n label[aria-required="true"]::after': { "@layer components": { content: "' *'", color: "var(--color-error)" } }, "@property --art-circular-gallery-rotation": { syntax: '"<angle>"', inherits: "true", initialValue: "0deg" }, "@property --art-gemini-input-rotation": { syntax: "'<angle>'", inherits: "false", initialValue: "0deg" } };
|
|
150
|
-
var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem", "--btn-py": "0.625rem", "--btn-text-color": "var(--color-on-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", paddingInline: "var(--btn-p)", paddingBlock: "var(--btn-py)", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", textAlign: "center", textDecoration: "none", whiteSpace: "nowrap", verticalAlign: "middle", cursor: "pointer", userSelect: "none", border: "1px solid transparent", borderRadius: "var(--radius-sm)", transition: "all 150ms ease-in-out", backgroundColor: "var(--color-surface-container)", color: "var(--btn-text-color)" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".btn:hover": { "@layer components": { filter: "brightness(0.95)" } }, ".btn:active": { "@layer components": { transform: "scale(0.98)" } }, ".btn:focus": { "@layer components": { outline: "none" } }, ".btn:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".btn:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, pointerEvents: "none" } }, ".btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary-content)", backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".btn-primary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary), black 10%)", borderColor: "color-mix(in oklch, var(--color-primary), black 10%)", filter: "none" } }, ".btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary-content)", backgroundColor: "var(--color-secondary)", borderColor: "var(--color-secondary)" } }, ".btn-secondary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary), black 10%)", borderColor: "color-mix(in oklch, var(--color-secondary), black 10%)", filter: "none" } }, ".btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary-content)", backgroundColor: "var(--color-tertiary)", borderColor: "var(--color-tertiary)" } }, ".btn-tertiary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary), black 10%)", borderColor: "color-mix(in oklch, var(--color-tertiary), black 10%)", filter: "none" } }, ".btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent-content)", backgroundColor: "var(--color-accent)", borderColor: "var(--color-accent)" } }, ".btn-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent), black 10%)", borderColor: "color-mix(in oklch, var(--color-accent), black 10%)", filter: "none" } }, ".btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral-content)", backgroundColor: "var(--color-neutral)", borderColor: "var(--color-neutral)" } }, ".btn-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral), black 10%)", borderColor: "color-mix(in oklch, var(--color-neutral), black 10%)", filter: "none" } }, ".btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-100)", borderColor: "var(--color-base-100)" } }, ".btn-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)", borderColor: "var(--color-base-200)", filter: "none" } }, ".btn-info": { "@layer components": { "--btn-text-color": "var(--color-info-content)", backgroundColor: "var(--color-info)", borderColor: "var(--color-info)" } }, ".btn-info:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-info), black 10%)", borderColor: "color-mix(in oklch, var(--color-info), black 10%)", filter: "none" } }, ".btn-success": { "@layer components": { "--btn-text-color": "var(--color-success-content)", backgroundColor: "var(--color-success)", borderColor: "var(--color-success)" } }, ".btn-success:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-success), black 10%)", borderColor: "color-mix(in oklch, var(--color-success), black 10%)", filter: "none" } }, ".btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning-content)", backgroundColor: "var(--color-warning)", borderColor: "var(--color-warning)" } }, ".btn-warning:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-warning), black 10%)", borderColor: "color-mix(in oklch, var(--color-warning), black 10%)", filter: "none" } }, ".btn-error": { "@layer components": { "--btn-text-color": "var(--color-error-content)", backgroundColor: "var(--color-error)", borderColor: "var(--color-error)" } }, ".btn-error:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-error), black 10%)", borderColor: "color-mix(in oklch, var(--color-error), black 10%)", filter: "none" } }, ".btn-outline, \n .btn-outlined": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "transparent", borderColor: "var(--color-outline)" } }, ".btn-outline:hover, \n .btn-outlined:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", filter: "none" } }, ".btn-outline.btn-primary, \n .btn-outlined.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary)", borderColor: "currentColor" } }, ".btn-outline.btn-primary:hover, \n .btn-outlined.btn-primary:hover": { "@layer components": { "--btn-text-color": "var(--color-primary-content)", backgroundColor: "var(--color-primary)" } }, ".btn-outline.btn-secondary, \n .btn-outlined.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary)", borderColor: "currentColor" } }, ".btn-outline.btn-secondary:hover, \n .btn-outlined.btn-secondary:hover": { "@layer components": { "--btn-text-color": "var(--color-secondary-content)", backgroundColor: "var(--color-secondary)" } }, ".btn-outline.btn-tertiary, \n .btn-outlined.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary)", borderColor: "currentColor" } }, ".btn-outline.btn-tertiary:hover, \n .btn-outlined.btn-tertiary:hover": { "@layer components": { "--btn-text-color": "var(--color-tertiary-content)", backgroundColor: "var(--color-tertiary)" } }, ".btn-outline.btn-accent, \n .btn-outlined.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent)", borderColor: "currentColor" } }, ".btn-outline.btn-accent:hover, \n .btn-outlined.btn-accent:hover": { "@layer components": { "--btn-text-color": "var(--color-accent-content)", backgroundColor: "var(--color-accent)" } }, ".btn-outline.btn-neutral, \n .btn-outlined.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral)", borderColor: "currentColor" } }, ".btn-outline.btn-neutral:hover, \n .btn-outlined.btn-neutral:hover": { "@layer components": { "--btn-text-color": "var(--color-neutral-content)", backgroundColor: "var(--color-neutral)" } }, ".btn-outline.btn-base, \n .btn-outlined.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)", borderColor: "currentColor" } }, ".btn-outline.btn-base:hover, \n .btn-outlined.btn-base:hover": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-100)" } }, ".btn-outline.btn-info, \n .btn-outlined.btn-info": { "@layer components": { "--btn-text-color": "var(--color-info)", borderColor: "currentColor" } }, ".btn-outline.btn-info:hover, \n .btn-outlined.btn-info:hover": { "@layer components": { "--btn-text-color": "var(--color-info-content)", backgroundColor: "var(--color-info)" } }, ".btn-outline.btn-success, \n .btn-outlined.btn-success": { "@layer components": { "--btn-text-color": "var(--color-success)", borderColor: "currentColor" } }, ".btn-outline.btn-success:hover, \n .btn-outlined.btn-success:hover": { "@layer components": { "--btn-text-color": "var(--color-success-content)", backgroundColor: "var(--color-success)" } }, ".btn-outline.btn-warning, \n .btn-outlined.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning)", borderColor: "currentColor" } }, ".btn-outline.btn-warning:hover, \n .btn-outlined.btn-warning:hover": { "@layer components": { "--btn-text-color": "var(--color-warning-content)", backgroundColor: "var(--color-warning)" } }, ".btn-outline.btn-error, \n .btn-outlined.btn-error": { "@layer components": { "--btn-text-color": "var(--color-error)", borderColor: "currentColor" } }, ".btn-outline.btn-error:hover, \n .btn-outlined.btn-error:hover": { "@layer components": { "--btn-text-color": "var(--color-error-content)", backgroundColor: "var(--color-error)" } }, ".btn-ghost": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "transparent", borderColor: "transparent" } }, ".btn-ghost:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", filter: "none" } }, ".btn-ghost.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary)" } }, ".btn-ghost.btn-primary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)" } }, ".btn-ghost.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary)" } }, ".btn-ghost.btn-secondary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)" } }, ".btn-ghost.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary)" } }, ".btn-ghost.btn-tertiary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)" } }, ".btn-ghost.btn-info": { "@layer components": { "--btn-text-color": "var(--color-info)" } }, ".btn-ghost.btn-success": { "@layer components": { "--btn-text-color": "var(--color-success)" } }, ".btn-ghost.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning)" } }, ".btn-ghost.btn-error": { "@layer components": { "--btn-text-color": "var(--color-error)" } }, ".btn-ghost.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent)" } }, ".btn-ghost.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral)" } }, ".btn-ghost.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)" } }, ".btn-ghost.btn-accent:hover": { "@layer components": { "--btn-text-color": "var(--color-accent)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".btn-ghost.btn-neutral:hover": { "@layer components": { "--btn-text-color": "var(--color-neutral)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".btn-ghost.btn-base:hover": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-200)" } }, ".btn-ghost.btn-info:hover": { "@layer components": { "--btn-text-color": "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)" } }, ".btn-ghost.btn-success:hover": { "@layer components": { "--btn-text-color": "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)" } }, ".btn-ghost.btn-warning:hover": { "@layer components": { "--btn-text-color": "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)" } }, ".btn-ghost.btn-error:hover": { "@layer components": { "--btn-text-color": "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)" } }, ".btn-text": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "transparent", borderColor: "transparent" } }, ".btn-text:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", filter: "none" } }, ".btn-text.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary)" } }, ".btn-text.btn-primary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)" } }, ".btn-text.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary)" } }, ".btn-text.btn-secondary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)" } }, ".btn-text.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary)" } }, ".btn-text.btn-tertiary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)" } }, ".btn-text.btn-info": { "@layer components": { "--btn-text-color": "var(--color-info)" } }, ".btn-text.btn-success": { "@layer components": { "--btn-text-color": "var(--color-success)" } }, ".btn-text.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning)" } }, ".btn-text.btn-error": { "@layer components": { "--btn-text-color": "var(--color-error)" } }, ".btn-text.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent)" } }, ".btn-text.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral)" } }, ".btn-text.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)" } }, ".btn-text.btn-accent:hover": { "@layer components": { "--btn-text-color": "var(--color-accent)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".btn-text.btn-neutral:hover": { "@layer components": { "--btn-text-color": "var(--color-neutral)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".btn-text.btn-base:hover": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-200)" } }, ".btn-text.btn-info:hover": { "@layer components": { "--btn-text-color": "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)" } }, ".btn-text.btn-success:hover": { "@layer components": { "--btn-text-color": "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)" } }, ".btn-text.btn-warning:hover": { "@layer components": { "--btn-text-color": "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)" } }, ".btn-text.btn-error:hover": { "@layer components": { "--btn-text-color": "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)" } }, ".btn-tonal": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)", borderColor: "transparent" } }, ".btn-tonal:hover": { "@layer components": { filter: "brightness(0.95)" } }, ".btn-tonal.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)" } }, ".btn-tonal.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)" } }, ".btn-tonal.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)" } }, ".btn-tonal.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".btn-tonal.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".btn-tonal.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-200)" } }, ".btn-tonal.btn-info": { "@layer components": { "--btn-text-color": "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)" } }, ".btn-tonal.btn-success": { "@layer components": { "--btn-text-color": "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)" } }, ".btn-tonal.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)" } }, ".btn-tonal.btn-error": { "@layer components": { "--btn-text-color": "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)" } }, ".btn-xs": { "@layer components": { "--btn-p": "0.5rem", "--btn-py": "0.25rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-xs)" } }, ".btn-sm": { "@layer components": { "--btn-p": "0.75rem", "--btn-py": "0.375rem", fontSize: "0.8125rem", lineHeight: "1.125rem", borderRadius: "var(--radius-xs)" } }, ".btn-md": { "@layer components": { "--btn-p": "1.25rem", "--btn-py": "0.625rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-sm)" } }, ".btn-lg": { "@layer components": { "--btn-p": "1.75rem", "--btn-py": "0.875rem", fontSize: "1rem", lineHeight: "1.5rem", borderRadius: "var(--radius-sm)" } }, ".btn-block": { "@layer components": { display: "flex", width: "100%" } }, ".btn-group": { "@layer components": { display: "inline-flex" } }, ".btn-group .btn": { "@layer components": { borderRadius: "0" } }, ".btn-group .btn:first-child": { "@layer components": { borderTopLeftRadius: "var(--radius-sm)", borderBottomLeftRadius: "var(--radius-sm)" } }, ".btn-group .btn:last-child": { "@layer components": { borderTopRightRadius: "var(--radius-sm)", borderBottomRightRadius: "var(--radius-sm)" } }, ".btn-group .btn:not(:first-child)": { "@layer components": { marginInlineStart: "-1px" } }, ".btn-loading": { "@layer components": { pointerEvents: "none", position: "relative", color: "transparent !important" } }, ".btn-loading::after": [{ "@layer components": { content: "''", position: "absolute", width: "1rem", height: "1rem", border: "2px solid var(--btn-text-color)", borderRightColor: "transparent", borderRadius: "var(--radius-full)", animation: "btn-spin 0.6s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes btn-spin": { to: { transform: "rotate(360deg)" } }, ".btn-icon": { "@layer components": { padding: "0.75rem", width: "2.5rem", height: "2.5rem", borderRadius: "var(--radius-full)" } }, ".btn-icon-sm": { "@layer components": { padding: "0.5rem", width: "2rem", height: "2rem" } }, ".btn-icon-lg": { "@layer components": { padding: "1rem", width: "3rem", height: "3rem" } }, ".btn-circle": { "@layer components": { "--btn-p": "0.625rem", "--btn-py": "0.625rem", borderRadius: "var(--radius-full)", aspectRatio: "1" } }, ".btn-square": { "@layer components": { "--btn-p": "0.625rem", "--btn-py": "0.625rem", aspectRatio: "1" } }, ".card": [{ "@layer components": { display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", borderRadius: "var(--radius-lg)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-sm)", transition: "box-shadow 150ms ease-in-out, transform 150ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".card:hover": { "@layer components": { boxShadow: "var(--shadow-md)" } }, ".card figure, \n .card-image": { "@layer components": { overflow: "hidden" } }, ".card figure img, \n .card-image img": { "@layer components": { width: "100%", height: "auto", objectFit: "cover" } }, ".card-body": { "@layer components": { "--card-p": "1.5rem", display: "flex", flexDirection: "column", gap: "0.5rem", padding: "var(--card-p)", flex: 1 } }, ".card-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", paddingInline: "var(--card-p, 1.5rem)", paddingBlock: "calc(var(--card-p, 1.5rem) * 0.5)", borderBlockEnd: "1px solid var(--color-outline-variant)" } }, ".card-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", paddingInline: "var(--card-p, 1.5rem)", paddingBlock: "calc(var(--card-p, 1.5rem) * 0.5)", borderBlockStart: "1px solid var(--color-outline-variant)", marginBlockStart: "auto" } }, ".card-title": { "@layer components": { fontSize: "1.25rem", fontWeight: 600, lineHeight: "1.75rem", color: "var(--color-on-surface)" } }, ".card-actions": { "@layer components": { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.5rem", marginBlockStart: "auto", paddingBlockStart: "0.5rem" } }, ".card-actions.justify-end": { "@layer components": { justifyContent: "flex-end" } }, ".card-actions.justify-start": { "@layer components": { justifyContent: "flex-start" } }, ".card-actions.justify-center": { "@layer components": { justifyContent: "center" } }, ".card-bordered": { "@layer components": { border: "1px solid var(--color-outline)", boxShadow: "none" } }, ".card-bordered:hover": { "@layer components": { boxShadow: "none", borderColor: "var(--color-outline-variant)" } }, ".card-compact .card-header, \n .card-compact .card-body, \n .card-compact .card-footer": { "@layer components": { "--card-p": "1rem" } }, ".card-compact .card-title": { "@layer components": { fontSize: "1rem" } }, ".card-side": { "@layer components": { flexDirection: "row" } }, ".card-side figure, \n .card-side .card-image": { "@layer components": { width: "40%", flexShrink: 0 } }, ".card-side figure img, \n .card-side .card-image img": { "@layer components": { height: "100%", objectFit: "cover" } }, ".card-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".card-primary .card-title": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".card-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".card-secondary .card-title": { "@layer components": { color: "var(--color-on-secondary-container)" } }, ".card-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".card-tertiary .card-title": { "@layer components": { color: "var(--color-on-tertiary-container)" } }, ".card-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".card-info .card-title": { "@layer components": { color: "var(--color-on-info-container)" } }, ".card-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".card-success .card-title": { "@layer components": { color: "var(--color-on-success-container)" } }, ".card-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".card-warning .card-title": { "@layer components": { color: "var(--color-on-warning-container)" } }, ".card-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".card-error .card-title": { "@layer components": { color: "var(--color-on-error-container)" } }, ".card-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".card-accent .card-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".card-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".card-neutral .card-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".card-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".card-base .card-title": { "@layer components": { color: "var(--color-base-content)" } }, ".card-glass": { "@layer components": { backgroundColor: "rgb(255 255 255 / 0.1)", backdropFilter: "blur(12px)", border: "1px solid rgb(255 255 255 / 0.2)" } }, ".card-elevated": { "@layer components": { boxShadow: "var(--shadow-lg)" } }, ".card-elevated:hover": { "@layer components": { boxShadow: "var(--shadow-xl)", transform: "translateY(-2px)" } }, ".card-interactive": { "@layer components": { cursor: "pointer" } }, ".card-interactive:active": { "@layer components": { transform: "scale(0.99)" } }, ".card-interactive:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".card-full-image": { "@layer components": { position: "relative" } }, ".card-full-image figure, \n .card-full-image .card-image": { "@layer components": { position: "absolute", inset: "0", zIndex: 0 } }, ".card-full-image .card-body": { "@layer components": { position: "relative", zIndex: 1, background: "linear-gradient(to top, color-mix(in srgb, var(--color-shadow) 70%, transparent), transparent)", color: "white", marginTop: "auto", minHeight: "50%" } }, ".card-full-image .card-title": { "@layer components": { color: "white" } }, ".input": { "@layer components": { display: "flex", width: "100%", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".input:focus": { "@layer components": { outline: "none" } }, ".input:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", outline: "none" } }, ".input:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".input-bordered": { "@layer components": { borderColor: "var(--color-outline)", backgroundColor: "var(--color-surface)" } }, ".input-bordered:hover:not(:disabled):not(:focus)": { "@layer components": { borderColor: "var(--color-outline-variant)" } }, ".input-primary": { "@layer components": { color: "var(--color-primary)" } }, ".input-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".input-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".input-info": { "@layer components": { color: "var(--color-info)" } }, ".input-success": { "@layer components": { color: "var(--color-success)" } }, ".input-warning": { "@layer components": { color: "var(--color-warning)" } }, ".input-error": { "@layer components": { color: "var(--color-error)" } }, ".input-accent": { "@layer components": { color: "var(--color-accent)" } }, ".input-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".input-base": { "@layer components": { color: "var(--color-base-content)" } }, ".input-xs": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-xs)", height: "1.75rem" } }, ".input-sm": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-xs)", height: "2.25rem" } }, ".input-lg": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem", borderRadius: "var(--radius-sm)", height: "3.5rem" } }, ".input-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".input-ghost:focus-visible": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".input-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".input-filled:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".input-filled.input-primary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)" } }, ".input-filled.input-secondary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-secondary)" } }, ".input-filled.input-tertiary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-tertiary)" } }, ".input-filled.input-info:focus-visible": { "@layer components": { borderBottomColor: "var(--color-info)" } }, ".input-filled.input-success:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".input-filled.input-warning:focus-visible": { "@layer components": { borderBottomColor: "var(--color-warning)" } }, ".input-filled.input-error:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".input-filled.input-accent:focus-visible": { "@layer components": { borderBottomColor: "var(--color-accent)" } }, ".input-filled.input-neutral:focus-visible": { "@layer components": { borderBottomColor: "var(--color-neutral)" } }, ".input-filled.input-base:focus-visible": { "@layer components": { borderBottomColor: "var(--color-base-content)" } }, ".input-group": { "@layer components": { display: "flex", alignItems: "stretch" } }, ".input-group > .input": { "@layer components": { flex: 1, borderRadius: "0" } }, ".input-group > .input:first-child": { "@layer components": { borderTopLeftRadius: "var(--radius-sm)", borderBottomLeftRadius: "var(--radius-sm)" } }, ".input-group > .input:last-child": { "@layer components": { borderTopRightRadius: "var(--radius-sm)", borderBottomRightRadius: "var(--radius-sm)" } }, ".input-group-text": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", padding: "0 1rem", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", border: "1px solid var(--color-outline)" } }, ".input-group-text:first-child": { "@layer components": { borderTopLeftRadius: "var(--radius-sm)", borderBottomLeftRadius: "var(--radius-sm)", borderRight: "none" } }, ".input-group-text:last-child": { "@layer components": { borderTopRightRadius: "var(--radius-sm)", borderBottomRightRadius: "var(--radius-sm)", borderLeft: "none" } }, ".file-input": { "@layer components": { display: "flex", width: "100%", padding: "0", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", overflow: "hidden", cursor: "pointer" } }, ".file-input::file-selector-button": { "@layer components": { padding: "0.75rem 1rem", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", border: "none", borderRight: "1px solid var(--color-outline)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".file-input::file-selector-button:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".file-input:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", outline: "none" } }, ".input, \n .input-filled, \n .file-input": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".form-control": [{ "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%", marginBottom: "1rem", color: "var(--color-on-surface)" } }, { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem" } }], ".label": { "@layer components": { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0.25rem 0" } }, ".label-text": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", paddingBottom: "0.25rem" } }, ".label-text-alt": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".checkbox": [{ "@layer components": { appearance: "none", width: "1.25rem", height: "1.25rem", border: "2px solid var(--color-outline)", borderRadius: "var(--radius-xs)", backgroundColor: "transparent", cursor: "pointer", transition: "all 150ms ease-in-out", position: "relative" } }, { "@layer components": { "--checkbox-size": "1.25rem", "--checkbox-color": "var(--color-primary)", "--checkbox-border-color": "var(--color-on-surface-variant)", color: "var(--color-on-surface)", position: "relative", display: "inline-grid", placeContent: "center", width: "var(--checkbox-size)", height: "var(--checkbox-size)", margin: "0", cursor: "pointer", appearance: "none", backgroundColor: "transparent", border: "2px solid var(--checkbox-border-color)", borderRadius: "var(--radius-xs)", transition: "background-color 150ms ease-in-out, border-color 150ms ease-in-out" } }], ".checkbox:hover": { "@layer components": { borderColor: "var(--color-primary)" } }, ".checkbox:checked": [{ "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, { "@layer components": { backgroundColor: "var(--checkbox-color)", borderColor: "var(--checkbox-color)" } }], ".checkbox:checked::after": { "@layer components": { content: "''", position: "absolute", left: "0.25rem", top: "0.0625rem", width: "0.375rem", height: "0.625rem", border: "solid var(--color-primary-content)", borderWidth: "0 2px 2px 0", transform: "rotate(45deg)" } }, ".checkbox:focus-visible": [{ "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--checkbox-color) 20%, transparent)" } }], ".checkbox:disabled": [{ "@layer components": { cursor: "not-allowed", opacity: 0.5 } }, { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }], ".checkbox-primary:checked": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".checkbox-secondary:checked": { "@layer components": { backgroundColor: "var(--color-secondary)", borderColor: "var(--color-secondary)" } }, ".checkbox-success:checked": { "@layer components": { backgroundColor: "var(--color-success)", borderColor: "var(--color-success)" } }, ".checkbox-tertiary:checked": { "@layer components": { backgroundColor: "var(--color-tertiary)", borderColor: "var(--color-tertiary)" } }, ".checkbox-info:checked": { "@layer components": { backgroundColor: "var(--color-info)", borderColor: "var(--color-info)" } }, ".checkbox-warning:checked": { "@layer components": { backgroundColor: "var(--color-warning)", borderColor: "var(--color-warning)" } }, ".checkbox-error:checked": { "@layer components": { backgroundColor: "var(--color-error)", borderColor: "var(--color-error)" } }, ".checkbox-accent:checked": { "@layer components": { backgroundColor: "var(--color-accent)", borderColor: "var(--color-accent)" } }, ".checkbox-accent:checked::after": { "@layer components": { borderColor: "var(--color-accent-content)" } }, ".checkbox-neutral:checked": { "@layer components": { backgroundColor: "var(--color-neutral)", borderColor: "var(--color-neutral)" } }, ".checkbox-neutral:checked::after": { "@layer components": { borderColor: "var(--color-neutral-content)" } }, ".checkbox-base:checked": { "@layer components": { backgroundColor: "var(--color-base-100)", borderColor: "var(--color-base-100)" } }, ".checkbox-base:checked::after": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".checkbox-xs": [{ "@layer components": { width: "0.875rem", height: "0.875rem" } }, { "@layer components": { "--checkbox-size": "0.875rem" } }], ".checkbox-sm": [{ "@layer components": { width: "1rem", height: "1rem" } }, { "@layer components": { "--checkbox-size": "1rem" } }], ".checkbox-lg": [{ "@layer components": { width: "1.5rem", height: "1.5rem" } }, { "@layer components": { "--checkbox-size": "1.5rem" } }], ".radio": [{ "@layer components": { appearance: "none", width: "1.25rem", height: "1.25rem", border: "2px solid var(--color-outline)", borderRadius: "var(--radius-full)", backgroundColor: "transparent", cursor: "pointer", transition: "all 150ms ease-in-out", position: "relative" } }, { "@layer components": { "--radio-size": "1.25rem", "--radio-color": "var(--color-primary)", "--radio-border-color": "var(--color-on-surface-variant)", color: "var(--color-on-surface)", position: "relative", display: "inline-grid", placeContent: "center", width: "var(--radio-size)", height: "var(--radio-size)", margin: "0", cursor: "pointer", appearance: "none", backgroundColor: "transparent", border: "2px solid var(--radio-border-color)", borderRadius: "var(--radius-full)", transition: "border-color 150ms ease-in-out" } }], ".radio:hover": { "@layer components": { borderColor: "var(--color-primary)" } }, ".radio:checked": [{ "@layer components": { borderColor: "var(--color-primary)" } }, { "@layer components": { borderColor: "var(--radio-color)" } }], ".radio:checked::after": { "@layer components": { content: "''", position: "absolute", left: "50%", top: "50%", width: "0.5rem", height: "0.5rem", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)", transform: "translate(-50%, -50%)" } }, ".radio:focus-visible": [{ "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--radio-color) 20%, transparent)" } }], ".radio:disabled": [{ "@layer components": { cursor: "not-allowed", opacity: 0.5 } }, { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }], ".radio-primary:checked": { "@layer components": { borderColor: "var(--color-primary)" } }, ".radio-primary:checked::after": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".radio-secondary:checked": { "@layer components": { borderColor: "var(--color-secondary)" } }, ".radio-secondary:checked::after": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".radio-tertiary:checked": { "@layer components": { borderColor: "var(--color-tertiary)" } }, ".radio-tertiary:checked::after": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".radio-info:checked": { "@layer components": { borderColor: "var(--color-info)" } }, ".radio-info:checked::after": { "@layer components": { backgroundColor: "var(--color-info)" } }, ".radio-success:checked": { "@layer components": { borderColor: "var(--color-success)" } }, ".radio-success:checked::after": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".radio-warning:checked": { "@layer components": { borderColor: "var(--color-warning)" } }, ".radio-warning:checked::after": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".radio-error:checked": { "@layer components": { borderColor: "var(--color-error)" } }, ".radio-error:checked::after": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".radio-accent:checked": { "@layer components": { borderColor: "var(--color-accent)" } }, ".radio-accent:checked::after": { "@layer components": { backgroundColor: "var(--color-accent)" } }, ".radio-neutral:checked": { "@layer components": { borderColor: "var(--color-neutral)" } }, ".radio-neutral:checked::after": { "@layer components": { backgroundColor: "var(--color-neutral)" } }, ".radio-base:checked": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".radio-base:checked::after": { "@layer components": { backgroundColor: "var(--color-base-content)" } }, ".toggle": { "@layer components": { appearance: "none", width: "3rem", height: "1.5rem", borderRadius: "var(--radius-lg)", backgroundColor: "var(--color-surface-container-highest)", cursor: "pointer", transition: "all 150ms ease-in-out", position: "relative" } }, ".toggle::after": { "@layer components": { content: "''", position: "absolute", left: "0.25rem", top: "50%", transform: "translateY(-50%)", width: "1rem", height: "1rem", backgroundColor: "var(--color-on-surface-variant)", borderRadius: "var(--radius-full)", transition: "all 150ms ease-in-out" } }, ".toggle:checked": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".toggle:checked::after": { "@layer components": { left: "calc(100% - 1.25rem)", backgroundColor: "var(--color-primary-content)" } }, ".toggle:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toggle:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5 } }, ".toggle-xs": { "@layer components": { width: "2rem", height: "1rem" } }, ".toggle-xs::after": { "@layer components": { width: "0.625rem", height: "0.625rem", left: "0.1875rem" } }, ".toggle-xs:checked::after": { "@layer components": { left: "calc(100% - 0.8125rem)" } }, ".toggle-sm": { "@layer components": { width: "2.5rem", height: "1.25rem" } }, ".toggle-sm::after": { "@layer components": { width: "0.75rem", height: "0.75rem" } }, ".toggle-lg": { "@layer components": { width: "4rem", height: "2rem" } }, ".toggle-lg::after": { "@layer components": { width: "1.5rem", height: "1.5rem" } }, ".select": [{ "@layer components": { appearance: "none", width: "100%", padding: "0.75rem 2.5rem 0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: "right 0.75rem center", backgroundRepeat: "no-repeat", backgroundSize: "1.25rem", transition: "border-color 150ms ease-in-out" } }, { "@layer components": { display: "block", width: "100%", padding: "0.75rem 2.5rem 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)", outline: "none", cursor: "pointer", appearance: "none", backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: "right 0.75rem center", backgroundRepeat: "no-repeat", backgroundSize: "1.25rem 1.25rem", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".select:focus": [{ "@layer components": { outline: "none" } }, { "@layer components": { outline: "none" } }], ".select:focus-visible": [{ "@layer components": { borderColor: "var(--color-primary)", outline: "none" } }, { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }], ".select:disabled": [{ "@layer components": { cursor: "not-allowed", opacity: 0.5 } }, { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }], ".select-bordered": { "@layer components": { borderColor: "var(--color-outline)" } }, ".select-primary:focus-visible": { "@layer components": { borderColor: "var(--color-primary)" } }, ".select-secondary:focus-visible": { "@layer components": { borderColor: "var(--color-secondary)" } }, ".select-tertiary:focus-visible": { "@layer components": { borderColor: "var(--color-tertiary)" } }, ".select-info:focus-visible": { "@layer components": { borderColor: "var(--color-info)" } }, ".select-success:focus-visible": { "@layer components": { borderColor: "var(--color-success)" } }, ".select-warning:focus-visible": { "@layer components": { borderColor: "var(--color-warning)" } }, ".select-error:focus-visible": { "@layer components": { borderColor: "var(--color-error)" } }, ".select-accent:focus-visible": { "@layer components": { borderColor: "var(--color-accent)" } }, ".select-neutral:focus-visible": { "@layer components": { borderColor: "var(--color-neutral)" } }, ".select-base:focus-visible": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".select-xs": [{ "@layer components": { padding: "0.375rem 2rem 0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem" } }, { "@layer components": { padding: "0.375rem 2rem 0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-xs)", backgroundSize: "1rem 1rem" } }], ".select-sm": [{ "@layer components": { padding: "0.5rem 2.25rem 0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem" } }, { "@layer components": { padding: "0.5rem 2.25rem 0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-xs)", backgroundSize: "1.125rem 1.125rem" } }], ".select-lg": [{ "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem" } }, { "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem", borderRadius: "var(--radius-sm)", backgroundSize: "1.5rem 1.5rem", backgroundPosition: "right 1rem center" } }], ".textarea": [{ "@layer components": { width: "100%", minHeight: "6rem", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", resize: "vertical", fieldSizing: "content", transition: "border-color 150ms ease-in-out" } }, { "@layer components": { display: "block", width: "100%", minHeight: "6rem", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", fontFamily: "inherit", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", outline: "none", resize: "vertical", fieldSizing: "content", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }], ".textarea::placeholder": [{ "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }], ".textarea:focus": [{ "@layer components": { outline: "none" } }, { "@layer components": { outline: "none" } }], ".textarea:focus-visible": [{ "@layer components": { borderColor: "var(--color-primary)" } }, { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }], ".textarea:disabled": [{ "@layer components": { cursor: "not-allowed", opacity: 0.5, resize: "none" } }, { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)", resize: "none" } }], ".textarea-bordered": { "@layer components": { borderColor: "var(--color-outline)" } }, ".form-control.error .input, \n .form-control.error .select, \n .form-control.error .textarea, \n .input-error, \n .select-error, \n .textarea-error": { "@layer components": { borderColor: "var(--color-error)" } }, ".form-control.error .input:focus-visible, \n .form-control.error .select:focus-visible, \n .form-control.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-control.error .label-text": { "@layer components": { color: "var(--color-error)" } }, ".form-control.success .input, \n .form-control.success .select, \n .form-control.success .textarea, \n .input-success, \n .select-success, \n .textarea-success": { "@layer components": { borderColor: "var(--color-success)" } }, ".form-control.success .input:focus-visible, \n .form-control.success .select:focus-visible, \n .form-control.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-control.success .label-text": { "@layer components": { color: "var(--color-success)" } }, ".form-control.warning .input, \n .form-control.warning .select, \n .form-control.warning .textarea, \n .input-warning, \n .select-warning, \n .textarea-warning": { "@layer components": { borderColor: "var(--color-warning)" } }, ".form-control.warning .input:focus-visible, \n .form-control.warning .select:focus-visible, \n .form-control.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-control.warning .label-text": { "@layer components": { color: "var(--color-warning)" } }, ".form-control.info .input, \n .form-control.info .select, \n .form-control.info .textarea, \n .input-info, \n .select-info, \n .textarea-info": { "@layer components": { borderColor: "var(--color-info)" } }, ".form-control.info .input:focus-visible, \n .form-control.info .select:focus-visible, \n .form-control.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-control.info .label-text": { "@layer components": { color: "var(--color-info)" } }, ".helper-text": [{ "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginTop: "0.25rem" } }, { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", marginTop: "0.25rem" } }], ".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)" } }, ".label-text.required::after": { "@layer components": { content: "' *'", color: "var(--color-error)" } }, ".range": { "@layer components": { appearance: "none", width: "100%", height: "0.5rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-xs)", cursor: "pointer" } }, ".range::-webkit-slider-thumb": { "@layer components": { appearance: "none", width: "1.25rem", height: "1.25rem", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "transform 150ms ease-in-out" } }, ".range::-webkit-slider-thumb:hover": { "@layer components": { transform: "scale(1.1)" } }, ".range::-moz-range-thumb": { "@layer components": { width: "1.25rem", height: "1.25rem", backgroundColor: "var(--color-primary)", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer" } }, ".range:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".form-control, \n .input, \n .select, \n .textarea, \n .range, \n .label-float .form-control ~ label": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".navbar": { "@layer components": { display: "flex", alignItems: "center", width: "100%", minHeight: "4rem", padding: "0.5rem 1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".navbar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".navbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".navbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".navbar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".navbar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".navbar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".navbar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".navbar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".navbar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".navbar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".navbar a": { "@layer components": { color: "inherit" } }, ".navbar-start": { "@layer components": { display: "flex", alignItems: "center", flex: 1, justifyContent: "flex-start", gap: "0.5rem" } }, ".navbar-center": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, gap: "0.5rem" } }, ".navbar-end": { "@layer components": { display: "flex", alignItems: "center", flex: 1, justifyContent: "flex-end", gap: "0.5rem" } }, ".menu": { "@layer components": { display: "flex", flexWrap: "wrap", listStyle: "none", margin: "0", padding: "0.5rem", gap: "0.25rem" } }, ".menu[popover]": { "@layer components": { display: "none", position: "absolute", inset: "auto", margin: "0.5rem", minWidth: "12rem", maxWidth: "calc(100vw - 1rem)", maxHeight: "calc(100dvh - 1rem)", overflow: "auto", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", positionArea: "bottom", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", opacity: 0, transform: "scale(0.95)", transition: `opacity 150ms ease-out,
|
|
150
|
+
var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem", "--btn-py": "0.625rem", "--btn-text-color": "var(--color-on-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", paddingInline: "var(--btn-p)", paddingBlock: "var(--btn-py)", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", textAlign: "center", textDecoration: "none", whiteSpace: "nowrap", verticalAlign: "middle", cursor: "pointer", userSelect: "none", border: "1px solid transparent", borderRadius: "var(--radius-sm)", transition: "all 150ms ease-in-out", backgroundColor: "var(--color-surface-container)", color: "var(--btn-text-color)" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".btn:hover": { "@layer components": { filter: "brightness(0.95)" } }, ".btn:active": { "@layer components": { transform: "scale(0.98)" } }, ".btn:focus": { "@layer components": { outline: "none" } }, ".btn:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".btn:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, pointerEvents: "none" } }, ".btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary-content)", backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".btn-primary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary), black 10%)", borderColor: "color-mix(in oklch, var(--color-primary), black 10%)", filter: "none" } }, ".btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary-content)", backgroundColor: "var(--color-secondary)", borderColor: "var(--color-secondary)" } }, ".btn-secondary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary), black 10%)", borderColor: "color-mix(in oklch, var(--color-secondary), black 10%)", filter: "none" } }, ".btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary-content)", backgroundColor: "var(--color-tertiary)", borderColor: "var(--color-tertiary)" } }, ".btn-tertiary:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary), black 10%)", borderColor: "color-mix(in oklch, var(--color-tertiary), black 10%)", filter: "none" } }, ".btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent-content)", backgroundColor: "var(--color-accent)", borderColor: "var(--color-accent)" } }, ".btn-accent:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent), black 10%)", borderColor: "color-mix(in oklch, var(--color-accent), black 10%)", filter: "none" } }, ".btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral-content)", backgroundColor: "var(--color-neutral)", borderColor: "var(--color-neutral)" } }, ".btn-neutral:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral), black 10%)", borderColor: "color-mix(in oklch, var(--color-neutral), black 10%)", filter: "none" } }, ".btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-100)", borderColor: "var(--color-base-100)" } }, ".btn-base:hover": { "@layer components": { backgroundColor: "var(--color-base-200)", borderColor: "var(--color-base-200)", filter: "none" } }, ".btn-info": { "@layer components": { "--btn-text-color": "var(--color-info-content)", backgroundColor: "var(--color-info)", borderColor: "var(--color-info)" } }, ".btn-info:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-info), black 10%)", borderColor: "color-mix(in oklch, var(--color-info), black 10%)", filter: "none" } }, ".btn-success": { "@layer components": { "--btn-text-color": "var(--color-success-content)", backgroundColor: "var(--color-success)", borderColor: "var(--color-success)" } }, ".btn-success:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-success), black 10%)", borderColor: "color-mix(in oklch, var(--color-success), black 10%)", filter: "none" } }, ".btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning-content)", backgroundColor: "var(--color-warning)", borderColor: "var(--color-warning)" } }, ".btn-warning:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-warning), black 10%)", borderColor: "color-mix(in oklch, var(--color-warning), black 10%)", filter: "none" } }, ".btn-error": { "@layer components": { "--btn-text-color": "var(--color-error-content)", backgroundColor: "var(--color-error)", borderColor: "var(--color-error)" } }, ".btn-error:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-error), black 10%)", borderColor: "color-mix(in oklch, var(--color-error), black 10%)", filter: "none" } }, ".btn-outline, \n .btn-outlined": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "transparent", borderColor: "var(--color-outline)" } }, ".btn-outline:hover, \n .btn-outlined:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", filter: "none" } }, ".btn-outline.btn-primary, \n .btn-outlined.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary)", borderColor: "currentColor" } }, ".btn-outline.btn-primary:hover, \n .btn-outlined.btn-primary:hover": { "@layer components": { "--btn-text-color": "var(--color-primary-content)", backgroundColor: "var(--color-primary)" } }, ".btn-outline.btn-secondary, \n .btn-outlined.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary)", borderColor: "currentColor" } }, ".btn-outline.btn-secondary:hover, \n .btn-outlined.btn-secondary:hover": { "@layer components": { "--btn-text-color": "var(--color-secondary-content)", backgroundColor: "var(--color-secondary)" } }, ".btn-outline.btn-tertiary, \n .btn-outlined.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary)", borderColor: "currentColor" } }, ".btn-outline.btn-tertiary:hover, \n .btn-outlined.btn-tertiary:hover": { "@layer components": { "--btn-text-color": "var(--color-tertiary-content)", backgroundColor: "var(--color-tertiary)" } }, ".btn-outline.btn-accent, \n .btn-outlined.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent)", borderColor: "currentColor" } }, ".btn-outline.btn-accent:hover, \n .btn-outlined.btn-accent:hover": { "@layer components": { "--btn-text-color": "var(--color-accent-content)", backgroundColor: "var(--color-accent)" } }, ".btn-outline.btn-neutral, \n .btn-outlined.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral)", borderColor: "currentColor" } }, ".btn-outline.btn-neutral:hover, \n .btn-outlined.btn-neutral:hover": { "@layer components": { "--btn-text-color": "var(--color-neutral-content)", backgroundColor: "var(--color-neutral)" } }, ".btn-outline.btn-base, \n .btn-outlined.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)", borderColor: "currentColor" } }, ".btn-outline.btn-base:hover, \n .btn-outlined.btn-base:hover": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-100)" } }, ".btn-outline.btn-info, \n .btn-outlined.btn-info": { "@layer components": { "--btn-text-color": "var(--color-info)", borderColor: "currentColor" } }, ".btn-outline.btn-info:hover, \n .btn-outlined.btn-info:hover": { "@layer components": { "--btn-text-color": "var(--color-info-content)", backgroundColor: "var(--color-info)" } }, ".btn-outline.btn-success, \n .btn-outlined.btn-success": { "@layer components": { "--btn-text-color": "var(--color-success)", borderColor: "currentColor" } }, ".btn-outline.btn-success:hover, \n .btn-outlined.btn-success:hover": { "@layer components": { "--btn-text-color": "var(--color-success-content)", backgroundColor: "var(--color-success)" } }, ".btn-outline.btn-warning, \n .btn-outlined.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning)", borderColor: "currentColor" } }, ".btn-outline.btn-warning:hover, \n .btn-outlined.btn-warning:hover": { "@layer components": { "--btn-text-color": "var(--color-warning-content)", backgroundColor: "var(--color-warning)" } }, ".btn-outline.btn-error, \n .btn-outlined.btn-error": { "@layer components": { "--btn-text-color": "var(--color-error)", borderColor: "currentColor" } }, ".btn-outline.btn-error:hover, \n .btn-outlined.btn-error:hover": { "@layer components": { "--btn-text-color": "var(--color-error-content)", backgroundColor: "var(--color-error)" } }, ".btn-ghost": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "transparent", borderColor: "transparent" } }, ".btn-ghost:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", filter: "none" } }, ".btn-ghost.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary)" } }, ".btn-ghost.btn-primary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)" } }, ".btn-ghost.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary)" } }, ".btn-ghost.btn-secondary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)" } }, ".btn-ghost.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary)" } }, ".btn-ghost.btn-tertiary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)" } }, ".btn-ghost.btn-info": { "@layer components": { "--btn-text-color": "var(--color-info)" } }, ".btn-ghost.btn-success": { "@layer components": { "--btn-text-color": "var(--color-success)" } }, ".btn-ghost.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning)" } }, ".btn-ghost.btn-error": { "@layer components": { "--btn-text-color": "var(--color-error)" } }, ".btn-ghost.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent)" } }, ".btn-ghost.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral)" } }, ".btn-ghost.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)" } }, ".btn-ghost.btn-accent:hover": { "@layer components": { "--btn-text-color": "var(--color-accent)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".btn-ghost.btn-neutral:hover": { "@layer components": { "--btn-text-color": "var(--color-neutral)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".btn-ghost.btn-base:hover": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-200)" } }, ".btn-ghost.btn-info:hover": { "@layer components": { "--btn-text-color": "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)" } }, ".btn-ghost.btn-success:hover": { "@layer components": { "--btn-text-color": "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)" } }, ".btn-ghost.btn-warning:hover": { "@layer components": { "--btn-text-color": "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)" } }, ".btn-ghost.btn-error:hover": { "@layer components": { "--btn-text-color": "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)" } }, ".btn-text": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "transparent", borderColor: "transparent" } }, ".btn-text:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", filter: "none" } }, ".btn-text.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-primary)" } }, ".btn-text.btn-primary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)" } }, ".btn-text.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-secondary)" } }, ".btn-text.btn-secondary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)" } }, ".btn-text.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-tertiary)" } }, ".btn-text.btn-tertiary:hover": { "@layer components": { "--btn-text-color": "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)" } }, ".btn-text.btn-info": { "@layer components": { "--btn-text-color": "var(--color-info)" } }, ".btn-text.btn-success": { "@layer components": { "--btn-text-color": "var(--color-success)" } }, ".btn-text.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-warning)" } }, ".btn-text.btn-error": { "@layer components": { "--btn-text-color": "var(--color-error)" } }, ".btn-text.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-accent)" } }, ".btn-text.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-neutral)" } }, ".btn-text.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)" } }, ".btn-text.btn-accent:hover": { "@layer components": { "--btn-text-color": "var(--color-accent)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".btn-text.btn-neutral:hover": { "@layer components": { "--btn-text-color": "var(--color-neutral)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".btn-text.btn-base:hover": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-200)" } }, ".btn-text.btn-info:hover": { "@layer components": { "--btn-text-color": "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)" } }, ".btn-text.btn-success:hover": { "@layer components": { "--btn-text-color": "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)" } }, ".btn-text.btn-warning:hover": { "@layer components": { "--btn-text-color": "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)" } }, ".btn-text.btn-error:hover": { "@layer components": { "--btn-text-color": "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)" } }, ".btn-tonal": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)", borderColor: "transparent" } }, ".btn-tonal:hover": { "@layer components": { filter: "brightness(0.95)" } }, ".btn-tonal.btn-primary": { "@layer components": { "--btn-text-color": "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)" } }, ".btn-tonal.btn-secondary": { "@layer components": { "--btn-text-color": "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)" } }, ".btn-tonal.btn-tertiary": { "@layer components": { "--btn-text-color": "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)" } }, ".btn-tonal.btn-accent": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".btn-tonal.btn-neutral": { "@layer components": { "--btn-text-color": "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".btn-tonal.btn-base": { "@layer components": { "--btn-text-color": "var(--color-base-content)", backgroundColor: "var(--color-base-200)" } }, ".btn-tonal.btn-info": { "@layer components": { "--btn-text-color": "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)" } }, ".btn-tonal.btn-success": { "@layer components": { "--btn-text-color": "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)" } }, ".btn-tonal.btn-warning": { "@layer components": { "--btn-text-color": "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)" } }, ".btn-tonal.btn-error": { "@layer components": { "--btn-text-color": "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)" } }, ".btn-xs": { "@layer components": { "--btn-p": "0.5rem", "--btn-py": "0.25rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-xs)" } }, ".btn-sm": { "@layer components": { "--btn-p": "0.75rem", "--btn-py": "0.375rem", fontSize: "0.8125rem", lineHeight: "1.125rem", borderRadius: "var(--radius-xs)" } }, ".btn-md": { "@layer components": { "--btn-p": "1.25rem", "--btn-py": "0.625rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-sm)" } }, ".btn-lg": { "@layer components": { "--btn-p": "1.75rem", "--btn-py": "0.875rem", fontSize: "1rem", lineHeight: "1.5rem", borderRadius: "var(--radius-sm)" } }, ".btn-block": { "@layer components": { display: "flex", width: "100%" } }, ".btn-group": { "@layer components": { display: "inline-flex" } }, ".btn-group .btn": { "@layer components": { borderRadius: "0" } }, ".btn-group .btn:first-child": { "@layer components": { borderTopLeftRadius: "var(--radius-sm)", borderBottomLeftRadius: "var(--radius-sm)" } }, ".btn-group .btn:last-child": { "@layer components": { borderTopRightRadius: "var(--radius-sm)", borderBottomRightRadius: "var(--radius-sm)" } }, ".btn-group .btn:not(:first-child)": { "@layer components": { marginInlineStart: "-1px" } }, ".btn-loading": { "@layer components": { pointerEvents: "none", position: "relative", color: "transparent !important" } }, ".btn-loading::after": [{ "@layer components": { content: "''", position: "absolute", width: "1rem", height: "1rem", border: "2px solid var(--btn-text-color)", borderRightColor: "transparent", borderRadius: "var(--radius-full)", animation: "btn-spin 0.6s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes btn-spin": { to: { transform: "rotate(360deg)" } }, ".btn-icon": { "@layer components": { padding: "0.75rem", width: "2.5rem", height: "2.5rem", borderRadius: "var(--radius-full)" } }, ".btn-icon-sm": { "@layer components": { padding: "0.5rem", width: "2rem", height: "2rem" } }, ".btn-icon-lg": { "@layer components": { padding: "1rem", width: "3rem", height: "3rem" } }, ".btn-circle": { "@layer components": { "--btn-p": "0.625rem", "--btn-py": "0.625rem", borderRadius: "var(--radius-full)", aspectRatio: "1" } }, ".btn-square": { "@layer components": { "--btn-p": "0.625rem", "--btn-py": "0.625rem", aspectRatio: "1" } }, ".card": [{ "@layer components": { display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", borderRadius: "var(--radius-lg)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-sm)", transition: "box-shadow 150ms ease-in-out, transform 150ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".card:hover": { "@layer components": { boxShadow: "var(--shadow-md)" } }, ".card figure, \n .card-image": { "@layer components": { overflow: "hidden" } }, ".card figure img, \n .card-image img": { "@layer components": { width: "100%", height: "auto", objectFit: "cover" } }, ".card-body": { "@layer components": { minInlineSize: "0", overflowWrap: "anywhere", "--card-p": "1.5rem", display: "flex", flexDirection: "column", gap: "0.5rem", padding: "var(--card-p)", flex: 1 } }, ".card-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", paddingInline: "var(--card-p, 1.5rem)", paddingBlock: "calc(var(--card-p, 1.5rem) * 0.5)", borderBlockEnd: "1px solid var(--color-outline-variant)" } }, ".card-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", paddingInline: "var(--card-p, 1.5rem)", paddingBlock: "calc(var(--card-p, 1.5rem) * 0.5)", borderBlockStart: "1px solid var(--color-outline-variant)", marginBlockStart: "auto" } }, ".card-title": { "@layer components": { fontSize: "1.25rem", fontWeight: 600, lineHeight: "1.75rem", color: "var(--color-on-surface)" } }, ".card-actions": { "@layer components": { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.5rem", marginBlockStart: "auto", paddingBlockStart: "0.5rem" } }, ".card-actions.justify-end": { "@layer components": { justifyContent: "flex-end" } }, ".card-actions.justify-start": { "@layer components": { justifyContent: "flex-start" } }, ".card-actions.justify-center": { "@layer components": { justifyContent: "center" } }, ".card-bordered": { "@layer components": { border: "1px solid var(--color-outline)", boxShadow: "none" } }, ".card-outlined": { "@layer components": { border: "1px solid var(--color-outline)", boxShadow: "none" } }, ".card-outlined:hover": { "@layer components": { boxShadow: "none" } }, ".card-filled": { "@layer components": { background: "var(--color-surface-container-highest)", boxShadow: "none" } }, ".card-lowest": { "@layer components": { background: "var(--color-surface-container-lowest)", boxShadow: "none" } }, ".card-low": { "@layer components": { background: "var(--color-surface-container-low)", boxShadow: "var(--shadow-sm)" } }, ".card-default": { "@layer components": { background: "var(--color-surface-container)", boxShadow: "var(--shadow-md)" } }, ".card-high": { "@layer components": { background: "var(--color-surface-container-high)", boxShadow: "var(--shadow-lg)" } }, ".card-highest": { "@layer components": { background: "var(--color-surface-container-highest)", boxShadow: "var(--shadow-xl)" } }, ".card-subtitle": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".card-comfortable .card-body": { "@layer components": { "--card-p": "2rem" } }, ".card-bordered:hover": { "@layer components": { boxShadow: "none", borderColor: "var(--color-outline-variant)" } }, ".card-compact .card-header, \n .card-compact .card-body, \n .card-compact .card-footer": { "@layer components": { "--card-p": "1rem" } }, ".card-compact .card-title": { "@layer components": { fontSize: "1rem" } }, ".card-side": { "@layer components": { flexDirection: "row" } }, ".card-side figure, \n .card-side .card-image": { "@layer components": { width: "40%", flexShrink: 0 } }, ".card-side figure img, \n .card-side .card-image img": { "@layer components": { height: "100%", objectFit: "cover" } }, ".card-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".card-primary .card-title": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".card-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".card-secondary .card-title": { "@layer components": { color: "var(--color-on-secondary-container)" } }, ".card-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".card-tertiary .card-title": { "@layer components": { color: "var(--color-on-tertiary-container)" } }, ".card-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".card-info .card-title": { "@layer components": { color: "var(--color-on-info-container)" } }, ".card-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".card-success .card-title": { "@layer components": { color: "var(--color-on-success-container)" } }, ".card-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".card-warning .card-title": { "@layer components": { color: "var(--color-on-warning-container)" } }, ".card-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".card-error .card-title": { "@layer components": { color: "var(--color-on-error-container)" } }, ".card-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".card-accent .card-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".card-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".card-neutral .card-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".card-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".card-base .card-title": { "@layer components": { color: "var(--color-base-content)" } }, ".card-glass": { "@layer components": { backgroundColor: "rgb(255 255 255 / 0.1)", backdropFilter: "blur(12px)", border: "1px solid rgb(255 255 255 / 0.2)" } }, ".card-elevated": { "@layer components": { boxShadow: "var(--shadow-lg)" } }, ".card-elevated:hover": { "@layer components": { boxShadow: "var(--shadow-xl)", transform: "translateY(-2px)" } }, ".card-interactive": { "@layer components": { cursor: "pointer" } }, ".card-interactive:active": { "@layer components": { transform: "scale(0.99)" } }, ".card-interactive:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".card-full-image": { "@layer components": { position: "relative" } }, ".card-full-image figure, \n .card-full-image .card-image": { "@layer components": { position: "absolute", inset: "0", zIndex: 0 } }, ".card-full-image .card-body": { "@layer components": { position: "relative", zIndex: 1, background: "linear-gradient(to top, color-mix(in srgb, var(--color-shadow) 70%, transparent), transparent)", color: "white", marginTop: "auto", minHeight: "50%" } }, ".card-full-image .card-title": { "@layer components": { color: "white" } }, ":is(.form-group-info, .form-control.info)": { "@layer components": { "--dm-validation-color": "var(--color-info)" } }, ":is(.form-group-warning, .form-control.warning)": { "@layer components": { "--dm-validation-color": "var(--color-warning)" } }, ":is(.form-group-success, .form-control.success)": { "@layer components": { "--dm-validation-color": "var(--color-success)" } }, ':is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :valid, .validate:valid, .validator.validator-success:user-valid):not([aria-invalid="true"]):not(:where(.form-group-error *, .form-control.error *)):not(:disabled)': { "@layer components": { "--dm-validation-color": "var(--color-success)", "--dm-validation-content": "var(--color-success-content)" } }, ":is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :invalid, .validate:invalid, .validator:user-invalid):not(:disabled)": { "@layer components": { "--dm-validation-color": "var(--color-error)", "--dm-validation-content": "var(--color-error-content)" } }, ":is(.form-group-error, .form-control.error)": { "@layer components": { "--dm-validation-color": "var(--color-error)", "--dm-validation-content": "var(--color-error-content)" } }, ':is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .form-group-error *, .form-control.error *):not(:disabled):is(:focus, :not(:focus))': { "@layer components": { "--dm-validation-color": "var(--color-error)", "--dm-validation-content": "var(--color-error-content)" } }, ':is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled)': { "@layer components": { color: "var(--dm-validation-color)", borderColor: "var(--dm-validation-color)", "--checkbox-color": "var(--dm-validation-color)", "--radio-color": "var(--dm-validation-color)", "--switch-color": "var(--dm-validation-color)", "--switch-content-color": "var(--dm-validation-content, var(--color-primary-content))", "--toggle-color": "var(--dm-validation-color)" } }, ':is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled):focus': { "@layer components": { borderColor: "var(--dm-validation-color)", boxShadow: "0 0 0 3px color-mix(in oklch, var(--dm-validation-color) 20%, transparent)" } }, ":is(.form-group-error, .form-control.error) :is(.form-label, .label-text)": { "@layer components": { color: "var(--color-error)" } }, ":is(.form-group-success, .form-control.success) :is(.form-label, .label-text)": { "@layer components": { color: "var(--color-success)" } }, ":is(.form-group-warning, .form-control.warning) :is(.form-label, .label-text)": { "@layer components": { color: "var(--color-warning)" } }, ":is(.form-group-info, .form-control.info) :is(.form-label, .label-text)": { "@layer components": { color: "var(--color-info)" } }, ".validator-hint": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".validator-error": { "@layer components": { display: "none", fontSize: "0.75rem", color: "var(--color-error)" } }, ".otp-code ~ .validator-error": { "@layer components": { display: "block", visibility: "hidden" } }, ':is(.form-group, .form-control):has(:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)) > .validator-error, \n :is(.form-group-error, .form-control.error) > .validator-error': { "@layer components": { display: "block", visibility: "visible" } }, ":is(input, select, textarea):is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):focus-visible": { "@layer components": { "@media (forced-colors: active)": { outline: "2px solid Highlight", outlineOffset: "2px" } } }, "input:is(.checkbox, .radio, .switch, .toggle)": { "@layer components": { "@media (forced-colors: active)": { appearance: "auto" } } }, "input:is(.checkbox, .radio, .switch, .toggle)::before, \n input:is(.checkbox, .radio, .switch, .toggle)::after": { "@layer components": { "@media (forced-colors: active)": { content: "none" } } }, ".file-input": { "@layer components": { display: "block", boxSizing: "border-box", width: "100%", minWidth: "0", padding: "0", font: "inherit", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer" } }, ".file-input::file-selector-button": { "@layer components": { padding: "0.75rem 1rem", marginInlineEnd: "0.75rem", font: "inherit", color: "inherit", backgroundColor: "var(--color-surface-container)", border: "none", borderInlineEnd: "1px solid currentColor", cursor: "inherit" } }, ".file-input:hover:not(:disabled)::file-selector-button": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".file-input:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".file-input:disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".file-input-xs::file-selector-button": { "@layer components": { padding: "0.375rem 0.625rem" } }, ".file-input-sm::file-selector-button": { "@layer components": { padding: "0.5rem 0.75rem" } }, ".file-input-lg::file-selector-button": { "@layer components": { padding: "1rem 1.25rem" } }, ".file-input-primary": { "@layer components": { color: "var(--color-primary)" } }, ".file-input-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".file-input-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".file-input-info": { "@layer components": { color: "var(--color-info)" } }, ".file-input-success": { "@layer components": { color: "var(--color-success)" } }, ".file-input-warning": { "@layer components": { color: "var(--color-warning)" } }, ".file-input-error": { "@layer components": { color: "var(--color-error)" } }, ".file-input-ghost": { "@layer components": { borderColor: "transparent" } }, ".input": { "@layer components": { boxSizing: "border-box", minWidth: "0", display: "flex", width: "100%", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".input:focus": { "@layer components": { outline: "none" } }, ".input:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", outline: "none" } }, ".input:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".input-outlined": { "@layer components": { backgroundColor: "transparent", borderColor: "var(--color-outline)" } }, ".input-bordered": { "@layer components": { borderColor: "var(--color-outline)", backgroundColor: "var(--color-surface)" } }, ".input-bordered:hover:not(:disabled):not(:focus)": { "@layer components": { borderColor: "var(--color-outline-variant)" } }, ".input-primary": { "@layer components": { color: "var(--color-primary)" } }, ".input-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".input-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".input-info": { "@layer components": { color: "var(--color-info)" } }, ".input-success": { "@layer components": { color: "var(--color-success)" } }, ".input-warning": { "@layer components": { color: "var(--color-warning)" } }, ".input-error": { "@layer components": { color: "var(--color-error)" } }, ".input-accent": { "@layer components": { color: "var(--color-accent)" } }, ".input-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".input-base": { "@layer components": { color: "var(--color-base-content)" } }, ".input-xs": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-xs)", height: "1.75rem" } }, ".input-sm": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-xs)", height: "2.25rem" } }, ".input-lg": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem", borderRadius: "var(--radius-sm)", height: "3.5rem" } }, ".input-md": { "@layer components": { height: "3rem" } }, ".input-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".input-ghost:focus-visible": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".input-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".input-filled:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".input-filled.input-primary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)" } }, ".input-filled.input-secondary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-secondary)" } }, ".input-filled.input-tertiary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-tertiary)" } }, ".input-filled.input-info:focus-visible": { "@layer components": { borderBottomColor: "var(--color-info)" } }, ".input-filled.input-success:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".input-filled.input-warning:focus-visible": { "@layer components": { borderBottomColor: "var(--color-warning)" } }, ".input-filled.input-error:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".input-filled.input-accent:focus-visible": { "@layer components": { borderBottomColor: "var(--color-accent)" } }, ".input-filled.input-neutral:focus-visible": { "@layer components": { borderBottomColor: "var(--color-neutral)" } }, ".input-filled.input-base:focus-visible": { "@layer components": { borderBottomColor: "var(--color-base-content)" } }, ".input-group": { "@layer components": { display: "flex", alignItems: "stretch" } }, ".input-group > .input": { "@layer components": { flex: 1, borderRadius: "0" } }, ".input-group > .input:first-child": { "@layer components": { borderTopLeftRadius: "var(--radius-sm)", borderBottomLeftRadius: "var(--radius-sm)" } }, ".input-group > .input:last-child": { "@layer components": { borderTopRightRadius: "var(--radius-sm)", borderBottomRightRadius: "var(--radius-sm)" } }, ".input-group-text": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", padding: "0 1rem", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface-variant)", border: "1px solid var(--color-outline)" } }, ".input-group-text:first-child": { "@layer components": { borderTopLeftRadius: "var(--radius-sm)", borderBottomLeftRadius: "var(--radius-sm)", borderRight: "none" } }, ".input-group-text:last-child": { "@layer components": { borderTopRightRadius: "var(--radius-sm)", borderBottomRightRadius: "var(--radius-sm)", borderLeft: "none" } }, ".input, \n .input-filled, \n .file-input": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ":where(.checkbox)": { "@layer components": { boxSizing: "border-box" } }, ".checkbox": { "@layer components": { "--checkbox-size": "1.25rem", "--checkbox-color": "var(--color-primary)", "--checkbox-border-color": "var(--color-on-surface-variant)", color: "var(--color-on-surface)", position: "relative", display: "inline-grid", placeContent: "center", width: "var(--checkbox-size)", height: "var(--checkbox-size)", margin: "0", cursor: "pointer", appearance: "none", backgroundColor: "transparent", border: "2px solid var(--checkbox-border-color)", borderRadius: "var(--radius-xs)", transition: "background-color 150ms ease-in-out, border-color 150ms ease-in-out" } }, ".checkbox::before": { "@layer components": { content: '""', width: "0.65em", height: "0.35em", transform: "scale(0) rotate(-45deg)", transformOrigin: "center", borderBottom: "2px solid var(--dm-validation-content, var(--color-primary-content))", borderLeft: "2px solid var(--dm-validation-content, var(--color-primary-content))", transition: "transform 150ms ease-in-out" } }, ".checkbox:checked": { "@layer components": { backgroundColor: "var(--checkbox-color)", borderColor: "var(--checkbox-color)" } }, ".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(--dm-validation-content, 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:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--checkbox-color) 20%, transparent)" } }, ".checkbox:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".checkbox-xs": { "@layer components": { "--checkbox-size": "0.875rem" } }, ".checkbox-sm": { "@layer components": { "--checkbox-size": "1rem" } }, ".checkbox-md": { "@layer components": { "--checkbox-size": "1.25rem" } }, ".checkbox-lg": { "@layer components": { "--checkbox-size": "1.5rem" } }, ".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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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(--dm-validation-content, 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" } } }, ":where(.radio)": { "@layer components": { boxSizing: "border-box" } }, ".radio": { "@layer components": { "--radio-size": "1.25rem", "--radio-color": "var(--color-primary)", "--radio-border-color": "var(--color-on-surface-variant)", color: "var(--color-on-surface)", position: "relative", display: "inline-grid", placeContent: "center", width: "var(--radio-size)", height: "var(--radio-size)", margin: "0", cursor: "pointer", appearance: "none", backgroundColor: "transparent", border: "2px solid var(--radio-border-color)", borderRadius: "var(--radius-full)", transition: "border-color 150ms ease-in-out" } }, ".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": { "@layer components": { borderColor: "var(--radio-color)" } }, ".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:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--radio-color) 20%, transparent)" } }, ".radio:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".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" } } }, ".toggle": { "@layer components": { "--toggle-color": "var(--color-primary)", boxSizing: "border-box", color: "var(--color-on-surface)", border: "1px solid currentColor", appearance: "none", width: "3rem", height: "1.5rem", borderRadius: "var(--radius-lg)", backgroundColor: "var(--color-surface-container-highest)", cursor: "pointer", transition: "all 150ms ease-in-out", position: "relative" } }, ".toggle::after": { "@layer components": { content: "''", position: "absolute", insetInlineStart: "0.25rem", top: "50%", transform: "translateY(-50%)", width: "1rem", height: "1rem", backgroundColor: "var(--color-on-surface-variant)", borderRadius: "var(--radius-full)", transition: "all 150ms ease-in-out" } }, ".toggle:checked": { "@layer components": { backgroundColor: "var(--toggle-color)" } }, ".toggle:checked::after": { "@layer components": { insetInlineStart: "calc(100% - 1.25rem)", backgroundColor: "var(--dm-validation-content, var(--color-primary-content))" } }, ".toggle:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toggle:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5 } }, ".toggle-xs": { "@layer components": { width: "2rem", height: "1rem" } }, ".toggle-xs::after": { "@layer components": { width: "0.625rem", height: "0.625rem", insetInlineStart: "0.1875rem" } }, ".toggle-xs:checked::after": { "@layer components": { insetInlineStart: "calc(100% - 0.8125rem)" } }, ".toggle-sm": { "@layer components": { width: "2.5rem", height: "1.25rem" } }, ".toggle-sm::after": { "@layer components": { width: "0.75rem", height: "0.75rem" } }, ".toggle-lg": { "@layer components": { width: "4rem", height: "2rem" } }, ".toggle-lg::after": { "@layer components": { width: "1.5rem", height: "1.5rem" } }, ".toggle-sm:checked::after": { "@layer components": { insetInlineStart: "calc(100% - 1rem)" } }, ".toggle-lg:checked::after": { "@layer components": { insetInlineStart: "calc(100% - 1.75rem)" } }, ".toggle-primary": { "@layer components": { "--toggle-color": "var(--color-primary)" } }, ".toggle-secondary": { "@layer components": { "--toggle-color": "var(--color-secondary)" } }, ".toggle-tertiary": { "@layer components": { "--toggle-color": "var(--color-tertiary)" } }, ".toggle-info": { "@layer components": { "--toggle-color": "var(--color-info)" } }, ".toggle-success": { "@layer components": { "--toggle-color": "var(--color-success)" } }, ".toggle-warning": { "@layer components": { "--toggle-color": "var(--color-warning)" } }, ".toggle-error": { "@layer components": { "--toggle-color": "var(--color-error)" } }, ".toggle-ghost": { "@layer components": { borderColor: "transparent" } }, ".toggle, .toggle::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ":where(.select)": { "@layer components": { boxSizing: "border-box" } }, ".select": [{ "@layer components": { display: "block", width: "100%", padding: "0.75rem 2.5rem 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)", outline: "none", cursor: "pointer", appearance: "none", backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: "right 0.75rem center", backgroundRepeat: "no-repeat", backgroundSize: "1.25rem 1.25rem", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".select:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".select:focus": { "@layer components": { outline: "none" } }, ".select:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".select:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, 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-bordered": { "@layer components": { borderColor: "var(--color-outline)" } }, ".select-md": { "@layer components": { fontSize: "1rem" } }, ".select:dir(rtl)": { "@layer components": { paddingInline: "1rem 2.5rem", backgroundPosition: "left 0.75rem center" } }, ".select-xs": { "@layer components": { padding: "0.375rem 2rem 0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "var(--radius-xs)", backgroundSize: "1rem 1rem" } }, ".select-sm": { "@layer components": { padding: "0.5rem 2.25rem 0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-xs)", backgroundSize: "1.125rem 1.125rem" } }, ".select-lg": { "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem", borderRadius: "var(--radius-sm)", backgroundSize: "1.5rem 1.5rem", backgroundPosition: "right 1rem center" } }, ".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)" } }, ":where(.textarea)": { "@layer components": { boxSizing: "border-box" } }, ".textarea-container": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%" } }, ".textarea-label": { "@layer components": { display: "block", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".textarea-label-floating": { "@layer components": { position: "absolute", top: "0.75rem", left: "1rem", fontSize: "1rem", fontWeight: 400, color: "var(--color-on-surface-variant)", pointerEvents: "none", transition: "all 150ms ease-in-out", transformOrigin: "left top", zIndex: 1 } }, ".textarea:focus ~ .textarea-label-floating, \n .textarea:not(:placeholder-shown) ~ .textarea-label-floating": { "@layer components": { top: "-0.5rem", left: "0.75rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "var(--color-surface)", padding: "0 0.25rem" } }, ".textarea-filled ~ .textarea-label-floating": { "@layer components": { backgroundColor: "transparent" } }, ".textarea-filled:focus ~ .textarea-label-floating, \n .textarea-filled:not(:placeholder-shown) ~ .textarea-label-floating": { "@layer components": { top: "0.25rem", left: "0.75rem", backgroundColor: "transparent" } }, ".textarea-helper": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", marginTop: "0.25rem" } }, ".textarea": { "@layer components": { display: "block", width: "100%", minHeight: "6rem", padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem", fontFamily: "inherit", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", outline: "none", resize: "vertical", fieldSizing: "content", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".textarea::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)", opacity: 0.7 } }, ".textarea:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".textarea:focus": { "@layer components": { outline: "none" } }, ".textarea:focus-visible": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".textarea:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)", resize: "none" } }, ".textarea[readonly]": { "@layer components": { backgroundColor: "var(--color-surface-container)", cursor: "default" } }, ".textarea-full": { "@layer components": { width: "100%" } }, ".textarea-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" } }, ".textarea-filled:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)", borderBottomColor: "var(--color-on-surface)" } }, ".textarea-filled:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".textarea-filled.textarea-primary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)" } }, ".textarea-filled.textarea-secondary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-secondary)" } }, ".textarea-filled.textarea-tertiary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-tertiary)" } }, ".textarea-filled.textarea-info:focus-visible": { "@layer components": { borderBottomColor: "var(--color-info)" } }, ".textarea-filled.textarea-success:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".textarea-filled.textarea-warning:focus-visible": { "@layer components": { borderBottomColor: "var(--color-warning)" } }, ".textarea-filled.textarea-error:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".textarea-filled.textarea-accent:focus-visible": { "@layer components": { borderBottomColor: "var(--color-accent)" } }, ".textarea-filled.textarea-neutral:focus-visible": { "@layer components": { borderBottomColor: "var(--color-neutral)" } }, ".textarea-filled.textarea-base:focus-visible": { "@layer components": { borderBottomColor: "var(--color-base-content)" } }, ".textarea-outlined": { "@layer components": { backgroundColor: "transparent", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".textarea-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".textarea-ghost:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent" } }, ".textarea-ghost:focus-visible": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".textarea-primary": { "@layer components": { color: "var(--color-primary)" } }, ".textarea-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".textarea-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".textarea-info": { "@layer components": { color: "var(--color-info)" } }, ".textarea-success": { "@layer components": { color: "var(--color-success)" } }, ".textarea-warning": { "@layer components": { color: "var(--color-warning)" } }, ".textarea-error": { "@layer components": { color: "var(--color-error)" } }, ".textarea-accent": { "@layer components": { color: "var(--color-accent)" } }, ".textarea-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".textarea-base": { "@layer components": { color: "var(--color-base-content)" } }, ".textarea-xs": { "@layer components": { minHeight: "3rem", padding: "0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem" } }, ".textarea-md": { "@layer components": { minHeight: "6rem" } }, ".textarea-bordered": { "@layer components": { borderColor: "var(--color-outline)" } }, ".textarea-sm": { "@layer components": { minHeight: "4rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-xs)" } }, ".textarea-lg": { "@layer components": { minHeight: "8rem", padding: "1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem", borderRadius: "var(--radius-sm)" } }, ".textarea-resize-none": { "@layer components": { resize: "none" } }, ".textarea-resize-vertical": { "@layer components": { resize: "vertical" } }, ".textarea-resize-horizontal": { "@layer components": { resize: "horizontal" } }, ".textarea-resize-both": { "@layer components": { resize: "both" } }, ".textarea-auto-resize, \n .textarea-autosize": { "@layer components": { resize: "none", overflow: "hidden", minHeight: "3rem", fieldSizing: "content" } }, ".textarea-counter": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", textAlign: "right" } }, ".textarea-counter-error, \n .textarea-counter-exceeded": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea-label": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea-helper": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea-label-floating": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea:focus ~ .textarea-label-floating": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-success .textarea-label": { "@layer components": { color: "var(--color-success)" } }, ".textarea-container-success .textarea-helper": { "@layer components": { color: "var(--color-success)" } }, ".textarea-container-success .textarea-label-floating": { "@layer components": { color: "var(--color-success)" } }, ".textarea-container-success .textarea:focus ~ .textarea-label-floating": { "@layer components": { color: "var(--color-success)" } }, ".textarea, \n .textarea-label-floating": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".range": [{ "@layer components": { "--range-thumb-size": "1.25rem", appearance: "none", display: "block", boxSizing: "border-box", width: "100%", minWidth: "0", height: "var(--range-thumb-size)", margin: "0", color: "var(--color-on-surface)", accentColor: "currentColor", background: "transparent", cursor: "pointer" } }, { "@layer components": { "@media (forced-colors: active)": { appearance: "auto" } } }], ".range::-webkit-slider-runnable-track": { "@layer components": { height: "0.5rem", background: "var(--color-surface-container-highest)", borderRadius: "var(--radius-xs)" } }, ".range::-moz-range-track": { "@layer components": { height: "0.5rem", background: "var(--color-surface-container-highest)", borderRadius: "var(--radius-xs)" } }, ".range::-webkit-slider-thumb": { "@layer components": { appearance: "none", width: "var(--range-thumb-size)", height: "var(--range-thumb-size)", marginTop: "calc((0.5rem - var(--range-thumb-size)) / 2)", background: "currentColor", border: "1px solid currentColor", borderRadius: "var(--radius-full)" } }, ".range::-moz-range-thumb": { "@layer components": { width: "var(--range-thumb-size)", height: "var(--range-thumb-size)", background: "currentColor", border: "1px solid currentColor", borderRadius: "var(--radius-full)" } }, ".range:focus-visible": [{ "@layer components": { outline: "2px solid currentColor", outlineOffset: "3px" } }, { "@layer components": { "@media (forced-colors: active)": { outlineColor: "Highlight" } } }], ".range:disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".range-xs": { "@layer components": { "--range-thumb-size": "0.875rem" } }, ".range-sm": { "@layer components": { "--range-thumb-size": "1rem" } }, ".range-lg": { "@layer components": { "--range-thumb-size": "1.5rem" } }, ".range-primary": { "@layer components": { color: "var(--color-primary)" } }, ".range-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".range-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".range-info": { "@layer components": { color: "var(--color-info)" } }, ".range-success": { "@layer components": { color: "var(--color-success)" } }, ".range-warning": { "@layer components": { color: "var(--color-warning)" } }, ".range-error": { "@layer components": { color: "var(--color-error)" } }, ".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" } }, { "@layer components": { "@media (max-width: 640px)": { flexDirection: "column" } } }], ".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" } }, ".form-control": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%", marginBottom: "1rem", color: "var(--color-on-surface)" } }, ".helper-text": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", marginTop: "0.25rem" } }, ".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", minInlineSize: "0" } }, ".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" } }, { "@layer components": { "@media (max-width: 640px)": { minWidth: "0", flexBasis: "100%" } } }], ".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)" } }, ".label": { "@layer components": { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0.25rem 0" } }, ".label-text": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", paddingBottom: "0.25rem" } }, ".label-text-alt": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, '.label-text.required::after, \n .form-label[aria-required="true"]::after': { "@layer components": { content: "' *'", color: "var(--color-error)" } }, ".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)" } }, ".form-group-disabled": { "@layer components": { opacity: 0.5, pointerEvents: "none" } }, ".form-group, .form-control": { "@layer components": { minInlineSize: "0" } }, ".navbar": { "@layer components": { display: "flex", alignItems: "center", width: "100%", minHeight: "4rem", padding: "0.5rem 1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".navbar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".navbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".navbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".navbar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".navbar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".navbar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".navbar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".navbar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".navbar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".navbar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".navbar a": { "@layer components": { color: "inherit" } }, ".navbar-start": { "@layer components": { display: "flex", alignItems: "center", flex: 1, justifyContent: "flex-start", gap: "0.5rem" } }, ".navbar-center": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, gap: "0.5rem" } }, ".navbar-end": { "@layer components": { display: "flex", alignItems: "center", flex: 1, justifyContent: "flex-end", gap: "0.5rem" } }, ".menu": { "@layer components": { display: "flex", flexWrap: "wrap", listStyle: "none", margin: "0", padding: "0.5rem", gap: "0.25rem" } }, ".menu[popover]": { "@layer components": { display: "none", position: "absolute", inset: "auto", margin: "0.5rem", minWidth: "12rem", maxWidth: "calc(100vw - 1rem)", maxHeight: "calc(100dvh - 1rem)", overflow: "auto", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", positionArea: "bottom", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", opacity: 0, transform: "scale(0.95)", transition: `opacity 150ms ease-out,
|
|
151
151
|
transform 150ms ease-out,
|
|
152
152
|
overlay 150ms ease-out allow-discrete,
|
|
153
|
-
display 150ms ease-out allow-discrete` } }, ".menu[popover]:popover-open": [{ "@layer components": { display: "flex", opacity: 1, transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".menu[popover]::backdrop": { "@layer components": { backgroundColor: "transparent" } }, ".menu-top[popover]": { "@layer components": { positionArea: "top" } }, ".menu-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".menu-left[popover]": { "@layer components": { positionArea: "left" } }, ".menu-right[popover]": { "@layer components": { positionArea: "right" } }, ".menu li": { "@layer components": { display: "flex", flexShrink: 0 } }, ".menu li > a, \n .menu li > button, \n .menu-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", textDecoration: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", whiteSpace: "nowrap" } }, ".menu li > a:hover, \n .menu li > button:hover, \n .menu-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".menu li > a:focus-visible, \n .menu li > button:focus-visible, \n .menu-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.menu li > a.active, \n .menu li > button.active, \n .menu-item.active, \n .menu li > a[aria-current="page"], \n .menu li > button[aria-current="page"]': { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".menu li.disabled > a, \n .menu li.disabled > button, \n .menu-item:disabled": { "@layer components": { opacity: 0.5, pointerEvents: "none" } }, ".menu-horizontal": { "@layer components": { flexDirection: "row" } }, ".menu-vertical": { "@layer components": { flexDirection: "column" } }, ".menu-vertical li": { "@layer components": { width: "100%" } }, ".menu-vertical li > a, \n .menu-vertical li > button, \n .menu-vertical .menu-item": { "@layer components": { width: "100%" } }, ".menu-compact li > a, \n .menu-compact li > button, \n .menu-compact .menu-item": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.8125rem" } }, ".menu-title": { "@layer components": { padding: "0.5rem 1rem", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".breadcrumbs": { "@layer components": { display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.5rem", padding: "0.5rem 0", listStyle: "none", margin: "0", fontSize: "0.875rem" } }, ".breadcrumbs li": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".breadcrumbs li::after": { "@layer components": { content: "'/'", color: "var(--color-on-surface-variant)", opacity: 0.5 } }, ".breadcrumbs li:last-child::after": { "@layer components": { display: "none" } }, ".breadcrumbs li > a": { "@layer components": { color: "var(--color-primary)", textDecoration: "none", transition: "color 150ms ease-in-out" } }, ".breadcrumbs li > a:hover": { "@layer components": { textDecoration: "underline" } }, ".breadcrumbs li:last-child": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".breadcrumb-item": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem", color: "var(--color-on-surface-variant)", textDecoration: "none", transition: "color 150ms ease-in-out" } }, ".breadcrumb-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".breadcrumb-item-active": { "@layer components": { color: "var(--color-on-surface)", fontWeight: 500, pointerEvents: "none" } }, ".breadcrumb-link": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem", color: "var(--color-on-surface-variant)", textDecoration: "none", transition: "color 150ms ease-in-out", cursor: "pointer" } }, ".breadcrumb-link:hover": { "@layer components": { color: "var(--color-primary)", textDecoration: "underline" } }, ".breadcrumb-link:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", borderRadius: "var(--radius-xs)" } }, ".breadcrumb-separator": { "@layer components": { display: "inline-flex", alignItems: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem", userSelect: "none", opacity: 0.6 } }, ".breadcrumb-separator::before": { "@layer components": { content: '"/"' } }, ".breadcrumbs-slash .breadcrumb-separator::before": { "@layer components": { content: '"/"' } }, ".breadcrumbs-chevron .breadcrumb-separator::before": { "@layer components": { content: '"›"', fontSize: "1.125rem" } }, ".breadcrumbs-dot .breadcrumb-separator::before": { "@layer components": { content: '"•"' } }, ".breadcrumbs-arrow .breadcrumb-separator::before": { "@layer components": { content: '"→"' } }, ".breadcrumbs-pipe .breadcrumb-separator::before": { "@layer components": { content: '"|"' } }, ".breadcrumb-icon": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", flexShrink: 0 } }, ".breadcrumb-icon svg": { "@layer components": { width: "100%", height: "100%" } }, ".breadcrumb-home": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--color-on-surface-variant)", textDecoration: "none", transition: "color 150ms ease-in-out" } }, ".breadcrumb-home:hover": { "@layer components": { color: "var(--color-primary)" } }, ".breadcrumb-home-icon": { "@layer components": { width: "1.125rem", height: "1.125rem" } }, ".breadcrumb-ellipsis": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0.25rem 0.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".breadcrumb-ellipsis::before": { "@layer components": { content: '"..."' } }, ".breadcrumb-ellipsis:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 8%, transparent)" } }, ".breadcrumbs-primary .breadcrumb-link:hover, \n .breadcrumbs-primary .breadcrumb-item-active": { "@layer components": { color: "var(--color-primary)" } }, ".breadcrumbs-secondary .breadcrumb-link:hover, \n .breadcrumbs-secondary .breadcrumb-item-active": { "@layer components": { color: "var(--color-secondary)" } }, ".breadcrumbs-tertiary .breadcrumb-link:hover, \n .breadcrumbs-tertiary .breadcrumb-item-active": { "@layer components": { color: "var(--color-tertiary)" } }, ".breadcrumbs-sm": { "@layer components": { fontSize: "0.75rem", gap: "0.375rem" } }, ".breadcrumbs-sm .breadcrumb-icon, \n .breadcrumbs-sm .breadcrumb-home-icon": { "@layer components": { width: "0.875rem", height: "0.875rem" } }, ".breadcrumbs-lg": { "@layer components": { fontSize: "1rem", gap: "0.625rem" } }, ".breadcrumbs-lg .breadcrumb-icon, \n .breadcrumbs-lg .breadcrumb-home-icon": { "@layer components": { width: "1.25rem", height: "1.25rem" } }, ".breadcrumbs-contained": { "@layer components": { padding: "0.75rem 1rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-sm)" } }, ".breadcrumbs-nowrap": { "@layer components": { flexWrap: "nowrap", overflowX: "auto" } }, ".breadcrumb-item-disabled": { "@layer components": { opacity: 1, pointerEvents: "none", cursor: "not-allowed" } }, ".tabs": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", borderBottom: "1px solid var(--color-outline)" } }, ".tab": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "0.75rem 1.25rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textDecoration: "none", backgroundColor: "transparent", border: "none", borderBottom: "2px solid transparent", cursor: "pointer", transition: "all 150ms ease-in-out", position: "relative", marginBottom: "-1px" } }, ".tab:hover": { "@layer components": { color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)" } }, ".tab:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.tab.tab-active, \n .tab[aria-selected="true"]': { "@layer components": { color: "var(--color-primary)", borderBottomColor: "var(--color-primary)" } }, ".tab:disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".tabs-boxed": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-sm)", padding: "0.25rem", border: "none" } }, ".tabs-boxed .tab": { "@layer components": { borderRadius: "var(--radius-xs)", borderBottom: "none", marginBottom: "0" } }, '.tabs-boxed .tab.tab-active, \n .tabs-boxed .tab[aria-selected="true"]': { "@layer components": { backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-xs)" } }, ".tabs-lifted": { "@layer components": { border: "none" } }, ".tabs-lifted .tab": { "@layer components": { border: "1px solid transparent", borderBottom: "none", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0", marginBottom: "-1px" } }, '.tabs-lifted .tab.tab-active, \n .tabs-lifted .tab[aria-selected="true"]': { "@layer components": { backgroundColor: "var(--color-surface)", borderColor: "var(--color-outline)", borderBottomColor: "var(--color-surface)" } }, ".tab-xs": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem" } }, ".tab-sm": { "@layer components": { padding: "0.5rem 0.875rem", fontSize: "0.8125rem" } }, ".tab-lg": { "@layer components": { padding: "1rem 1.5rem", fontSize: "1rem" } }, ".dropdown": { "@layer components": { position: "relative", display: "inline-block" } }, ".dropdown-content": { "@layer components": { position: "absolute", zIndex: 50, minWidth: "12rem", padding: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-lg)", opacity: 0, visibility: "hidden", transform: "translateY(-0.5rem)", transition: "all 150ms ease-in-out" } }, ".dropdown:hover .dropdown-content, \n .dropdown:focus-within .dropdown-content, \n .dropdown.dropdown-open .dropdown-content": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".dropdown-end .dropdown-content": { "@layer components": { right: "0" } }, ".dropdown-top .dropdown-content": { "@layer components": { bottom: "100%", top: "auto", marginBottom: "0.25rem" } }, ".dropdown-left .dropdown-content": { "@layer components": { right: "100%", left: "auto", top: "0", marginRight: "0.25rem" } }, ".dropdown-right .dropdown-content": { "@layer components": { left: "100%", right: "auto", top: "0", marginLeft: "0.25rem" } }, ".pagination": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", listStyle: "none", margin: "0", padding: "0" } }, ".pagination-item, \n .pagination-prev, \n .pagination-next, \n .pagination li > a, \n .pagination li > button": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", minWidth: "2.5rem", height: "2.5rem", padding: "0 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "all 150ms ease-in-out", whiteSpace: "nowrap" } }, ".pagination-item:hover, \n .pagination-prev:hover, \n .pagination-next:hover, \n .pagination li > a:hover, \n .pagination li > button:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, '.pagination-item-active, \n .pagination-item-active-primary, \n .pagination li > a.active, \n .pagination li > button.active, \n .pagination li > a[aria-current="page"], \n .pagination li > button[aria-current="page"]': { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".pagination-item-active-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)", borderColor: "var(--color-secondary)" } }, ".pagination-item-active-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)", borderColor: "var(--color-tertiary)" } }, ".pagination-item:focus-visible, \n .pagination-prev:focus-visible, \n .pagination-next:focus-visible, \n .pagination li > a:focus-visible, \n .pagination li > button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".pagination-item:disabled, \n .pagination-item-disabled, \n .pagination-prev:disabled, \n .pagination-next:disabled, \n .pagination li > a:disabled, \n .pagination li > button:disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed", pointerEvents: "none" } }, ".pagination-ellipsis": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: "2.5rem", height: "2.5rem", color: "var(--color-on-surface-variant)" } }, ".pagination-ellipsis::before": { "@layer components": { content: "'…'" } }, ".pagination-info": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem" } }, ".pagination-info-text": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".pagination-input": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".pagination-input input": { "@layer components": { width: "3.5rem", padding: "0.375rem 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)" } }, ".pagination-input input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)" } }, ".pagination-outlined .pagination-item, \n .pagination-outlined .pagination-prev, \n .pagination-outlined .pagination-next": { "@layer components": { border: "1px solid var(--color-outline)" } }, ".pagination-tonal .pagination-item-active, \n .pagination-tonal .pagination-item-active-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderColor: "var(--color-primary-container)" } }, ".pagination-sm .pagination-item, \n .pagination-sm .pagination-prev, \n .pagination-sm .pagination-next": { "@layer components": { minWidth: "2rem", height: "2rem", padding: "0 0.5rem", fontSize: "0.75rem" } }, ".pagination-lg .pagination-item, \n .pagination-lg .pagination-prev, \n .pagination-lg .pagination-next": { "@layer components": { minWidth: "3rem", height: "3rem", padding: "0 1rem", fontSize: "1rem" } }, ".pagination-compact": { "@layer components": { gap: "0" } }, ".pagination-compact .pagination-item, \n .pagination-compact .pagination-prev, \n .pagination-compact .pagination-next": { "@layer components": { borderRadius: "0" } }, ".pagination-compact .pagination-item:first-child, \n .pagination-compact .pagination-prev": { "@layer components": { borderRadius: "var(--radius-sm) 0 0 var(--radius-sm)" } }, ".pagination-compact .pagination-item:last-child, \n .pagination-compact .pagination-next": { "@layer components": { borderRadius: "0 var(--radius-sm) var(--radius-sm) 0" } }, ".pagination-responsive": { "@layer components": { flexWrap: "wrap", justifyContent: "center" } }, ".menu li > a, \n .menu li > button, \n .menu-item, \n .menu[popover], \n .pagination-item, \n .pagination-prev, \n .pagination-next": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".modal": [{ "@layer components": { position: "fixed", inset: "0", zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem", visibility: "hidden", opacity: 0, transition: "visibility 200ms ease-out, opacity 200ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "visibility 0ms, opacity 0ms" } } }], ".modal.modal-open, \n .modal:target": { "@layer components": { visibility: "visible", opacity: 1 } }, ".modal-box": [{ "@layer components": { position: "relative", zIndex: 1, maxWidth: "32rem", maxHeight: "calc(100vh - 5rem)", padding: "1.5rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-2xl)", overflowY: "auto", transform: "scale(0.95)", transition: "transform 200ms ease-out" } }, { "@layer components": { "@media (max-width: 640px)": { maxWidth: "calc(100vw - 2rem)", margin: "1rem" } } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "transform 0ms" } } }], ".modal.modal-open .modal-box, \n .modal:target .modal-box": { "@layer components": { transform: "scale(1)" } }, ".modal-backdrop": { "@layer components": { position: "fixed", inset: "0", zIndex: -1, backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", cursor: "pointer" } }, ".modal-backdrop::before": { "@layer components": { content: "''", position: "absolute", inset: "0" } }, ".modal-action": { "@layer components": { display: "flex", justifyContent: "flex-end", gap: "0.5rem", marginTop: "1.5rem", paddingTop: "1rem" } }, ".modal-toggle": { "@layer components": { position: "fixed", width: "0", height: "0", appearance: "none", opacity: 0 } }, ".modal-toggle:checked + .modal": { "@layer components": { visibility: "visible", opacity: 1 } }, ".modal-toggle:checked + .modal .modal-box": { "@layer components": { transform: "scale(1)" } }, ".modal-sm .modal-box": { "@layer components": { maxWidth: "20rem" } }, ".modal-lg .modal-box": { "@layer components": { maxWidth: "48rem" } }, ".modal-full .modal-box": { "@layer components": { maxWidth: "calc(100vw - 2rem)", maxHeight: "calc(100vh - 2rem)", width: "100%", height: "100%" } }, ".modal-top": { "@layer components": { alignItems: "flex-start", paddingTop: "2rem" } }, ".modal-bottom": { "@layer components": { alignItems: "flex-end", paddingBottom: "2rem" } }, ".modal-middle": { "@layer components": { alignItems: "center" } }, ".modal-close": { "@layer components": { position: "absolute", top: "0.75rem", right: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", fontSize: "1.25rem", 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" } }, ".modal-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".modal-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".modal-header": { "@layer components": { marginBottom: "1rem", paddingRight: "2rem" } }, ".modal-title": { "@layer components": { fontSize: "1.25rem", fontWeight: 600, color: "var(--color-on-surface)", margin: "0" } }, ".modal-body": { "@layer components": { color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".modal-responsive": { "@layer components": { "@media (max-width: 640px)": { alignItems: "flex-end", padding: "0" } } }, ".modal-responsive .modal-box": { "@layer components": { "@media (max-width: 640px)": { maxWidth: "100%", maxHeight: "90vh", margin: "0", borderRadius: "var(--radius-lg) var(--radius-lg) 0 0" } } }, ".drawer-modal": { "@layer components": { alignItems: "stretch", justifyContent: "flex-end", padding: "0" } }, ".drawer-modal .modal-box": { "@layer components": { maxWidth: "20rem", maxHeight: "100vh", height: "100%", margin: "0", borderRadius: "0", transform: "translateX(100%)" } }, ".drawer-modal.modal-open .modal-box, \n .drawer-modal:target .modal-box": { "@layer components": { transform: "translateX(0)" } }, ".drawer-modal-left": { "@layer components": { justifyContent: "flex-start" } }, ".drawer-modal-left .modal-box": { "@layer components": { transform: "translateX(-100%)" } }, ".drawer-modal-left.modal-open .modal-box, \n .drawer-modal-left:target .modal-box": { "@layer components": { transform: "translateX(0)" } }, ".alert-dialog": { "@layer components": { textAlign: "center" } }, ".alert-dialog .modal-box": { "@layer components": { maxWidth: "24rem" } }, ".alert-dialog .modal-icon": { "@layer components": { width: "4rem", height: "4rem", margin: "0 auto 1rem", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-full)", fontSize: "2rem" } }, ".alert-dialog .modal-icon.info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".alert-dialog .modal-icon.success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".alert-dialog .modal-icon.warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".alert-dialog .modal-icon.error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".alert-dialog .modal-action": { "@layer components": { justifyContent: "center" } }, ".modal-focus-trap": { "@layer components": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } }, ".avatar": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", position: "relative", width: "3rem", height: "3rem", borderRadius: "var(--radius-full)", overflow: "hidden", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", fontWeight: 500, flexShrink: 0 } }, ".avatar img": { "@layer components": { width: "100%", height: "100%", objectFit: "cover" } }, ".avatar-placeholder": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", fontSize: "1.25rem", textTransform: "uppercase" } }, ".avatar-xs": { "@layer components": { width: "1.5rem", height: "1.5rem", fontSize: "0.625rem" } }, ".avatar-sm": { "@layer components": { width: "2rem", height: "2rem", fontSize: "0.75rem" } }, ".avatar-md": { "@layer components": { width: "3rem", height: "3rem", fontSize: "1rem" } }, ".avatar-lg": { "@layer components": { width: "4rem", height: "4rem", fontSize: "1.5rem" } }, ".avatar-xl": { "@layer components": { width: "6rem", height: "6rem", fontSize: "2rem" } }, ".avatar-rounded": { "@layer components": { borderRadius: "var(--radius-sm)" } }, ".avatar-square": { "@layer components": { borderRadius: "0" } }, ".avatar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".avatar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".avatar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".avatar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".avatar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".avatar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".avatar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".avatar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".avatar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".avatar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".avatar-ring": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".avatar-ring-primary": { "@layer components": { outlineColor: "var(--color-primary)" } }, ".avatar-ring-secondary": { "@layer components": { outlineColor: "var(--color-secondary)" } }, ".avatar-ring-tertiary": { "@layer components": { outlineColor: "var(--color-tertiary)" } }, ".avatar-online::after, \n .avatar-offline::after": { "@layer components": { content: "''", position: "absolute", bottom: "0", right: "0", width: "25%", height: "25%", minWidth: "0.5rem", minHeight: "0.5rem", borderRadius: "var(--radius-full)", border: "2px solid var(--color-surface)" } }, ".avatar-online::after": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".avatar-offline::after": { "@layer components": { backgroundColor: "var(--color-outline)" } }, ".avatar-group": { "@layer components": { display: "flex", flexDirection: "row-reverse", justifyContent: "flex-end" } }, ".avatar-group .avatar": { "@layer components": { border: "2px solid var(--color-surface)", marginLeft: "-0.75rem" } }, ".avatar-group .avatar:last-child": { "@layer components": { marginLeft: "0" } }, ".avatar-group-sm .avatar": { "@layer components": { marginLeft: "-0.5rem" } }, ".avatar-group-lg .avatar": { "@layer components": { marginLeft: "-1rem" } }, ".avatar:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".badge": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0.125rem 0.5rem", fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", whiteSpace: "nowrap", borderRadius: "var(--radius-full)", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".badge-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".badge-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".badge-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".badge-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".badge-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".badge-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".badge-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".badge-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".badge-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".badge-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".badge-outlined, \n .badge-outlined-secondary, \n .badge-outlined-tertiary, \n .badge-outline": { "@layer components": { backgroundColor: "transparent", border: "1px solid currentColor" } }, ".badge-outlined, \n .badge-outlined.badge-primary, \n .badge-outline.badge-primary": { "@layer components": { color: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".badge-outlined.badge-secondary, \n .badge-outlined-secondary, \n .badge-outline.badge-secondary": { "@layer components": { color: "var(--color-secondary)", borderColor: "var(--color-secondary)" } }, ".badge-outlined.badge-tertiary, \n .badge-outlined-tertiary, \n .badge-outline.badge-tertiary": { "@layer components": { color: "var(--color-tertiary)", borderColor: "var(--color-tertiary)" } }, ".badge-outlined.badge-accent, \n .badge-outline.badge-accent": { "@layer components": { color: "var(--color-accent)", borderColor: "var(--color-accent)" } }, ".badge-outlined.badge-neutral, \n .badge-outline.badge-neutral": { "@layer components": { color: "var(--color-neutral)", borderColor: "var(--color-neutral)" } }, ".badge-outlined.badge-base, \n .badge-outline.badge-base": { "@layer components": { color: "var(--color-base-content)", borderColor: "var(--color-base-content)" } }, ".badge-outlined.badge-info, \n .badge-outline.badge-info": { "@layer components": { color: "var(--color-info)", borderColor: "var(--color-info)" } }, ".badge-outlined.badge-success, \n .badge-outline.badge-success": { "@layer components": { color: "var(--color-success)", borderColor: "var(--color-success)" } }, ".badge-outlined.badge-warning, \n .badge-outline.badge-warning": { "@layer components": { color: "var(--color-warning)", borderColor: "var(--color-warning)" } }, ".badge-outlined.badge-error, \n .badge-outline.badge-error": { "@layer components": { color: "var(--color-error)", borderColor: "var(--color-error)" } }, ".badge-tonal, \n .badge-soft": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".badge-tonal.badge-primary, \n .badge-soft.badge-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".badge-tonal.badge-secondary, \n .badge-tonal-secondary, \n .badge-soft.badge-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".badge-tonal.badge-tertiary, \n .badge-tonal-tertiary, \n .badge-soft.badge-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".badge-tonal.badge-accent, \n .badge-soft.badge-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".badge-tonal.badge-neutral, \n .badge-soft.badge-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".badge-tonal.badge-base, \n .badge-soft.badge-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".badge-tonal.badge-info, \n .badge-soft.badge-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".badge-tonal.badge-success, \n .badge-soft.badge-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".badge-tonal.badge-warning, \n .badge-soft.badge-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".badge-tonal.badge-error, \n .badge-soft.badge-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".badge-sm": { "@layer components": { padding: "0 0.375rem", fontSize: "0.625rem", lineHeight: "0.875rem" } }, ".badge-lg": { "@layer components": { padding: "0.25rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem" } }, ".badge-indicator": { "@layer components": { position: "relative", paddingLeft: "1rem" } }, ".badge-indicator::before": { "@layer components": { content: "''", position: "absolute", left: "0.375rem", top: "50%", transform: "translateY(-50%)", width: "0.375rem", height: "0.375rem", borderRadius: "var(--radius-full)", backgroundColor: "currentColor" } }, ".badge-dot": { "@layer components": { width: "0.5rem", height: "0.5rem", padding: "0", borderRadius: "var(--radius-full)" } }, ".chat-scroll": [{ "@layer components": { "--chat-scroll-indicator-size": "0.875rem", "--chat-scroll-indicator-active-size": "1.125rem", "--chat-scroll-indicator-thickness": "0.1875rem", "--chat-scroll-indicator-gap": "0.3125rem", "--chat-scroll-indicator-hover-scale": "1.55", "--chat-scroll-indicator-neighbor-scale": "1.22", containerType: "size", containerName: "chat-scroll", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", columnGap: "0.75rem", alignItems: "start", minHeight: "0", overflowX: "hidden", overflowY: "auto", scrollBehavior: "smooth", overscrollBehaviorY: "contain", timelineScope: `--chat-1,
|
|
153
|
+
display 150ms ease-out allow-discrete` } }, ".menu[popover]:popover-open": [{ "@layer components": { display: "flex", opacity: 1, transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".menu[popover]::backdrop": { "@layer components": { backgroundColor: "transparent" } }, ".menu-top[popover]": { "@layer components": { positionArea: "top" } }, ".menu-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".menu-left[popover]": { "@layer components": { positionArea: "left" } }, ".menu-right[popover]": { "@layer components": { positionArea: "right" } }, ".menu li": { "@layer components": { display: "flex", flexShrink: 0 } }, ".menu li > a, \n .menu li > button, \n .menu-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", textDecoration: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", whiteSpace: "nowrap" } }, ".menu li > a:hover, \n .menu li > button:hover, \n .menu-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".menu li > a:focus-visible, \n .menu li > button:focus-visible, \n .menu-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.menu li > a.active, \n .menu li > button.active, \n .menu-item.active, \n .menu li > a[aria-current="page"], \n .menu li > button[aria-current="page"]': { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".menu li.disabled > a, \n .menu li.disabled > button, \n .menu-item:disabled": { "@layer components": { opacity: 0.5, pointerEvents: "none" } }, ".menu-horizontal": { "@layer components": { flexDirection: "row" } }, ".menu-vertical": { "@layer components": { flexDirection: "column" } }, ".menu-vertical li": { "@layer components": { width: "100%" } }, ".menu-vertical li > a, \n .menu-vertical li > button, \n .menu-vertical .menu-item": { "@layer components": { width: "100%" } }, ".menu-compact li > a, \n .menu-compact li > button, \n .menu-compact .menu-item": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.8125rem" } }, ".menu-title": { "@layer components": { padding: "0.5rem 1rem", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".breadcrumbs": { "@layer components": { display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.5rem", padding: "0.5rem 0", listStyle: "none", margin: "0", fontSize: "0.875rem" } }, ".breadcrumbs li": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem" } }, ".breadcrumbs li::after": { "@layer components": { content: "'/'", color: "var(--color-on-surface-variant)", opacity: 0.5 } }, ".breadcrumbs li:last-child::after": { "@layer components": { display: "none" } }, ".breadcrumbs li > a": { "@layer components": { color: "var(--color-primary)", textDecoration: "none", transition: "color 150ms ease-in-out" } }, ".breadcrumbs li > a:hover": { "@layer components": { textDecoration: "underline" } }, ".breadcrumbs li:last-child": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".breadcrumb-item": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem", color: "var(--color-on-surface-variant)", textDecoration: "none", transition: "color 150ms ease-in-out" } }, ".breadcrumb-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".breadcrumb-item-active": { "@layer components": { color: "var(--color-on-surface)", fontWeight: 500, pointerEvents: "none" } }, ".breadcrumb-link": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.375rem", color: "var(--color-on-surface-variant)", textDecoration: "none", transition: "color 150ms ease-in-out", cursor: "pointer" } }, ".breadcrumb-link:hover": { "@layer components": { color: "var(--color-primary)", textDecoration: "underline" } }, ".breadcrumb-link:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)", borderRadius: "var(--radius-xs)" } }, ".breadcrumb-separator": { "@layer components": { display: "inline-flex", alignItems: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem", userSelect: "none", opacity: 0.6 } }, ".breadcrumb-separator::before": { "@layer components": { content: '"/"' } }, ".breadcrumbs-slash .breadcrumb-separator::before": { "@layer components": { content: '"/"' } }, ".breadcrumbs-chevron .breadcrumb-separator::before": { "@layer components": { content: '"›"', fontSize: "1.125rem" } }, ".breadcrumbs-dot .breadcrumb-separator::before": { "@layer components": { content: '"•"' } }, ".breadcrumbs-arrow .breadcrumb-separator::before": { "@layer components": { content: '"→"' } }, ".breadcrumbs-pipe .breadcrumb-separator::before": { "@layer components": { content: '"|"' } }, ".breadcrumb-icon": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", width: "1rem", height: "1rem", flexShrink: 0 } }, ".breadcrumb-icon svg": { "@layer components": { width: "100%", height: "100%" } }, ".breadcrumb-home": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--color-on-surface-variant)", textDecoration: "none", transition: "color 150ms ease-in-out" } }, ".breadcrumb-home:hover": { "@layer components": { color: "var(--color-primary)" } }, ".breadcrumb-home-icon": { "@layer components": { width: "1.125rem", height: "1.125rem" } }, ".breadcrumb-ellipsis": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0.25rem 0.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".breadcrumb-ellipsis::before": { "@layer components": { content: '"..."' } }, ".breadcrumb-ellipsis:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 8%, transparent)" } }, ".breadcrumbs-primary .breadcrumb-link:hover, \n .breadcrumbs-primary .breadcrumb-item-active": { "@layer components": { color: "var(--color-primary)" } }, ".breadcrumbs-secondary .breadcrumb-link:hover, \n .breadcrumbs-secondary .breadcrumb-item-active": { "@layer components": { color: "var(--color-secondary)" } }, ".breadcrumbs-tertiary .breadcrumb-link:hover, \n .breadcrumbs-tertiary .breadcrumb-item-active": { "@layer components": { color: "var(--color-tertiary)" } }, ".breadcrumbs-sm": { "@layer components": { fontSize: "0.75rem", gap: "0.375rem" } }, ".breadcrumbs-sm .breadcrumb-icon, \n .breadcrumbs-sm .breadcrumb-home-icon": { "@layer components": { width: "0.875rem", height: "0.875rem" } }, ".breadcrumbs-lg": { "@layer components": { fontSize: "1rem", gap: "0.625rem" } }, ".breadcrumbs-lg .breadcrumb-icon, \n .breadcrumbs-lg .breadcrumb-home-icon": { "@layer components": { width: "1.25rem", height: "1.25rem" } }, ".breadcrumbs-contained": { "@layer components": { padding: "0.75rem 1rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-sm)" } }, ".breadcrumbs-nowrap": { "@layer components": { flexWrap: "nowrap", overflowX: "auto" } }, ".breadcrumb-item-disabled": { "@layer components": { opacity: 1, pointerEvents: "none", cursor: "not-allowed" } }, ".tabs": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", borderBottom: "1px solid var(--color-outline)" } }, ".tab": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "0.75rem 1.25rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface-variant)", textDecoration: "none", backgroundColor: "transparent", border: "none", borderBottom: "2px solid transparent", cursor: "pointer", transition: "all 150ms ease-in-out", position: "relative", marginBottom: "-1px" } }, ".tab:hover": { "@layer components": { color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)" } }, ".tab:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.tab.tab-active, \n .tab[aria-selected="true"]': { "@layer components": { color: "var(--color-primary)", borderBottomColor: "var(--color-primary)" } }, ".tab:disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed" } }, ".tabs-boxed": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-sm)", padding: "0.25rem", border: "none" } }, ".tabs-boxed .tab": { "@layer components": { borderRadius: "var(--radius-xs)", borderBottom: "none", marginBottom: "0" } }, '.tabs-boxed .tab.tab-active, \n .tabs-boxed .tab[aria-selected="true"]': { "@layer components": { backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-xs)" } }, ".tabs-lifted": { "@layer components": { border: "none" } }, ".tabs-lifted .tab": { "@layer components": { border: "1px solid transparent", borderBottom: "none", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0", marginBottom: "-1px" } }, '.tabs-lifted .tab.tab-active, \n .tabs-lifted .tab[aria-selected="true"]': { "@layer components": { backgroundColor: "var(--color-surface)", borderColor: "var(--color-outline)", borderBottomColor: "var(--color-surface)" } }, ".tab-xs": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem" } }, ".tab-sm": { "@layer components": { padding: "0.5rem 0.875rem", fontSize: "0.8125rem" } }, ".tab-lg": { "@layer components": { padding: "1rem 1.5rem", fontSize: "1rem" } }, ".dropdown": { "@layer components": { position: "relative", display: "inline-block" } }, ".dropdown-content": { "@layer components": { position: "absolute", zIndex: 50, minWidth: "12rem", padding: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-lg)", opacity: 0, visibility: "hidden", transform: "translateY(-0.5rem)", transition: "all 150ms ease-in-out" } }, ".dropdown:hover .dropdown-content, \n .dropdown:focus-within .dropdown-content, \n .dropdown.dropdown-open .dropdown-content": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".dropdown-end .dropdown-content": { "@layer components": { right: "0" } }, ".dropdown-top .dropdown-content": { "@layer components": { bottom: "100%", top: "auto", marginBottom: "0.25rem" } }, ".dropdown-left .dropdown-content": { "@layer components": { right: "100%", left: "auto", top: "0", marginRight: "0.25rem" } }, ".dropdown-right .dropdown-content": { "@layer components": { left: "100%", right: "auto", top: "0", marginLeft: "0.25rem" } }, ".pagination": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", listStyle: "none", margin: "0", padding: "0" } }, ".pagination-item, \n .pagination-prev, \n .pagination-next, \n .pagination li > a, \n .pagination li > button": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", minWidth: "2.5rem", height: "2.5rem", padding: "0 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "all 150ms ease-in-out", whiteSpace: "nowrap" } }, ".pagination-item:hover, \n .pagination-prev:hover, \n .pagination-next:hover, \n .pagination li > a:hover, \n .pagination li > button:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, '.pagination-item-active, \n .pagination-item-active-primary, \n .pagination li > a.active, \n .pagination li > button.active, \n .pagination li > a[aria-current="page"], \n .pagination li > button[aria-current="page"]': { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)", borderColor: "var(--color-primary)" } }, ".pagination-item-active-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)", borderColor: "var(--color-secondary)" } }, ".pagination-item-active-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)", borderColor: "var(--color-tertiary)" } }, ".pagination-item:focus-visible, \n .pagination-prev:focus-visible, \n .pagination-next:focus-visible, \n .pagination li > a:focus-visible, \n .pagination li > button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".pagination-item:disabled, \n .pagination-item-disabled, \n .pagination-prev:disabled, \n .pagination-next:disabled, \n .pagination li > a:disabled, \n .pagination li > button:disabled": { "@layer components": { opacity: 0.5, cursor: "not-allowed", pointerEvents: "none" } }, ".pagination-ellipsis": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: "2.5rem", height: "2.5rem", color: "var(--color-on-surface-variant)" } }, ".pagination-ellipsis::before": { "@layer components": { content: "'…'" } }, ".pagination-info": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem" } }, ".pagination-info-text": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".pagination-input": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", fontSize: "0.875rem", color: "var(--color-on-surface-variant)" } }, ".pagination-input input": { "@layer components": { width: "3.5rem", padding: "0.375rem 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)" } }, ".pagination-input input:focus": { "@layer components": { outline: "none", borderColor: "var(--color-primary)" } }, ".pagination-outlined .pagination-item, \n .pagination-outlined .pagination-prev, \n .pagination-outlined .pagination-next": { "@layer components": { border: "1px solid var(--color-outline)" } }, ".pagination-tonal .pagination-item-active, \n .pagination-tonal .pagination-item-active-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderColor: "var(--color-primary-container)" } }, ".pagination-sm .pagination-item, \n .pagination-sm .pagination-prev, \n .pagination-sm .pagination-next": { "@layer components": { minWidth: "2rem", height: "2rem", padding: "0 0.5rem", fontSize: "0.75rem" } }, ".pagination-lg .pagination-item, \n .pagination-lg .pagination-prev, \n .pagination-lg .pagination-next": { "@layer components": { minWidth: "3rem", height: "3rem", padding: "0 1rem", fontSize: "1rem" } }, ".pagination-compact": { "@layer components": { gap: "0" } }, ".pagination-compact .pagination-item, \n .pagination-compact .pagination-prev, \n .pagination-compact .pagination-next": { "@layer components": { borderRadius: "0" } }, ".pagination-compact .pagination-item:first-child, \n .pagination-compact .pagination-prev": { "@layer components": { borderRadius: "var(--radius-sm) 0 0 var(--radius-sm)" } }, ".pagination-compact .pagination-item:last-child, \n .pagination-compact .pagination-next": { "@layer components": { borderRadius: "0 var(--radius-sm) var(--radius-sm) 0" } }, ".pagination-responsive": { "@layer components": { flexWrap: "wrap", justifyContent: "center" } }, ".menu li > a, \n .menu li > button, \n .menu-item, \n .menu[popover], \n .pagination-item, \n .pagination-prev, \n .pagination-next": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".modal": [{ "@layer components": { position: "fixed", inset: "0", zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem", visibility: "hidden", opacity: 0, transition: "visibility 200ms ease-out, opacity 200ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "visibility 0ms, opacity 0ms" } } }], ".modal.modal-open, \n .modal:target": { "@layer components": { visibility: "visible", opacity: 1 } }, ".modal-box": [{ "@layer components": { position: "relative", zIndex: 1, maxWidth: "32rem", maxHeight: "calc(100vh - 5rem)", padding: "1.5rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-2xl)", overflowY: "auto", transform: "scale(0.95)", transition: "transform 200ms ease-out" } }, { "@layer components": { "@media (max-width: 640px)": { maxWidth: "calc(100vw - 2rem)", margin: "1rem" } } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "transform 0ms" } } }], ".modal.modal-open .modal-box, \n .modal:target .modal-box": { "@layer components": { transform: "scale(1)" } }, ".modal-backdrop": { "@layer components": { position: "fixed", inset: "0", zIndex: -1, backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", cursor: "pointer" } }, ".modal-backdrop::before": { "@layer components": { content: "''", position: "absolute", inset: "0" } }, ".modal-action": { "@layer components": { display: "flex", justifyContent: "flex-end", gap: "0.5rem", marginTop: "1.5rem", paddingTop: "1rem" } }, ".modal-toggle": { "@layer components": { position: "fixed", width: "0", height: "0", appearance: "none", opacity: 0 } }, ".modal-toggle:checked + .modal": { "@layer components": { visibility: "visible", opacity: 1 } }, ".modal-toggle:checked + .modal .modal-box": { "@layer components": { transform: "scale(1)" } }, ".modal-sm .modal-box": { "@layer components": { maxWidth: "20rem" } }, ".modal-lg .modal-box": { "@layer components": { maxWidth: "48rem" } }, ".modal-full .modal-box": { "@layer components": { maxWidth: "calc(100vw - 2rem)", maxHeight: "calc(100vh - 2rem)", width: "100%", height: "100%" } }, ".modal-top": { "@layer components": { alignItems: "flex-start", paddingTop: "2rem" } }, ".modal-bottom": { "@layer components": { alignItems: "flex-end", paddingBottom: "2rem" } }, ".modal-middle": { "@layer components": { alignItems: "center" } }, ".modal-close": { "@layer components": { position: "absolute", top: "0.75rem", right: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", fontSize: "1.25rem", 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" } }, ".modal-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".modal-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".modal-header": { "@layer components": { marginBottom: "1rem", paddingRight: "2rem" } }, ".modal-title": { "@layer components": { fontSize: "1.25rem", fontWeight: 600, color: "var(--color-on-surface)", margin: "0" } }, ".modal-body": { "@layer components": { color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".modal-responsive": { "@layer components": { "@media (max-width: 640px)": { alignItems: "flex-end", padding: "0" } } }, ".modal-responsive .modal-box": { "@layer components": { "@media (max-width: 640px)": { maxWidth: "100%", maxHeight: "90vh", margin: "0", borderRadius: "var(--radius-lg) var(--radius-lg) 0 0" } } }, ".drawer-modal": { "@layer components": { alignItems: "stretch", justifyContent: "flex-end", padding: "0" } }, ".drawer-modal .modal-box": { "@layer components": { maxWidth: "20rem", maxHeight: "100vh", height: "100%", margin: "0", borderRadius: "0", transform: "translateX(100%)" } }, ".drawer-modal.modal-open .modal-box, \n .drawer-modal:target .modal-box": { "@layer components": { transform: "translateX(0)" } }, ".drawer-modal-left": { "@layer components": { justifyContent: "flex-start" } }, ".drawer-modal-left .modal-box": { "@layer components": { transform: "translateX(-100%)" } }, ".drawer-modal-left.modal-open .modal-box, \n .drawer-modal-left:target .modal-box": { "@layer components": { transform: "translateX(0)" } }, ".alert-dialog": { "@layer components": { textAlign: "center" } }, ".alert-dialog .modal-box": { "@layer components": { maxWidth: "24rem" } }, ".alert-dialog .modal-icon": { "@layer components": { width: "4rem", height: "4rem", margin: "0 auto 1rem", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-full)", fontSize: "2rem" } }, ".alert-dialog .modal-icon.info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".alert-dialog .modal-icon.success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".alert-dialog .modal-icon.warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".alert-dialog .modal-icon.error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".alert-dialog .modal-action": { "@layer components": { justifyContent: "center" } }, ".modal-focus-trap": { "@layer components": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } }, ".avatar": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", position: "relative", width: "3rem", height: "3rem", borderRadius: "var(--radius-full)", overflow: "visible", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", fontWeight: 500, flexShrink: 0 } }, ".avatar img": { "@layer components": { width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit" } }, ".avatar-placeholder": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", fontSize: "inherit", borderRadius: "inherit", overflow: "hidden", textTransform: "uppercase" } }, ".avatar-xs": { "@layer components": { width: "1.5rem", height: "1.5rem", fontSize: "0.625rem" } }, ".avatar-sm": { "@layer components": { width: "2rem", height: "2rem", fontSize: "0.75rem" } }, ".avatar-md": { "@layer components": { width: "3rem", height: "3rem", fontSize: "1rem" } }, ".avatar-lg": { "@layer components": { width: "4rem", height: "4rem", fontSize: "1.5rem" } }, ".avatar-xl": { "@layer components": { width: "6rem", height: "6rem", fontSize: "2rem" } }, ".avatar-rounded": { "@layer components": { borderRadius: "var(--radius-sm)" } }, ".avatar-square": { "@layer components": { borderRadius: "0" } }, ".avatar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".avatar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".avatar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".avatar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".avatar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".avatar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".avatar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".avatar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".avatar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".avatar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".avatar-ring": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".avatar-ring-primary": { "@layer components": { boxShadow: "0 0 0 3px var(--color-primary)" } }, ".avatar-ring-secondary": { "@layer components": { boxShadow: "0 0 0 3px var(--color-secondary)" } }, ".avatar-ring-tertiary": { "@layer components": { boxShadow: "0 0 0 3px var(--color-tertiary)" } }, ".avatar-online::after, \n .avatar-offline::after, \n .avatar-status-online::after, \n .avatar-status-offline::after, \n .avatar-status-busy::after, \n .avatar-status-away::after": { "@layer components": { content: "''", position: "absolute", insetBlockEnd: "0", insetInlineEnd: "0", width: "25%", height: "25%", minWidth: "0.5rem", minHeight: "0.5rem", borderRadius: "var(--radius-full)", border: "2px solid var(--color-surface)" } }, ".avatar-online::after, \n .avatar-status-online::after": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".avatar-offline::after, \n .avatar-status-offline::after": { "@layer components": { backgroundColor: "var(--color-outline)" } }, ".avatar-status-busy::after": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".avatar-status-away::after": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".avatar-group": { "@layer components": { display: "flex", flexDirection: "row-reverse", justifyContent: "flex-end" } }, ".avatar-group .avatar": { "@layer components": { border: "2px solid var(--color-surface)", marginInlineStart: "-0.75rem" } }, ".avatar-group .avatar:last-child": { "@layer components": { marginInlineStart: "0" } }, ".avatar-group-sm .avatar": { "@layer components": { marginInlineStart: "-0.5rem" } }, ".avatar-group-lg .avatar": { "@layer components": { marginInlineStart: "-1rem" } }, ".avatar-image": { "@layer components": { inlineSize: "100%", blockSize: "100%", borderRadius: "inherit", overflow: "hidden" } }, ".avatar-icon": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", inlineSize: "100%", blockSize: "100%" } }, ".avatar-circle": { "@layer components": { borderRadius: "var(--radius-full)" } }, ".avatar-bordered": { "@layer components": { border: "2px solid currentColor" } }, ".avatar-clickable": { "@layer components": { cursor: "pointer" } }, ".avatar-overflow": { "@layer components": { fontSize: "0.875rem" } }, ".avatar-group-dense > .avatar": { "@layer components": { marginInlineStart: "-1rem" } }, ".avatar-group-xs > .avatar": { "@layer components": { inlineSize: "1.5rem", blockSize: "1.5rem", fontSize: "0.625rem" } }, ".avatar-group-xl > .avatar": { "@layer components": { inlineSize: "6rem", blockSize: "6rem", fontSize: "2rem" } }, ".avatar-group-dense > .avatar:last-child": { "@layer components": { marginInlineStart: "0" } }, ".avatar:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".badge": { "@layer components": { boxSizing: "border-box", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0.125rem 0.5rem", fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", whiteSpace: "normal", maxInlineSize: "100%", overflowWrap: "anywhere", minInlineSize: "0", borderRadius: "var(--radius-full)", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".badge-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".badge-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".badge-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".badge-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".badge-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".badge-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".badge-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".badge-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".badge-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".badge-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".badge-outlined, \n .badge-outlined-secondary, \n .badge-outlined-tertiary, \n .badge-outline": { "@layer components": { backgroundColor: "transparent", border: "1px solid currentColor" } }, ".badge-outlined, \n .badge-outlined.badge-primary, \n .badge-outline.badge-primary": { "@layer components": { color: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".badge-outlined.badge-secondary, \n .badge-outlined-secondary, \n .badge-outline.badge-secondary": { "@layer components": { color: "var(--color-secondary)", borderColor: "var(--color-secondary)" } }, ".badge-outlined.badge-tertiary, \n .badge-outlined-tertiary, \n .badge-outline.badge-tertiary": { "@layer components": { color: "var(--color-tertiary)", borderColor: "var(--color-tertiary)" } }, ".badge-outlined.badge-accent, \n .badge-outline.badge-accent": { "@layer components": { color: "var(--color-accent)", borderColor: "var(--color-accent)" } }, ".badge-outlined.badge-neutral, \n .badge-outline.badge-neutral": { "@layer components": { color: "var(--color-neutral)", borderColor: "var(--color-neutral)" } }, ".badge-outlined.badge-base, \n .badge-outline.badge-base": { "@layer components": { color: "var(--color-base-content)", borderColor: "var(--color-base-content)" } }, ".badge-outlined.badge-info, \n .badge-outline.badge-info": { "@layer components": { color: "var(--color-info)", borderColor: "var(--color-info)" } }, ".badge-outlined.badge-success, \n .badge-outline.badge-success": { "@layer components": { color: "var(--color-success)", borderColor: "var(--color-success)" } }, ".badge-outlined.badge-warning, \n .badge-outline.badge-warning": { "@layer components": { color: "var(--color-warning)", borderColor: "var(--color-warning)" } }, ".badge-outlined.badge-error, \n .badge-outline.badge-error": { "@layer components": { color: "var(--color-error)", borderColor: "var(--color-error)" } }, ".badge-tonal, \n .badge-soft": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".badge-tonal.badge-primary, \n .badge-soft.badge-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".badge-tonal.badge-secondary, \n .badge-tonal-secondary, \n .badge-soft.badge-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".badge-tonal.badge-tertiary, \n .badge-tonal-tertiary, \n .badge-soft.badge-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".badge-tonal.badge-accent, \n .badge-soft.badge-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".badge-tonal.badge-neutral, \n .badge-soft.badge-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".badge-tonal.badge-base, \n .badge-soft.badge-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".badge-tonal.badge-info, \n .badge-soft.badge-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".badge-tonal.badge-success, \n .badge-soft.badge-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".badge-tonal.badge-warning, \n .badge-soft.badge-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".badge-tonal.badge-error, \n .badge-soft.badge-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".badge-sm": { "@layer components": { padding: "0 0.375rem", fontSize: "0.625rem", lineHeight: "0.875rem" } }, ".badge-lg": { "@layer components": { padding: "0.25rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem" } }, ".badge-indicator": { "@layer components": { position: "relative", paddingInlineStart: "1rem" } }, ".badge-indicator::before": { "@layer components": { content: "''", position: "absolute", insetInlineStart: "0.375rem", top: "50%", transform: "translateY(-50%)", width: "0.375rem", height: "0.375rem", borderRadius: "var(--radius-full)", backgroundColor: "currentColor" } }, ".badge-filled": { "@layer components": { fontWeight: 500 } }, ".badge-md": { "@layer components": { padding: "0.125rem 0.5rem", fontSize: "0.75rem", lineHeight: "1rem" } }, ".badge-notification": { "@layer components": { position: "absolute", insetBlockStart: "0", insetInlineEnd: "0", transform: "translate(50%, -50%)" } }, ".badge-notification:dir(rtl)": { "@layer components": { transform: "translate(-50%, -50%)" } }, ".badge-removable": { "@layer components": { gap: "0.25rem" } }, ".badge-removable > button": { "@layer components": { display: "inline-flex", padding: "0", border: "0", color: "inherit", background: "transparent", cursor: "pointer" } }, ".badge-removable > button:focus-visible": { "@layer components": { outline: "2px solid currentColor", outlineOffset: "2px" } }, ".badge-dot": { "@layer components": { width: "0.5rem", height: "0.5rem", padding: "0", borderRadius: "var(--radius-full)" } }, ".chat-scroll": [{ "@layer components": { "--chat-scroll-indicator-size": "0.875rem", "--chat-scroll-indicator-active-size": "1.125rem", "--chat-scroll-indicator-thickness": "0.1875rem", "--chat-scroll-indicator-gap": "0.3125rem", "--chat-scroll-indicator-hover-scale": "1.55", "--chat-scroll-indicator-neighbor-scale": "1.22", containerType: "size", containerName: "chat-scroll", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", columnGap: "0.75rem", alignItems: "start", minHeight: "0", overflowX: "hidden", overflowY: "auto", scrollBehavior: "smooth", overscrollBehaviorY: "contain", timelineScope: `--chat-1,
|
|
154
154
|
--chat-2,
|
|
155
155
|
--chat-3,
|
|
156
156
|
--chat-4,
|
|
@@ -177,13 +177,12 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
|
|
|
177
177
|
var(--chat-scroll-indicator-active-size) * var(--chat-scroll-indicator-hover-scale)
|
|
178
178
|
)`, 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,
|
|
179
179
|
opacity 140ms ease,
|
|
180
|
-
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))
|
|
181
|
-
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,
|
|
180
|
+
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%)", minInlineSize: "0", boxSizing: "border-box", 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-bubble pre": { "@layer components": { maxInlineSize: "100%", minInlineSize: "0", overflow: "auto", whiteSpace: "pre" } }, ".chat-bubble a": { "@layer components": { overflowWrap: "anywhere", textDecoration: "underline" } }, ".chat-start .chat-bubble::before, \n .chat-end .chat-bubble::before": { "@layer components": { content: '""', position: "absolute", insetBlockStart: "0", inlineSize: "0.75rem", blockSize: "1rem", backgroundColor: "var(--chat-bubble-bg)", maskImage: "radial-gradient(ellipse at 0 100%, transparent 68%, black 72%)", pointerEvents: "none" } }, ".chat-start .chat-bubble::before": { "@layer components": { insetInlineStart: "-0.5rem" } }, ".chat-start .chat-bubble": { "@layer components": { borderStartStartRadius: "0" } }, ".chat-end .chat-bubble::before": { "@layer components": { insetInlineEnd: "-0.5rem", transform: "scaleX(-1)" } }, ".chat-end .chat-bubble": { "@layer components": { borderStartEndRadius: "0" } }, ".chat-start:dir(rtl) .chat-bubble::before": { "@layer components": { transform: "scaleX(-1)" } }, ".chat-end:dir(rtl) .chat-bubble::before": { "@layer components": { transform: "none" } }, ".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, \n .list-item-text": { "@layer components": { overflowWrap: "anywhere", fontSize: "1rem", fontWeight: 500, lineHeight: "1.5rem", color: "var(--color-on-surface)" } }, ".list-item-subtitle, \n .list-item-secondary": { "@layer components": { overflowWrap: "anywhere", 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-item-leading, .list-item-trailing": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", flex: "none" } }, ".list-item-trailing": { "@layer components": { marginInlineStart: "auto" } }, ".list-item-two-line, .list-item-three-line": { "@layer components": { alignItems: "flex-start" } }, ".list-item-interactive": { "@layer components": { cursor: "pointer" } }, ".list-item-interactive:hover": { "@layer components": { background: "var(--color-surface-container)" } }, ".list-item-interactive:focus-visible": { "@layer components": { outline: "2px solid var(--color-primary)", outlineOffset: "-2px" } }, ".list-item-active-primary": { "@layer components": { background: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".list-item-active-secondary": { "@layer components": { background: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".list-item-active-tertiary": { "@layer components": { background: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".list-comfortable > .list-item": { "@layer components": { paddingBlock: "1rem" } }, ".list-surface-container": { "@layer components": { background: "var(--color-surface-container)" } }, ".list-surface-container-low": { "@layer components": { background: "var(--color-surface-container-low)" } }, ".list-surface-container-high": { "@layer components": { background: "var(--color-surface-container-high)" } }, ".list-nested": { "@layer components": { marginInlineStart: "1rem" } }, ".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": { marginInlineStart: "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-hover tbody tr:is(.selected, .table-row-selected), \n .table-hover .table-row:is(.selected, .table-row-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-numeric": { "@layer components": { textAlign: "end", fontVariantNumeric: "tabular-nums" } }, ".table-center": { "@layer components": { textAlign: "center" } }, ".table-actions": { "@layer components": { whiteSpace: "nowrap", textAlign: "end" } }, ".table-checkbox": { "@layer components": { inlineSize: "1%" } }, ".table-sort-icon": { "@layer components": { display: "inline-block", marginInlineStart: "0.25rem" } }, ".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)" } }, ".stats": { "@layer components": { display: "grid", gridAutoFlow: "column", gridAutoColumns: "minmax(0, 1fr)", maxInlineSize: "100%", color: "var(--color-on-surface)", background: "var(--color-surface-container-low)", borderRadius: "var(--radius-md)" } }, ".stat": { "@layer components": { display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: "0.25rem 1rem", minInlineSize: "0", padding: "1rem", color: "var(--color-on-surface)", overflowWrap: "anywhere" } }, ".stats > .stat + .stat": { "@layer components": { borderInlineStart: "1px solid var(--color-outline-variant)" } }, ".stat-title, .stat-desc": { "@layer components": { gridColumn: "1", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".stat-value": { "@layer components": { gridColumn: "1", fontSize: "2rem", fontWeight: 700, lineHeight: 1.2, fontVariantNumeric: "tabular-nums" } }, ".stat-figure": { "@layer components": { gridColumn: "2", gridRow: "1 / 4", alignSelf: "center" } }, ".stat-actions": { "@layer components": { gridColumn: "1 / -1", display: "flex", flexWrap: "wrap", gap: "0.5rem", marginBlockStart: "0.5rem" } }, ".stats-vertical": { "@layer components": { gridAutoFlow: "row" } }, ".stats-horizontal": { "@layer components": { gridAutoFlow: "column" } }, ".stats-vertical > .stat + .stat": { "@layer components": { borderInlineStart: "0", borderBlockStart: "1px solid var(--color-outline-variant)" } }, ".stats-responsive": { "@layer components": { containerType: "inline-size", containerName: "stats" } }, ".stats-responsive > .stat": { "@layer components": { "@container stats (max-width: 32rem)": { gridColumn: "1" } } }, ".stats-responsive > .stat + .stat": { "@layer components": { "@container stats (max-width: 32rem)": { borderInlineStart: "0", borderBlockStart: "1px solid var(--color-outline-variant)" } } }, ".stat-primary .stat-value": { "@layer components": { color: "var(--color-primary)" } }, ".stat-secondary .stat-value": { "@layer components": { color: "var(--color-secondary)" } }, ".stat-tertiary .stat-value": { "@layer components": { color: "var(--color-tertiary)" } }, ".stat-info .stat-value": { "@layer components": { color: "var(--color-info)" } }, ".stat-success .stat-value": { "@layer components": { color: "var(--color-success)" } }, ".stat-warning .stat-value": { "@layer components": { color: "var(--color-warning)" } }, ".stat-error .stat-value": { "@layer components": { color: "var(--color-error)" } }, ".kbd": { "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", minInlineSize: "1.5rem", padding: "0.125rem 0.375rem", font: "0.875rem ui-monospace, monospace", lineHeight: 1.5, color: "var(--color-on-surface)", background: "var(--color-surface-container)", border: "1px solid currentColor", borderBlockEndWidth: "2px", borderRadius: "var(--radius-sm)", verticalAlign: "middle" } }, ".kbd-xs": { "@layer components": { fontSize: "0.625rem" } }, ".kbd-sm": { "@layer components": { fontSize: "0.75rem" } }, ".kbd-lg": { "@layer components": { fontSize: "1rem", padding: "0.25rem 0.5rem" } }, ".kbd-primary": { "@layer components": { color: "var(--color-primary)" } }, ".kbd-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".kbd-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".kbd-info": { "@layer components": { color: "var(--color-info)" } }, ".kbd-success": { "@layer components": { color: "var(--color-success)" } }, ".kbd-warning": { "@layer components": { color: "var(--color-warning)" } }, ".kbd-error": { "@layer components": { color: "var(--color-error)" } }, ".kbd-ghost": { "@layer components": { borderColor: "transparent" } }, ".carousel": [{ "@layer components": { display: "flex", gap: "1rem", maxInlineSize: "100%", minInlineSize: "0", overflow: "auto", scrollSnapType: "inline mandatory", scrollBehavior: "smooth", color: "var(--color-on-surface)" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { scrollBehavior: "auto" } } }, { "@layer components": { "@media print": { flexWrap: "wrap", overflow: "visible", maxBlockSize: "none" } } }], ".carousel-item": { "@layer components": { flex: "none", minInlineSize: "0", maxInlineSize: "100%", scrollSnapAlign: "start", overflowWrap: "anywhere" } }, ".carousel-horizontal": { "@layer components": { flexDirection: "row", scrollSnapType: "inline mandatory" } }, ".carousel-center > .carousel-item": { "@layer components": { scrollSnapAlign: "center" } }, ".carousel-end > .carousel-item": { "@layer components": { scrollSnapAlign: "end" } }, ".carousel-start > .carousel-item": { "@layer components": { scrollSnapAlign: "start" } }, ".carousel-vertical": { "@layer components": { flexDirection: "column", maxBlockSize: "var(--carousel-height, 24rem)", scrollSnapType: "block mandatory" } }, ".carousel:focus-visible, .carousel-item:focus-visible": { "@layer components": { outline: "2px solid var(--color-primary)", outlineOffset: "-2px" } }, ".carousel-primary": { "@layer components": { color: "var(--color-primary)" } }, ".carousel-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".carousel-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".carousel-info": { "@layer components": { color: "var(--color-info)" } }, ".carousel-success": { "@layer components": { color: "var(--color-success)" } }, ".carousel-warning": { "@layer components": { color: "var(--color-warning)" } }, ".carousel-error": { "@layer components": { color: "var(--color-error)" } }, ".countdown": { "@layer components": { display: "inline-flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "baseline", color: "var(--color-on-surface)", fontVariantNumeric: "tabular-nums" } }, ".countdown-value": { "@layer components": { display: "inline-block", minInlineSize: "2ch", textAlign: "center", fontSize: "2rem", lineHeight: 1.2, overflowWrap: "anywhere" } }, ".countdown-sm .countdown-value": { "@layer components": { fontSize: "1rem" } }, ".countdown-lg .countdown-value": { "@layer components": { fontSize: "3rem" } }, ".countdown-transition .countdown-value": { "@layer components": { "@media (prefers-reduced-motion: no-preference)": { transition: "color 150ms ease" } } }, ".countdown-animated .countdown-value.countdown-tick": { "@layer components": { "@media (prefers-reduced-motion: no-preference)": { animation: "countdown-tick 240ms ease-out" } } }, "@keyframes countdown-tick": { from: { transform: "translateY(-0.2em)", opacity: 0.35 }, to: { transform: "translateY(0)", opacity: 1 } }, ".countdown-value.countdown-tick": { "@layer components": { "@media print": { animation: "none" } } }, ".countdown-primary": { "@layer components": { color: "var(--color-primary)" } }, ".countdown-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".countdown-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".countdown-info": { "@layer components": { color: "var(--color-info)" } }, ".countdown-success": { "@layer components": { color: "var(--color-success)" } }, ".countdown-warning": { "@layer components": { color: "var(--color-warning)" } }, ".countdown-error": { "@layer components": { color: "var(--color-error)" } }, ".diff": [{ "@layer components": { "--diff-position": "50%", display: "grid", position: "relative", isolation: "isolate", aspectRatio: "var(--diff-ratio, 16 / 9)", maxInlineSize: "100%", overflow: "hidden", color: "var(--color-on-surface)", background: "var(--color-surface-container)", borderRadius: "var(--radius-md)" } }, { "@layer components": { "@media print": { aspectRatio: "auto", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", overflow: "visible" } } }], ".diff-before, .diff-after": { "@layer components": { gridArea: "1 / 1", minInlineSize: "0", minBlockSize: "0", overflow: "hidden" } }, ".diff-before": { "@layer components": { zIndex: 1, clipPath: "inset(0 calc(100% - clamp(0%, var(--diff-position), 100%)) 0 0)" } }, ".diff:dir(rtl) > .diff-before": { "@layer components": { clipPath: "inset(0 0 0 calc(100% - clamp(0%, var(--diff-position), 100%)))" } }, ".diff img": { "@layer components": { display: "block", inlineSize: "100%", blockSize: "100%", objectFit: "cover" } }, ".diff-label": { "@layer components": { position: "absolute", insetBlockStart: "0.5rem", insetInlineStart: "0.5rem", padding: "0.25rem 0.5rem", background: "var(--color-surface)", color: "var(--color-on-surface)", borderRadius: "var(--radius-sm)" } }, ".diff-after .diff-label": { "@layer components": { insetInlineStart: "auto", insetInlineEnd: "0.5rem" } }, ".diff-static": { "@layer components": { aspectRatio: "auto", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" } }, ".diff.diff-static > .diff-before, .diff-static > .diff-after": { "@layer components": { gridArea: "auto", clipPath: "none", position: "relative" } }, ".diff > .diff-before, .diff:dir(rtl) > .diff-before, .diff > .diff-after": { "@layer components": { "@media print": { gridArea: "auto", clipPath: "none", position: "relative" } } }, ".diff-primary": { "@layer components": { color: "var(--color-primary)" } }, ".diff-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".diff-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".diff-info": { "@layer components": { color: "var(--color-info)" } }, ".diff-success": { "@layer components": { color: "var(--color-success)" } }, ".diff-warning": { "@layer components": { color: "var(--color-warning)" } }, ".diff-error": { "@layer components": { color: "var(--color-error)" } }, ":where(.autocomplete, .autocomplete *)": { "@layer components": { boxSizing: "border-box" } }, ".autocomplete": { "@layer components": { position: "relative", display: "inline-block", width: "100%" } }, ".autocomplete-input": { "@layer components": { width: "100%", minInlineSize: "0", 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-wrapper": { "@layer components": { position: "relative", display: "flex", alignItems: "center" } }, ".autocomplete-toggle": { "@layer components": { position: "absolute", insetInlineEnd: "0.125rem", insetBlockStart: "50%", transform: "translateY(-50%)", display: "grid", placeItems: "center", inlineSize: "2.75rem", blockSize: "2.75rem", padding: "0", font: "inherit", color: "var(--color-on-surface)", background: "transparent", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer" } }, ".autocomplete-toggle:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".autocomplete-toggle:focus-visible": { "@layer components": { outline: "2px solid currentColor", outlineOffset: "-3px" } }, ".autocomplete-toggle:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed" } }, ".autocomplete-sm .autocomplete-toggle": { "@layer components": { inlineSize: "1.75rem", blockSize: "1.75rem" } }, ".autocomplete-outlined .autocomplete-input": { "@layer components": { backgroundColor: "transparent" } }, ".autocomplete-options": { "@layer components": { listStyle: "none", margin: "0", padding: "0.25rem" } }, ".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%", insetInline: "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.autocomplete-dropdown-open, \n .autocomplete-dropdown.show": { "@layer components": { opacity: 1, visibility: "visible", transform: "translateY(0)" } }, ".autocomplete-dropdown[hidden], \n .autocomplete-option[hidden], \n .autocomplete-no-results[hidden], \n .autocomplete-no-options[hidden]": { "@layer components": { display: "none" } }, ".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.autocomplete-option-focused, \n .autocomplete-option.highlighted": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, '.autocomplete-option.selected, \n .autocomplete-option.autocomplete-option-selected, \n .autocomplete-option[aria-selected="true"]': { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, '.autocomplete-option:disabled, \n .autocomplete-option[aria-disabled="true"], \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, \n .autocomplete-group-label": { "@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, \n .autocomplete-no-options": { "@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", insetInlineEnd: "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": { paddingInlineEnd: "2.5rem" } }, ".autocomplete-tags, \n .autocomplete-chips": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", padding: "0.375rem", paddingInlineEnd: "2.5rem", minHeight: "2.75rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".autocomplete-tags:focus-within, \n .autocomplete-chips:focus-within": { "@layer components": { borderColor: "var(--color-primary)", boxShadow: "0 0 0 3px var(--color-primary-container)" } }, ".autocomplete-tag, \n .autocomplete-chip": { "@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, \n .autocomplete-chip-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, \n .autocomplete-chip-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" } }, ".autocomplete-input-wrapper .autocomplete-input": { "@layer components": { paddingInlineEnd: "3.25rem" } }, ".autocomplete-sm .autocomplete-input-wrapper .autocomplete-input": { "@layer components": { paddingInlineEnd: "2.25rem" } }, ".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" } } }, ":where(.datepicker, .datepicker-input)": { "@layer components": { boxSizing: "border-box" } }, ".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-calendar > :is(.datepicker-weekdays, .datepicker-days)": { "@layer components": { gridColumn: "1 / -1" } }, ".datepicker-trigger:focus-visible": { "@layer components": { outline: "2px solid currentColor", outlineOffset: "2px" } }, ".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", maxInlineSize: "22rem" } }, ".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", minInlineSize: "0", maxInlineSize: "100%" } }, ".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" } } }, ".filter-group": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.5rem", color: "var(--color-on-surface)" } }, ".filter-group > .chip": { "@layer components": { position: "relative", cursor: "pointer" } }, ".filter-group-input": { "@layer components": { position: "absolute", inset: "0", width: "100%", height: "100%", margin: "0", opacity: 0, cursor: "inherit" } }, ".filter-group > .chip:has(.filter-group-input:checked)": [{ "@layer components": { backgroundColor: "var(--filter-background, var(--color-primary-container))", color: "var(--filter-content, var(--color-on-primary-container))", borderColor: "var(--filter-color, var(--color-primary))" } }, { "@layer components": { "@media (forced-colors: active)": { borderColor: "Highlight", outline: "1px solid Highlight" } } }], ".filter-group > .chip::before": { "@layer components": { content: '""', display: "inline-block", inlineSize: "0.5rem", blockSize: "0.75rem", border: "solid currentColor", borderWidth: "0 2px 2px 0", transform: "rotate(45deg)", visibility: "hidden", flexShrink: 0 } }, ".filter-group > .chip:has(.filter-group-input:checked)::before": { "@layer components": { visibility: "visible" } }, ".filter-group > .chip:has(.filter-group-input:focus-visible)": { "@layer components": { outline: "2px solid currentColor", outlineOffset: "2px" } }, ".filter-group > .chip:has(.filter-group-input:disabled)": { "@layer components": { opacity: 0.38, cursor: "not-allowed" } }, ".filter-group-primary": { "@layer components": { "--filter-color": "var(--color-primary)", "--filter-background": "var(--color-primary-container)", "--filter-content": "var(--color-on-primary-container)" } }, ".filter-group-secondary": { "@layer components": { "--filter-color": "var(--color-secondary)", "--filter-background": "var(--color-secondary-container)", "--filter-content": "var(--color-on-secondary-container)" } }, ".filter-group-tertiary": { "@layer components": { "--filter-color": "var(--color-tertiary)", "--filter-background": "var(--color-tertiary-container)", "--filter-content": "var(--color-on-tertiary-container)" } }, ".filter-group-info": { "@layer components": { "--filter-color": "var(--color-info)", "--filter-background": "var(--color-info-container)", "--filter-content": "var(--color-on-info-container)" } }, ".filter-group-success": { "@layer components": { "--filter-color": "var(--color-success)", "--filter-background": "var(--color-success-container)", "--filter-content": "var(--color-on-success-container)" } }, ".filter-group-warning": { "@layer components": { "--filter-color": "var(--color-warning)", "--filter-background": "var(--color-warning-container)", "--filter-content": "var(--color-on-warning-container)" } }, ".filter-group-error": { "@layer components": { "--filter-color": "var(--color-error)", "--filter-background": "var(--color-error-container)", "--filter-content": "var(--color-on-error-container)" } }, ".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" } } }, ":where(.otp-input, .otp-input-field)": { "@layer components": { boxSizing: "border-box" } }, ".otp-input": { "@layer components": { flexWrap: "wrap", 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, \n .otp-input-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, \n .otp-input-underlined .otp-input-field": { "@layer components": { backgroundColor: "transparent", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "0" } }, ".otp-input-underline .otp-input-field:focus, \n .otp-input-underlined .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, \n .otp-input-helper": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)" } }, ".otp-error-message, \n .otp-input-helper-error": { "@layer components": { fontSize: "0.75rem", color: "var(--color-error)" } }, ".otp-code": [{ "@layer components": { "--otp-length": "6", display: "block", boxSizing: "border-box", inlineSize: "calc(var(--otp-length) * 1ch + 1.5rem + 4px)", maxInlineSize: "100%", minInlineSize: "0", padding: "0.75rem", font: "1.5rem / 1.5 ui-monospace, monospace", fontVariantNumeric: "tabular-nums", direction: "ltr", textAlign: "start", color: "var(--color-on-surface)", caretColor: "currentColor", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)" } }, { "@layer components": { "@supports (background-image: repeating-linear-gradient(to right, transparent 0 1ch))": { backgroundImage: "repeating-linear-gradient(to right, transparent 0 0.125ch, var(--color-outline-variant) 0.125ch 0.875ch, transparent 0.875ch 1ch)", backgroundSize: "calc(var(--otp-length) * 1ch) 3px", backgroundRepeat: "no-repeat", backgroundOrigin: "content-box", backgroundPosition: "left bottom" } } }, { "@layer components": { "@media (forced-colors: active)": { backgroundImage: "none" } } }], ".otp-code-4": { "@layer components": { "--otp-length": "4" } }, ".otp-code:focus": { "@layer components": { outline: "2px solid currentColor", outlineOffset: "3px" } }, ".otp-code:disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed" } }, ".otp-code-primary": { "@layer components": { color: "var(--color-primary)" } }, ".otp-code-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".otp-code-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".otp-code-info": { "@layer components": { color: "var(--color-info)" } }, ".otp-code-success": { "@layer components": { color: "var(--color-success)" } }, ".otp-code-warning": { "@layer components": { color: "var(--color-warning)" } }, ".otp-code-error": { "@layer components": { color: "var(--color-error)" } }, ".otp-input-helper-success": { "@layer components": { fontSize: "0.75rem", color: "var(--color-success)" } }, ".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)" } }, ".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):not(.rating-native) .rating-item:hover ~ .rating-item": { "@layer components": { color: "var(--color-outline)" } }, ".rating:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-warning)" } }, ".rating-primary:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-primary)" } }, ".rating-secondary:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-secondary)" } }, ".rating-tertiary:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-tertiary)" } }, ".rating-info:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-info)" } }, ".rating-success:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-success)" } }, ".rating-error:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-error)" } }, ".rating-accent:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-accent)" } }, ".rating-neutral:not(.rating-readonly):not(.rating-native):hover .rating-item": { "@layer components": { color: "var(--color-neutral)" } }, ".rating-base:not(.rating-readonly):not(.rating-native):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-native": { "@layer components": { "--rating-color": "var(--color-warning)", flexWrap: "wrap", maxInlineSize: "100%" } }, ".rating-native.rating-primary": { "@layer components": { "--rating-color": "var(--color-primary)" } }, ".rating-native.rating-secondary": { "@layer components": { "--rating-color": "var(--color-secondary)" } }, ".rating-native.rating-tertiary": { "@layer components": { "--rating-color": "var(--color-tertiary)" } }, ".rating-native.rating-info": { "@layer components": { "--rating-color": "var(--color-info)" } }, ".rating-native.rating-success": { "@layer components": { "--rating-color": "var(--color-success)" } }, ".rating-native.rating-warning": { "@layer components": { "--rating-color": "var(--color-warning)" } }, ".rating-native.rating-error": { "@layer components": { "--rating-color": "var(--color-error)" } }, ".rating-native .rating-item": { "@layer components": { position: "relative", padding: "0.25rem" } }, ".rating-native .rating-input": { "@layer components": { inset: "0", width: "100%", height: "100%", margin: "0", cursor: "inherit" } }, ".rating-native .rating-item:is(.filled, .active, :hover), \n .rating-native .rating-item": { "@layer components": { color: "var(--color-outline)", transform: "none" } }, ".rating-native .rating-item:has(.rating-input:checked), \n .rating-native .rating-item:not(.rating-none):has(~ .rating-item .rating-input:checked)": { "@layer components": { color: "var(--rating-color)" } }, ".rating-native .rating-item:has(.rating-input:focus-visible)": { "@layer components": { outline: "2px solid currentColor", outlineOffset: "2px", borderRadius: "var(--radius-xs)" } }, ".rating-native .rating-item:has(.rating-input:disabled)": { "@layer components": { opacity: 0.38, cursor: "not-allowed" } }, ".rating-native .rating-none": { "@layer components": { color: "var(--color-on-surface)", fontSize: "0.875rem" } }, ".rating-native .rating-item:has(.rating-input:checked)": { "@layer components": { "@media (forced-colors: active)": { outline: "2px solid Highlight" } } }, ".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)" } }, ".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" } } }, ":where(.switch)": { "@layer components": { boxSizing: "border-box" } }, ".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,
|
|
182
181
|
border-color 200ms ease-in-out,
|
|
183
182
|
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,
|
|
184
183
|
width 200ms ease-in-out,
|
|
185
|
-
margin 200ms ease-in-out !important` } }, ".switch:checked": { "@layer components": { gridTemplateColumns: "1fr 1fr 0fr", backgroundColor: "var(--switch-color)", borderColor: "var(--switch-color)" } }, ".switch:checked::before": { "@layer components": { backgroundColor: "var(--switch-content-color)" } }, ".switch:hover:not(:disabled):not(:checked)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".switch:hover:not(:disabled):not(:checked)::before": { "@layer components": { backgroundColor: "var(--color-on-surface-variant)" } }, ".switch:checked:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--switch-color), black 10%)", borderColor: "color-mix(in oklch, var(--switch-color), black 10%)" } }, ".switch:checked:hover:not(:disabled)::before": { "@layer components": { backgroundColor: "var(--switch-container-color)" } }, ".switch:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--switch-color) 20%, transparent)" } }, ".switch:active:not(:disabled)::before": { "@layer components": { width: "calc(var(--switch-thumb-size) + 0.25rem)" } }, ".switch:checked:active:not(:disabled)::before": { "@layer components": { marginLeft: "-0.25rem" } }, ".switch:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".switch:disabled:not(:checked)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-surface-container-highest) 12%, transparent)", borderColor: "color-mix(in oklch, var(--color-on-surface) 12%, transparent)" } }, ".switch:disabled:not(:checked)::before": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 38%, transparent)" } }, ".switch:disabled:checked": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 12%, transparent)", borderColor: "transparent" } }, ".switch:disabled:checked::before": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".switch-xs": { "@layer components": { "--switch-width": "2rem", "--switch-height": "1.25rem", "--switch-thumb-size": "0.5rem" } }, ".switch-sm": { "@layer components": { "--switch-width": "2.5rem", "--switch-height": "1.5rem", "--switch-thumb-size": "0.75rem" } }, ".switch-md": { "@layer components": { "--switch-width": "3.25rem", "--switch-height": "2rem", "--switch-thumb-size": "1rem" } }, ".switch-lg": { "@layer components": { "--switch-width": "4rem", "--switch-height": "2.5rem", "--switch-thumb-size": "1.25rem" } }, ".switch-xl": { "@layer components": { "--switch-width": "4.75rem", "--switch-height": "3rem", "--switch-thumb-size": "1.5rem" } }, ".switch-primary": { "@layer components": { "--switch-color": "var(--color-primary)", "--switch-content-color": "var(--color-primary-content)", "--switch-container-color": "var(--color-primary-container)" } }, ".switch-secondary": { "@layer components": { "--switch-color": "var(--color-secondary)", "--switch-content-color": "var(--color-secondary-content)", "--switch-container-color": "var(--color-secondary-container)" } }, ".switch-tertiary": { "@layer components": { "--switch-color": "var(--color-tertiary)", "--switch-content-color": "var(--color-tertiary-content)", "--switch-container-color": "var(--color-tertiary-container)" } }, ".switch-success": { "@layer components": { "--switch-color": "var(--color-success)", "--switch-content-color": "var(--color-success-content)", "--switch-container-color": "var(--color-success-container)" } }, ".switch-warning": { "@layer components": { "--switch-color": "var(--color-warning)", "--switch-content-color": "var(--color-warning-content)", "--switch-container-color": "var(--color-warning-container)" } }, ".switch-error": { "@layer components": { "--switch-color": "var(--color-error)", "--switch-content-color": "var(--color-error-content)", "--switch-container-color": "var(--color-error-container)" } }, ".switch-info": { "@layer components": { "--switch-color": "var(--color-info)", "--switch-content-color": "var(--color-info-content)", "--switch-container-color": "var(--color-info-container)" } }, ".switch-accent": { "@layer components": { "--switch-color": "var(--color-accent)", "--switch-content-color": "var(--color-accent-content)", "--switch-container-color": "color-mix(in oklch, var(--color-accent) 20%, var(--color-surface))" } }, ".switch-neutral": { "@layer components": { "--switch-color": "var(--color-neutral)", "--switch-content-color": "var(--color-neutral-content)", "--switch-container-color": "color-mix(in oklch, var(--color-neutral) 20%, var(--color-surface))" } }, ".switch-base": { "@layer components": { "--switch-color": "var(--color-base-100)", "--switch-content-color": "var(--color-base-content)", "--switch-container-color": "color-mix(in oklch, var(--color-base-100) 20%, var(--color-surface))" } }, ".switch-ghost": { "@layer components": { "--switch-border-color": "transparent", "--switch-track-color": "transparent" } }, ".switch-label": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.75rem", cursor: "pointer", userSelect: "none", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".switch-label:has(.switch:disabled)": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".switch-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".switch-group-horizontal": { "@layer components": { flexDirection: "row", flexWrap: "wrap", gap: "1.5rem" } }, ".switch, \n .switch::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none !important" } } }, ".textarea-container": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0.25rem", width: "100%" } }, ".textarea-label": { "@layer components": { display: "block", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".textarea-label-floating": { "@layer components": { position: "absolute", top: "0.75rem", left: "1rem", fontSize: "1rem", fontWeight: 400, color: "var(--color-on-surface-variant)", pointerEvents: "none", transition: "all 150ms ease-in-out", transformOrigin: "left top", zIndex: 1 } }, ".textarea:focus ~ .textarea-label-floating, \n .textarea:not(:placeholder-shown) ~ .textarea-label-floating": { "@layer components": { top: "-0.5rem", left: "0.75rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "var(--color-surface)", padding: "0 0.25rem" } }, ".textarea-filled ~ .textarea-label-floating": { "@layer components": { backgroundColor: "transparent" } }, ".textarea-filled:focus ~ .textarea-label-floating, \n .textarea-filled:not(:placeholder-shown) ~ .textarea-label-floating": { "@layer components": { top: "0.25rem", left: "0.75rem", backgroundColor: "transparent" } }, ".textarea-helper": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", marginTop: "0.25rem" } }, ".textarea:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".textarea[readonly]": { "@layer components": { backgroundColor: "var(--color-surface-container)", cursor: "default" } }, ".textarea-full": { "@layer components": { width: "100%" } }, ".textarea-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" } }, ".textarea-filled:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)", borderBottomColor: "var(--color-on-surface)" } }, ".textarea-filled:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)", boxShadow: "none" } }, ".textarea-filled.textarea-primary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-primary)" } }, ".textarea-filled.textarea-secondary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-secondary)" } }, ".textarea-filled.textarea-tertiary:focus-visible": { "@layer components": { borderBottomColor: "var(--color-tertiary)" } }, ".textarea-filled.textarea-info:focus-visible": { "@layer components": { borderBottomColor: "var(--color-info)" } }, ".textarea-filled.textarea-success:focus-visible": { "@layer components": { borderBottomColor: "var(--color-success)" } }, ".textarea-filled.textarea-warning:focus-visible": { "@layer components": { borderBottomColor: "var(--color-warning)" } }, ".textarea-filled.textarea-error:focus-visible": { "@layer components": { borderBottomColor: "var(--color-error)" } }, ".textarea-filled.textarea-accent:focus-visible": { "@layer components": { borderBottomColor: "var(--color-accent)" } }, ".textarea-filled.textarea-neutral:focus-visible": { "@layer components": { borderBottomColor: "var(--color-neutral)" } }, ".textarea-filled.textarea-base:focus-visible": { "@layer components": { borderBottomColor: "var(--color-base-content)" } }, ".textarea-outlined": { "@layer components": { backgroundColor: "transparent", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)" } }, ".textarea-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".textarea-ghost:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent" } }, ".textarea-ghost:focus-visible": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".textarea-primary": { "@layer components": { color: "var(--color-primary)" } }, ".textarea-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".textarea-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".textarea-info": { "@layer components": { color: "var(--color-info)" } }, ".textarea-success": { "@layer components": { color: "var(--color-success)" } }, ".textarea-warning": { "@layer components": { color: "var(--color-warning)" } }, ".textarea-error": { "@layer components": { color: "var(--color-error)" } }, ".textarea-accent": { "@layer components": { color: "var(--color-accent)" } }, ".textarea-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".textarea-base": { "@layer components": { color: "var(--color-base-content)" } }, ".textarea-sm": { "@layer components": { minHeight: "4rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", lineHeight: "1.25rem", borderRadius: "var(--radius-xs)" } }, ".textarea-lg": { "@layer components": { minHeight: "8rem", padding: "1rem 1.25rem", fontSize: "1.125rem", lineHeight: "1.75rem", borderRadius: "var(--radius-sm)" } }, ".textarea-resize-none": { "@layer components": { resize: "none" } }, ".textarea-resize-vertical": { "@layer components": { resize: "vertical" } }, ".textarea-resize-horizontal": { "@layer components": { resize: "horizontal" } }, ".textarea-resize-both": { "@layer components": { resize: "both" } }, ".textarea-auto-resize, \n .textarea-autosize": { "@layer components": { resize: "none", overflow: "hidden", minHeight: "3rem", fieldSizing: "content" } }, ".textarea-counter": { "@layer components": { fontSize: "0.75rem", lineHeight: "1rem", color: "var(--color-on-surface-variant)", textAlign: "right" } }, ".textarea-counter-error, \n .textarea-counter-exceeded": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea-label": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea-helper": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea-label-floating": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-error .textarea:focus ~ .textarea-label-floating": { "@layer components": { color: "var(--color-error)" } }, ".textarea-container-success .textarea-label": { "@layer components": { color: "var(--color-success)" } }, ".textarea-container-success .textarea-helper": { "@layer components": { color: "var(--color-success)" } }, ".textarea-container-success .textarea-label-floating": { "@layer components": { color: "var(--color-success)" } }, ".textarea-container-success .textarea:focus ~ .textarea-label-floating": { "@layer components": { color: "var(--color-success)" } }, ".textarea, \n .textarea-label-floating": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".theme-controller-item": { "@layer components": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } }, ".theme-controller-label": { "@layer components": { 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-variant)", backgroundColor: "transparent", borderRadius: "calc(var(--radius-box, 1.5rem) - 0.25rem)", cursor: "pointer", transition: `background-color 150ms ease-in-out, color 150ms ease-in-out,
|
|
186
|
-
box-shadow 150ms ease-in-out`, userSelect: "none", whiteSpace: "nowrap" } }, ".theme-controller-label:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".theme-controller-item:focus-visible + .theme-controller-label": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".theme-controller-item:checked + .theme-controller-label": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", boxShadow: "var(--shadow-xs)" } }, ".theme-controller-item:checked + .theme-controller-label:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".theme-controller": { "@layer components": { display: "inline-flex", alignItems: "stretch", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-box, 1.5rem)", padding: "0.25rem", gap: "0.125rem" } }, ".theme-controller-sm": { "@layer components": { padding: "0.125rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 0.75)" } }, ".theme-controller-sm .theme-controller-label": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 0.75 - 0.125rem)" } }, ".theme-controller-lg": { "@layer components": { padding: "0.375rem", gap: "0.25rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 1.25)" } }, ".theme-controller-lg .theme-controller-label": { "@layer components": { padding: "0.75rem 1.5rem", fontSize: "1rem", lineHeight: "1.5rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 1.25 - 0.375rem)" } }, ".theme-controller-icon .theme-controller-label": { "@layer components": { padding: "0.5rem" } }, ".theme-controller-icon.theme-controller-sm .theme-controller-label": { "@layer components": { padding: "0.375rem" } }, ".theme-controller-icon.theme-controller-lg .theme-controller-label": { "@layer components": { padding: "0.75rem" } }, ".theme-controller-dropdown": { "@layer components": { position: "relative", display: "inline-block" } }, ".theme-controller-trigger": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-field, 0.5rem)", cursor: "pointer", userSelect: "none", transition: "background-color 150ms ease-in-out", listStyle: "none" } }, ".theme-controller-trigger::-webkit-details-marker": { "@layer components": { display: "none" } }, ".theme-controller-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".theme-controller-trigger:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".theme-controller-trigger::after": { "@layer components": { content: "''", display: "inline-block", width: "0.5rem", height: "0.5rem", borderRight: "2px solid currentColor", borderBottom: "2px solid currentColor", transform: "rotate(45deg)", marginTop: "-0.125rem", transition: "transform 150ms ease-in-out" } }, ".theme-controller-dropdown[open] .theme-controller-trigger::after": { "@layer components": { transform: "rotate(-135deg)", marginTop: "0.125rem" } }, ".theme-controller-menu": { "@layer components": { position: "absolute", top: "calc(100% + 0.25rem)", left: "0", zIndex: 50, minWidth: "100%", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-field, 0.5rem)", padding: "0.25rem", boxShadow: "var(--shadow-md)", display: "flex", flexDirection: "column", gap: "0.125rem" } }, ".theme-controller-menu .theme-controller-label": { "@layer components": { width: "100%", justifyContent: "flex-start", borderRadius: "calc(var(--radius-field, 0.5rem) - 0.25rem)" } }, ".theme-controller-dropdown-sm .theme-controller-trigger": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem" } }, ".theme-controller-dropdown-sm .theme-controller-menu": { "@layer components": { padding: "0.125rem" } }, ".theme-controller-dropdown-sm .theme-controller-menu .theme-controller-label": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", lineHeight: "1rem" } }, ".theme-controller-dropdown-lg .theme-controller-trigger": { "@layer components": { padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem" } }, ".theme-controller-dropdown-lg .theme-controller-menu": { "@layer components": { padding: "0.375rem" } }, ".theme-controller-dropdown-lg .theme-controller-menu .theme-controller-label": { "@layer components": { padding: "0.75rem 1.5rem", fontSize: "1rem", lineHeight: "1.5rem" } }, ".theme-controller-dropdown-icon .theme-controller-trigger": { "@layer components": { padding: "0.5rem" } }, ".theme-controller-dropdown-icon .theme-controller-trigger::after": { "@layer components": { display: "none" } }, ".theme-controller-dropdown-icon.theme-controller-dropdown-sm .theme-controller-trigger": { "@layer components": { padding: "0.375rem" } }, ".theme-controller-dropdown-icon.theme-controller-dropdown-lg .theme-controller-trigger": { "@layer components": { padding: "0.75rem" } }, ".theme-controller-dropdown-end .theme-controller-menu": { "@layer components": { left: "auto", right: "0" } }, ".theme-controller-label, \n .theme-controller-trigger, \n .theme-controller-trigger::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".toggle-btn": [{ "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "0.625rem 1rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)", userSelect: "none" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".toggle-btn:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-surface-variant) 50%, transparent)" } }, ".toggle-btn-active, \n .toggle-btn.active": { "@layer components": { color: "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary)" } }, ".toggle-btn-active:hover:not(:disabled), \n .toggle-btn.active:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container) 90%, transparent)" } }, ".toggle-btn-primary.toggle-btn-active, \n .toggle-btn-primary.active": { "@layer components": { color: "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary)" } }, ".toggle-btn-secondary.toggle-btn-active, \n .toggle-btn-secondary.active": { "@layer components": { color: "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)", borderColor: "var(--color-secondary)" } }, ".toggle-btn-tertiary.toggle-btn-active, \n .toggle-btn-tertiary.active": { "@layer components": { color: "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)", borderColor: "var(--color-tertiary)" } }, ".toggle-btn-info.toggle-btn-active, \n .toggle-btn-info.active": { "@layer components": { color: "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)", borderColor: "var(--color-info)" } }, ".toggle-btn-success.toggle-btn-active, \n .toggle-btn-success.active": { "@layer components": { color: "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)", borderColor: "var(--color-success)" } }, ".toggle-btn-warning.toggle-btn-active, \n .toggle-btn-warning.active": { "@layer components": { color: "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)", borderColor: "var(--color-warning)" } }, ".toggle-btn-error.toggle-btn-active, \n .toggle-btn-error.active": { "@layer components": { color: "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)", borderColor: "var(--color-error)" } }, ".toggle-btn-accent.toggle-btn-active, \n .toggle-btn-accent.active": { "@layer components": { color: "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", borderColor: "var(--color-accent)" } }, ".toggle-btn-neutral.toggle-btn-active, \n .toggle-btn-neutral.active": { "@layer components": { color: "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", borderColor: "var(--color-neutral)" } }, ".toggle-btn-base.toggle-btn-active, \n .toggle-btn-base.active": { "@layer components": { color: "var(--color-base-content)", backgroundColor: "var(--color-base-200)", borderColor: "var(--color-base-content)" } }, ".toggle-btn-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".toggle-btn-ghost:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent" } }, ".toggle-btn-ghost.toggle-btn-primary": { "@layer components": { color: "var(--color-primary)" } }, ".toggle-btn-ghost.toggle-btn-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".toggle-btn-ghost.toggle-btn-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".toggle-btn-ghost.toggle-btn-info": { "@layer components": { color: "var(--color-info)" } }, ".toggle-btn-ghost.toggle-btn-success": { "@layer components": { color: "var(--color-success)" } }, ".toggle-btn-ghost.toggle-btn-warning": { "@layer components": { color: "var(--color-warning)" } }, ".toggle-btn-ghost.toggle-btn-error": { "@layer components": { color: "var(--color-error)" } }, ".toggle-btn-ghost.toggle-btn-accent": { "@layer components": { color: "var(--color-accent)" } }, ".toggle-btn-ghost.toggle-btn-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".toggle-btn-ghost.toggle-btn-base": { "@layer components": { color: "var(--color-base-content)" } }, ".toggle-btn:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toggle-btn:disabled, \n .toggle-btn-disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed", pointerEvents: "none" } }, ".toggle-btn-sm": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.8125rem", gap: "0.375rem" } }, ".toggle-btn-lg": { "@layer components": { padding: "0.75rem 1.25rem", fontSize: "1rem", gap: "0.625rem" } }, ".toggle-group": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", padding: "0.25rem", backgroundColor: "color-mix(in oklch, var(--color-surface-variant) 30%, transparent)" } }, ".toggle-group .toggle-btn": { "@layer components": { border: "none", borderRadius: "var(--radius-xs)", margin: "0" } }, ".toggle-group .toggle-btn:not(:last-child)": { "@layer components": { marginRight: "0.125rem" } }, ".toggle-group-vertical": { "@layer components": { flexDirection: "column" } }, ".toggle-group-vertical .toggle-btn:not(:last-child)": { "@layer components": { marginRight: "0", marginBottom: "0.125rem" } }, ".toggle-group-exclusive .toggle-btn": { "@layer components": { flex: 1 } }, ".toggle-btn-icon-only": { "@layer components": { padding: "0.625rem", aspectRatio: "1" } }, ".toggle-btn-icon-only.toggle-btn-sm": { "@layer components": { padding: "0.5rem" } }, ".toggle-btn-icon-only.toggle-btn-lg": { "@layer components": { padding: "0.875rem" } }, ".toggle-icon": { "@layer components": { width: "1.125rem", height: "1.125rem", flexShrink: 0 } }, ".toggle-segmented": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", padding: "0.25rem" } }, ".toggle-segmented .toggle-btn": { "@layer components": { border: "none", backgroundColor: "transparent", borderRadius: "var(--radius-xs)" } }, ".toggle-segmented .toggle-btn.toggle-btn-active, \n .toggle-segmented .toggle-btn.active": { "@layer components": { backgroundColor: "var(--color-surface-variant)", borderColor: "transparent", boxShadow: "var(--shadow-sm)" } }, ".toggle-chip": { "@layer components": { borderRadius: "var(--radius-lg)", padding: "0.5rem 1rem" } }, ".toggle-chip.toggle-btn-active, \n .toggle-chip.active": { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary-container)" } }, ".toggle-outlined": { "@layer components": { backgroundColor: "transparent" } }, ".toggle-outlined.toggle-btn-active, \n .toggle-outlined.active": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".toggle-filled": { "@layer components": { backgroundColor: "var(--color-surface-variant)", border: "none" } }, ".toggle-filled.toggle-btn-active, \n .toggle-filled.active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".toggle-badge": { "@layer components": { position: "relative" } }, ".toggle-badge::after": { "@layer components": { content: '""', position: "absolute", top: "0.25rem", right: "0.25rem", width: "0.5rem", height: "0.5rem", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", border: "2px solid var(--color-surface)" } }, ".toggle-full": { "@layer components": { width: "100%" } }, ".toggle-group-full": { "@layer components": { width: "100%" } }, ".toggle-group-full .toggle-btn": { "@layer components": { flex: 1 } }, ".toggle-loading": { "@layer components": { position: "relative", pointerEvents: "none" } }, ".toggle-loading::after": [{ "@layer components": { content: '""', position: "absolute", top: "50%", left: "50%", width: "1rem", height: "1rem", marginTop: "-0.5rem", marginLeft: "-0.5rem", border: "2px solid currentColor", borderTopColor: "transparent", borderRadius: "var(--radius-full)", animation: "toggle-spin 0.6s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes toggle-spin": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" } }, ".time-input": { "@layer components": { position: "relative", display: "inline-flex", alignItems: "center", width: "100%" } }, ".time-input-field": { "@layer components": { display: "flex", width: "100%", padding: "0.75rem 2.5rem 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)", outline: "none", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".time-input-field:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".time-input-field:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".time-input-icon": { "@layer components": { position: "absolute", right: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", pointerEvents: "none" } }, ".time-input-segments": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.125rem", padding: "0.75rem 1rem", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)" } }, ".time-input-segment": { "@layer components": { width: "2rem", padding: "0.25rem", fontSize: "1rem", fontWeight: 500, textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", outline: "none", transition: "background-color 150ms ease-in-out" } }, ".time-input-segment:focus": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".time-input-separator": { "@layer components": { fontSize: "1rem", fontWeight: 500, color: "var(--color-on-surface-variant)" } }, ".time-input-period": { "@layer components": { display: "inline-flex", marginLeft: "0.5rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-xs)", padding: "0.125rem" } }, ".time-input-period-btn": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem", fontWeight: 500, 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" } }, ".time-input-period-btn:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".time-input-period-btn-active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".time-input-sm .time-input-field": { "@layer components": { padding: "0.5rem 2rem 0.5rem 0.75rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".time-input-sm .time-input-segment": { "@layer components": { width: "1.75rem", fontSize: "0.875rem" } }, ".time-input-lg .time-input-field": { "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".time-input-lg .time-input-segment": { "@layer components": { width: "2.5rem", fontSize: "1.125rem" } }, ".time-input-filled .time-input-field, \n .time-input-filled .time-input-segments": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".time-input-filled .time-input-field:focus, \n .time-input-filled .time-input-segments:focus-within": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".time-input-primary .time-input-field, \n .time-input-primary .time-input-segments": { "@layer components": { color: "var(--color-primary)" } }, ".time-input-primary .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".time-input-secondary .time-input-field, \n .time-input-secondary .time-input-segments": { "@layer components": { color: "var(--color-secondary)" } }, ".time-input-secondary .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".time-input-tertiary .time-input-field, \n .time-input-tertiary .time-input-segments": { "@layer components": { color: "var(--color-tertiary)" } }, ".time-input-tertiary .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".time-input-info .time-input-field, \n .time-input-info .time-input-segments": { "@layer components": { color: "var(--color-info)" } }, ".time-input-info .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".time-input-success .time-input-field, \n .time-input-success .time-input-segments": { "@layer components": { color: "var(--color-success)" } }, ".time-input-success .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".time-input-warning .time-input-field, \n .time-input-warning .time-input-segments": { "@layer components": { color: "var(--color-warning)" } }, ".time-input-warning .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".time-input-error .time-input-field, \n .time-input-error .time-input-segments": { "@layer components": { color: "var(--color-error)" } }, ".time-input-error .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".time-input-accent .time-input-field, \n .time-input-accent .time-input-segments": { "@layer components": { color: "var(--color-accent)" } }, ".time-input-accent .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".time-input-neutral .time-input-field, \n .time-input-neutral .time-input-segments": { "@layer components": { color: "var(--color-neutral)" } }, ".time-input-neutral .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".time-input-base .time-input-field, \n .time-input-base .time-input-segments": { "@layer components": { color: "var(--color-base-content)" } }, ".time-input-base .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".time-input-ghost .time-input-field, \n .time-input-ghost .time-input-segments": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".time-input-ghost .time-input-field:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".time-picker-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", zIndex: 50, display: "none", minWidth: "12rem", marginTop: "0.25rem", padding: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)" } }, ".time-picker-dropdown-open": { "@layer components": { display: "block" } }, ".time-picker-columns": { "@layer components": { display: "flex", gap: "0.5rem", maxHeight: "12rem" } }, ".time-picker-column": { "@layer components": { flex: 1, display: "flex", flexDirection: "column", gap: "0.125rem", overflowY: "auto" } }, ".time-picker-option": { "@layer components": { padding: "0.375rem 0.5rem", fontSize: "0.875rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".time-picker-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".time-picker-option-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".time-input-field, \n .time-input-segment, \n .time-input-period-btn, \n .time-picker-option": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".tree-select": [{ "@layer components": { position: "relative", display: "inline-flex", flexDirection: "column", width: "100%" } }, { "@layer components": { "@supports (anchor-name: --tree-select)": { anchorName: "--tree-select" } } }], ".tree-select-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" } }, ".tree-select-trigger:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".tree-select-trigger:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.tree-select-trigger:disabled, \n .tree-select-trigger[aria-disabled="true"]': { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, "div.tree-select-trigger": { "@layer components": { userSelect: "none" } }, "div.tree-select-trigger:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".tree-select-value": { "@layer components": { flex: 1, display: "flex", alignItems: "center", gap: "0.5rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--color-on-surface-variant)" } }, ".tree-select-value-selected": { "@layer components": { color: "var(--color-on-surface)" } }, ".tree-select-path": { "@layer components": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".tree-select-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" } }, ".tree-select-open .tree-select-arrow": { "@layer components": { transform: "rotate(180deg)" } }, ".tree-select-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" } }, ".tree-select-clear:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".tree-select-clear svg": { "@layer components": { width: "1rem", height: "1rem" } }, ".tree-select-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", right: "0", zIndex: 50, display: "none", maxHeight: "20rem", marginTop: "0.25rem", padding: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", overflowY: "auto" } }, ".tree-select-open .tree-select-dropdown": { "@layer components": { display: "block" } }, ".tree-select-dropdown[popover]": [{ "@layer components": { position: "absolute", inset: "unset", margin: "0", border: "1px solid var(--color-outline-variant)" } }, { "@layer components": { "@supports (anchor-name: --tree-select)": { positionAnchor: "--tree-select", top: "anchor(bottom)", left: "anchor(left)", right: "anchor(right)", positionTryFallbacks: "flip-block" } } }], ".tree-select-dropdown[popover]:popover-open": { "@layer components": { display: "block" } }, ".tree-select-search": { "@layer components": { display: "flex", padding: "0.5rem", marginBottom: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".tree-select-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" } }, ".tree-select-search-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".tree-select-options": { "@layer components": { display: "flex", flexDirection: "column" } }, ".tree-select-node": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".tree-select-node:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".tree-select-node-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".tree-select-node-selected:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".tree-select-node-leaf": { "@layer components": { paddingLeft: "2rem" } }, ".tree-select-node-toggle": { "@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-xs)", cursor: "pointer", flexShrink: 0, transition: "transform 150ms ease-in-out" } }, ".tree-select-node-toggle:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".tree-select-node-expanded .tree-select-node-toggle, \n .tree-select-node-expanded > .tree-select-node-toggle": { "@layer components": { transform: "rotate(90deg)" } }, ".tree-select-node-icon": { "@layer components": { width: "1rem", height: "1rem" } }, ".tree-select-node-label": { "@layer components": { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".tree-select-node-custom-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".tree-select-children": { "@layer components": { display: "none", paddingLeft: "1.5rem" } }, ".tree-select-node-expanded + .tree-select-children": { "@layer components": { display: "block" } }, ".tree-select-checkbox": { "@layer components": { display: "flex", alignItems: "center", cursor: "pointer" } }, ".tree-select-checkbox-input": { "@layer components": { position: "absolute", width: "0", height: "0", opacity: 0 } }, ".tree-select-checkbox-box": { "@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)", transition: "background-color 150ms ease-in-out, border-color 150ms ease-in-out" } }, ".tree-select-checkbox-input:checked + .tree-select-checkbox-box": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".tree-select-checkbox-input:checked + .tree-select-checkbox-box::after": { "@layer components": { content: "''", display: "block", width: "0.375rem", height: "0.625rem", border: "2px solid var(--color-primary-content)", borderWidth: "0 2px 2px 0", transform: "rotate(45deg) translateY(-1px)" } }, ".tree-select-empty": { "@layer components": { padding: "1rem", textAlign: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".tree-select-sm .tree-select-trigger": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".tree-select-lg .tree-select-trigger": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".tree-select-outlined .tree-select-trigger": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)" } }, ".tree-select-filled .tree-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" } }, ".tree-select-filled .tree-select-trigger:focus": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".tree-select-multiple .tree-select-value": { "@layer components": { flexWrap: "wrap", gap: "0.25rem" } }, ".tree-select-primary .tree-select-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".tree-select-primary .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".tree-select-secondary .tree-select-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".tree-select-secondary .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".tree-select-tertiary .tree-select-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".tree-select-tertiary .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".tree-select-info .tree-select-trigger": { "@layer components": { color: "var(--color-info)" } }, ".tree-select-info .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".tree-select-success .tree-select-trigger": { "@layer components": { color: "var(--color-success)" } }, ".tree-select-success .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".tree-select-warning .tree-select-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".tree-select-warning .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".tree-select-error .tree-select-trigger": { "@layer components": { color: "var(--color-error)" } }, ".tree-select-error .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".tree-select-accent .tree-select-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".tree-select-accent .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".tree-select-neutral .tree-select-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".tree-select-neutral .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".tree-select-base .tree-select-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".tree-select-base .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".tree-select-ghost .tree-select-trigger": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".tree-select-ghost .tree-select-trigger:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".tree-select-disabled .tree-select-trigger": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".tree-select-loading .tree-select-trigger": { "@layer components": { cursor: "wait" } }, ".tree-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: "tree-select-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes tree-select-spin": { to: { transform: "rotate(360deg)" } }, ".tree-select-tags": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", flex: 1 } }, ".tree-select-tag": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", padding: "0.125rem 0.5rem", fontSize: "0.75rem", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "var(--radius-lg)" } }, ".tree-select-tag-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "0.875rem", height: "0.875rem", padding: "0", color: "inherit", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", opacity: 0.7 } }, ".tree-select-tag-remove:hover": { "@layer components": { opacity: 1, backgroundColor: "color-mix(in oklch, currentColor 10%, transparent)" } }, ".tree-select-trigger, \n .tree-select-arrow, \n .tree-select-node-toggle, \n .tree-select-node, \n .tree-select-checkbox-box": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".alert": { "@layer components": { display: "flex", alignItems: "flex-start", gap: "0.75rem", padding: "1rem", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", border: "1px solid var(--color-outline)" } }, ".alert-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", flexShrink: 0 } }, ".alert-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".alert-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem" } }, ".alert-description": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", opacity: 0.9 } }, ".alert-close": [{ "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "currentColor", opacity: 0.7, backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "opacity 150ms ease-in-out", flexShrink: 0, marginLeft: "auto" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".alert-close:hover": { "@layer components": { opacity: 1 } }, ".alert-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".alert-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)", borderColor: "transparent" } }, ".alert-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)", borderColor: "transparent" } }, ".alert-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)", borderColor: "transparent" } }, ".alert-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)", borderColor: "transparent" } }, ".alert-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderColor: "transparent" } }, ".alert-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)", borderColor: "transparent" } }, ".alert-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)", borderColor: "transparent" } }, ".alert-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)", borderColor: "transparent" } }, ".alert-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)", borderColor: "transparent" } }, ".alert-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)", borderColor: "transparent" } }, ".alert-filled.alert-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".alert-filled.alert-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".alert-filled.alert-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".alert-filled.alert-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".alert-filled.alert-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".alert-filled.alert-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".alert-filled.alert-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".alert-filled.alert-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".alert-filled.alert-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".alert-filled.alert-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".alert-outlined": { "@layer components": { backgroundColor: "transparent" } }, ".alert-outlined.alert-info": { "@layer components": { borderColor: "var(--color-info)", color: "var(--color-info)" } }, ".alert-outlined.alert-success": { "@layer components": { borderColor: "var(--color-success)", color: "var(--color-success)" } }, ".alert-outlined.alert-warning": { "@layer components": { borderColor: "var(--color-warning)", color: "var(--color-warning)" } }, ".alert-outlined.alert-error": { "@layer components": { borderColor: "var(--color-error)", color: "var(--color-error)" } }, ".alert-outlined.alert-primary": { "@layer components": { borderColor: "var(--color-primary)", color: "var(--color-primary)" } }, ".alert-outlined.alert-secondary": { "@layer components": { borderColor: "var(--color-secondary)", color: "var(--color-secondary)" } }, ".alert-outlined.alert-tertiary": { "@layer components": { borderColor: "var(--color-tertiary)", color: "var(--color-tertiary)" } }, ".alert-outlined.alert-accent": { "@layer components": { borderColor: "var(--color-accent)", color: "var(--color-accent)" } }, ".alert-outlined.alert-neutral": { "@layer components": { borderColor: "var(--color-neutral)", color: "var(--color-neutral)" } }, ".alert-outlined.alert-base": { "@layer components": { borderColor: "var(--color-base-content)", color: "var(--color-base-content)" } }, ".alert-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".alert-ghost.alert-primary": { "@layer components": { color: "var(--color-primary)" } }, ".alert-ghost.alert-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".alert-ghost.alert-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".alert-ghost.alert-info": { "@layer components": { color: "var(--color-info)" } }, ".alert-ghost.alert-success": { "@layer components": { color: "var(--color-success)" } }, ".alert-ghost.alert-warning": { "@layer components": { color: "var(--color-warning)" } }, ".alert-ghost.alert-error": { "@layer components": { color: "var(--color-error)" } }, ".alert-ghost.alert-accent": { "@layer components": { color: "var(--color-accent)" } }, ".alert-ghost.alert-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".alert-ghost.alert-base": { "@layer components": { color: "var(--color-base-content)" } }, ".alert-dismissible": { "@layer components": { paddingRight: "2.5rem", position: "relative" } }, ".alert-dismissible .alert-close": { "@layer components": { position: "absolute", top: "0.75rem", right: "0.75rem" } }, ".alert-compact": { "@layer components": { padding: "0.625rem 0.875rem", gap: "0.5rem" } }, ".alert-compact .alert-icon": { "@layer components": { width: "1.25rem", height: "1.25rem", fontSize: "1rem" } }, ".alert-compact .alert-title, \n .alert-compact .alert-description": { "@layer components": { fontSize: "0.8125rem" } }, ".alert-actions": { "@layer components": { display: "flex", gap: "0.5rem", marginTop: "0.5rem" } }, ".alert-filled .alert-actions .btn-text": { "@layer components": { color: "inherit" } }, ".alert-filled .alert-actions .btn-text:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, currentColor 12%, transparent)" } }, ".alert-banner": { "@layer components": { borderRadius: "0", borderLeft: "none", borderRight: "none" } }, "dialog.dialog": { "@layer components": { position: "fixed", margin: "auto", padding: "0", border: "none", width: "100%", maxWidth: "28rem", maxHeight: "calc(100vh - 4rem)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", borderRadius: "var(--radius-2xl)", boxShadow: "var(--shadow-2xl)", overflow: "hidden" } }, "dialog.dialog::backdrop": { "@layer components": { backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)" } }, ".dialog-box": [{ "@layer components": { display: "flex", flexDirection: "column", maxHeight: "calc(100vh - 4rem)", overflow: "hidden" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "transform 0ms" } } }], ".dialog-header": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem", padding: "1.5rem 1.5rem 0" } }, ".dialog-title": { "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 600, lineHeight: "1.75rem", margin: "0", color: "var(--color-on-surface)" } }, ".dialog-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", fontSize: "1.25rem", 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 } }, ".dialog-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".dialog-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".dialog-body": { "@layer components": { padding: "1rem 1.5rem", overflowY: "auto", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".dialog-footer": { "@layer components": { display: "flex", justifyContent: "flex-end", gap: "0.5rem", padding: "1rem 1.5rem 1.5rem" } }, ".dialog-footer-start": { "@layer components": { justifyContent: "flex-start" } }, ".dialog-footer-center": { "@layer components": { justifyContent: "center" } }, ".dialog-footer-between": { "@layer components": { justifyContent: "space-between" } }, "dialog.dialog.dialog-sm": { "@layer components": { maxWidth: "20rem" } }, "dialog.dialog.dialog-lg": { "@layer components": { maxWidth: "40rem" } }, "dialog.dialog.dialog-xl": { "@layer components": { maxWidth: "56rem" } }, "dialog.dialog.dialog-fullscreen": { "@layer components": { maxWidth: "100%", maxHeight: "100%", width: "100%", height: "100%", borderRadius: "0", margin: "0" } }, "dialog.dialog.dialog-fullscreen .dialog-box": { "@layer components": { maxHeight: "100%" } }, "dialog.dialog.dialog-top": { "@layer components": { marginTop: "2rem", marginBottom: "auto" } }, "dialog.dialog.dialog-bottom": { "@layer components": { marginTop: "auto", marginBottom: "2rem" } }, ".dialog-scrollable .dialog-body": { "@layer components": { maxHeight: "50vh", overflowY: "auto" } }, ".dialog-divider .dialog-header": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)", paddingBottom: "1rem" } }, ".dialog-divider .dialog-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)", paddingTop: "1rem" } }, ".dialog": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "visibility 0ms, opacity 0ms" } } }, ".progress": { "@layer components": { position: "relative", width: "100%", height: "0.5rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-full)", overflow: "hidden" } }, ".progress-bar": { "@layer components": { position: "absolute", top: "0", left: "0", height: "100%", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)", transition: "width 300ms ease-in-out" } }, ".progress-primary .progress-bar": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".progress-secondary .progress-bar": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".progress-tertiary .progress-bar": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".progress-info .progress-bar": { "@layer components": { backgroundColor: "var(--color-info)" } }, ".progress-success .progress-bar": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".progress-warning .progress-bar": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".progress-error .progress-bar": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".progress-accent .progress-bar": { "@layer components": { backgroundColor: "var(--color-accent)" } }, ".progress-neutral .progress-bar": { "@layer components": { backgroundColor: "var(--color-neutral)" } }, ".progress-base .progress-bar": { "@layer components": { backgroundColor: "var(--color-base-content)" } }, ".progress-xs": { "@layer components": { height: "0.25rem" } }, ".progress-sm": { "@layer components": { height: "0.375rem" } }, ".progress-lg": { "@layer components": { height: "0.75rem" } }, ".progress-xl": { "@layer components": { height: "1rem" } }, ".progress-indeterminate .progress-bar": { "@layer components": { width: "30%", animation: "progress-indeterminate 1.5s infinite ease-in-out" } }, "@keyframes progress-indeterminate": { "0%": { left: "-30%" }, "100%": { left: "100%" } }, ".progress-labeled": { "@layer components": { position: "relative" } }, ".progress-label": { "@layer components": { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", fontSize: "0.625rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".progress-striped .progress-bar": { "@layer components": { backgroundImage: `linear-gradient(
|
|
184
|
+
margin 200ms ease-in-out !important` } }, ".switch:checked": { "@layer components": { gridTemplateColumns: "1fr 1fr 0fr", backgroundColor: "var(--switch-color)", borderColor: "var(--switch-color)" } }, ".switch:checked::before": { "@layer components": { backgroundColor: "var(--switch-content-color)" } }, ".switch:hover:not(:disabled):not(:checked)": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".switch:hover:not(:disabled):not(:checked)::before": { "@layer components": { backgroundColor: "var(--color-on-surface-variant)" } }, ".switch:checked:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--switch-color), black 10%)", borderColor: "color-mix(in oklch, var(--switch-color), black 10%)" } }, ".switch:checked:hover:not(:disabled)::before": { "@layer components": { backgroundColor: "var(--switch-container-color)" } }, ".switch:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, var(--switch-color) 20%, transparent)" } }, ".switch:active:not(:disabled)::before": { "@layer components": { width: "calc(var(--switch-thumb-size) + 0.25rem)" } }, ".switch:checked:active:not(:disabled)::before": { "@layer components": { marginLeft: "-0.25rem" } }, ".switch:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".switch:disabled:not(:checked)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-surface-container-highest) 12%, transparent)", borderColor: "color-mix(in oklch, var(--color-on-surface) 12%, transparent)" } }, ".switch:disabled:not(:checked)::before": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 38%, transparent)" } }, ".switch:disabled:checked": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 12%, transparent)", borderColor: "transparent" } }, ".switch:disabled:checked::before": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".switch-xs": { "@layer components": { "--switch-width": "2rem", "--switch-height": "1.25rem", "--switch-thumb-size": "0.5rem" } }, ".switch-sm": { "@layer components": { "--switch-width": "2.5rem", "--switch-height": "1.5rem", "--switch-thumb-size": "0.75rem" } }, ".switch-md": { "@layer components": { "--switch-width": "3.25rem", "--switch-height": "2rem", "--switch-thumb-size": "1rem" } }, ".switch-lg": { "@layer components": { "--switch-width": "4rem", "--switch-height": "2.5rem", "--switch-thumb-size": "1.25rem" } }, ".switch-xl": { "@layer components": { "--switch-width": "4.75rem", "--switch-height": "3rem", "--switch-thumb-size": "1.5rem" } }, ".switch-primary": { "@layer components": { "--switch-color": "var(--color-primary)", "--switch-content-color": "var(--color-primary-content)", "--switch-container-color": "var(--color-primary-container)" } }, ".switch-secondary": { "@layer components": { "--switch-color": "var(--color-secondary)", "--switch-content-color": "var(--color-secondary-content)", "--switch-container-color": "var(--color-secondary-container)" } }, ".switch-tertiary": { "@layer components": { "--switch-color": "var(--color-tertiary)", "--switch-content-color": "var(--color-tertiary-content)", "--switch-container-color": "var(--color-tertiary-container)" } }, ".switch-success": { "@layer components": { "--switch-color": "var(--color-success)", "--switch-content-color": "var(--color-success-content)", "--switch-container-color": "var(--color-success-container)" } }, ".switch-warning": { "@layer components": { "--switch-color": "var(--color-warning)", "--switch-content-color": "var(--color-warning-content)", "--switch-container-color": "var(--color-warning-container)" } }, ".switch-error": { "@layer components": { "--switch-color": "var(--color-error)", "--switch-content-color": "var(--color-error-content)", "--switch-container-color": "var(--color-error-container)" } }, ".switch-info": { "@layer components": { "--switch-color": "var(--color-info)", "--switch-content-color": "var(--color-info-content)", "--switch-container-color": "var(--color-info-container)" } }, ".switch-accent": { "@layer components": { "--switch-color": "var(--color-accent)", "--switch-content-color": "var(--color-accent-content)", "--switch-container-color": "color-mix(in oklch, var(--color-accent) 20%, var(--color-surface))" } }, ".switch-neutral": { "@layer components": { "--switch-color": "var(--color-neutral)", "--switch-content-color": "var(--color-neutral-content)", "--switch-container-color": "color-mix(in oklch, var(--color-neutral) 20%, var(--color-surface))" } }, ".switch-base": { "@layer components": { "--switch-color": "var(--color-base-100)", "--switch-content-color": "var(--color-base-content)", "--switch-container-color": "color-mix(in oklch, var(--color-base-100) 20%, var(--color-surface))" } }, ".switch-ghost": { "@layer components": { "--switch-border-color": "transparent", "--switch-track-color": "transparent" } }, ".switch-label": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.75rem", cursor: "pointer", userSelect: "none", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".switch-label:has(.switch:disabled)": { "@layer components": { cursor: "not-allowed", opacity: 0.38 } }, ".switch-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".switch-group-horizontal": { "@layer components": { flexDirection: "row", flexWrap: "wrap", gap: "1.5rem" } }, ".switch, \n .switch::before": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none !important" } } }, ".theme-controller-item": { "@layer components": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } }, ".theme-controller-label": { "@layer components": { 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-variant)", backgroundColor: "transparent", borderRadius: "calc(var(--radius-box, 1.5rem) - 0.25rem)", cursor: "pointer", transition: `background-color 150ms ease-in-out, color 150ms ease-in-out,
|
|
185
|
+
box-shadow 150ms ease-in-out`, userSelect: "none", whiteSpace: "nowrap" } }, ".theme-controller-label:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".theme-controller-item:focus-visible + .theme-controller-label": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".theme-controller-item:checked + .theme-controller-label": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", boxShadow: "var(--shadow-xs)" } }, ".theme-controller-item:checked + .theme-controller-label:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".theme-controller": { "@layer components": { display: "inline-flex", alignItems: "stretch", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-box, 1.5rem)", padding: "0.25rem", gap: "0.125rem" } }, ".theme-controller-sm": { "@layer components": { padding: "0.125rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 0.75)" } }, ".theme-controller-sm .theme-controller-label": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", lineHeight: "1rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 0.75 - 0.125rem)" } }, ".theme-controller-lg": { "@layer components": { padding: "0.375rem", gap: "0.25rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 1.25)" } }, ".theme-controller-lg .theme-controller-label": { "@layer components": { padding: "0.75rem 1.5rem", fontSize: "1rem", lineHeight: "1.5rem", borderRadius: "calc(var(--radius-box, 1.5rem) * 1.25 - 0.375rem)" } }, ".theme-controller-icon .theme-controller-label": { "@layer components": { padding: "0.5rem" } }, ".theme-controller-icon.theme-controller-sm .theme-controller-label": { "@layer components": { padding: "0.375rem" } }, ".theme-controller-icon.theme-controller-lg .theme-controller-label": { "@layer components": { padding: "0.75rem" } }, ".theme-controller-dropdown": { "@layer components": { position: "relative", display: "inline-block" } }, ".theme-controller-trigger": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-field, 0.5rem)", cursor: "pointer", userSelect: "none", transition: "background-color 150ms ease-in-out", listStyle: "none" } }, ".theme-controller-trigger::-webkit-details-marker": { "@layer components": { display: "none" } }, ".theme-controller-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".theme-controller-trigger:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".theme-controller-trigger::after": { "@layer components": { content: "''", display: "inline-block", width: "0.5rem", height: "0.5rem", borderRight: "2px solid currentColor", borderBottom: "2px solid currentColor", transform: "rotate(45deg)", marginTop: "-0.125rem", transition: "transform 150ms ease-in-out" } }, ".theme-controller-dropdown[open] .theme-controller-trigger::after": { "@layer components": { transform: "rotate(-135deg)", marginTop: "0.125rem" } }, ".theme-controller-menu": { "@layer components": { position: "absolute", top: "calc(100% + 0.25rem)", left: "0", zIndex: 50, minWidth: "100%", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-field, 0.5rem)", padding: "0.25rem", boxShadow: "var(--shadow-md)", display: "flex", flexDirection: "column", gap: "0.125rem" } }, ".theme-controller-menu .theme-controller-label": { "@layer components": { width: "100%", justifyContent: "flex-start", borderRadius: "calc(var(--radius-field, 0.5rem) - 0.25rem)" } }, ".theme-controller-dropdown-sm .theme-controller-trigger": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem", lineHeight: "1rem" } }, ".theme-controller-dropdown-sm .theme-controller-menu": { "@layer components": { padding: "0.125rem" } }, ".theme-controller-dropdown-sm .theme-controller-menu .theme-controller-label": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.75rem", lineHeight: "1rem" } }, ".theme-controller-dropdown-lg .theme-controller-trigger": { "@layer components": { padding: "0.75rem 1rem", fontSize: "1rem", lineHeight: "1.5rem" } }, ".theme-controller-dropdown-lg .theme-controller-menu": { "@layer components": { padding: "0.375rem" } }, ".theme-controller-dropdown-lg .theme-controller-menu .theme-controller-label": { "@layer components": { padding: "0.75rem 1.5rem", fontSize: "1rem", lineHeight: "1.5rem" } }, ".theme-controller-dropdown-icon .theme-controller-trigger": { "@layer components": { padding: "0.5rem" } }, ".theme-controller-dropdown-icon .theme-controller-trigger::after": { "@layer components": { display: "none" } }, ".theme-controller-dropdown-icon.theme-controller-dropdown-sm .theme-controller-trigger": { "@layer components": { padding: "0.375rem" } }, ".theme-controller-dropdown-icon.theme-controller-dropdown-lg .theme-controller-trigger": { "@layer components": { padding: "0.75rem" } }, ".theme-controller-dropdown-end .theme-controller-menu": { "@layer components": { left: "auto", right: "0" } }, ".theme-controller-label, \n .theme-controller-trigger, \n .theme-controller-trigger::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".toggle-btn": [{ "@layer components": { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", padding: "0.625rem 1rem", fontSize: "0.875rem", fontWeight: 500, lineHeight: "1.25rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "1px solid currentColor", borderRadius: "var(--radius-sm)", cursor: "pointer", transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)", userSelect: "none" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".toggle-btn:hover:not(:disabled)": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-surface-variant) 50%, transparent)" } }, ':is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary)" } }, ':is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]):hover:not(:disabled), \n .toggle-btn.active:not([aria-pressed]):hover:not(:disabled)': { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container) 90%, transparent)" } }, '.toggle-btn-primary:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-primary.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-primary-container)", backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary)" } }, '.toggle-btn-secondary:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-secondary.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-secondary-container)", backgroundColor: "var(--color-secondary-container)", borderColor: "var(--color-secondary)" } }, '.toggle-btn-tertiary:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-tertiary.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-tertiary-container)", backgroundColor: "var(--color-tertiary-container)", borderColor: "var(--color-tertiary)" } }, '.toggle-btn-info:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-info.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-info-container)", backgroundColor: "var(--color-info-container)", borderColor: "var(--color-info)" } }, '.toggle-btn-success:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-success.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-success-container)", backgroundColor: "var(--color-success-container)", borderColor: "var(--color-success)" } }, '.toggle-btn-warning:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-warning.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-warning-container)", backgroundColor: "var(--color-warning-container)", borderColor: "var(--color-warning)" } }, '.toggle-btn-error:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-error.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-error-container)", backgroundColor: "var(--color-error-container)", borderColor: "var(--color-error)" } }, '.toggle-btn-accent:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-accent.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", borderColor: "var(--color-accent)" } }, '.toggle-btn-neutral:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-neutral.active:not([aria-pressed])': { "@layer components": { color: "var(--color-on-surface)", backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", borderColor: "var(--color-neutral)" } }, '.toggle-btn-base:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-btn-base.active:not([aria-pressed])': { "@layer components": { color: "var(--color-base-content)", backgroundColor: "var(--color-base-200)", borderColor: "var(--color-base-content)" } }, ".toggle-btn-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".toggle-btn-ghost:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent" } }, ".toggle-btn-ghost.toggle-btn-primary": { "@layer components": { color: "var(--color-primary)" } }, ".toggle-btn-ghost.toggle-btn-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".toggle-btn-ghost.toggle-btn-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".toggle-btn-ghost.toggle-btn-info": { "@layer components": { color: "var(--color-info)" } }, ".toggle-btn-ghost.toggle-btn-success": { "@layer components": { color: "var(--color-success)" } }, ".toggle-btn-ghost.toggle-btn-warning": { "@layer components": { color: "var(--color-warning)" } }, ".toggle-btn-ghost.toggle-btn-error": { "@layer components": { color: "var(--color-error)" } }, ".toggle-btn-ghost.toggle-btn-accent": { "@layer components": { color: "var(--color-accent)" } }, ".toggle-btn-ghost.toggle-btn-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".toggle-btn-ghost.toggle-btn-base": { "@layer components": { color: "var(--color-base-content)" } }, ".toggle-btn:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toggle-btn:disabled, \n .toggle-btn-disabled": { "@layer components": { opacity: 0.38, cursor: "not-allowed", pointerEvents: "none" } }, ".toggle-btn-sm": { "@layer components": { padding: "0.375rem 0.75rem", fontSize: "0.8125rem", gap: "0.375rem" } }, ".toggle-btn-lg": { "@layer components": { padding: "0.75rem 1.25rem", fontSize: "1rem", gap: "0.625rem" } }, ".toggle-group": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", padding: "0.25rem", backgroundColor: "color-mix(in oklch, var(--color-surface-variant) 30%, transparent)" } }, ".toggle-group .toggle-btn": { "@layer components": { border: "none", borderRadius: "var(--radius-xs)", margin: "0" } }, ".toggle-group .toggle-btn:not(:last-child)": { "@layer components": { marginRight: "0.125rem" } }, ".toggle-group-vertical": { "@layer components": { flexDirection: "column" } }, ".toggle-group-vertical .toggle-btn:not(:last-child)": { "@layer components": { marginRight: "0", marginBottom: "0.125rem" } }, ".toggle-group-exclusive .toggle-btn": { "@layer components": { flex: 1 } }, ".toggle-btn-icon-only": { "@layer components": { padding: "0.625rem", aspectRatio: "1" } }, ".toggle-btn-icon-only.toggle-btn-sm": { "@layer components": { padding: "0.5rem" } }, ".toggle-btn-icon-only.toggle-btn-lg": { "@layer components": { padding: "0.875rem" } }, ".toggle-icon": { "@layer components": { width: "1.125rem", height: "1.125rem", flexShrink: 0 } }, ".toggle-segmented": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", padding: "0.25rem" } }, ".toggle-segmented .toggle-btn": { "@layer components": { border: "none", backgroundColor: "transparent", borderRadius: "var(--radius-xs)" } }, '.toggle-segmented .toggle-btn:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-segmented .toggle-btn.active:not([aria-pressed])': { "@layer components": { backgroundColor: "var(--color-surface-variant)", borderColor: "transparent", boxShadow: "var(--shadow-sm)" } }, ".toggle-chip": { "@layer components": { borderRadius: "var(--radius-lg)", padding: "0.5rem 1rem" } }, '.toggle-chip:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-chip.active:not([aria-pressed])': { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "var(--color-primary-container)" } }, ".toggle-outlined": { "@layer components": { backgroundColor: "transparent" } }, '.toggle-outlined:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-outlined.active:not([aria-pressed])': { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".toggle-filled": { "@layer components": { backgroundColor: "var(--color-surface-variant)", border: "none" } }, '.toggle-filled:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]), \n .toggle-filled.active:not([aria-pressed])': { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".toggle-badge": { "@layer components": { position: "relative" } }, ".toggle-badge::after": { "@layer components": { content: '""', position: "absolute", top: "0.25rem", right: "0.25rem", width: "0.5rem", height: "0.5rem", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", border: "2px solid var(--color-surface)" } }, ".toggle-full": { "@layer components": { width: "100%" } }, ".toggle-group-full": { "@layer components": { width: "100%" } }, ".toggle-group-full .toggle-btn": { "@layer components": { flex: 1 } }, ".toggle-loading": { "@layer components": { position: "relative", pointerEvents: "none" } }, ".toggle-loading::after": [{ "@layer components": { content: '""', position: "absolute", top: "50%", left: "50%", width: "1rem", height: "1rem", marginTop: "-0.5rem", marginLeft: "-0.5rem", border: "2px solid currentColor", borderTopColor: "transparent", borderRadius: "var(--radius-full)", animation: "toggle-spin 0.6s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes toggle-spin": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" } }, ".time-input": { "@layer components": { position: "relative", display: "inline-flex", alignItems: "center", width: "100%" } }, ".time-input-field": { "@layer components": { display: "flex", width: "100%", padding: "0.75rem 2.5rem 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)", outline: "none", transition: "border-color 150ms ease-in-out, box-shadow 150ms ease-in-out" } }, ".time-input-field:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".time-input-field:disabled": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".time-input-icon": { "@layer components": { position: "absolute", right: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", pointerEvents: "none" } }, ".time-input-segments": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.125rem", padding: "0.75rem 1rem", backgroundColor: "var(--color-surface)", border: "1px solid currentColor", borderRadius: "var(--radius-sm)" } }, ".time-input-segment": { "@layer components": { width: "2rem", padding: "0.25rem", fontSize: "1rem", fontWeight: 500, textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", outline: "none", transition: "background-color 150ms ease-in-out" } }, ".time-input-segment:focus": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".time-input-separator": { "@layer components": { fontSize: "1rem", fontWeight: 500, color: "var(--color-on-surface-variant)" } }, ".time-input-period": { "@layer components": { display: "inline-flex", marginLeft: "0.5rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-xs)", padding: "0.125rem" } }, ".time-input-period-btn": { "@layer components": { padding: "0.375rem 0.625rem", fontSize: "0.75rem", fontWeight: 500, 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" } }, ".time-input-period-btn:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".time-input-period-btn-active": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".time-input-sm .time-input-field": { "@layer components": { padding: "0.5rem 2rem 0.5rem 0.75rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".time-input-sm .time-input-segment": { "@layer components": { width: "1.75rem", fontSize: "0.875rem" } }, ".time-input-lg .time-input-field": { "@layer components": { padding: "1rem 3rem 1rem 1.25rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".time-input-lg .time-input-segment": { "@layer components": { width: "2.5rem", fontSize: "1.125rem" } }, ".time-input-filled .time-input-field, \n .time-input-filled .time-input-segments": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none", borderBottom: "2px solid var(--color-outline)", borderRadius: "var(--radius-sm) var(--radius-sm) 0 0" } }, ".time-input-filled .time-input-field:focus, \n .time-input-filled .time-input-segments:focus-within": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".time-input-primary .time-input-field, \n .time-input-primary .time-input-segments": { "@layer components": { color: "var(--color-primary)" } }, ".time-input-primary .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".time-input-secondary .time-input-field, \n .time-input-secondary .time-input-segments": { "@layer components": { color: "var(--color-secondary)" } }, ".time-input-secondary .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".time-input-tertiary .time-input-field, \n .time-input-tertiary .time-input-segments": { "@layer components": { color: "var(--color-tertiary)" } }, ".time-input-tertiary .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".time-input-info .time-input-field, \n .time-input-info .time-input-segments": { "@layer components": { color: "var(--color-info)" } }, ".time-input-info .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".time-input-success .time-input-field, \n .time-input-success .time-input-segments": { "@layer components": { color: "var(--color-success)" } }, ".time-input-success .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".time-input-warning .time-input-field, \n .time-input-warning .time-input-segments": { "@layer components": { color: "var(--color-warning)" } }, ".time-input-warning .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".time-input-error .time-input-field, \n .time-input-error .time-input-segments": { "@layer components": { color: "var(--color-error)" } }, ".time-input-error .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".time-input-accent .time-input-field, \n .time-input-accent .time-input-segments": { "@layer components": { color: "var(--color-accent)" } }, ".time-input-accent .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".time-input-neutral .time-input-field, \n .time-input-neutral .time-input-segments": { "@layer components": { color: "var(--color-neutral)" } }, ".time-input-neutral .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".time-input-base .time-input-field, \n .time-input-base .time-input-segments": { "@layer components": { color: "var(--color-base-content)" } }, ".time-input-base .time-input-field:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".time-input-ghost .time-input-field, \n .time-input-ghost .time-input-segments": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".time-input-ghost .time-input-field:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".time-picker-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", zIndex: 50, display: "none", minWidth: "12rem", marginTop: "0.25rem", padding: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)" } }, ".time-picker-dropdown-open": { "@layer components": { display: "block" } }, ".time-picker-columns": { "@layer components": { display: "flex", gap: "0.5rem", maxHeight: "12rem" } }, ".time-picker-column": { "@layer components": { flex: 1, display: "flex", flexDirection: "column", gap: "0.125rem", overflowY: "auto" } }, ".time-picker-option": { "@layer components": { padding: "0.375rem 0.5rem", fontSize: "0.875rem", textAlign: "center", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".time-picker-option:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".time-picker-option-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".time-input-field, \n .time-input-segment, \n .time-input-period-btn, \n .time-picker-option": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".tree-select": [{ "@layer components": { position: "relative", display: "inline-flex", flexDirection: "column", width: "100%" } }, { "@layer components": { "@supports (anchor-name: --tree-select)": { anchorName: "--tree-select" } } }], ".tree-select-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" } }, ".tree-select-trigger:hover:not(:disabled)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".tree-select-trigger:focus": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.tree-select-trigger:disabled, \n .tree-select-trigger[aria-disabled="true"]': { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, "div.tree-select-trigger": { "@layer components": { userSelect: "none" } }, "div.tree-select-trigger:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".tree-select-value": { "@layer components": { flex: 1, display: "flex", alignItems: "center", gap: "0.5rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--color-on-surface-variant)" } }, ".tree-select-value-selected": { "@layer components": { color: "var(--color-on-surface)" } }, ".tree-select-path": { "@layer components": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".tree-select-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" } }, ".tree-select-open .tree-select-arrow": { "@layer components": { transform: "rotate(180deg)" } }, ".tree-select-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" } }, ".tree-select-clear:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".tree-select-clear svg": { "@layer components": { width: "1rem", height: "1rem" } }, ".tree-select-dropdown": { "@layer components": { position: "absolute", top: "100%", left: "0", right: "0", zIndex: 50, display: "none", maxHeight: "20rem", marginTop: "0.25rem", padding: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", overflowY: "auto" } }, ".tree-select-open .tree-select-dropdown": { "@layer components": { display: "block" } }, ".tree-select-dropdown[popover]": [{ "@layer components": { position: "absolute", inset: "unset", margin: "0", border: "1px solid var(--color-outline-variant)" } }, { "@layer components": { "@supports (anchor-name: --tree-select)": { positionAnchor: "--tree-select", top: "anchor(bottom)", left: "anchor(left)", right: "anchor(right)", positionTryFallbacks: "flip-block" } } }], ".tree-select-dropdown[popover]:popover-open": { "@layer components": { display: "block" } }, ".tree-select-search": { "@layer components": { display: "flex", padding: "0.5rem", marginBottom: "0.5rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".tree-select-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" } }, ".tree-select-search-input:focus": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".tree-select-options": { "@layer components": { display: "flex", flexDirection: "column" } }, ".tree-select-node": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".tree-select-node:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".tree-select-node-selected": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".tree-select-node-selected:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), black 5%)" } }, ".tree-select-node-leaf": { "@layer components": { paddingLeft: "2rem" } }, ".tree-select-node-toggle": { "@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-xs)", cursor: "pointer", flexShrink: 0, transition: "transform 150ms ease-in-out" } }, ".tree-select-node-toggle:hover": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".tree-select-node-expanded .tree-select-node-toggle, \n .tree-select-node-expanded > .tree-select-node-toggle": { "@layer components": { transform: "rotate(90deg)" } }, ".tree-select-node-icon": { "@layer components": { width: "1rem", height: "1rem" } }, ".tree-select-node-label": { "@layer components": { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".tree-select-node-custom-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".tree-select-children": { "@layer components": { display: "none", paddingLeft: "1.5rem" } }, ".tree-select-node-expanded + .tree-select-children": { "@layer components": { display: "block" } }, ".tree-select-checkbox": { "@layer components": { display: "flex", alignItems: "center", cursor: "pointer" } }, ".tree-select-checkbox-input": { "@layer components": { position: "absolute", width: "0", height: "0", opacity: 0 } }, ".tree-select-checkbox-box": { "@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)", transition: "background-color 150ms ease-in-out, border-color 150ms ease-in-out" } }, ".tree-select-checkbox-input:checked + .tree-select-checkbox-box": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)" } }, ".tree-select-checkbox-input:checked + .tree-select-checkbox-box::after": { "@layer components": { content: "''", display: "block", width: "0.375rem", height: "0.625rem", border: "2px solid var(--color-primary-content)", borderWidth: "0 2px 2px 0", transform: "rotate(45deg) translateY(-1px)" } }, ".tree-select-empty": { "@layer components": { padding: "1rem", textAlign: "center", color: "var(--color-on-surface-variant)", fontSize: "0.875rem" } }, ".tree-select-sm .tree-select-trigger": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem", borderRadius: "var(--radius-xs)" } }, ".tree-select-lg .tree-select-trigger": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem", borderRadius: "var(--radius-sm)" } }, ".tree-select-outlined .tree-select-trigger": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline)" } }, ".tree-select-filled .tree-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" } }, ".tree-select-filled .tree-select-trigger:focus": { "@layer components": { borderBottomColor: "currentColor", boxShadow: "none" } }, ".tree-select-multiple .tree-select-value": { "@layer components": { flexWrap: "wrap", gap: "0.25rem" } }, ".tree-select-primary .tree-select-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".tree-select-primary .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)" } }, ".tree-select-secondary .tree-select-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".tree-select-secondary .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent)" } }, ".tree-select-tertiary .tree-select-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".tree-select-tertiary .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent)" } }, ".tree-select-info .tree-select-trigger": { "@layer components": { color: "var(--color-info)" } }, ".tree-select-info .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent)" } }, ".tree-select-success .tree-select-trigger": { "@layer components": { color: "var(--color-success)" } }, ".tree-select-success .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent)" } }, ".tree-select-warning .tree-select-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".tree-select-warning .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent)" } }, ".tree-select-error .tree-select-trigger": { "@layer components": { color: "var(--color-error)" } }, ".tree-select-error .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent)" } }, ".tree-select-accent .tree-select-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".tree-select-accent .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent)" } }, ".tree-select-neutral .tree-select-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".tree-select-neutral .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent)" } }, ".tree-select-base .tree-select-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".tree-select-base .tree-select-trigger:focus": { "@layer components": { boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent)" } }, ".tree-select-ghost .tree-select-trigger": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".tree-select-ghost .tree-select-trigger:focus": { "@layer components": { backgroundColor: "var(--color-surface-container)", borderColor: "transparent", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".tree-select-disabled .tree-select-trigger": { "@layer components": { cursor: "not-allowed", opacity: 0.5, backgroundColor: "var(--color-surface-container)" } }, ".tree-select-loading .tree-select-trigger": { "@layer components": { cursor: "wait" } }, ".tree-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: "tree-select-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes tree-select-spin": { to: { transform: "rotate(360deg)" } }, ".tree-select-tags": { "@layer components": { display: "flex", flexWrap: "wrap", gap: "0.25rem", flex: 1 } }, ".tree-select-tag": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.25rem", padding: "0.125rem 0.5rem", fontSize: "0.75rem", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderRadius: "var(--radius-lg)" } }, ".tree-select-tag-remove": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "0.875rem", height: "0.875rem", padding: "0", color: "inherit", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", opacity: 0.7 } }, ".tree-select-tag-remove:hover": { "@layer components": { opacity: 1, backgroundColor: "color-mix(in oklch, currentColor 10%, transparent)" } }, ".tree-select-trigger, \n .tree-select-arrow, \n .tree-select-node-toggle, \n .tree-select-node, \n .tree-select-checkbox-box": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".alert": { "@layer components": { display: "flex", alignItems: "flex-start", gap: "0.75rem", padding: "1rem", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)", border: "1px solid var(--color-outline)" } }, ".alert-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", flexShrink: 0 } }, ".alert-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".alert-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem" } }, ".alert-description": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", opacity: 0.9 } }, ".alert-close": [{ "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "currentColor", opacity: 0.7, backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "opacity 150ms ease-in-out", flexShrink: 0, marginLeft: "auto" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".alert-close:hover": { "@layer components": { opacity: 1 } }, ".alert-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".alert-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)", borderColor: "transparent" } }, ".alert-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)", borderColor: "transparent" } }, ".alert-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)", borderColor: "transparent" } }, ".alert-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)", borderColor: "transparent" } }, ".alert-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)", borderColor: "transparent" } }, ".alert-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)", borderColor: "transparent" } }, ".alert-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)", borderColor: "transparent" } }, ".alert-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)", borderColor: "transparent" } }, ".alert-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)", borderColor: "transparent" } }, ".alert-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)", borderColor: "transparent" } }, ".alert-filled.alert-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".alert-filled.alert-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".alert-filled.alert-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".alert-filled.alert-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".alert-filled.alert-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".alert-filled.alert-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".alert-filled.alert-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".alert-filled.alert-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".alert-filled.alert-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".alert-filled.alert-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".alert-outlined": { "@layer components": { backgroundColor: "transparent" } }, ".alert-outlined.alert-info": { "@layer components": { borderColor: "var(--color-info)", color: "var(--color-info)" } }, ".alert-outlined.alert-success": { "@layer components": { borderColor: "var(--color-success)", color: "var(--color-success)" } }, ".alert-outlined.alert-warning": { "@layer components": { borderColor: "var(--color-warning)", color: "var(--color-warning)" } }, ".alert-outlined.alert-error": { "@layer components": { borderColor: "var(--color-error)", color: "var(--color-error)" } }, ".alert-outlined.alert-primary": { "@layer components": { borderColor: "var(--color-primary)", color: "var(--color-primary)" } }, ".alert-outlined.alert-secondary": { "@layer components": { borderColor: "var(--color-secondary)", color: "var(--color-secondary)" } }, ".alert-outlined.alert-tertiary": { "@layer components": { borderColor: "var(--color-tertiary)", color: "var(--color-tertiary)" } }, ".alert-outlined.alert-accent": { "@layer components": { borderColor: "var(--color-accent)", color: "var(--color-accent)" } }, ".alert-outlined.alert-neutral": { "@layer components": { borderColor: "var(--color-neutral)", color: "var(--color-neutral)" } }, ".alert-outlined.alert-base": { "@layer components": { borderColor: "var(--color-base-content)", color: "var(--color-base-content)" } }, ".alert-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".alert-ghost.alert-primary": { "@layer components": { color: "var(--color-primary)" } }, ".alert-ghost.alert-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".alert-ghost.alert-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".alert-ghost.alert-info": { "@layer components": { color: "var(--color-info)" } }, ".alert-ghost.alert-success": { "@layer components": { color: "var(--color-success)" } }, ".alert-ghost.alert-warning": { "@layer components": { color: "var(--color-warning)" } }, ".alert-ghost.alert-error": { "@layer components": { color: "var(--color-error)" } }, ".alert-ghost.alert-accent": { "@layer components": { color: "var(--color-accent)" } }, ".alert-ghost.alert-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".alert-ghost.alert-base": { "@layer components": { color: "var(--color-base-content)" } }, ".alert-dismissible": { "@layer components": { paddingRight: "2.5rem", position: "relative" } }, ".alert-dismissible .alert-close": { "@layer components": { position: "absolute", top: "0.75rem", right: "0.75rem" } }, ".alert-compact": { "@layer components": { padding: "0.625rem 0.875rem", gap: "0.5rem" } }, ".alert-compact .alert-icon": { "@layer components": { width: "1.25rem", height: "1.25rem", fontSize: "1rem" } }, ".alert-compact .alert-title, \n .alert-compact .alert-description": { "@layer components": { fontSize: "0.8125rem" } }, ".alert-actions": { "@layer components": { display: "flex", gap: "0.5rem", marginTop: "0.5rem" } }, ".alert-filled .alert-actions .btn-text": { "@layer components": { color: "inherit" } }, ".alert-filled .alert-actions .btn-text:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, currentColor 12%, transparent)" } }, ".alert-banner": { "@layer components": { borderRadius: "0", borderLeft: "none", borderRight: "none" } }, "dialog.dialog": { "@layer components": { position: "fixed", margin: "auto", padding: "0", border: "none", width: "100%", maxWidth: "28rem", maxHeight: "calc(100vh - 4rem)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", borderRadius: "var(--radius-2xl)", boxShadow: "var(--shadow-2xl)", overflow: "hidden" } }, "dialog.dialog::backdrop": { "@layer components": { backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)" } }, ".dialog-box": [{ "@layer components": { display: "flex", flexDirection: "column", maxHeight: "calc(100vh - 4rem)", overflow: "hidden" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "transform 0ms" } } }], ".dialog-header": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem", padding: "1.5rem 1.5rem 0" } }, ".dialog-title": { "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 600, lineHeight: "1.75rem", margin: "0", color: "var(--color-on-surface)" } }, ".dialog-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2rem", height: "2rem", fontSize: "1.25rem", 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 } }, ".dialog-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".dialog-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".dialog-body": { "@layer components": { padding: "1rem 1.5rem", overflowY: "auto", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".dialog-footer": { "@layer components": { display: "flex", justifyContent: "flex-end", gap: "0.5rem", padding: "1rem 1.5rem 1.5rem" } }, ".dialog-footer-start": { "@layer components": { justifyContent: "flex-start" } }, ".dialog-footer-center": { "@layer components": { justifyContent: "center" } }, ".dialog-footer-between": { "@layer components": { justifyContent: "space-between" } }, "dialog.dialog.dialog-sm": { "@layer components": { maxWidth: "20rem" } }, "dialog.dialog.dialog-lg": { "@layer components": { maxWidth: "40rem" } }, "dialog.dialog.dialog-xl": { "@layer components": { maxWidth: "56rem" } }, "dialog.dialog.dialog-fullscreen": { "@layer components": { maxWidth: "100%", maxHeight: "100%", width: "100%", height: "100%", borderRadius: "0", margin: "0" } }, "dialog.dialog.dialog-fullscreen .dialog-box": { "@layer components": { maxHeight: "100%" } }, "dialog.dialog.dialog-top": { "@layer components": { marginTop: "2rem", marginBottom: "auto" } }, "dialog.dialog.dialog-bottom": { "@layer components": { marginTop: "auto", marginBottom: "2rem" } }, ".dialog-scrollable .dialog-body": { "@layer components": { maxHeight: "50vh", overflowY: "auto" } }, ".dialog-divider .dialog-header": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)", paddingBottom: "1rem" } }, ".dialog-divider .dialog-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)", paddingTop: "1rem" } }, ".dialog": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "visibility 0ms, opacity 0ms" } } }, ".progress": { "@layer components": { position: "relative", width: "100%", height: "0.5rem", backgroundColor: "var(--color-surface-container-highest)", borderRadius: "var(--radius-full)", overflow: "hidden" } }, ".progress-bar": { "@layer components": { position: "absolute", top: "0", left: "0", height: "100%", backgroundColor: "var(--color-primary)", borderRadius: "var(--radius-full)", transition: "width 300ms ease-in-out" } }, ".progress-primary .progress-bar": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".progress-secondary .progress-bar": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".progress-tertiary .progress-bar": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".progress-info .progress-bar": { "@layer components": { backgroundColor: "var(--color-info)" } }, ".progress-success .progress-bar": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".progress-warning .progress-bar": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".progress-error .progress-bar": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".progress-accent .progress-bar": { "@layer components": { backgroundColor: "var(--color-accent)" } }, ".progress-neutral .progress-bar": { "@layer components": { backgroundColor: "var(--color-neutral)" } }, ".progress-base .progress-bar": { "@layer components": { backgroundColor: "var(--color-base-content)" } }, ".progress-xs": { "@layer components": { height: "0.25rem" } }, ".progress-sm": { "@layer components": { height: "0.375rem" } }, ".progress-lg": { "@layer components": { height: "0.75rem" } }, ".progress-xl": { "@layer components": { height: "1rem" } }, ".progress-indeterminate .progress-bar": { "@layer components": { width: "30%", animation: "progress-indeterminate 1.5s infinite ease-in-out" } }, "@keyframes progress-indeterminate": { "0%": { left: "-30%" }, "100%": { left: "100%" } }, ".progress-labeled": { "@layer components": { position: "relative" } }, ".progress-label": { "@layer components": { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", fontSize: "0.625rem", fontWeight: 600, color: "var(--color-on-surface)" } }, ".progress-striped .progress-bar": { "@layer components": { backgroundImage: `linear-gradient(
|
|
187
186
|
45deg,
|
|
188
187
|
rgba(255, 255, 255, 0.15) 25%,
|
|
189
188
|
transparent 25%,
|
|
@@ -246,20 +245,20 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
|
|
|
246
245
|
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,
|
|
247
246
|
background-color 0.2s ease` } }, ".circle-menu-item a:hover, \n .circle-menu-item button:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--circle-menu-item-bg) 80%, var(--circle-menu-item-color))", boxShadow: "0 0 0 3px var(--circle-menu-item-ring)" } }, ".circle-menu-item a:focus-visible, \n .circle-menu-item button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px var(--circle-menu-item-ring)" } }, ".circle-menu-item:nth-child(1) a, \n .circle-menu-item:nth-child(1) button": { "@layer components": { transform: "rotate(0deg)" } }, ".circle-menu-item:nth-child(2) a, \n .circle-menu-item:nth-child(2) button": { "@layer components": { transform: "rotate(-60deg)" } }, ".circle-menu-item:nth-child(3) a, \n .circle-menu-item:nth-child(3) button": { "@layer components": { transform: "rotate(-120deg)" } }, ".circle-menu-item:nth-child(4) a, \n .circle-menu-item:nth-child(4) button": { "@layer components": { transform: "rotate(-180deg)" } }, ".circle-menu-item:nth-child(5) a, \n .circle-menu-item:nth-child(5) button": { "@layer components": { transform: "rotate(-240deg)" } }, ".circle-menu-item:nth-child(6) a, \n .circle-menu-item:nth-child(6) button": { "@layer components": { transform: "rotate(-300deg)" } }, ".circle-menu-toggler:checked ~ .circle-menu-list": { "@layer components": { pointerEvents: "auto" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item": { "@layer components": { opacity: 1 } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item a, \n .circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item button": { "@layer components": { pointerEvents: "auto" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(1)": { "@layer components": { transform: "rotate(0deg) translateX(calc(-1 * var(--circle-menu-radius)))" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(2)": { "@layer components": { transform: "rotate(60deg) translateX(calc(-1 * var(--circle-menu-radius)))" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(3)": { "@layer components": { transform: "rotate(120deg) translateX(calc(-1 * var(--circle-menu-radius)))" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(4)": { "@layer components": { transform: "rotate(180deg) translateX(calc(-1 * var(--circle-menu-radius)))" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(5)": { "@layer components": { transform: "rotate(240deg) translateX(calc(-1 * var(--circle-menu-radius)))" } }, ".circle-menu-toggler:checked ~ .circle-menu-list .circle-menu-item:nth-child(6)": { "@layer components": { transform: "rotate(300deg) translateX(calc(-1 * var(--circle-menu-radius)))" } }, ".circle-menu-sm": { "@layer components": { "--circle-menu-size": "2.5rem", "--circle-menu-item-size": "2.5rem", "--circle-menu-radius": "4.5rem", "--circle-menu-icon-size": "1rem", "--circle-menu-bar-width": "0.9375rem", "--circle-menu-bar-gap": "0.3125rem" } }, ".circle-menu-lg": { "@layer components": { "--circle-menu-size": "3.5rem", "--circle-menu-item-size": "3.5rem", "--circle-menu-radius": "6.5rem", "--circle-menu-icon-size": "1.5rem", "--circle-menu-bar-width": "1.3125rem", "--circle-menu-bar-gap": "0.4375rem" } }, ".circle-menu-primary": { "@layer components": { "--circle-menu-btn-bg": "var(--color-primary)", "--circle-menu-bar-color": "var(--color-primary-content)", "--circle-menu-item-bg": "var(--color-primary)", "--circle-menu-item-color": "var(--color-primary-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 40%, transparent)" } }, ".circle-menu-secondary": { "@layer components": { "--circle-menu-btn-bg": "var(--color-secondary)", "--circle-menu-bar-color": "var(--color-secondary-content)", "--circle-menu-item-bg": "var(--color-secondary)", "--circle-menu-item-color": "var(--color-secondary-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-secondary) 40%, transparent)" } }, ".circle-menu-tertiary": { "@layer components": { "--circle-menu-btn-bg": "var(--color-tertiary)", "--circle-menu-bar-color": "var(--color-tertiary-content)", "--circle-menu-item-bg": "var(--color-tertiary)", "--circle-menu-item-color": "var(--color-tertiary-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-tertiary) 40%, transparent)" } }, ".circle-menu-info": { "@layer components": { "--circle-menu-btn-bg": "var(--color-info)", "--circle-menu-bar-color": "var(--color-info-content)", "--circle-menu-item-bg": "var(--color-info)", "--circle-menu-item-color": "var(--color-info-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-info) 40%, transparent)" } }, ".circle-menu-success": { "@layer components": { "--circle-menu-btn-bg": "var(--color-success)", "--circle-menu-bar-color": "var(--color-success-content)", "--circle-menu-item-bg": "var(--color-success)", "--circle-menu-item-color": "var(--color-success-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-success) 40%, transparent)" } }, ".circle-menu-warning": { "@layer components": { "--circle-menu-btn-bg": "var(--color-warning)", "--circle-menu-bar-color": "var(--color-warning-content)", "--circle-menu-item-bg": "var(--color-warning)", "--circle-menu-item-color": "var(--color-warning-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-warning) 40%, transparent)" } }, ".circle-menu-error": { "@layer components": { "--circle-menu-btn-bg": "var(--color-error)", "--circle-menu-bar-color": "var(--color-error-content)", "--circle-menu-item-bg": "var(--color-error)", "--circle-menu-item-color": "var(--color-error-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-error) 40%, transparent)" } }, ".circle-menu-accent": { "@layer components": { "--circle-menu-btn-bg": "var(--color-accent)", "--circle-menu-bar-color": "var(--color-accent-content)", "--circle-menu-item-bg": "var(--color-accent)", "--circle-menu-item-color": "var(--color-accent-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-accent) 40%, transparent)" } }, ".circle-menu-neutral": { "@layer components": { "--circle-menu-btn-bg": "var(--color-neutral)", "--circle-menu-bar-color": "var(--color-neutral-content)", "--circle-menu-item-bg": "var(--color-neutral)", "--circle-menu-item-color": "var(--color-neutral-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-neutral) 40%, transparent)" } }, ".circle-menu-base": { "@layer components": { "--circle-menu-btn-bg": "var(--color-base-100)", "--circle-menu-bar-color": "var(--color-base-content)", "--circle-menu-item-bg": "var(--color-base-100)", "--circle-menu-item-color": "var(--color-base-content)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-base-content) 40%, transparent)" } }, ".circle-menu-label::before, \n .circle-menu-label::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu-item a, \n .circle-menu-item button": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".drawer-backdrop": { "@layer components": { position: "fixed", inset: "0", zIndex: 1100, backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", opacity: 0, visibility: "hidden", transition: "opacity 300ms ease-out, visibility 300ms ease-out" } }, ".drawer-backdrop-show": { "@layer components": { opacity: 1, visibility: "visible" } }, ":where(.drawer[popover], dialog.drawer)": { "@layer components": { inset: "auto", margin: "0", width: "auto", height: "auto", padding: "0", border: "0", color: "var(--color-on-surface)", maxWidth: "none", maxHeight: "none", overflow: "auto", boxSizing: "border-box" } }, ".drawer[popover]:not(:popover-open), \n dialog.drawer:not([open])": { "@layer components": { display: "none" } }, ".drawer": { "@layer components": { position: "fixed", zIndex: 1200, display: "flex", flexDirection: "column", backgroundColor: "var(--color-surface-container-low)", boxShadow: "var(--shadow-2xl)", transition: "transform 300ms ease-out" } }, ".drawer-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".drawer-surface-container": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".drawer-surface-container-low": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".drawer-surface-container-high": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".drawer-left": { "@layer components": { top: "0", left: "0", bottom: "0", width: "20rem", maxWidth: "calc(100vw - 3.5rem)", transform: "translateX(-100%)", borderRadius: "0 var(--radius-lg) var(--radius-lg) 0" } }, ".drawer-left.drawer-open": { "@layer components": { transform: "translateX(0)" } }, ".drawer-right": { "@layer components": { top: "0", right: "0", bottom: "0", width: "20rem", maxWidth: "calc(100vw - 3.5rem)", transform: "translateX(100%)", borderRadius: "var(--radius-lg) 0 0 var(--radius-lg)" } }, ".drawer-right.drawer-open": { "@layer components": { transform: "translateX(0)" } }, ".drawer-top": { "@layer components": { top: "0", left: "0", right: "0", height: "auto", maxHeight: "80vh", transform: "translateY(-100%)", borderRadius: "0 0 var(--radius-lg) var(--radius-lg)" } }, ".drawer-top.drawer-open": { "@layer components": { transform: "translateY(0)" } }, ".drawer-bottom": { "@layer components": { bottom: "0", left: "0", right: "0", height: "auto", maxHeight: "80vh", transform: "translateY(100%)", borderRadius: "var(--radius-lg) var(--radius-lg) 0 0" } }, ".drawer-bottom.drawer-open": { "@layer components": { transform: "translateY(0)" } }, ".drawer-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem", borderBottom: "1px solid var(--color-outline-variant)", flexShrink: 0 } }, ".drawer-title": { "@layer components": { flex: 1, fontSize: "1.125rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".drawer-close": { "@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" } }, ".drawer-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".drawer-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".drawer-body": { "@layer components": { flex: 1, overflowY: "auto", padding: "0.5rem 0.75rem" } }, ".drawer-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem", borderTop: "1px solid var(--color-outline-variant)", flexShrink: 0 } }, ".drawer-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem 1rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-2xl)", cursor: "pointer", textDecoration: "none", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", width: "100%" } }, ".drawer-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".drawer-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".drawer-item-active, \n .drawer-item-active-primary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".drawer-item-active-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".drawer-item-active-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".drawer-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", flexShrink: 0 } }, ".drawer-item-badge": { "@layer components": { padding: "0.125rem 0.5rem", fontSize: "0.75rem", fontWeight: 500, backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)", borderRadius: "var(--radius-full)", marginLeft: "auto" } }, ".drawer-item-nested": { "@layer components": { paddingLeft: "3rem" } }, ".drawer-item-nested-2": { "@layer components": { paddingLeft: "4.5rem" } }, ".drawer-label": { "@layer components": { padding: "0.75rem 1rem 0.5rem", fontSize: "0.6875rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".drawer-divider": { "@layer components": { height: "1px", margin: "0.5rem 1rem", backgroundColor: "var(--color-outline-variant)" } }, ".drawer-profile": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".drawer-profile-avatar": { "@layer components": { width: "2.5rem", height: "2.5rem", borderRadius: "var(--radius-full)", backgroundColor: "var(--color-primary-container)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, color: "var(--color-on-primary-container)", flexShrink: 0 } }, ".drawer-profile-info": { "@layer components": { flex: 1, minWidth: "0" } }, ".drawer-profile-name": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".drawer-profile-email": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".drawer-permanent": { "@layer components": { position: "relative", transform: "none", boxShadow: "none", borderRadius: "0", borderRight: "1px solid var(--color-outline-variant)" } }, ".drawer-permanent.drawer-right": { "@layer components": { borderRight: "none", borderLeft: "1px solid var(--color-outline-variant)" } }, ".drawer-rail": { "@layer components": { width: "5rem", overflow: "hidden", transition: "width 300ms ease-out" } }, ".drawer-rail:hover, \n .drawer-rail.expanded": { "@layer components": { width: "20rem" } }, ".drawer-rail .drawer-item span:not(.drawer-item-icon)": { "@layer components": { opacity: 0, transition: "opacity 150ms ease-out" } }, ".drawer-rail:hover .drawer-item span:not(.drawer-item-icon), \n .drawer-rail.expanded .drawer-item span:not(.drawer-item-icon)": { "@layer components": { opacity: 1 } }, ".drawer-sm": { "@layer components": { width: "12rem" } }, ".drawer-md": { "@layer components": { width: "16rem" } }, ".drawer-lg": { "@layer components": { width: "20rem" } }, ".drawer-xl": { "@layer components": { width: "24rem" } }, ".drawer-full": { "@layer components": { width: "100%", maxWidth: "100%", borderRadius: "0" } }, ".drawer[popover], \n dialog.drawer": { "@layer components": { transition: `transform 300ms ease-out, opacity 300ms ease-out,
|
|
248
247
|
display 300ms allow-discrete, overlay 300ms allow-discrete`, opacity: 0 } }, ".drawer[popover]:popover-open, \n dialog.drawer[open]": { "@layer components": { display: "flex", transform: "translate(0, 0)", opacity: 1 } }, "dialog.drawer::backdrop": { "@layer components": { backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", opacity: 0, transition: `opacity 300ms ease-out, display 300ms allow-discrete,
|
|
249
|
-
overlay 300ms allow-discrete` } }, "dialog.drawer[open]::backdrop": { "@layer components": { opacity: 1 } }, ".drawer[popover]:popover-open, \n dialog.drawer[open], \n dialog.drawer[open]::backdrop": { "@layer components": { "@starting-style": { opacity: 0 } } }, ".drawer-left[popover]:popover-open, \n dialog.drawer-left[open]": { "@layer components": { "@starting-style": { transform: "translateX(-100%)" } } }, ".drawer-right[popover]:popover-open, \n dialog.drawer-right[open]": { "@layer components": { "@starting-style": { transform: "translateX(100%)" } } }, ".drawer-top[popover]:popover-open, \n dialog.drawer-top[open]": { "@layer components": { "@starting-style": { transform: "translateY(-100%)" } } }, ".drawer-bottom[popover]:popover-open, \n dialog.drawer-bottom[open]": { "@layer components": { "@starting-style": { transform: "translateY(100%)" } } }, ".drawer[popover], \n dialog.drawer, \n dialog.drawer::backdrop, \n .drawer, \n .drawer-backdrop, \n .drawer-close, \n .drawer-item, \n .drawer-rail": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".nested-menu": { "@layer components": { display: "flex", flexDirection: "column", listStyle: "none", margin: "0", padding: "0.5rem", gap: "0.125rem", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".nested-menu-title": { "@layer components": { padding: "0.75rem 0.75rem 0.25rem", fontSize: "0.6875rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)", userSelect: "none" } }, ".nested-menu li > a, \n .nested-menu li > button": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "inherit", color: "var(--color-on-surface)", textDecoration: "none", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-field, 0.375rem)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".nested-menu li > a:hover, \n .nested-menu li > button:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".nested-menu li > a:focus-visible, \n .nested-menu li > button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.nested-menu li > a.active, \n .nested-menu li > button.active, \n .nested-menu li > a[aria-current="page"], \n .nested-menu li > button[aria-current="page"]': { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, '.nested-menu li > a.active:hover, \n .nested-menu li > button.active:hover, \n .nested-menu li > a[aria-current="page"]:hover, \n .nested-menu li > button[aria-current="page"]:hover': { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), var(--color-on-primary-container) 8%)" } }, ".nested-menu li.disabled": { "@layer components": { opacity: "1 !important", pointerEvents: "none" } }, ".nested-menu li.disabled > a, \n .nested-menu li.disabled > button": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".nested-menu details": { "@layer components": { width: "100%" } }, ".nested-menu summary": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "inherit", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-field, 0.375rem)", cursor: "pointer", listStyle: "none", transition: "background-color 150ms ease-in-out" } }, ".nested-menu summary::-webkit-details-marker": { "@layer components": { display: "none" } }, ".nested-menu summary::marker": { "@layer components": { display: "none", content: '""' } }, ".nested-menu summary:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".nested-menu summary:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".nested-menu summary::after": { "@layer components": { content: '""', display: "inline-block", marginLeft: "auto", width: "0.375rem", height: "0.375rem", borderRight: "1.5px solid currentColor", borderBottom: "1.5px solid currentColor", transform: "rotate(-45deg)", transition: "transform 200ms ease-in-out", flexShrink: 0, opacity: 0.6 } }, ".nested-menu details[open] > summary::after": { "@layer components": { transform: "rotate(45deg)" } }, ".nested-menu details > ul": { "@layer components": { listStyle: "none", margin: "0", padding: "0.125rem 0 0.125rem 1rem", display: "flex", flexDirection: "column", gap: "0.125rem" } }, ".nested-menu-xs": { "@layer components": { fontSize: "0.75rem", padding: "0.25rem" } }, ".nested-menu-xs li > a, \n .nested-menu-xs li > button, \n .nested-menu-xs summary": { "@layer components": { padding: "0.25rem 0.5rem", gap: "0.375rem" } }, ".nested-menu-xs .nested-menu-title": { "@layer components": { padding: "0.5rem 0.5rem 0.125rem", fontSize: "0.625rem" } }, ".nested-menu-sm": { "@layer components": { fontSize: "0.8125rem", padding: "0.375rem" } }, ".nested-menu-sm li > a, \n .nested-menu-sm li > button, \n .nested-menu-sm summary": { "@layer components": { padding: "0.375rem 0.625rem", gap: "0.375rem" } }, ".nested-menu-sm .nested-menu-title": { "@layer components": { padding: "0.625rem 0.625rem 0.1875rem", fontSize: "0.625rem" } }, ".nested-menu-lg": { "@layer components": { fontSize: "1rem", padding: "0.625rem" } }, ".nested-menu-lg li > a, \n .nested-menu-lg li > button, \n .nested-menu-lg summary": { "@layer components": { padding: "0.625rem 1rem", gap: "0.625rem" } }, ".nested-menu-lg .nested-menu-title": { "@layer components": { padding: "0.875rem 1rem 0.375rem", fontSize: "0.75rem" } }, ".nested-menu-bordered": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-card, 0.75rem)", boxShadow: "var(--shadow-sm)" } }, ".nested-menu-compact": { "@layer components": { padding: "0.25rem", gap: "0" } }, ".nested-menu-compact li > a, \n .nested-menu-compact li > button, \n .nested-menu-compact summary": { "@layer components": { padding: "0.3125rem 0.625rem" } }, ".nested-menu-compact .nested-menu-title": { "@layer components": { padding: "0.5rem 0.625rem 0.125rem" } }, ".nested-menu-compact details > ul": { "@layer components": { padding: "0 0 0 0.75rem" } }, ".nested-menu li > a, \n .nested-menu li > button, \n .nested-menu summary, \n .nested-menu summary::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".stepper": { "@layer components": { display: "flex", alignItems: "flex-start", gap: "0" } }, ".stepper-step": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", flex: 1, position: "relative" } }, ".stepper-step-connector": { "@layer components": { position: "absolute", top: "1.25rem", left: "calc(50% + 1.25rem)", width: "calc(100% - 2.5rem)", height: "2px", backgroundColor: "var(--color-outline-variant)" } }, ".stepper-step:last-child .stepper-step-connector": { "@layer components": { display: "none" } }, ".stepper-step-completed .stepper-step-connector": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".stepper-step-button": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", cursor: "pointer", zIndex: 1, background: "none", border: "none", padding: "0" } }, ".stepper-step-button:focus-visible": { "@layer components": { outline: "none" } }, ".stepper-step-button:focus-visible .stepper-step-icon": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".stepper-step-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface-variant)", backgroundColor: "var(--color-surface)", border: "2px solid var(--color-outline-variant)", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".stepper-step-active .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".stepper-step-error .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-error)", borderColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".stepper-step-disabled .stepper-step-icon": { "@layer components": { opacity: 0.7, cursor: "not-allowed" } }, ".stepper-step-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", textAlign: "center" } }, ".stepper-step-active .stepper-step-label": { "@layer components": { color: "var(--color-primary)" } }, ".stepper-step-error .stepper-step-label": { "@layer components": { color: "var(--color-error)" } }, ".stepper-step-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginTop: "0.125rem", textAlign: "center" } }, ".stepper-step-content": { "@layer components": { marginTop: "1.5rem", padding: "0 1rem", width: "100%" } }, ".stepper-step-optional::after": { "@layer components": { content: "'(Optional)'", display: "block", fontSize: "0.6875rem", color: "var(--color-on-surface-variant)", marginTop: "0.125rem" } }, ".stepper-vertical": { "@layer components": { flexDirection: "column", alignItems: "flex-start" } }, ".stepper-vertical .stepper-step": { "@layer components": { flexDirection: "row", alignItems: "flex-start", width: "100%" } }, ".stepper-vertical .stepper-step-connector": { "@layer components": { top: "2.5rem", left: "1.25rem", width: "2px", height: "calc(100% - 2.5rem)", transform: "translateX(-50%)" } }, ".stepper-vertical .stepper-step-button": { "@layer components": { flexDirection: "row", alignItems: "center" } }, ".stepper-vertical .stepper-step-label, \n .stepper-vertical .stepper-step-description": { "@layer components": { textAlign: "left", marginLeft: "1rem" } }, ".stepper-vertical .stepper-step-content": { "@layer components": { marginTop: "0", marginLeft: "3.5rem", padding: "1rem 0 1.5rem" } }, ".stepper-secondary .stepper-step-active .stepper-step-icon, \n .stepper-secondary .stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-secondary)", borderColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".stepper-secondary .stepper-step-completed .stepper-step-connector": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".stepper-secondary .stepper-step-active .stepper-step-label": { "@layer components": { color: "var(--color-secondary)" } }, ".stepper-tertiary .stepper-step-active .stepper-step-icon, \n .stepper-tertiary .stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-tertiary)", borderColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".stepper-tertiary .stepper-step-completed .stepper-step-connector": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".stepper-tertiary .stepper-step-active .stepper-step-label": { "@layer components": { color: "var(--color-tertiary)" } }, ".stepper-sm .stepper-step-icon": { "@layer components": { width: "2rem", height: "2rem", fontSize: "0.75rem" } }, ".stepper-sm .stepper-step-connector": { "@layer components": { top: "1rem", left: "calc(50% + 1rem)", width: "calc(100% - 2rem)" } }, ".stepper-sm .stepper-step-label": { "@layer components": { fontSize: "0.75rem" } }, ".stepper-sm .stepper-step-description": { "@layer components": { fontSize: "0.625rem" } }, ".stepper-lg .stepper-step-icon": { "@layer components": { width: "3rem", height: "3rem", fontSize: "1rem" } }, ".stepper-lg .stepper-step-connector": { "@layer components": { top: "1.5rem", left: "calc(50% + 1.5rem)", width: "calc(100% - 3rem)" } }, ".stepper-alt-labels .stepper-step-connector": { "@layer components": { top: "1.25rem", left: "calc(50% + 2rem)", width: "calc(100% - 4rem)" } }, ".stepper-dots": { "@layer components": { gap: "0.5rem" } }, ".stepper-dots .stepper-step-icon": { "@layer components": { width: "0.75rem", height: "0.75rem", fontSize: "0", borderWidth: "0", backgroundColor: "var(--color-outline-variant)" } }, ".stepper-dots .stepper-step-active .stepper-step-icon": { "@layer components": { width: "1.5rem", borderRadius: "var(--radius-full)", backgroundColor: "var(--color-primary)" } }, ".stepper-dots .stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".stepper-dots .stepper-step-connector": { "@layer components": { display: "none" } }, ".stepper-dots .stepper-step-label, \n .stepper-dots .stepper-step-description": { "@layer components": { display: "none" } }, ".stepper-clickable .stepper-step-button": { "@layer components": { cursor: "pointer" } }, ".stepper-clickable .stepper-step-button:hover .stepper-step-icon": { "@layer components": { borderColor: "var(--color-primary)" } }, ".stepper-clickable .stepper-step-completed .stepper-step-button:hover .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".stepper-step-disabled .stepper-step-button": { "@layer components": { cursor: "not-allowed", opacity: 0.7 } }, ".stepper-icons .stepper-step-icon": { "@layer components": { fontSize: "1.25rem" } }, ".stepper-step-icon, \n .stepper-dots .stepper-step-icon": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".accordion": { "@layer components": { display: "flex", flexDirection: "column", borderRadius: "var(--radius-md)", overflow: "hidden" } }, ".accordion-item": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", marginTop: "-1px" } }, ".accordion-item:first-child": { "@layer components": { marginTop: "0", borderTopLeftRadius: "var(--radius-md)", borderTopRightRadius: "var(--radius-md)" } }, ".accordion-item:last-child": { "@layer components": { borderBottomLeftRadius: "var(--radius-md)", borderBottomRightRadius: "var(--radius-md)" } }, ".accordion-header": { "@layer components": { display: "flex", alignItems: "center", width: "100%", padding: "1rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".accordion-header:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".accordion-header:focus-visible": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container)", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".accordion-item.open .accordion-header": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".accordion-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginRight: "0.75rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".accordion-title": { "@layer components": { flex: 1 } }, ".accordion-subtitle": { "@layer components": { fontSize: "0.75rem", fontWeight: 400, color: "var(--color-on-surface-variant)", marginTop: "0.125rem" } }, ".accordion-expand": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginLeft: "auto", color: "var(--color-on-surface-variant)", transition: "transform 200ms ease-in-out", flexShrink: 0 } }, ".accordion-item.open .accordion-expand": { "@layer components": { transform: "rotate(180deg)" } }, ".accordion-content": { "@layer components": { display: "grid", gridTemplateRows: "0fr", transition: "grid-template-rows 200ms ease-in-out" } }, ".accordion-item.open .accordion-content": { "@layer components": { gridTemplateRows: "1fr" } }, ".accordion-body": { "@layer components": { overflow: "hidden" } }, ".accordion-body-inner": { "@layer components": { padding: "0 1rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".accordion-borderless .accordion-item": { "@layer components": { border: "none", borderBottom: "1px solid var(--color-outline-variant)", borderRadius: "0" } }, ".accordion-borderless .accordion-item:last-child": { "@layer components": { borderBottom: "none" } }, ".accordion-separated .accordion-item": { "@layer components": { marginTop: "0.5rem", borderRadius: "var(--radius-md)" } }, ".accordion-separated .accordion-item:first-child": { "@layer components": { marginTop: "0" } }, ".accordion-filled .accordion-item": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none" } }, ".accordion-filled .accordion-header:hover, \n .accordion-filled .accordion-item.open .accordion-header": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".accordion-compact .accordion-header": { "@layer components": { padding: "0.75rem" } }, ".accordion-compact .accordion-body-inner": { "@layer components": { padding: "0 0.75rem 0.75rem" } }, ".accordion-lg .accordion-header": { "@layer components": { padding: "1.25rem", fontSize: "1rem" } }, ".accordion-lg .accordion-body-inner": { "@layer components": { padding: "0 1.25rem 1.25rem", fontSize: "1rem" } }, ".accordion-item.disabled .accordion-header": { "@layer components": { cursor: "not-allowed", opacity: 0.6, backgroundColor: "transparent" } }, ".accordion-item.disabled .accordion-header:hover": { "@layer components": { backgroundColor: "transparent" } }, ".accordion-flush": { "@layer components": { borderRadius: "0" } }, ".accordion-flush .accordion-item:first-child, \n .accordion-flush .accordion-item:last-child": { "@layer components": { borderRadius: "0" } }, ".accordion-multiple .accordion-item.open + .accordion-item.open": { "@layer components": { borderTopColor: "transparent" } }, ".accordion-actions": { "@layer components": { display: "flex", gap: "0.5rem", padding: "0.75rem 1rem", backgroundColor: "var(--color-surface-container)", borderTop: "1px solid var(--color-outline-variant)" } }, ".accordion-nested": { "@layer components": { margin: "0 -1rem", borderRadius: "0" } }, ".accordion-nested .accordion-item": { "@layer components": { borderLeft: "none", borderRight: "none", borderRadius: "0" } }, ".accordion-primary .accordion-item.open .accordion-header": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".accordion-primary .accordion-item.open .accordion-expand": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".accordion-content, \n .accordion-expand, \n .accordion-header": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".bottomsheet-backdrop": { "@layer components": { position: "fixed", inset: "0", zIndex: 1100, backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", opacity: 0, visibility: "hidden", transition: "opacity 300ms ease-out, visibility 300ms ease-out" } }, ".bottomsheet-backdrop.show": { "@layer components": { opacity: 1, visibility: "visible" } }, ":where(.bottomsheet[popover], dialog.bottomsheet)": { "@layer components": { inset: "auto", margin: "0", width: "auto", height: "auto", padding: "0", border: "0", color: "var(--color-on-surface)", maxWidth: "none", maxHeight: "none", overflow: "auto", boxSizing: "border-box" } }, ".bottomsheet[popover]:not(:popover-open), \n dialog.bottomsheet:not([open])": { "@layer components": { display: "none" } }, ".bottomsheet": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1200, display: "flex", flexDirection: "column", maxHeight: "90vh", backgroundColor: "var(--color-surface)", borderRadius: "var(--radius-2xl) var(--radius-2xl) 0 0", boxShadow: "0 -25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent)", transform: "translateY(100%)", transition: "transform 300ms ease-out", paddingBottom: "env(safe-area-inset-bottom, 0)" } }, ".bottomsheet.show": { "@layer components": { transform: "translateY(0)" } }, ".bottomsheet-handle": { "@layer components": { display: "flex", justifyContent: "center", padding: "1rem", cursor: "grab", touchAction: "none" } }, ".bottomsheet-handle::before": { "@layer components": { content: "''", width: "2rem", height: "0.25rem", backgroundColor: "var(--color-outline-variant)", borderRadius: "var(--radius-full)" } }, ".bottomsheet-handle:active": { "@layer components": { cursor: "grabbing" } }, ".bottomsheet-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0 1.5rem 1rem", flexShrink: 0 } }, ".bottomsheet-title": { "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".bottomsheet-close": { "@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" } }, ".bottomsheet-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottomsheet-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottomsheet-content": { "@layer components": { flex: 1, overflowY: "auto", padding: "0 1.5rem", overscrollBehavior: "contain" } }, ".bottomsheet-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem 1.5rem", borderTop: "1px solid var(--color-outline-variant)", flexShrink: 0 } }, ".bottomsheet-list": { "@layer components": { display: "flex", flexDirection: "column", margin: "0 -1.5rem" } }, ".bottomsheet-item": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem", width: "100%", padding: "1rem 1.5rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", textAlign: "left", textDecoration: "none", transition: "background-color 150ms ease-in-out" } }, ".bottomsheet-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottomsheet-item:focus-visible": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container)", boxShadow: "inset 0 0 0 2px var(--color-primary)" } }, ".bottomsheet-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", color: "var(--color-on-surface-variant)", fontSize: "1.25rem", flexShrink: 0 } }, ".bottomsheet-item-content": { "@layer components": { flex: 1, minWidth: "0" } }, ".bottomsheet-item-label": { "@layer components": { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".bottomsheet-item-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginTop: "0.125rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".bottomsheet-grid": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.5rem", padding: "0.5rem 0" } }, ".bottomsheet-grid-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", padding: "1rem 0.5rem", fontSize: "0.75rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".bottomsheet-grid-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottomsheet-grid-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "3rem", height: "3rem", fontSize: "1.5rem", backgroundColor: "var(--color-surface-container-high)", borderRadius: "var(--radius-full)", color: "var(--color-on-surface-variant)" } }, ".bottomsheet-sm": { "@layer components": { maxHeight: "50vh" } }, ".bottomsheet-lg": { "@layer components": { maxHeight: "95vh" } }, ".bottomsheet-full": { "@layer components": { maxHeight: "100vh", height: "100vh", borderRadius: "0" } }, ".bottomsheet-persistent": { "@layer components": { position: "absolute", boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottomsheet-peek": { "@layer components": { maxHeight: "30vh" } }, ".bottomsheet-half": { "@layer components": { maxHeight: "50vh" } }, ".bottomsheet-expanded": { "@layer components": { maxHeight: "90vh" } }, ".bottomsheet-detents": { "@layer components": { position: "absolute", right: "1rem", top: "50%", transform: "translateY(-50%)", display: "flex", flexDirection: "column", gap: "0.25rem" } }, ".bottomsheet-detent": { "@layer components": { width: "0.25rem", height: "1rem", backgroundColor: "var(--color-outline-variant)", borderRadius: "var(--radius-full)", cursor: "pointer" } }, ".bottomsheet-detent.active": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".bottomsheet-divider": { "@layer components": { height: "1px", margin: "0.5rem 0", backgroundColor: "var(--color-outline-variant)" } }, ".bottomsheet-section-title": { "@layer components": { padding: "0.75rem 0", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".bottomsheet-responsive": { "@layer components": { "@media (min-width: 768px)": { left: "auto", right: "0", top: "0", bottom: "0", width: "24rem", maxWidth: "calc(100vw - 3.5rem)", maxHeight: "100vh", borderRadius: "var(--radius-lg) 0 0 var(--radius-lg)", transform: "translateX(100%)" } } }, ".bottomsheet-responsive.show": { "@layer components": { "@media (min-width: 768px)": { transform: "translateX(0)" } } }, ".bottomsheet-responsive .bottomsheet-handle": { "@layer components": { "@media (min-width: 768px)": { display: "none" } } }, ".bottomsheet[popover], \n dialog.bottomsheet": { "@layer components": { transition: `transform 300ms ease-out, opacity 300ms ease-out,
|
|
248
|
+
overlay 300ms allow-discrete` } }, "dialog.drawer[open]::backdrop": { "@layer components": { opacity: 1 } }, ".drawer[popover]:popover-open, \n dialog.drawer[open], \n dialog.drawer[open]::backdrop": { "@layer components": { "@starting-style": { opacity: 0 } } }, ".drawer-left[popover]:popover-open, \n dialog.drawer-left[open]": { "@layer components": { "@starting-style": { transform: "translateX(-100%)" } } }, ".drawer-right[popover]:popover-open, \n dialog.drawer-right[open]": { "@layer components": { "@starting-style": { transform: "translateX(100%)" } } }, ".drawer-top[popover]:popover-open, \n dialog.drawer-top[open]": { "@layer components": { "@starting-style": { transform: "translateY(-100%)" } } }, ".drawer-bottom[popover]:popover-open, \n dialog.drawer-bottom[open]": { "@layer components": { "@starting-style": { transform: "translateY(100%)" } } }, ".drawer[popover], \n dialog.drawer, \n dialog.drawer::backdrop, \n .drawer, \n .drawer-backdrop, \n .drawer-close, \n .drawer-item, \n .drawer-rail": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".nested-menu": { "@layer components": { display: "flex", flexDirection: "column", listStyle: "none", margin: "0", padding: "0.5rem", gap: "0.125rem", fontSize: "0.875rem", color: "var(--color-on-surface)" } }, ".nested-menu-title": { "@layer components": { padding: "0.75rem 0.75rem 0.25rem", fontSize: "0.6875rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)", userSelect: "none" } }, ".nested-menu li > a, \n .nested-menu li > button": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "inherit", color: "var(--color-on-surface)", textDecoration: "none", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-field, 0.375rem)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".nested-menu li > a:hover, \n .nested-menu li > button:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".nested-menu li > a:focus-visible, \n .nested-menu li > button:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, '.nested-menu li > a.active, \n .nested-menu li > button.active, \n .nested-menu li > a[aria-current="page"], \n .nested-menu li > button[aria-current="page"]': { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, '.nested-menu li > a.active:hover, \n .nested-menu li > button.active:hover, \n .nested-menu li > a[aria-current="page"]:hover, \n .nested-menu li > button[aria-current="page"]:hover': { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary-container), var(--color-on-primary-container) 8%)" } }, ".nested-menu li.disabled": { "@layer components": { opacity: "1 !important", pointerEvents: "none" } }, ".nested-menu li.disabled > a, \n .nested-menu li.disabled > button": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".nested-menu details": { "@layer components": { width: "100%" } }, ".nested-menu summary": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "inherit", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-field, 0.375rem)", cursor: "pointer", listStyle: "none", transition: "background-color 150ms ease-in-out" } }, ".nested-menu summary::-webkit-details-marker": { "@layer components": { display: "none" } }, ".nested-menu summary::marker": { "@layer components": { display: "none", content: '""' } }, ".nested-menu summary:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".nested-menu summary:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".nested-menu summary::after": { "@layer components": { content: '""', display: "inline-block", marginLeft: "auto", width: "0.375rem", height: "0.375rem", borderRight: "1.5px solid currentColor", borderBottom: "1.5px solid currentColor", transform: "rotate(-45deg)", transition: "transform 200ms ease-in-out", flexShrink: 0, opacity: 0.6 } }, ".nested-menu details[open] > summary::after": { "@layer components": { transform: "rotate(45deg)" } }, ".nested-menu details > ul": { "@layer components": { listStyle: "none", margin: "0", padding: "0.125rem 0 0.125rem 1rem", display: "flex", flexDirection: "column", gap: "0.125rem" } }, ".nested-menu-xs": { "@layer components": { fontSize: "0.75rem", padding: "0.25rem" } }, ".nested-menu-xs li > a, \n .nested-menu-xs li > button, \n .nested-menu-xs summary": { "@layer components": { padding: "0.25rem 0.5rem", gap: "0.375rem" } }, ".nested-menu-xs .nested-menu-title": { "@layer components": { padding: "0.5rem 0.5rem 0.125rem", fontSize: "0.625rem" } }, ".nested-menu-sm": { "@layer components": { fontSize: "0.8125rem", padding: "0.375rem" } }, ".nested-menu-sm li > a, \n .nested-menu-sm li > button, \n .nested-menu-sm summary": { "@layer components": { padding: "0.375rem 0.625rem", gap: "0.375rem" } }, ".nested-menu-sm .nested-menu-title": { "@layer components": { padding: "0.625rem 0.625rem 0.1875rem", fontSize: "0.625rem" } }, ".nested-menu-lg": { "@layer components": { fontSize: "1rem", padding: "0.625rem" } }, ".nested-menu-lg li > a, \n .nested-menu-lg li > button, \n .nested-menu-lg summary": { "@layer components": { padding: "0.625rem 1rem", gap: "0.625rem" } }, ".nested-menu-lg .nested-menu-title": { "@layer components": { padding: "0.875rem 1rem 0.375rem", fontSize: "0.75rem" } }, ".nested-menu-bordered": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-card, 0.75rem)", boxShadow: "var(--shadow-sm)" } }, ".nested-menu-compact": { "@layer components": { padding: "0.25rem", gap: "0" } }, ".nested-menu-compact li > a, \n .nested-menu-compact li > button, \n .nested-menu-compact summary": { "@layer components": { padding: "0.3125rem 0.625rem" } }, ".nested-menu-compact .nested-menu-title": { "@layer components": { padding: "0.5rem 0.625rem 0.125rem" } }, ".nested-menu-compact details > ul": { "@layer components": { padding: "0 0 0 0.75rem" } }, ".nested-menu li > a, \n .nested-menu li > button, \n .nested-menu summary, \n .nested-menu summary::after": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".stepper": { "@layer components": { display: "flex", alignItems: "flex-start", gap: "0" } }, ".stepper-step": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", flex: 1, position: "relative" } }, ".stepper-step-connector": { "@layer components": { position: "absolute", top: "1.25rem", left: "calc(50% + 1.25rem)", width: "calc(100% - 2.5rem)", height: "2px", backgroundColor: "var(--color-outline-variant)" } }, ".stepper-step:last-child .stepper-step-connector": { "@layer components": { display: "none" } }, ".stepper-step-completed .stepper-step-connector": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".stepper-step-button": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", cursor: "pointer", zIndex: 1, background: "none", border: "none", padding: "0" } }, ".stepper-step-button:focus-visible": { "@layer components": { outline: "none" } }, ".stepper-step-button:focus-visible .stepper-step-icon": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".stepper-step-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface-variant)", backgroundColor: "var(--color-surface)", border: "2px solid var(--color-outline-variant)", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".stepper-step-active .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary)", borderColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".stepper-step-error .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-error)", borderColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".stepper-step-disabled .stepper-step-icon": { "@layer components": { opacity: 0.7, cursor: "not-allowed" } }, ".stepper-step-label": { "@layer components": { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", textAlign: "center" } }, ".stepper-step-active .stepper-step-label": { "@layer components": { color: "var(--color-primary)" } }, ".stepper-step-error .stepper-step-label": { "@layer components": { color: "var(--color-error)" } }, ".stepper-step-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginTop: "0.125rem", textAlign: "center" } }, ".stepper-step-content": { "@layer components": { marginTop: "1.5rem", padding: "0 1rem", width: "100%" } }, ".stepper-step-optional::after": { "@layer components": { content: "'(Optional)'", display: "block", fontSize: "0.6875rem", color: "var(--color-on-surface-variant)", marginTop: "0.125rem" } }, ".stepper-vertical": { "@layer components": { flexDirection: "column", alignItems: "flex-start" } }, ".stepper-vertical .stepper-step": { "@layer components": { flexDirection: "row", alignItems: "flex-start", width: "100%" } }, ".stepper-vertical .stepper-step-connector": { "@layer components": { top: "2.5rem", left: "1.25rem", width: "2px", height: "calc(100% - 2.5rem)", transform: "translateX(-50%)" } }, ".stepper-vertical .stepper-step-button": { "@layer components": { flexDirection: "row", alignItems: "center" } }, ".stepper-vertical .stepper-step-label, \n .stepper-vertical .stepper-step-description": { "@layer components": { textAlign: "left", marginLeft: "1rem" } }, ".stepper-vertical .stepper-step-content": { "@layer components": { marginTop: "0", marginLeft: "3.5rem", padding: "1rem 0 1.5rem" } }, ".stepper-secondary .stepper-step-active .stepper-step-icon, \n .stepper-secondary .stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-secondary)", borderColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".stepper-secondary .stepper-step-completed .stepper-step-connector": { "@layer components": { backgroundColor: "var(--color-secondary)" } }, ".stepper-secondary .stepper-step-active .stepper-step-label": { "@layer components": { color: "var(--color-secondary)" } }, ".stepper-tertiary .stepper-step-active .stepper-step-icon, \n .stepper-tertiary .stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-tertiary)", borderColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".stepper-tertiary .stepper-step-completed .stepper-step-connector": { "@layer components": { backgroundColor: "var(--color-tertiary)" } }, ".stepper-tertiary .stepper-step-active .stepper-step-label": { "@layer components": { color: "var(--color-tertiary)" } }, ".stepper-sm .stepper-step-icon": { "@layer components": { width: "2rem", height: "2rem", fontSize: "0.75rem" } }, ".stepper-sm .stepper-step-connector": { "@layer components": { top: "1rem", left: "calc(50% + 1rem)", width: "calc(100% - 2rem)" } }, ".stepper-sm .stepper-step-label": { "@layer components": { fontSize: "0.75rem" } }, ".stepper-sm .stepper-step-description": { "@layer components": { fontSize: "0.625rem" } }, ".stepper-lg .stepper-step-icon": { "@layer components": { width: "3rem", height: "3rem", fontSize: "1rem" } }, ".stepper-lg .stepper-step-connector": { "@layer components": { top: "1.5rem", left: "calc(50% + 1.5rem)", width: "calc(100% - 3rem)" } }, ".stepper-alt-labels .stepper-step-connector": { "@layer components": { top: "1.25rem", left: "calc(50% + 2rem)", width: "calc(100% - 4rem)" } }, ".stepper-dots": { "@layer components": { gap: "0.5rem" } }, ".stepper-dots .stepper-step-icon": { "@layer components": { width: "0.75rem", height: "0.75rem", fontSize: "0", borderWidth: "0", backgroundColor: "var(--color-outline-variant)" } }, ".stepper-dots .stepper-step-active .stepper-step-icon": { "@layer components": { width: "1.5rem", borderRadius: "var(--radius-full)", backgroundColor: "var(--color-primary)" } }, ".stepper-dots .stepper-step-completed .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".stepper-dots .stepper-step-connector": { "@layer components": { display: "none" } }, ".stepper-dots .stepper-step-label, \n .stepper-dots .stepper-step-description": { "@layer components": { display: "none" } }, ".stepper-clickable .stepper-step-button": { "@layer components": { cursor: "pointer" } }, ".stepper-clickable .stepper-step-button:hover .stepper-step-icon": { "@layer components": { borderColor: "var(--color-primary)" } }, ".stepper-clickable .stepper-step-completed .stepper-step-button:hover .stepper-step-icon": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".stepper-step-disabled .stepper-step-button": { "@layer components": { cursor: "not-allowed", opacity: 0.7 } }, ".stepper-icons .stepper-step-icon": { "@layer components": { fontSize: "1.25rem" } }, ".stepper-step-icon, \n .stepper-dots .stepper-step-icon": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".accordion": { "@layer components": { display: "flex", flexDirection: "column", borderRadius: "var(--radius-md)", overflow: "hidden" } }, ".accordion-item": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", marginTop: "-1px" } }, ".accordion-item:first-child": { "@layer components": { marginTop: "0", borderTopLeftRadius: "var(--radius-md)", borderTopRightRadius: "var(--radius-md)" } }, ".accordion-item:last-child": { "@layer components": { borderBottomLeftRadius: "var(--radius-md)", borderBottomRightRadius: "var(--radius-md)" } }, ".accordion-header": { "@layer components": { display: "flex", alignItems: "center", width: "100%", padding: "1rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", textAlign: "start", transition: "background-color 150ms ease-in-out" } }, ".accordion-header:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".accordion-header:focus-visible": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container)", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header, \n details.accordion-item[open] > .accordion-header": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".accordion-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginInlineEnd: "0.75rem", color: "var(--color-on-surface-variant)", flexShrink: 0 } }, ".accordion-title": { "@layer components": { flex: 1 } }, ".accordion-subtitle": { "@layer components": { fontSize: "0.75rem", fontWeight: 400, color: "var(--color-on-surface-variant)", marginTop: "0.125rem" } }, ".accordion-expand": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginInlineStart: "auto", color: "var(--color-on-surface-variant)", transition: "transform 200ms ease-in-out", flexShrink: 0 } }, ".accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header > .accordion-expand, \n details.accordion-item[open] > .accordion-header > .accordion-expand": { "@layer components": { transform: "rotate(180deg)" } }, ".accordion-content": { "@layer components": { display: "grid", gridTemplateRows: "0fr", transition: "grid-template-rows 200ms ease-in-out" } }, ".accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-content, \n details.accordion-item[open] > .accordion-content": { "@layer components": { gridTemplateRows: "1fr" } }, ".accordion-body": { "@layer components": { overflow: "hidden", minBlockSize: "0" } }, ".accordion-body-inner": { "@layer components": { padding: "0 1rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".accordion-borderless .accordion-item": { "@layer components": { border: "none", borderBottom: "1px solid var(--color-outline-variant)", borderRadius: "0" } }, ".accordion-borderless .accordion-item:last-child": { "@layer components": { borderBottom: "none" } }, ".accordion-separated .accordion-item": { "@layer components": { marginTop: "0.5rem", borderRadius: "var(--radius-md)" } }, ".accordion-separated .accordion-item:first-child": { "@layer components": { marginTop: "0" } }, ".accordion-filled .accordion-item": { "@layer components": { backgroundColor: "var(--color-surface-container)", border: "none" } }, ".accordion-filled .accordion-header:hover, \n .accordion-filled > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header, \n .accordion-filled > details.accordion-item[open] > .accordion-header": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".accordion-compact .accordion-header": { "@layer components": { padding: "0.75rem" } }, ".accordion-compact .accordion-body-inner": { "@layer components": { padding: "0 0.75rem 0.75rem" } }, ".accordion-lg .accordion-header": { "@layer components": { padding: "1.25rem", fontSize: "1rem" } }, ".accordion-lg .accordion-body-inner": { "@layer components": { padding: "0 1.25rem 1.25rem", fontSize: "1rem" } }, ".accordion-item.disabled .accordion-header": { "@layer components": { cursor: "not-allowed", opacity: 0.6, backgroundColor: "transparent" } }, ".accordion-item.disabled .accordion-header:hover": { "@layer components": { backgroundColor: "transparent" } }, ".accordion-flush": { "@layer components": { borderRadius: "0" } }, ".accordion-flush .accordion-item:first-child, \n .accordion-flush .accordion-item:last-child": { "@layer components": { borderRadius: "0" } }, ".accordion-multiple .accordion-item.open + .accordion-item.open": { "@layer components": { borderTopColor: "transparent" } }, ".accordion-actions": { "@layer components": { display: "flex", gap: "0.5rem", padding: "0.75rem 1rem", backgroundColor: "var(--color-surface-container)", borderTop: "1px solid var(--color-outline-variant)" } }, ".accordion-nested": { "@layer components": { margin: "0 -1rem", borderRadius: "0" } }, ".accordion-nested .accordion-item": { "@layer components": { borderLeft: "none", borderRight: "none", borderRadius: "0" } }, ".accordion-primary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header, \n .accordion-primary > details.accordion-item[open] > .accordion-header": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".accordion-primary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header > .accordion-expand, \n .accordion-primary > details.accordion-item[open] > .accordion-header > .accordion-expand": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".accordion-outlined": { "@layer components": { border: "1px solid var(--color-outline-variant)" } }, ".accordion-comfortable .accordion-header": { "@layer components": { padding: "1.25rem" } }, ".accordion-header-icon": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem" } }, ".accordion-header-icon-leading": { "@layer components": { inlineSize: "1.25rem", blockSize: "1.25rem", flex: "none" } }, ".accordion-item-disabled > .accordion-header": { "@layer components": { opacity: 0.6, cursor: "not-allowed" } }, ".accordion-no-animation .accordion-content, .accordion-no-animation .accordion-expand": { "@layer components": { transition: "none" } }, ".accordion-secondary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header, \n .accordion-secondary > details.accordion-item[open] > .accordion-header": { "@layer components": { color: "var(--color-secondary)" } }, ".accordion-tertiary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header, \n .accordion-tertiary > details.accordion-item[open] > .accordion-header": { "@layer components": { color: "var(--color-tertiary)" } }, "details.accordion-item > summary": { "@layer components": { listStyle: "none" } }, "details.accordion-item > summary::-webkit-details-marker": { "@layer components": { display: "none" } }, "details.accordion-item:not([open]) > .accordion-content, \n .accordion-item:not(details):not(.open):not(.accordion-item-open) > .accordion-content, \n .accordion-content[hidden]": { "@layer components": { display: "none" } }, ".accordion-title, .accordion-body-inner": { "@layer components": { minInlineSize: "0", overflowWrap: "anywhere" } }, ".accordion-content, \n .accordion-expand, \n .accordion-header": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".bottomsheet-backdrop": { "@layer components": { position: "fixed", inset: "0", zIndex: 1100, backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", opacity: 0, visibility: "hidden", transition: "opacity 300ms ease-out, visibility 300ms ease-out" } }, ".bottomsheet-backdrop.show": { "@layer components": { opacity: 1, visibility: "visible" } }, ":where(.bottomsheet[popover], dialog.bottomsheet)": { "@layer components": { inset: "auto", margin: "0", width: "auto", height: "auto", padding: "0", border: "0", color: "var(--color-on-surface)", maxWidth: "none", maxHeight: "none", overflow: "auto", boxSizing: "border-box" } }, ".bottomsheet[popover]:not(:popover-open), \n dialog.bottomsheet:not([open])": { "@layer components": { display: "none" } }, ".bottomsheet": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1200, display: "flex", flexDirection: "column", maxHeight: "90vh", backgroundColor: "var(--color-surface)", borderRadius: "var(--radius-2xl) var(--radius-2xl) 0 0", boxShadow: "0 -25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent)", transform: "translateY(100%)", transition: "transform 300ms ease-out", paddingBottom: "env(safe-area-inset-bottom, 0)" } }, ".bottomsheet.show": { "@layer components": { transform: "translateY(0)" } }, ".bottomsheet-handle": { "@layer components": { display: "flex", justifyContent: "center", padding: "1rem", cursor: "grab", touchAction: "none" } }, ".bottomsheet-handle::before": { "@layer components": { content: "''", width: "2rem", height: "0.25rem", backgroundColor: "var(--color-outline-variant)", borderRadius: "var(--radius-full)" } }, ".bottomsheet-handle:active": { "@layer components": { cursor: "grabbing" } }, ".bottomsheet-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0 1.5rem 1rem", flexShrink: 0 } }, ".bottomsheet-title": { "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 500, color: "var(--color-on-surface)" } }, ".bottomsheet-close": { "@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" } }, ".bottomsheet-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottomsheet-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottomsheet-content": { "@layer components": { flex: 1, overflowY: "auto", padding: "0 1.5rem", overscrollBehavior: "contain" } }, ".bottomsheet-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem 1.5rem", borderTop: "1px solid var(--color-outline-variant)", flexShrink: 0 } }, ".bottomsheet-list": { "@layer components": { display: "flex", flexDirection: "column", margin: "0 -1.5rem" } }, ".bottomsheet-item": { "@layer components": { display: "flex", alignItems: "center", gap: "1rem", width: "100%", padding: "1rem 1.5rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", textAlign: "left", textDecoration: "none", transition: "background-color 150ms ease-in-out" } }, ".bottomsheet-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottomsheet-item:focus-visible": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container)", boxShadow: "inset 0 0 0 2px var(--color-primary)" } }, ".bottomsheet-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", color: "var(--color-on-surface-variant)", fontSize: "1.25rem", flexShrink: 0 } }, ".bottomsheet-item-content": { "@layer components": { flex: 1, minWidth: "0" } }, ".bottomsheet-item-label": { "@layer components": { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".bottomsheet-item-description": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginTop: "0.125rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".bottomsheet-grid": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.5rem", padding: "0.5rem 0" } }, ".bottomsheet-grid-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", padding: "1rem 0.5rem", fontSize: "0.75rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".bottomsheet-grid-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottomsheet-grid-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "3rem", height: "3rem", fontSize: "1.5rem", backgroundColor: "var(--color-surface-container-high)", borderRadius: "var(--radius-full)", color: "var(--color-on-surface-variant)" } }, ".bottomsheet-sm": { "@layer components": { maxHeight: "50vh" } }, ".bottomsheet-lg": { "@layer components": { maxHeight: "95vh" } }, ".bottomsheet-full": { "@layer components": { maxHeight: "100vh", height: "100vh", borderRadius: "0" } }, ".bottomsheet-persistent": { "@layer components": { position: "absolute", boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottomsheet-peek": { "@layer components": { maxHeight: "30vh" } }, ".bottomsheet-half": { "@layer components": { maxHeight: "50vh" } }, ".bottomsheet-expanded": { "@layer components": { maxHeight: "90vh" } }, ".bottomsheet-detents": { "@layer components": { position: "absolute", right: "1rem", top: "50%", transform: "translateY(-50%)", display: "flex", flexDirection: "column", gap: "0.25rem" } }, ".bottomsheet-detent": { "@layer components": { width: "0.25rem", height: "1rem", backgroundColor: "var(--color-outline-variant)", borderRadius: "var(--radius-full)", cursor: "pointer" } }, ".bottomsheet-detent.active": { "@layer components": { backgroundColor: "var(--color-primary)" } }, ".bottomsheet-divider": { "@layer components": { height: "1px", margin: "0.5rem 0", backgroundColor: "var(--color-outline-variant)" } }, ".bottomsheet-section-title": { "@layer components": { padding: "0.75rem 0", fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-on-surface-variant)" } }, ".bottomsheet-responsive": { "@layer components": { "@media (min-width: 768px)": { left: "auto", right: "0", top: "0", bottom: "0", width: "24rem", maxWidth: "calc(100vw - 3.5rem)", maxHeight: "100vh", borderRadius: "var(--radius-lg) 0 0 var(--radius-lg)", transform: "translateX(100%)" } } }, ".bottomsheet-responsive.show": { "@layer components": { "@media (min-width: 768px)": { transform: "translateX(0)" } } }, ".bottomsheet-responsive .bottomsheet-handle": { "@layer components": { "@media (min-width: 768px)": { display: "none" } } }, ".bottomsheet[popover], \n dialog.bottomsheet": { "@layer components": { transition: `transform 300ms ease-out, opacity 300ms ease-out,
|
|
250
249
|
display 300ms allow-discrete, overlay 300ms allow-discrete`, opacity: 0 } }, ".bottomsheet[popover]:popover-open, \n dialog.bottomsheet[open]": { "@layer components": { display: "flex", transform: "translate(0, 0)", opacity: 1 } }, "dialog.bottomsheet::backdrop": { "@layer components": { backgroundColor: "color-mix(in srgb, var(--color-scrim) 50%, transparent)", opacity: 0, transition: `opacity 300ms ease-out, display 300ms allow-discrete,
|
|
251
|
-
overlay 300ms allow-discrete` } }, "dialog.bottomsheet[open]::backdrop": { "@layer components": { opacity: 1 } }, ".bottomsheet[popover]:popover-open, \n dialog.bottomsheet[open], \n dialog.bottomsheet[open]::backdrop": { "@layer components": { "@starting-style": { opacity: 0 } } }, ".bottomsheet[popover]:popover-open, \n dialog.bottomsheet[open]": { "@layer components": { "@starting-style": { transform: "translateY(100%)" } } }, ".bottomsheet-responsive[popover]:popover-open, \n dialog.bottomsheet-responsive[open]": { "@layer components": { "@starting-style": { "@media (min-width: 768px)": { transform: "translateX(100%)" } } } }, ".bottomsheet[popover], \n dialog.bottomsheet, \n dialog.bottomsheet::backdrop, \n .bottomsheet, \n .bottomsheet-backdrop, \n .bottomsheet-close, \n .bottomsheet-item, \n .bottomsheet-grid-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".collapse": { "@layer components": { display: "flex", flexDirection: "column", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface)", visibility: "visible !important" } }, ".collapse-trigger": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", padding: "0.75rem 1rem", fontSize: "1rem", fontWeight: 500, color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "background-color 150ms ease-in-out", textAlign: "left" } }, ".collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".collapse-trigger:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".collapse-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", transition: "transform 300ms ease-in-out", flexShrink: 0 } }, ".collapse-content": { "@layer components": { display: "grid", gridTemplateRows: "0fr", transition: "grid-template-rows 300ms ease-in-out", overflow: "hidden" } }, ".collapse-content > *": { "@layer components": { overflow: "hidden", padding: "0 1rem" } }, ".collapse-open .collapse-content": { "@layer components": { gridTemplateRows: "1fr" } }, ".collapse-open .collapse-content > *": { "@layer components": { padding: "0 1rem 1rem" } }, ".collapse-open .collapse-icon": { "@layer components": { transform: "rotate(180deg)" } }, ".collapse-closed .collapse-content": { "@layer components": { gridTemplateRows: "0fr" } }, ".collapse.show .collapse-content": { "@layer components": { gridTemplateRows: "1fr" } }, ".collapse.show .collapse-content > *": { "@layer components": { padding: "0 1rem 1rem" } }, ".collapse.show .collapse-icon": { "@layer components": { transform: "rotate(180deg)" } }, ".collapse-inner": { "@layer components": {} }, ".collapse-fade": { "@layer components": { opacity: 0, transition: "grid-template-rows 300ms ease-in-out, opacity 200ms ease-in-out" } }, ".collapse-fade.show": { "@layer components": { opacity: 1, transition: "grid-template-rows 300ms ease-in-out, opacity 300ms ease-in-out 100ms" } }, ".collapse-toggle": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "background-color 150ms ease-in-out", borderRadius: "var(--radius-sm)" } }, ".collapse-toggle:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".collapse-toggle:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".collapse-toggle-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", transition: "transform 200ms ease-in-out" } }, '.collapse-toggle[aria-expanded="true"] .collapse-toggle-icon': { "@layer components": { transform: "rotate(180deg)" } }, ".collapse-card": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-sm)" } }, ".collapse-card .collapse-toggle, \n .collapse-card .collapse-trigger": { "@layer components": { width: "100%", justifyContent: "space-between", padding: "1rem", borderRadius: "0", color: "var(--color-on-surface)" } }, ".collapse-card .collapse-toggle:hover, \n .collapse-card .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".collapse-card .collapse-inner, \n .collapse-card .collapse-content > *": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".collapse-card.collapse-open .collapse-inner, \n .collapse-card.collapse-open .collapse-content > *, \n .collapse-card.show .collapse-inner, \n .collapse-card.show .collapse-content > *": { "@layer components": { padding: "0 1rem 1rem" } }, ".collapse-bordered": { "@layer components": { border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)" } }, ".collapse-ghost": { "@layer components": { backgroundColor: "transparent" } }, ".collapse-ghost .collapse-trigger:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 5%, transparent)" } }, ".collapse-primary .collapse-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".collapse-primary .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".collapse-secondary .collapse-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".collapse-secondary .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".collapse-tertiary .collapse-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".collapse-tertiary .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)" } }, ".collapse-info .collapse-trigger": { "@layer components": { color: "var(--color-info)" } }, ".collapse-info .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-info-container)" } }, ".collapse-success .collapse-trigger": { "@layer components": { color: "var(--color-success)" } }, ".collapse-success .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-success-container)" } }, ".collapse-warning .collapse-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".collapse-warning .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)" } }, ".collapse-error .collapse-trigger": { "@layer components": { color: "var(--color-error)" } }, ".collapse-error .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-error-container)" } }, ".collapse-accent .collapse-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".collapse-accent .collapse-trigger:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".collapse-neutral .collapse-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".collapse-neutral .collapse-trigger:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".collapse-base .collapse-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".collapse-base .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".collapse-sm .collapse-trigger": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem" } }, ".collapse-sm .collapse-content > *": { "@layer components": { padding: "0 0.75rem" } }, ".collapse-sm.collapse-open .collapse-content > *": { "@layer components": { padding: "0 0.75rem 0.75rem" } }, ".collapse-lg .collapse-trigger": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem" } }, ".collapse-lg .collapse-content > *": { "@layer components": { padding: "0 1.25rem" } }, ".collapse-lg.collapse-open .collapse-content > *": { "@layer components": { padding: "0 1.25rem 1.25rem" } }, ".collapse-divider .collapse-trigger": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)" } }, ".collapse-divider.collapse-open .collapse-trigger": { "@layer components": { borderBottomColor: "var(--color-outline-variant)" } }, ".collapse-disabled": { "@layer components": { opacity: 0.7, pointerEvents: "none" } }, ".collapse-disabled .collapse-trigger": { "@layer components": { cursor: "not-allowed" } }, ".collapse-loading .collapse-trigger::after": [{ "@layer components": { content: "''", display: "inline-block", width: "1rem", height: "1rem", marginLeft: "0.5rem", border: "2px solid var(--color-outline)", borderTopColor: "var(--color-primary)", borderRadius: "var(--radius-full)", animation: "collapse-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes collapse-spin": { to: { transform: "rotate(360deg)" } }, ".collapse-slide .collapse-content > *": { "@layer components": { transform: "translateY(-0.5rem)", opacity: 0, transition: "transform 300ms ease-in-out, opacity 200ms ease-in-out" } }, ".collapse-slide.collapse-open .collapse-content > *": { "@layer components": { transform: "translateY(0)", opacity: 1 } }, ".collapse-horizontal": { "@layer components": { display: "grid", gridTemplateColumns: "0fr", transition: "grid-template-columns 300ms ease-in-out" } }, ".collapse-horizontal.show": { "@layer components": { gridTemplateColumns: "1fr" } }, ".collapse-horizontal .collapse-content": { "@layer components": { overflow: "hidden", whiteSpace: "nowrap" } }, ".collapse-horizontal-fixed": { "@layer components": { display: "block", width: "0", overflow: "hidden", transition: "width 300ms ease-in-out" } }, ".collapse-horizontal-fixed.show": { "@layer components": { width: "var(--collapse-width, 20rem)" } }, ".collapse-nested": { "@layer components": { marginLeft: "1rem", paddingLeft: "1rem", borderLeft: "2px solid var(--color-outline-variant)" } }, ".collapse-showmore": { "@layer components": { position: "relative" } }, ".collapse-showmore:not(.show)::after": { "@layer components": { content: "''", position: "absolute", bottom: "0", left: "0", right: "0", height: "3rem", background: "linear-gradient(to bottom, transparent, var(--color-surface))", pointerEvents: "none" } }, ".collapse-showmore-toggle": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", width: "100%", padding: "0.5rem", marginTop: "0.5rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", cursor: "pointer" } }, ".collapse-showmore-toggle:hover": { "@layer components": { textDecoration: "underline" } }, ".collapse-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".collapse-fast": { "@layer components": { transitionDuration: "150ms" } }, ".collapse-slow": { "@layer components": { transitionDuration: "500ms" } }, ".collapse-ease-in": { "@layer components": { transitionTimingFunction: "ease-in" } }, ".collapse-ease-out": { "@layer components": { transitionTimingFunction: "ease-out" } }, ".collapse-ease-in-out": { "@layer components": { transitionTimingFunction: "ease-in-out" } }, ".collapse-spring": { "@layer components": { transitionTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)" } }, ".collapse-hidden": { "@layer components": { display: "none" } }, ".collapse-sr-only": { "@layer components": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } }, ".collapse-maxheight": { "@layer components": { maxHeight: "0", overflow: "hidden", transition: "max-height 300ms ease-in-out" } }, ".collapse-maxheight.show": { "@layer components": { maxHeight: "var(--collapse-max-height, 100rem)" } }, ".collapse-animating": { "@layer components": { overflow: "hidden", transition: "height 300ms ease-in-out" } }, ".collapse, \n .collapse-content, \n .collapse-icon, \n .collapse-fade, \n .collapse-horizontal, \n .collapse-horizontal-fixed, \n .collapse-toggle-icon, \n .collapse-maxheight, \n .collapse-animating, \n .collapse-slide .collapse-content > *": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".popover": { "@layer components": { "--popover-color-intensity": "30%" } }, ".popover[popover]": { "@layer components": { position: "absolute", inset: "auto", zIndex: 1050, minWidth: "12rem", maxWidth: "20rem", padding: "1rem", margin: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", opacity: 0, transform: "scale(0.95)", positionArea: "bottom", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", transition: `opacity 150ms ease-out,
|
|
250
|
+
overlay 300ms allow-discrete` } }, "dialog.bottomsheet[open]::backdrop": { "@layer components": { opacity: 1 } }, ".bottomsheet[popover]:popover-open, \n dialog.bottomsheet[open], \n dialog.bottomsheet[open]::backdrop": { "@layer components": { "@starting-style": { opacity: 0 } } }, ".bottomsheet[popover]:popover-open, \n dialog.bottomsheet[open]": { "@layer components": { "@starting-style": { transform: "translateY(100%)" } } }, ".bottomsheet-responsive[popover]:popover-open, \n dialog.bottomsheet-responsive[open]": { "@layer components": { "@starting-style": { "@media (min-width: 768px)": { transform: "translateX(100%)" } } } }, ".bottomsheet[popover], \n dialog.bottomsheet, \n dialog.bottomsheet::backdrop, \n .bottomsheet, \n .bottomsheet-backdrop, \n .bottomsheet-close, \n .bottomsheet-item, \n .bottomsheet-grid-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".collapse": { "@layer components": { display: "flex", flexDirection: "column", borderRadius: "var(--radius-sm)", backgroundColor: "var(--color-surface)", visibility: "visible !important" } }, ".collapse-trigger": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", padding: "0.75rem 1rem", fontSize: "1rem", fontWeight: 500, color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "background-color 150ms ease-in-out", textAlign: "start" } }, ".collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".collapse-trigger:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".collapse-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", transition: "transform 300ms ease-in-out", flexShrink: 0 } }, ".collapse-content": { "@layer components": { display: "grid", gridTemplateRows: "0fr", transition: "grid-template-rows 300ms ease-in-out", overflow: "hidden" } }, ".collapse-content > *": { "@layer components": { overflow: "hidden", padding: "0 1rem", minBlockSize: "0", minInlineSize: "0", overflowWrap: "anywhere" } }, ".collapse:not(details):not(.collapse-closed).collapse-open > .collapse-content, \n details.collapse[open] > .collapse-content": { "@layer components": { gridTemplateRows: "1fr" } }, ".collapse:not(details):not(.collapse-closed).collapse-open > .collapse-content > *, \n details.collapse[open] > .collapse-content > *": { "@layer components": { padding: "0 1rem 1rem" } }, ".collapse:not(details):not(.collapse-closed).collapse-open > .collapse-trigger > .collapse-icon, \n details.collapse[open] > .collapse-trigger > .collapse-icon": { "@layer components": { transform: "rotate(180deg)" } }, ".collapse:not(details).collapse-closed > .collapse-content": { "@layer components": { gridTemplateRows: "0fr" } }, ".collapse:not(details):not(.collapse-closed).show > .collapse-content": { "@layer components": { gridTemplateRows: "1fr" } }, ".collapse:not(details):not(.collapse-closed).show > .collapse-content > *": { "@layer components": { padding: "0 1rem 1rem" } }, ".collapse:not(details):not(.collapse-closed).show > .collapse-trigger > .collapse-icon": { "@layer components": { transform: "rotate(180deg)" } }, ".collapse-inner": { "@layer components": {} }, ".collapse-fade": { "@layer components": { opacity: 0, transition: "grid-template-rows 300ms ease-in-out, opacity 200ms ease-in-out" } }, ".collapse-fade.show": { "@layer components": { opacity: 1, transition: "grid-template-rows 300ms ease-in-out, opacity 300ms ease-in-out 100ms" } }, ".collapse-toggle": { "@layer components": { display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "background-color 150ms ease-in-out", borderRadius: "var(--radius-sm)" } }, ".collapse-toggle:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".collapse-toggle:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".collapse-toggle-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", transition: "transform 200ms ease-in-out" } }, '.collapse-toggle[aria-expanded="true"] .collapse-toggle-icon': { "@layer components": { transform: "rotate(180deg)" } }, ".collapse-card": { "@layer components": { backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-sm)" } }, ".collapse-card .collapse-toggle, \n .collapse-card .collapse-trigger": { "@layer components": { width: "100%", justifyContent: "space-between", padding: "1rem", borderRadius: "0", color: "var(--color-on-surface)" } }, ".collapse-card .collapse-toggle:hover, \n .collapse-card .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".collapse-card .collapse-inner, \n .collapse-card .collapse-content > *": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".collapse-card:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *, \n details.collapse-card[open] > .collapse-content > *": { "@layer components": { padding: "0 1rem 1rem" } }, ".collapse-bordered": { "@layer components": { border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-sm)" } }, ".collapse-ghost": { "@layer components": { backgroundColor: "transparent" } }, ".collapse-ghost .collapse-trigger:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-on-surface) 5%, transparent)" } }, ".collapse-primary .collapse-trigger": { "@layer components": { color: "var(--color-primary)" } }, ".collapse-primary .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".collapse-secondary .collapse-trigger": { "@layer components": { color: "var(--color-secondary)" } }, ".collapse-secondary .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".collapse-tertiary .collapse-trigger": { "@layer components": { color: "var(--color-tertiary)" } }, ".collapse-tertiary .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)" } }, ".collapse-info .collapse-trigger": { "@layer components": { color: "var(--color-info)" } }, ".collapse-info .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-info-container)" } }, ".collapse-success .collapse-trigger": { "@layer components": { color: "var(--color-success)" } }, ".collapse-success .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-success-container)" } }, ".collapse-warning .collapse-trigger": { "@layer components": { color: "var(--color-warning)" } }, ".collapse-warning .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)" } }, ".collapse-error .collapse-trigger": { "@layer components": { color: "var(--color-error)" } }, ".collapse-error .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-error-container)" } }, ".collapse-accent .collapse-trigger": { "@layer components": { color: "var(--color-accent)" } }, ".collapse-accent .collapse-trigger:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))" } }, ".collapse-neutral .collapse-trigger": { "@layer components": { color: "var(--color-neutral)" } }, ".collapse-neutral .collapse-trigger:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))" } }, ".collapse-base .collapse-trigger": { "@layer components": { color: "var(--color-base-content)" } }, ".collapse-base .collapse-trigger:hover": { "@layer components": { backgroundColor: "var(--color-base-200)" } }, ".collapse-sm .collapse-trigger": { "@layer components": { padding: "0.5rem 0.75rem", fontSize: "0.875rem" } }, ".collapse-sm .collapse-content > *": { "@layer components": { padding: "0 0.75rem" } }, ".collapse-sm:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *, \n details.collapse-sm[open] > .collapse-content > *": { "@layer components": { padding: "0 0.75rem 0.75rem" } }, ".collapse-lg .collapse-trigger": { "@layer components": { padding: "1rem 1.25rem", fontSize: "1.125rem" } }, ".collapse-lg .collapse-content > *": { "@layer components": { padding: "0 1.25rem" } }, ".collapse-lg:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *, \n details.collapse-lg[open] > .collapse-content > *": { "@layer components": { padding: "0 1.25rem 1.25rem" } }, ".collapse-divider .collapse-trigger": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)" } }, ".collapse-divider.collapse-open .collapse-trigger": { "@layer components": { borderBottomColor: "var(--color-outline-variant)" } }, ".collapse-disabled": { "@layer components": { opacity: 0.7, pointerEvents: "none" } }, ".collapse-disabled .collapse-trigger": { "@layer components": { cursor: "not-allowed" } }, ".collapse-loading .collapse-trigger::after": [{ "@layer components": { content: "''", display: "inline-block", width: "1rem", height: "1rem", marginLeft: "0.5rem", border: "2px solid var(--color-outline)", borderTopColor: "var(--color-primary)", borderRadius: "var(--radius-full)", animation: "collapse-spin 0.8s linear infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes collapse-spin": { to: { transform: "rotate(360deg)" } }, ".collapse-slide > .collapse-content > *": { "@layer components": { transform: "translateY(-0.5rem)", opacity: 0, transition: "transform 300ms ease-in-out, opacity 200ms ease-in-out" } }, ".collapse-slide:not(details):not(.collapse-closed):is(.collapse-open, .show) > .collapse-content > *": { "@layer components": { transform: "translateY(0)", opacity: 1 } }, ".collapse-horizontal": { "@layer components": { display: "grid", gridTemplateColumns: "0fr", transition: "grid-template-columns 300ms ease-in-out" } }, ".collapse-horizontal.show": { "@layer components": { gridTemplateColumns: "1fr" } }, ".collapse-horizontal .collapse-content": { "@layer components": { overflow: "hidden", whiteSpace: "nowrap" } }, ".collapse-horizontal-fixed": { "@layer components": { display: "block", width: "0", overflow: "hidden", transition: "width 300ms ease-in-out" } }, ".collapse-horizontal-fixed.show": { "@layer components": { width: "var(--collapse-width, 20rem)" } }, ".collapse-nested": { "@layer components": { marginLeft: "1rem", paddingLeft: "1rem", borderLeft: "2px solid var(--color-outline-variant)" } }, ".collapse-showmore": { "@layer components": { position: "relative" } }, ".collapse-showmore:not(.show)::after": { "@layer components": { content: "''", position: "absolute", bottom: "0", left: "0", right: "0", height: "3rem", background: "linear-gradient(to bottom, transparent, var(--color-surface))", pointerEvents: "none" } }, ".collapse-showmore-toggle": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", width: "100%", padding: "0.5rem", marginTop: "0.5rem", fontSize: "0.75rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", cursor: "pointer" } }, ".collapse-showmore-toggle:hover": { "@layer components": { textDecoration: "underline" } }, ".collapse-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".collapse-fast": { "@layer components": { transitionDuration: "150ms" } }, ".collapse-slow": { "@layer components": { transitionDuration: "500ms" } }, ".collapse-ease-in": { "@layer components": { transitionTimingFunction: "ease-in" } }, ".collapse-ease-out": { "@layer components": { transitionTimingFunction: "ease-out" } }, ".collapse-ease-in-out": { "@layer components": { transitionTimingFunction: "ease-in-out" } }, ".collapse-spring": { "@layer components": { transitionTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)" } }, ".collapse-hidden": { "@layer components": { display: "none" } }, ".collapse-sr-only": { "@layer components": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } }, ".collapse-maxheight": { "@layer components": { maxHeight: "0", overflow: "hidden", transition: "max-height 300ms ease-in-out" } }, ".collapse-maxheight.show": { "@layer components": { maxHeight: "var(--collapse-max-height, 100rem)" } }, ".collapse-animating": { "@layer components": { overflow: "hidden", transition: "height 300ms ease-in-out" } }, "details.collapse": { "@layer components": { display: "block" } }, "details.collapse > summary": { "@layer components": { listStyle: "none" } }, "details.collapse > summary::-webkit-details-marker": { "@layer components": { display: "none" } }, ".collapse:not(details):not(.collapse-open):not(.show) > .collapse-content, \n .collapse:not(details).collapse-closed > .collapse-content, \n .collapse-content[hidden]": { "@layer components": { display: "none" } }, ".collapse.collapse-fade": { "@layer components": { opacity: 1 } }, ".collapse.collapse-fade > .collapse-content": { "@layer components": { opacity: 0 } }, ".collapse.collapse-fade:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content, \n details.collapse.collapse-fade[open] > .collapse-content": { "@layer components": { opacity: 1 } }, ".collapse.collapse-slide:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content > *, \n details.collapse.collapse-slide[open] > .collapse-content > *": { "@layer components": { transform: "none", opacity: 1 } }, ".collapse.collapse-horizontal": { "@layer components": { display: "block" } }, ".collapse.collapse-horizontal > .collapse-content": { "@layer components": { gridTemplateRows: "1fr", gridTemplateColumns: "0fr", whiteSpace: "normal" } }, ".collapse.collapse-horizontal:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content, \n details.collapse.collapse-horizontal[open] > .collapse-content": { "@layer components": { gridTemplateColumns: "1fr" } }, ".collapse.collapse-horizontal-fixed": { "@layer components": { width: "auto" } }, ".collapse.collapse-horizontal-fixed > .collapse-content": { "@layer components": { inlineSize: "0" } }, ".collapse.collapse-horizontal-fixed:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content, \n details.collapse.collapse-horizontal-fixed[open] > .collapse-content": { "@layer components": { inlineSize: "min(100%, var(--collapse-width, 20rem))" } }, "details.collapse.collapse-maxheight": { "@layer components": { maxHeight: "none" } }, ".collapse.collapse-maxheight:not(details):not(.collapse-closed):is(.show, .collapse-open)": { "@layer components": { maxHeight: "var(--collapse-max-height, 100rem)" } }, ".collapse.collapse-maxheight:not(details).collapse-closed": { "@layer components": { maxHeight: "0" } }, "details.collapse::details-content": { "@layer components": { "@supports (interpolate-size: allow-keywords)": { "@media (prefers-reduced-motion: no-preference)": { interpolateSize: "allow-keywords", blockSize: "0", overflow: "clip", transition: "block-size 300ms ease-in-out, content-visibility 300ms allow-discrete" } } } }, "details.collapse[open]::details-content": { "@layer components": { "@supports (interpolate-size: allow-keywords)": { "@media (prefers-reduced-motion: no-preference)": { blockSize: "auto" } } } }, ".collapse:not(details) > .collapse-content": { "@layer components": { "@supports (interpolate-size: allow-keywords)": { "@media (prefers-reduced-motion: no-preference)": { interpolateSize: "allow-keywords", blockSize: "0", transition: "block-size 300ms ease-in-out, display 300ms allow-discrete" } } } }, ".collapse:not(details):not(.collapse-closed):is(.show, .collapse-open) > .collapse-content:not([hidden])": [{ "@layer components": { "@supports (interpolate-size: allow-keywords)": { "@media (prefers-reduced-motion: no-preference)": { blockSize: "auto" } } } }, { "@layer components": { "@supports (interpolate-size: allow-keywords)": { "@media (prefers-reduced-motion: no-preference)": { "@starting-style": { blockSize: "0" } } } } }], ".collapse, \n .collapse-content, \n .collapse-icon, \n .collapse-fade, \n .collapse-horizontal, \n .collapse-horizontal-fixed, \n .collapse-toggle-icon, \n .collapse-maxheight, \n .collapse-animating, \n .collapse-slide .collapse-content > *": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".popover": { "@layer components": { "--popover-color-intensity": "30%" } }, ".popover[popover]": { "@layer components": { position: "absolute", inset: "auto", zIndex: 1050, minWidth: "12rem", maxWidth: "20rem", padding: "1rem", margin: "0.5rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", opacity: 0, transform: "scale(0.95)", positionArea: "bottom", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", transition: `opacity 150ms ease-out,
|
|
252
251
|
transform 150ms ease-out,
|
|
253
252
|
overlay 150ms ease-out allow-discrete,
|
|
254
253
|
display 150ms ease-out allow-discrete` } }, ".popover[popover]:popover-open": [{ "@layer components": { opacity: 1, visibility: "visible", transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".popover[popover]:popover-open::backdrop": [{ "@layer components": { "@starting-style": { backgroundColor: "transparent" } } }, { "@layer components": { backgroundColor: "color-mix(in srgb, var(--color-scrim) 10%, transparent)" } }], ".popover-modal[popover]:popover-open::backdrop": [{ "@layer components": { "@starting-style": { backgroundColor: "transparent" } } }, { "@layer components": { backgroundColor: "color-mix(in srgb, var(--color-scrim) 30%, transparent)" } }], ".popover-top[popover]": { "@layer components": { positionArea: "top" } }, ".popover-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".popover-left[popover]": { "@layer components": { positionArea: "left" } }, ".popover-right[popover]": { "@layer components": { positionArea: "right" } }, ".popover-start[popover]": { "@layer components": { positionArea: "bottom span-right" } }, ".popover-end[popover]": { "@layer components": { positionArea: "bottom span-left" } }, ".popover-top.popover-start[popover]": { "@layer components": { positionArea: "top span-right" } }, ".popover-top.popover-end[popover]": { "@layer components": { positionArea: "top span-left" } }, ".popover-bottom.popover-start[popover]": { "@layer components": { positionArea: "bottom span-right" } }, ".popover-bottom.popover-end[popover]": { "@layer components": { positionArea: "bottom span-left" } }, ".popover-left.popover-start[popover]": { "@layer components": { positionArea: "left span-bottom" } }, ".popover-left.popover-end[popover]": { "@layer components": { positionArea: "left span-top" } }, ".popover-right.popover-start[popover]": { "@layer components": { positionArea: "right span-bottom" } }, ".popover-right.popover-end[popover]": { "@layer components": { positionArea: "right span-top" } }, ".popover[popover]::backdrop": { "@layer components": { backgroundColor: "transparent", transition: `background-color 150ms ease-out,
|
|
255
254
|
overlay 150ms ease-out allow-discrete,
|
|
256
255
|
display 150ms ease-out allow-discrete` } }, ".popover-modal[popover]::backdrop": { "@layer components": { backgroundColor: "transparent", transition: `background-color 150ms ease-out,
|
|
257
256
|
overlay 150ms ease-out allow-discrete,
|
|
258
|
-
display 150ms ease-out allow-discrete` } }, ".popover-arrow": { "@layer components": { position: "absolute", width: "0.75rem", height: "0.75rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", transform: "rotate(45deg)" } }, ".popover-top[popover] > .popover-arrow, \n .popover[popover]:not(.popover-bottom):not(.popover-left):not(.popover-right) > .popover-arrow": { "@layer components": { bottom: "-0.375rem", left: "50%", transform: "translateX(-50%) rotate(45deg)", borderTop: "none", borderLeft: "none" } }, ".popover-bottom[popover] > .popover-arrow": { "@layer components": { top: "-0.375rem", left: "50%", transform: "translateX(-50%) rotate(45deg)", borderBottom: "none", borderRight: "none" } }, ".popover-left[popover] > .popover-arrow": { "@layer components": { right: "-0.375rem", top: "50%", transform: "translateY(-50%) rotate(45deg)", borderLeft: "none", borderBottom: "none" } }, ".popover-right[popover] > .popover-arrow": { "@layer components": { left: "-0.375rem", top: "50%", transform: "translateY(-50%) rotate(45deg)", borderRight: "none", borderTop: "none" } }, ".popover-no-arrow > .popover-arrow": { "@layer components": { display: "none" } }, ".popover-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", paddingBottom: "0.75rem", marginBottom: "0.75rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".popover-title": { "@layer components": { flex: 1, minWidth: "0", margin: "0", fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.5rem", color: "var(--color-on-surface)" } }, ".popover-close": { "@layer components": { display: "inline-flex", flexShrink: 0, alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginInlineStart: "auto", padding: "0", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".popover[popover] > .popover-close": { "@layer components": { position: "absolute", top: "1rem", right: "1rem", marginInlineStart: "0" } }, ".popover[popover]:has(> .popover-close) > .popover-header": { "@layer components": { paddingRight: "1.75rem" } }, ".popover-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".popover-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".popover-body": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".popover-footer": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "0.5rem", paddingTop: "0.75rem", marginTop: "0.75rem", borderTop: "1px solid var(--color-outline-variant)" } }, ".popover-sm[popover]": { "@layer components": { minWidth: "8rem", maxWidth: "14rem", padding: "0.75rem" } }, ".popover-lg[popover]": { "@layer components": { minWidth: "16rem", maxWidth: "28rem", padding: "1.25rem" } }, ".popover-full[popover]": { "@layer components": { minWidth: "0", maxWidth: "none", width: "max-content" } }, ".popover-dark[popover]": { "@layer components": { backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)", borderColor: "transparent" } }, ".popover-dark[popover] > .popover-arrow": { "@layer components": { backgroundColor: "var(--color-on-surface)", borderColor: "transparent" } }, ".popover-dark[popover] .popover-title": { "@layer components": { color: "var(--color-surface)" } }, ".popover-dark[popover] .popover-body": { "@layer components": { color: "var(--color-surface)", opacity: 0.9 } }, ".popover-primary[popover]": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-primary)" } }, ".popover-primary[popover] > .popover-arrow": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-primary)" } }, ".popover-primary[popover] .popover-body, \n .popover-primary[popover] .popover-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".popover-secondary[popover]": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-secondary)" } }, ".popover-secondary[popover] > .popover-arrow": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-secondary)" } }, ".popover-secondary[popover] .popover-body, \n .popover-secondary[popover] .popover-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".popover-tertiary[popover]": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-tertiary)" } }, ".popover-tertiary[popover] > .popover-arrow": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-tertiary)" } }, ".popover-tertiary[popover] .popover-body, \n .popover-tertiary[popover] .popover-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".popover-surface-highest[popover]": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)", borderColor: "var(--color-outline-variant)" } }, ".popover-surface-highest[popover] > .popover-arrow": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)", borderColor: "var(--color-outline-variant)" } }, ".popover-menu[popover]": { "@layer components": { padding: "0.5rem" } }, ".popover-menu-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".popover-menu-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".popover-menu-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".popover-menu-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".popover-menu-divider": { "@layer components": { height: "1px", margin: "0.5rem 0", backgroundColor: "var(--color-outline-variant)" } }, ".popover-confirm[popover]": { "@layer components": { textAlign: "center" } }, ".popover-confirm[popover] .popover-footer": { "@layer components": { justifyContent: "center" } }, ".popover-close, \n .popover-menu-item, \n .popover[popover], \n .popover[popover]::backdrop": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".timeline": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0" } }, ".timeline::before": { "@layer components": { content: "''", position: "absolute", top: "0", left: "1.25rem", width: "2px", height: "100%", backgroundColor: "var(--color-outline-variant)" } }, ".timeline-item": { "@layer components": { position: "relative", display: "flex", gap: "1rem", paddingBottom: "1.5rem" } }, ".timeline-item:last-child": { "@layer components": { paddingBottom: "0" } }, ".timeline-marker": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", backgroundColor: "var(--color-surface)", border: "2px solid var(--color-outline-variant)", borderRadius: "var(--radius-full)", flexShrink: 0, zIndex: 1 } }, ".timeline-marker-icon": { "@layer components": { fontSize: "1rem", color: "var(--color-on-surface-variant)" } }, ".timeline-marker-dot": { "@layer components": { width: "0.75rem", height: "0.75rem", backgroundColor: "var(--color-outline-variant)", borderRadius: "var(--radius-full)" } }, ".timeline-content": { "@layer components": { flex: 1, paddingTop: "0.375rem", minWidth: "0" } }, ".timeline-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".timeline-time": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginBottom: "0.5rem" } }, ".timeline-description": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".timeline-card": { "@layer components": { padding: "1rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-md)", marginTop: "0.5rem" } }, ".timeline-item-primary .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", backgroundColor: "var(--color-primary-container)" } }, ".timeline-item-primary .timeline-marker-icon, \n .timeline-item-primary .timeline-marker-dot": { "@layer components": { color: "var(--color-on-primary-container)", backgroundColor: "var(--color-primary)" } }, ".timeline-item-secondary .timeline-marker": { "@layer components": { borderColor: "var(--color-secondary)", backgroundColor: "var(--color-secondary-container)" } }, ".timeline-item-success .timeline-marker": { "@layer components": { borderColor: "var(--color-success)", backgroundColor: "var(--color-success-container)" } }, ".timeline-item-success .timeline-marker-dot": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".timeline-item-warning .timeline-marker": { "@layer components": { borderColor: "var(--color-warning)", backgroundColor: "var(--color-warning-container)" } }, ".timeline-item-warning .timeline-marker-dot": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".timeline-item-error .timeline-marker": { "@layer components": { borderColor: "var(--color-error)", backgroundColor: "var(--color-error-container)" } }, ".timeline-item-error .timeline-marker-dot": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".timeline-item.completed .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", backgroundColor: "var(--color-primary)" } }, ".timeline-item.completed .timeline-marker-icon": { "@layer components": { color: "var(--color-primary-content)" } }, ".timeline-item.active .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", backgroundColor: "var(--color-primary)", boxShadow: "0 0 0 4px var(--color-primary-container)" } }, ".timeline-item.active .timeline-marker-icon, \n .timeline-item.active .timeline-marker-dot": { "@layer components": { color: "var(--color-primary-content)", backgroundColor: "var(--color-primary-content)" } }, ".timeline-sm::before": { "@layer components": { left: "0.75rem" } }, ".timeline-sm .timeline-marker": { "@layer components": { width: "1.5rem", height: "1.5rem" } }, ".timeline-sm .timeline-marker-icon": { "@layer components": { fontSize: "0.75rem" } }, ".timeline-sm .timeline-marker-dot": { "@layer components": { width: "0.5rem", height: "0.5rem" } }, ".timeline-lg::before": { "@layer components": { left: "1.5rem" } }, ".timeline-lg .timeline-marker": { "@layer components": { width: "3rem", height: "3rem" } }, ".timeline-lg .timeline-marker-icon": { "@layer components": { fontSize: "1.25rem" } }, ".timeline-alternate": { "@layer components": { paddingLeft: "0" } }, ".timeline-alternate::before": [{ "@layer components": { left: "50%", transform: "translateX(-50%)" } }, { "@layer components": { "@media (max-width: 640px)": { left: "1.25rem", transform: "none" } } }], ".timeline-alternate .timeline-item": { "@layer components": { width: "50%", paddingRight: "2rem" } }, ".timeline-alternate .timeline-item:nth-child(even)": { "@layer components": { marginLeft: "50%", paddingRight: "0", paddingLeft: "2rem", flexDirection: "row-reverse" } }, ".timeline-alternate .timeline-item:nth-child(even) .timeline-content": [{ "@layer components": { textAlign: "right" } }, { "@layer components": { "@media (max-width: 640px)": { textAlign: "left" } } }], ".timeline-alternate .timeline-marker": { "@layer components": { position: "absolute", left: "100%", transform: "translateX(-50%)" } }, ".timeline-alternate .timeline-item:nth-child(even) .timeline-marker": { "@layer components": { left: "0", transform: "translateX(-50%)" } }, ".timeline-right": { "@layer components": { alignItems: "flex-end" } }, ".timeline-right::before": { "@layer components": { left: "auto", right: "1.25rem" } }, ".timeline-right .timeline-item": { "@layer components": { flexDirection: "row-reverse" } }, ".timeline-right .timeline-content": { "@layer components": { textAlign: "right" } }, ".timeline-horizontal": { "@layer components": { flexDirection: "row", overflowX: "auto", paddingBottom: "1rem" } }, ".timeline-horizontal::before": { "@layer components": { top: "1.25rem", left: "0", width: "100%", height: "2px" } }, ".timeline-horizontal .timeline-item": { "@layer components": { flexDirection: "column", paddingBottom: "0", paddingRight: "2rem", minWidth: "10rem" } }, ".timeline-horizontal .timeline-item:last-child": { "@layer components": { paddingRight: "0" } }, ".timeline-horizontal .timeline-content": { "@layer components": { paddingTop: "1rem", textAlign: "center" } }, ".timeline-collapsible .timeline-item": { "@layer components": { cursor: "pointer" } }, ".timeline-collapsible .timeline-description": { "@layer components": { display: "none" } }, ".timeline-collapsible .timeline-item.expanded .timeline-description": { "@layer components": { display: "block" } }, ".timeline-item.loading .timeline-marker": [{ "@layer components": { animation: "timeline-pulse 1.5s ease-in-out infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes timeline-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 } }, ".timeline-progress::before": { "@layer components": { background: `linear-gradient(
|
|
257
|
+
display 150ms ease-out allow-discrete` } }, ".popover-arrow": { "@layer components": { position: "absolute", width: "0.75rem", height: "0.75rem", backgroundColor: "var(--color-surface)", border: "1px solid var(--color-outline-variant)", transform: "rotate(45deg)" } }, ".popover-top[popover] > .popover-arrow, \n .popover[popover]:not(.popover-bottom):not(.popover-left):not(.popover-right) > .popover-arrow": { "@layer components": { bottom: "-0.375rem", left: "50%", transform: "translateX(-50%) rotate(45deg)", borderTop: "none", borderLeft: "none" } }, ".popover-bottom[popover] > .popover-arrow": { "@layer components": { top: "-0.375rem", left: "50%", transform: "translateX(-50%) rotate(45deg)", borderBottom: "none", borderRight: "none" } }, ".popover-left[popover] > .popover-arrow": { "@layer components": { right: "-0.375rem", top: "50%", transform: "translateY(-50%) rotate(45deg)", borderLeft: "none", borderBottom: "none" } }, ".popover-right[popover] > .popover-arrow": { "@layer components": { left: "-0.375rem", top: "50%", transform: "translateY(-50%) rotate(45deg)", borderRight: "none", borderTop: "none" } }, ".popover-no-arrow > .popover-arrow": { "@layer components": { display: "none" } }, ".popover-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", paddingBottom: "0.75rem", marginBottom: "0.75rem", borderBottom: "1px solid var(--color-outline-variant)" } }, ".popover-title": { "@layer components": { flex: 1, minWidth: "0", margin: "0", fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.5rem", color: "var(--color-on-surface)" } }, ".popover-close": { "@layer components": { display: "inline-flex", flexShrink: 0, alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginInlineStart: "auto", padding: "0", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out" } }, ".popover[popover] > .popover-close": { "@layer components": { position: "absolute", top: "1rem", right: "1rem", marginInlineStart: "0" } }, ".popover[popover]:has(> .popover-close) > .popover-header": { "@layer components": { paddingRight: "1.75rem" } }, ".popover-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".popover-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".popover-body": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".popover-footer": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "0.5rem", paddingTop: "0.75rem", marginTop: "0.75rem", borderTop: "1px solid var(--color-outline-variant)" } }, ".popover-sm[popover]": { "@layer components": { minWidth: "8rem", maxWidth: "14rem", padding: "0.75rem" } }, ".popover-lg[popover]": { "@layer components": { minWidth: "16rem", maxWidth: "28rem", padding: "1.25rem" } }, ".popover-full[popover]": { "@layer components": { minWidth: "0", maxWidth: "none", width: "max-content" } }, ".popover-dark[popover]": { "@layer components": { backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)", borderColor: "transparent" } }, ".popover-dark[popover] > .popover-arrow": { "@layer components": { backgroundColor: "var(--color-on-surface)", borderColor: "transparent" } }, ".popover-dark[popover] .popover-title": { "@layer components": { color: "var(--color-surface)" } }, ".popover-dark[popover] .popover-body": { "@layer components": { color: "var(--color-surface)", opacity: 0.9 } }, ".popover-primary[popover]": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-primary)" } }, ".popover-primary[popover] > .popover-arrow": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-primary)" } }, ".popover-primary[popover] .popover-body, \n .popover-primary[popover] .popover-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".popover-secondary[popover]": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-secondary)" } }, ".popover-secondary[popover] > .popover-arrow": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-secondary)" } }, ".popover-secondary[popover] .popover-body, \n .popover-secondary[popover] .popover-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".popover-tertiary[popover]": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-tertiary)" } }, ".popover-tertiary[popover] > .popover-arrow": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface))", borderColor: "var(--color-tertiary)" } }, ".popover-tertiary[popover] .popover-body, \n .popover-tertiary[popover] .popover-title": { "@layer components": { color: "var(--color-on-surface)" } }, ".popover-surface-highest[popover]": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)", borderColor: "var(--color-outline-variant)" } }, ".popover-surface-highest[popover] > .popover-arrow": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)", borderColor: "var(--color-outline-variant)" } }, ".popover-menu[popover]": { "@layer components": { padding: "0.5rem" } }, ".popover-menu-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", width: "100%", padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left", transition: "background-color 150ms ease-in-out" } }, ".popover-menu-item:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".popover-menu-item:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".popover-menu-item-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.25rem", height: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".popover-menu-divider": { "@layer components": { height: "1px", margin: "0.5rem 0", backgroundColor: "var(--color-outline-variant)" } }, ".popover-confirm[popover]": { "@layer components": { textAlign: "center" } }, ".popover-confirm[popover] .popover-footer": { "@layer components": { justifyContent: "center" } }, ".popover-close, \n .popover-menu-item, \n .popover[popover], \n .popover[popover]::backdrop": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".timeline": { "@layer components": { position: "relative", display: "flex", flexDirection: "column", gap: "0" } }, ".timeline::before": { "@layer components": { content: "''", position: "absolute", top: "0", insetInlineStart: "1.25rem", width: "2px", height: "100%", backgroundColor: "var(--color-outline-variant)" } }, ".timeline-item": { "@layer components": { position: "relative", display: "flex", gap: "1rem", paddingBottom: "1.5rem" } }, ".timeline-item:last-child": { "@layer components": { paddingBottom: "0" } }, ".timeline-marker": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", backgroundColor: "var(--color-surface)", border: "2px solid var(--color-outline-variant)", borderRadius: "var(--radius-full)", flexShrink: 0, zIndex: 1 } }, ".timeline-marker-icon": { "@layer components": { fontSize: "1rem", color: "var(--color-on-surface-variant)" } }, ".timeline-marker-dot": { "@layer components": { width: "0.75rem", height: "0.75rem", backgroundColor: "var(--color-outline-variant)", borderRadius: "var(--radius-full)" } }, ".timeline-content": { "@layer components": { overflowWrap: "anywhere", flex: 1, paddingTop: "0.375rem", minWidth: "0" } }, ".timeline-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, color: "var(--color-on-surface)", marginBottom: "0.25rem" } }, ".timeline-time": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", marginBottom: "0.5rem" } }, ".timeline-description": { "@layer components": { fontSize: "0.875rem", color: "var(--color-on-surface-variant)", lineHeight: 1.5 } }, ".timeline-card": { "@layer components": { padding: "1rem", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-md)", marginTop: "0.5rem" } }, ".timeline-item-primary .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", backgroundColor: "var(--color-primary-container)" } }, ".timeline-item-primary .timeline-marker-icon, \n .timeline-item-primary .timeline-marker-dot": { "@layer components": { color: "var(--color-on-primary-container)", backgroundColor: "var(--color-primary)" } }, ".timeline-item-secondary .timeline-marker": { "@layer components": { borderColor: "var(--color-secondary)", backgroundColor: "var(--color-secondary-container)" } }, ".timeline-item-success .timeline-marker": { "@layer components": { borderColor: "var(--color-success)", backgroundColor: "var(--color-success-container)" } }, ".timeline-item-success .timeline-marker-dot": { "@layer components": { backgroundColor: "var(--color-success)" } }, ".timeline-item-warning .timeline-marker": { "@layer components": { borderColor: "var(--color-warning)", backgroundColor: "var(--color-warning-container)" } }, ".timeline-item-warning .timeline-marker-dot": { "@layer components": { backgroundColor: "var(--color-warning)" } }, ".timeline-item-error .timeline-marker": { "@layer components": { borderColor: "var(--color-error)", backgroundColor: "var(--color-error-container)" } }, ".timeline-item-error .timeline-marker-dot": { "@layer components": { backgroundColor: "var(--color-error)" } }, ".timeline-item.completed .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", backgroundColor: "var(--color-primary)" } }, ".timeline-item.completed .timeline-marker-icon": { "@layer components": { color: "var(--color-primary-content)" } }, ".timeline-item.active .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", backgroundColor: "var(--color-primary)", boxShadow: "0 0 0 4px var(--color-primary-container)" } }, ".timeline-item.active .timeline-marker-icon, \n .timeline-item.active .timeline-marker-dot": { "@layer components": { color: "var(--color-primary-content)", backgroundColor: "var(--color-primary-content)" } }, ".timeline-marker-secondary": { "@layer components": { borderColor: "var(--color-secondary)", background: "var(--color-secondary-container)" } }, ".timeline-marker-tertiary": { "@layer components": { borderColor: "var(--color-tertiary)", background: "var(--color-tertiary-container)" } }, ".timeline-marker-success": { "@layer components": { borderColor: "var(--color-success)", background: "var(--color-success-container)" } }, ".timeline-marker-error": { "@layer components": { borderColor: "var(--color-error)", background: "var(--color-error-container)" } }, ".timeline-item-active > .timeline-marker": { "@layer components": { borderColor: "var(--color-primary)", background: "var(--color-primary-container)" } }, ".timeline-item-pending > .timeline-marker": { "@layer components": { borderStyle: "dashed" } }, ".timeline-compact > .timeline-item": { "@layer components": { paddingBlockEnd: "0.75rem", gap: "0.5rem" } }, ".timeline-content-card": { "@layer components": { padding: "1rem", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-md)", background: "var(--color-surface-container)", boxShadow: "var(--shadow-sm)" } }, ".timeline-sm::before": { "@layer components": { insetInlineStart: "0.75rem" } }, ".timeline-sm .timeline-marker": { "@layer components": { width: "1.5rem", height: "1.5rem" } }, ".timeline-sm .timeline-marker-icon": { "@layer components": { fontSize: "0.75rem" } }, ".timeline-sm .timeline-marker-dot": { "@layer components": { width: "0.5rem", height: "0.5rem" } }, ".timeline-lg::before": { "@layer components": { insetInlineStart: "1.5rem" } }, ".timeline-lg .timeline-marker": { "@layer components": { width: "3rem", height: "3rem" } }, ".timeline-lg .timeline-marker-icon": { "@layer components": { fontSize: "1.25rem" } }, ".timeline-alternate": { "@layer components": { paddingInlineStart: "0" } }, ".timeline-alternate::before": { "@layer components": { insetInlineStart: "50%", transform: "translateX(-50%)" } }, ".timeline-alternate .timeline-item": { "@layer components": { width: "50%", paddingInlineEnd: "2rem" } }, ".timeline-alternate .timeline-item:nth-child(even)": { "@layer components": { marginInlineStart: "50%", paddingInlineEnd: "0", paddingInlineStart: "2rem", flexDirection: "row-reverse" } }, ".timeline-alternate .timeline-item:nth-child(even) .timeline-content": [{ "@layer components": { textAlign: "end" } }, { "@layer components": { "@media (max-width: 640px)": { textAlign: "start" } } }], ".timeline-alternate .timeline-marker": { "@layer components": { position: "absolute", insetInlineStart: "100%", transform: "translateX(-50%)" } }, ".timeline-alternate .timeline-item:nth-child(even) .timeline-marker": { "@layer components": { insetInlineStart: "0", transform: "translateX(-50%)" } }, ".timeline-right": { "@layer components": { alignItems: "flex-end" } }, ".timeline-right::before": { "@layer components": { insetInlineStart: "auto", insetInlineEnd: "1.25rem" } }, ".timeline-right .timeline-item": { "@layer components": { flexDirection: "row-reverse" } }, ".timeline-right .timeline-content": { "@layer components": { textAlign: "end" } }, ".timeline-horizontal": { "@layer components": { flexDirection: "row", overflowX: "auto", paddingBottom: "1rem" } }, ".timeline-horizontal::before": { "@layer components": { top: "1.25rem", insetInlineStart: "0", width: "100%", height: "2px" } }, ".timeline-horizontal .timeline-item": { "@layer components": { flexDirection: "column", paddingBottom: "0", paddingInlineEnd: "2rem", minWidth: "10rem" } }, ".timeline-horizontal .timeline-item:last-child": { "@layer components": { paddingInlineEnd: "0" } }, ".timeline-horizontal .timeline-content": { "@layer components": { paddingTop: "1rem", textAlign: "center" } }, ".timeline-alternate:dir(rtl)::before, \n .timeline-alternate:dir(rtl) .timeline-marker": { "@layer components": { transform: "translateX(50%)" } }, ".timeline-collapsible .timeline-item": { "@layer components": { cursor: "pointer" } }, ".timeline-collapsible .timeline-description": { "@layer components": { display: "none" } }, ".timeline-collapsible .timeline-item.expanded .timeline-description": { "@layer components": { display: "block" } }, ".timeline-item.loading .timeline-marker": [{ "@layer components": { animation: "timeline-pulse 1.5s ease-in-out infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes timeline-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 } }, ".timeline-progress::before": { "@layer components": { background: `linear-gradient(
|
|
259
258
|
to bottom,
|
|
260
259
|
var(--color-primary) var(--timeline-progress, 0%),
|
|
261
260
|
var(--color-outline-variant) var(--timeline-progress, 0%)
|
|
262
|
-
)` } }, ".timeline-alternate .timeline-item, \n .timeline-alternate .timeline-item:nth-child(even)": { "@layer components": { "@media (max-width: 640px)": { width: "100%", marginLeft: "0", paddingLeft: "0", paddingRight: "0", flexDirection: "row" } } }, ".timeline-alternate .timeline-marker, \n .timeline-alternate .timeline-item:nth-child(even) .timeline-marker": { "@layer components": { "@media (max-width: 640px)": { position: "relative", left: "0", transform: "none" } } }, ".code-block": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", overflow: "hidden" } }, ".code-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1rem", backgroundColor: "var(--color-surface-container-highest)", borderBottom: "1px solid var(--color-outline)", fontSize: "0.75rem" } }, ".code-title": { "@layer components": { color: "var(--color-on-surface)", fontWeight: 600, marginRight: "auto" } }, ".code-language": { "@layer components": { color: "var(--color-on-surface-variant)", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 500 } }, ".code-language:first-child": { "@layer components": { marginRight: "auto" } }, ".code-block .copy-button": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.375rem", padding: "0.25rem 0.5rem", border: "none", borderRadius: "var(--radius-xs)", background: "transparent", color: "var(--color-on-surface-variant)", fontSize: "0.75rem", cursor: "pointer", transition: "background-color 0.15s ease, color 0.15s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".code-block .copy-button:hover": { "@layer components": { backgroundColor: "var(--color-outline-variant)", color: "var(--color-on-surface)" } }, ".code-block .copy-icon": { "@layer components": { flexShrink: 0 } }, ".code-content": { "@layer components": { backgroundColor: "var(--color-surface-container)", overflowX: "auto" } }, ".code-content pre": { "@layer components": { margin: "0", padding: "1rem", background: "transparent", borderRadius: "0", overflowX: "auto" } }, ".code-content code": { "@layer components": { background: "transparent", padding: "0", fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.875rem", lineHeight: 1.6 } }, ".code-block-compact .code-header": { "@layer components": { padding: "0.375rem 0.75rem" } }, ".code-block-compact .code-content pre": { "@layer components": { padding: "0.75rem" } }, ".code-block-borderless": { "@layer components": { border: "none" } }, ".code-block-borderless .code-header": { "@layer components": { borderBottom: "none" } }, ".markdown-body": { "@layer components": { fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', fontSize: "16px", lineHeight: 1.5, wordWrap: "break-word", color: "var(--color-on-surface)" } }, ".markdown-body h1, \n .markdown-body h2, \n .markdown-body h3, \n .markdown-body h4, \n .markdown-body h5, \n .markdown-body h6": { "@layer components": { marginBlockStart: "1.5rem", marginBlockEnd: "1rem", fontWeight: 600, lineHeight: 1.25 } }, ".markdown-body h1": { "@layer components": { fontSize: "2em", paddingBlockEnd: "0.3em", borderBottom: "1px solid var(--color-outline-variant)" } }, ".markdown-body h2": { "@layer components": { fontSize: "1.5em", paddingBlockEnd: "0.3em", borderBottom: "1px solid var(--color-outline-variant)" } }, ".markdown-body h3": { "@layer components": { fontSize: "1.25em" } }, ".markdown-body h4": { "@layer components": { fontSize: "1em" } }, ".markdown-body h5": { "@layer components": { fontSize: "0.875em" } }, ".markdown-body h6": { "@layer components": { fontSize: "0.85em", color: "var(--color-on-surface-variant)" } }, ".markdown-body p": { "@layer components": { marginBlockEnd: "1rem" } }, ".markdown-body a": { "@layer components": { color: "var(--color-primary)", textDecoration: "none" } }, ".markdown-body a:hover": { "@layer components": { textDecoration: "underline" } }, ".markdown-body a:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".markdown-body strong, \n .markdown-body b": { "@layer components": { fontWeight: 600 } }, ".markdown-body em, \n .markdown-body i": { "@layer components": { fontStyle: "italic" } }, ".markdown-body ul, \n .markdown-body ol": { "@layer components": { marginBlockEnd: "1rem", paddingInlineStart: "2em" } }, ".markdown-body ul": { "@layer components": { listStyleType: "disc" } }, ".markdown-body ol": { "@layer components": { listStyleType: "decimal" } }, ".markdown-body li": { "@layer components": { marginBlockEnd: "0.25rem" } }, ".markdown-body li > ul, \n .markdown-body li > ol": { "@layer components": { marginBlockStart: "0.25rem", marginBlockEnd: "0" } }, ".markdown-body ul ul": { "@layer components": { listStyleType: "circle" } }, ".markdown-body ul ul ul": { "@layer components": { listStyleType: "square" } }, ".markdown-body ol ol": { "@layer components": { listStyleType: "lower-alpha" } }, ".markdown-body ol ol ol": { "@layer components": { listStyleType: "lower-roman" } }, ".markdown-body small": { "@layer components": { fontSize: "0.875em" } }, ".markdown-body sub, \n .markdown-body sup": { "@layer components": { fontSize: "0.75em", lineHeight: 0, position: "relative", verticalAlign: "baseline" } }, ".markdown-body sub": { "@layer components": { bottom: "-0.25em" } }, ".markdown-body sup": { "@layer components": { top: "-0.5em" } }, ".markdown-body del, \n .markdown-body s": { "@layer components": { textDecoration: "line-through", color: "var(--color-on-surface-variant)" } }, ".markdown-body code": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em", paddingBlock: "0.2em", paddingInline: "0.4em", backgroundColor: "var(--color-surface-container-high)", borderRadius: "var(--radius-xs)" } }, ".markdown-body pre": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em", lineHeight: 1.45, padding: "1rem", marginBlockEnd: "1rem", overflowX: "auto", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-xs)" } }, ".markdown-body pre > code": { "@layer components": { fontSize: "inherit", padding: "0", backgroundColor: "transparent", borderRadius: "0" } }, ".markdown-body kbd": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em", paddingBlock: "0.2em", paddingInline: "0.4em", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-xs)", boxShadow: "inset 0 -1px 0 var(--color-outline-variant)" } }, ".markdown-body samp": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em" } }, ".markdown-body table": { "@layer components": { width: "100%", borderCollapse: "collapse", marginBlockEnd: "1rem", overflowX: "auto", display: "block" } }, ".markdown-body th": { "@layer components": { fontWeight: 600, backgroundColor: "var(--color-surface-container)" } }, ".markdown-body th, \n .markdown-body td": { "@layer components": { paddingBlock: "0.5rem", paddingInline: "0.75rem", border: "1px solid var(--color-outline-variant)", textAlign: "start" } }, ".markdown-body tr:nth-child(2n)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".markdown-body blockquote": { "@layer components": { marginBlockEnd: "1rem", marginInline: "0", paddingInlineStart: "1em", borderInlineStart: "0.25em solid var(--color-outline-variant)", color: "var(--color-on-surface-variant)" } }, ".markdown-body blockquote > :first-child": { "@layer components": { marginBlockStart: "0" } }, ".markdown-body blockquote > :last-child": { "@layer components": { marginBlockEnd: "0" } }, ".markdown-body blockquote blockquote": { "@layer components": { marginBlockStart: "1rem" } }, ".markdown-body img": { "@layer components": { maxWidth: "100%", height: "auto", boxSizing: "border-box" } }, ".markdown-body figure": { "@layer components": { marginBlockEnd: "1rem", marginInline: "0" } }, ".markdown-body figcaption": { "@layer components": { fontSize: "0.875em", color: "var(--color-on-surface-variant)", marginBlockStart: "0.5rem", textAlign: "center" } }, '.markdown-body img[align="left"]': { "@layer components": { marginInlineEnd: "1rem", marginBlockEnd: "0.5rem" } }, '.markdown-body img[align="right"]': { "@layer components": { marginInlineStart: "1rem", marginBlockEnd: "0.5rem" } }, ".markdown-body .task-list-item": { "@layer components": { listStyleType: "none" } }, '.markdown-body .task-list-item input[type="checkbox"]': { "@layer components": { marginInlineStart: "-1.5em", marginInlineEnd: "0.5em", verticalAlign: "middle" } }, ".markdown-body hr": { "@layer components": { height: "0.25em", marginBlock: "1.5rem", padding: "0", backgroundColor: "var(--color-outline-variant)", border: "0" } }, ".markdown-body dl": { "@layer components": { marginBlockEnd: "1rem" } }, ".markdown-body dt": { "@layer components": { fontWeight: 600, marginBlockStart: "1rem" } }, ".markdown-body dt:first-child": { "@layer components": { marginBlockStart: "0" } }, ".markdown-body dd": { "@layer components": { marginBlockStart: "0.25rem", marginInlineStart: "0", paddingInlineStart: "1rem" } }, ".markdown-body abbr[title]": { "@layer components": { textDecoration: "underline dotted", cursor: "help", borderBottom: "none" } }, ".markdown-body mark": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)", paddingBlock: "0.1em", paddingInline: "0.2em", borderRadius: "var(--radius-xs)" } }, ".markdown-body details": { "@layer components": { marginBlockEnd: "1rem" } }, ".markdown-body summary": { "@layer components": { fontWeight: 600, cursor: "pointer" } }, ".markdown-body details[open] > summary": { "@layer components": { marginBlockEnd: "0.5rem" } }, ".markdown-body > :first-child": { "@layer components": { marginBlockStart: "0" } }, ".markdown-body > :last-child": { "@layer components": { marginBlockEnd: "0" } }, ".markdown-body *": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".art-moon": { "@layer css-art": { "--art-moon-size": "8rem", "--art-moon-color": "oklch(92% 0.06 90)", "--art-moon-shadow": "oklch(85% 0.04 90)", "--art-moon-glow": "oklch(95% 0.03 90 / 0.4)", position: "relative", width: "var(--art-moon-size)", height: "var(--art-moon-size)", aspectRatio: "1", borderRadius: "50%", background: `radial-gradient(
|
|
261
|
+
)` } }, ".timeline-alternate::before, \n .timeline-alternate:dir(rtl)::before": { "@layer components": { "@media (max-width: 640px)": { insetInlineStart: "1.25rem", transform: "none" } } }, ".timeline-alternate .timeline-item, \n .timeline-alternate .timeline-item:nth-child(even)": { "@layer components": { "@media (max-width: 640px)": { width: "100%", marginInlineStart: "0", paddingInlineStart: "0", paddingInlineEnd: "0", flexDirection: "row" } } }, ".timeline-alternate .timeline-marker, \n .timeline-alternate:dir(rtl) .timeline-marker, \n .timeline-alternate .timeline-item:nth-child(even) .timeline-marker": { "@layer components": { "@media (max-width: 640px)": { position: "relative", insetInlineStart: "0", transform: "none" } } }, ".code-block": { "@layer components": { border: "1px solid var(--color-outline)", borderRadius: "var(--radius-sm)", overflow: "hidden" } }, ".code-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1rem", backgroundColor: "var(--color-surface-container-highest)", borderBottom: "1px solid var(--color-outline)", fontSize: "0.75rem" } }, ".code-title": { "@layer components": { color: "var(--color-on-surface)", fontWeight: 600, marginRight: "auto" } }, ".code-language": { "@layer components": { color: "var(--color-on-surface-variant)", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 500 } }, ".code-language:first-child": { "@layer components": { marginRight: "auto" } }, ".code-block .copy-button": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.375rem", padding: "0.25rem 0.5rem", border: "none", borderRadius: "var(--radius-xs)", background: "transparent", color: "var(--color-on-surface-variant)", fontSize: "0.75rem", cursor: "pointer", transition: "background-color 0.15s ease, color 0.15s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".code-block .copy-button:hover": { "@layer components": { backgroundColor: "var(--color-outline-variant)", color: "var(--color-on-surface)" } }, ".code-block .copy-icon": { "@layer components": { flexShrink: 0 } }, ".code-content": { "@layer components": { backgroundColor: "var(--color-surface-container)", overflowX: "auto" } }, ".code-content pre": { "@layer components": { margin: "0", padding: "1rem", background: "transparent", borderRadius: "0", overflowX: "auto" } }, ".code-content code": { "@layer components": { background: "transparent", padding: "0", fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.875rem", lineHeight: 1.6 } }, ".code-block-compact .code-header": { "@layer components": { padding: "0.375rem 0.75rem" } }, ".code-block-compact .code-content pre": { "@layer components": { padding: "0.75rem" } }, ".code-block-borderless": { "@layer components": { border: "none" } }, ".code-block-borderless .code-header": { "@layer components": { borderBottom: "none" } }, ".markdown-body": { "@layer components": { fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', fontSize: "16px", lineHeight: 1.5, wordWrap: "break-word", color: "var(--color-on-surface)" } }, ".markdown-body h1, \n .markdown-body h2, \n .markdown-body h3, \n .markdown-body h4, \n .markdown-body h5, \n .markdown-body h6": { "@layer components": { marginBlockStart: "1.5rem", marginBlockEnd: "1rem", fontWeight: 600, lineHeight: 1.25 } }, ".markdown-body h1": { "@layer components": { fontSize: "2em", paddingBlockEnd: "0.3em", borderBottom: "1px solid var(--color-outline-variant)" } }, ".markdown-body h2": { "@layer components": { fontSize: "1.5em", paddingBlockEnd: "0.3em", borderBottom: "1px solid var(--color-outline-variant)" } }, ".markdown-body h3": { "@layer components": { fontSize: "1.25em" } }, ".markdown-body h4": { "@layer components": { fontSize: "1em" } }, ".markdown-body h5": { "@layer components": { fontSize: "0.875em" } }, ".markdown-body h6": { "@layer components": { fontSize: "0.85em", color: "var(--color-on-surface-variant)" } }, ".markdown-body p": { "@layer components": { marginBlockEnd: "1rem" } }, ".markdown-body a": { "@layer components": { color: "var(--color-primary)", textDecoration: "none" } }, ".markdown-body a:hover": { "@layer components": { textDecoration: "underline" } }, ".markdown-body a:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".markdown-body strong, \n .markdown-body b": { "@layer components": { fontWeight: 600 } }, ".markdown-body em, \n .markdown-body i": { "@layer components": { fontStyle: "italic" } }, ".markdown-body ul, \n .markdown-body ol": { "@layer components": { marginBlockEnd: "1rem", paddingInlineStart: "2em" } }, ".markdown-body ul": { "@layer components": { listStyleType: "disc" } }, ".markdown-body ol": { "@layer components": { listStyleType: "decimal" } }, ".markdown-body li": { "@layer components": { marginBlockEnd: "0.25rem" } }, ".markdown-body li > ul, \n .markdown-body li > ol": { "@layer components": { marginBlockStart: "0.25rem", marginBlockEnd: "0" } }, ".markdown-body ul ul": { "@layer components": { listStyleType: "circle" } }, ".markdown-body ul ul ul": { "@layer components": { listStyleType: "square" } }, ".markdown-body ol ol": { "@layer components": { listStyleType: "lower-alpha" } }, ".markdown-body ol ol ol": { "@layer components": { listStyleType: "lower-roman" } }, ".markdown-body small": { "@layer components": { fontSize: "0.875em" } }, ".markdown-body sub, \n .markdown-body sup": { "@layer components": { fontSize: "0.75em", lineHeight: 0, position: "relative", verticalAlign: "baseline" } }, ".markdown-body sub": { "@layer components": { bottom: "-0.25em" } }, ".markdown-body sup": { "@layer components": { top: "-0.5em" } }, ".markdown-body del, \n .markdown-body s": { "@layer components": { textDecoration: "line-through", color: "var(--color-on-surface-variant)" } }, ".markdown-body code": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em", paddingBlock: "0.2em", paddingInline: "0.4em", backgroundColor: "var(--color-surface-container-high)", borderRadius: "var(--radius-xs)" } }, ".markdown-body pre": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em", lineHeight: 1.45, padding: "1rem", marginBlockEnd: "1rem", overflowX: "auto", backgroundColor: "var(--color-surface-container)", borderRadius: "var(--radius-xs)" } }, ".markdown-body pre > code": { "@layer components": { fontSize: "inherit", padding: "0", backgroundColor: "transparent", borderRadius: "0" } }, ".markdown-body kbd": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em", paddingBlock: "0.2em", paddingInline: "0.4em", backgroundColor: "var(--color-surface-container)", border: "1px solid var(--color-outline-variant)", borderRadius: "var(--radius-xs)", boxShadow: "inset 0 -1px 0 var(--color-outline-variant)" } }, ".markdown-body samp": { "@layer components": { fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", fontSize: "0.85em" } }, ".markdown-body table": { "@layer components": { width: "100%", borderCollapse: "collapse", marginBlockEnd: "1rem", overflowX: "auto", display: "block" } }, ".markdown-body th": { "@layer components": { fontWeight: 600, backgroundColor: "var(--color-surface-container)" } }, ".markdown-body th, \n .markdown-body td": { "@layer components": { paddingBlock: "0.5rem", paddingInline: "0.75rem", border: "1px solid var(--color-outline-variant)", textAlign: "start" } }, ".markdown-body tr:nth-child(2n)": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".markdown-body blockquote": { "@layer components": { marginBlockEnd: "1rem", marginInline: "0", paddingInlineStart: "1em", borderInlineStart: "0.25em solid var(--color-outline-variant)", color: "var(--color-on-surface-variant)" } }, ".markdown-body blockquote > :first-child": { "@layer components": { marginBlockStart: "0" } }, ".markdown-body blockquote > :last-child": { "@layer components": { marginBlockEnd: "0" } }, ".markdown-body blockquote blockquote": { "@layer components": { marginBlockStart: "1rem" } }, ".markdown-body img": { "@layer components": { maxWidth: "100%", height: "auto", boxSizing: "border-box" } }, ".markdown-body figure": { "@layer components": { marginBlockEnd: "1rem", marginInline: "0" } }, ".markdown-body figcaption": { "@layer components": { fontSize: "0.875em", color: "var(--color-on-surface-variant)", marginBlockStart: "0.5rem", textAlign: "center" } }, '.markdown-body img[align="left"]': { "@layer components": { marginInlineEnd: "1rem", marginBlockEnd: "0.5rem" } }, '.markdown-body img[align="right"]': { "@layer components": { marginInlineStart: "1rem", marginBlockEnd: "0.5rem" } }, ".markdown-body .task-list-item": { "@layer components": { listStyleType: "none" } }, '.markdown-body .task-list-item input[type="checkbox"]': { "@layer components": { marginInlineStart: "-1.5em", marginInlineEnd: "0.5em", verticalAlign: "middle" } }, ".markdown-body hr": { "@layer components": { height: "0.25em", marginBlock: "1.5rem", padding: "0", backgroundColor: "var(--color-outline-variant)", border: "0" } }, ".markdown-body dl": { "@layer components": { marginBlockEnd: "1rem" } }, ".markdown-body dt": { "@layer components": { fontWeight: 600, marginBlockStart: "1rem" } }, ".markdown-body dt:first-child": { "@layer components": { marginBlockStart: "0" } }, ".markdown-body dd": { "@layer components": { marginBlockStart: "0.25rem", marginInlineStart: "0", paddingInlineStart: "1rem" } }, ".markdown-body abbr[title]": { "@layer components": { textDecoration: "underline dotted", cursor: "help", borderBottom: "none" } }, ".markdown-body mark": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)", paddingBlock: "0.1em", paddingInline: "0.2em", borderRadius: "var(--radius-xs)" } }, ".markdown-body details": { "@layer components": { marginBlockEnd: "1rem" } }, ".markdown-body summary": { "@layer components": { fontWeight: 600, cursor: "pointer" } }, ".markdown-body details[open] > summary": { "@layer components": { marginBlockEnd: "0.5rem" } }, ".markdown-body > :first-child": { "@layer components": { marginBlockStart: "0" } }, ".markdown-body > :last-child": { "@layer components": { marginBlockEnd: "0" } }, ".markdown-body *": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".art-moon": { "@layer css-art": { "--art-moon-size": "8rem", "--art-moon-color": "oklch(92% 0.06 90)", "--art-moon-shadow": "oklch(85% 0.04 90)", "--art-moon-glow": "oklch(95% 0.03 90 / 0.4)", position: "relative", width: "var(--art-moon-size)", height: "var(--art-moon-size)", aspectRatio: "1", borderRadius: "50%", background: `radial-gradient(
|
|
263
262
|
circle at 35% 35%,
|
|
264
263
|
var(--art-moon-color) 0%,
|
|
265
264
|
var(--art-moon-shadow) 100%
|