/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-border-style: solid; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-font-weight: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-leading: initial; --tw-tracking: initial; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-outline-style: solid; --tw-content: ""; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-divide-y-reverse: 0; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-space-x-reverse: 0; } } } @layer theme { :root, :host { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-500: oklch(63.7% .237 25.331); --color-orange-500: oklch(70.5% .213 47.604); --color-green-500: oklch(72.3% .219 149.579); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-purple-500: oklch(62.7% .265 303.9); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-900: oklch(21% .034 264.665); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-sm: calc(var(--radius) * .5); --radius-md: calc(var(--radius) * .75); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --ease-out: cubic-bezier(0, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-foreground: var(--foreground); --color-surface: var(--surface); --color-surface-secondary: var(--surface-secondary); --color-surface-secondary-foreground: var(--surface-secondary-foreground); --color-surface-tertiary: var(--surface-tertiary); --color-muted: var(--muted); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-border: var(--border); --color-separator: var(--separator); --color-focus: var(--focus); --color-default: var(--default); --color-default-foreground: var(--default-foreground); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); --shadow-surface: var(--surface-shadow); --shadow-overlay: var(--overlay-shadow); --color-field-border: var(--field-border, var(--border)); --border-width-field: var(--field-border-width, var(--border-width)); --color-default-hover: var(--default-hover); --color-field-focus: var(--field-focus); --color-field-border-hover: var(--field-border-hover); --color-field-border-focus: var(--field-border-focus); --color-accent-soft: var(--accent-soft); --color-accent-soft-foreground: var(--accent-soft-foreground); --color-separator-secondary: var(--separator-secondary); --color-separator-tertiary: var(--separator-tertiary); --color-border-secondary: var(--border-secondary); --ease-smooth: ease; --ease-out-quad: cubic-bezier(.25, .46, .45, .94); --ease-out-quart: cubic-bezier(.165, .84, .44, 1); --ease-out-fluid: cubic-bezier(.32, .72, 0, 1); --ease-linear: linear; } @layer theme { @layer base { :root, :host { --white: oklch(100% 0 0); --black: oklch(0% 0 0); --snow: oklch(99.11% 0 0); --eclipse: oklch(21.03% .0059 285.89); --spacing: .25rem; --border-width: 1px; --field-border-width: 0px; --disabled-opacity: .5; --ring-offset-width: 2px; --cursor-interactive: pointer; --cursor-disabled: not-allowed; --radius: .5rem; --field-radius: calc(var(--radius) * 1.5); --accent: oklch(62.04% .195 253.83); --accent-foreground: var(--snow); --success: oklch(73.29% .1935 150.81); --success-foreground: var(--eclipse); --field-border: transparent; --skeleton-animation: shimmer; --tooltip-delay: 1.5s; --tooltip-close-delay: .5s; } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { color-scheme: light; --background: oklch(97.02% 0 0); --foreground: var(--eclipse); --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: oklch(95.24% .0013 286.37); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(93.73% .0013 286.37); --surface-tertiary-foreground: var(--foreground); --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: oklch(55.17% .0138 285.94); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(94% .001 286.375); --default-foreground: var(--eclipse); --field-background: var(--white); --field-foreground: oklch(21.03% .0059 285.89); --field-placeholder: var(--muted); --warning: oklch(78.19% .1585 72.33); --warning-foreground: var(--eclipse); --danger: oklch(65.32% .2328 25.74); --danger-foreground: var(--snow); --segment: var(--white); --segment-foreground: var(--eclipse); --border: oklch(90% .004 286.32); --separator: oklch(92% .004 286.32); --focus: var(--accent); --link: var(--foreground); --backdrop: #00000080; --surface-hover: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --background-secondary: var(--background); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --background-tertiary: var(--background); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --background-inverse: var(--foreground); --default-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --field-hover: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --field-hover: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --field-focus: var(--field-background, var(--default)); --field-border-hover: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --field-border-focus: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --default-soft: var(--default); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --default-soft: color-mix(in oklab, var(--default) 50%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --default-soft-foreground: var(--default-foreground); --default-soft-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-soft: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-soft-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-soft: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-soft-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-soft: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-soft-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-soft: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-soft: color-mix(in oklab, var(--success) 15%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-soft-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --separator-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --separator-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --border-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --border-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); } } :root, .light, .default, [data-theme="light"], [data-theme="default"], :host(.light), :host(.default), :host([data-theme="light"]), :host([data-theme="default"]) { --surface-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f; --overlay-shadow: 0 2px 8px 0 #0000000f, 0 -6px 12px 0 #00000008, 0 14px 28px 0 #00000014; --field-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f; } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { color-scheme: dark; --background: oklch(12% .005 285.823); --foreground: var(--snow); --surface: oklch(21.03% .0059 285.89); --surface-foreground: var(--foreground); --surface-secondary: oklch(25.7% .0037 286.14); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(27.21% .0024 247.91); --surface-tertiary-foreground: var(--foreground); --overlay: oklch(21.03% .0059 285.89); --overlay-foreground: var(--foreground); --muted: oklch(70.5% .015 286.067); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(27.4% .006 286.033); --default-foreground: var(--snow); --field-background: oklch(21.03% .0059 285.89); --field-foreground: var(--foreground); --field-placeholder: var(--muted); --warning: oklch(82.03% .1388 76.34); --warning-foreground: var(--eclipse); --danger: oklch(59.4% .1967 24.63); --danger-foreground: var(--snow); --segment: oklch(39.64% .01 285.93); --segment-foreground: var(--foreground); --border: oklch(28% .006 286.033); --separator: oklch(25% .006 286.033); --focus: var(--accent); --link: var(--foreground); --backdrop: #0009; --surface-shadow: 0 0 0 0 transparent inset; --overlay-shadow: 0 0 1px 0 #ffffff4d inset; --field-shadow: 0 0 0 0 transparent inset; --surface-hover: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --background-secondary: var(--background); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --background-tertiary: var(--background); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --background-inverse: var(--foreground); --default-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --field-hover: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --field-hover: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --field-focus: var(--field-background, var(--default)); --field-border-hover: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --field-border-focus: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --default-soft: var(--default); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --default-soft: color-mix(in oklab, var(--default) 50%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --default-soft-foreground: var(--default-foreground); --default-soft-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-soft: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-soft-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-soft: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-soft-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-soft: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-soft-hover: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-soft: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-soft: color-mix(in oklab, var(--success) 12%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-soft-hover: var(--success); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --separator-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --separator-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --border-secondary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); } } .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --border-tertiary: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .dark, [data-theme="dark"], :host(.dark), :host([data-theme="dark"]) { --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --accent-soft-foreground: var(--accent); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --danger-soft-foreground: var(--danger); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --warning-soft-foreground: var(--warning); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); } } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --success-soft-foreground: var(--success); } @supports (color: color-mix(in lab, red, red)) { [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } } } } @layer components; :root { --chart-1: oklch(from var(--accent) calc(l - .24) c h); --chart-2: oklch(from var(--accent) calc(l - .12) c h); --chart-3: var(--accent); --chart-4: oklch(from var(--accent) calc(l + .12) c h); --chart-5: oklch(from var(--accent) calc(l + .24) c h); } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } .sidebar__main, [class*="__"] { border-color: var(--border); } body { background-color: var(--background); color: var(--foreground); } } @layer components { .close-button { isolation: isolate; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); transform-origin: center; border-radius: calc(var(--radius) * 1.5); padding: calc(var(--spacing) * 1); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), color .15s var(--ease-out), background-color .1s var(--ease-out), box-shadow .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; } .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .close-button:focus-visible:not([data-focused]), .close-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .close-button:disabled, .close-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .close-button[data-pending="true"] { pointer-events: none; } .close-button svg { pointer-events: none; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); margin-inline: calc(var(--spacing) * -.5); margin-block: calc(var(--spacing) * .5); flex-shrink: 0; align-self: center; } .close-button--default { background-color: var(--default); color: var(--muted); } @media (hover: hover) { .close-button--default:hover, .close-button--default[data-hovered="true"] { background-color: var(--default-hover); } } .close-button--default:active, .close-button--default[data-pressed="true"] { transform: scale(.93); } .description { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); } .error-message { height: auto; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); overflow-wrap: break-word; color: var(--danger); transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth); } .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .field-error { height: calc(var(--spacing) * 0); padding-inline: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); overflow-wrap: break-word; color: var(--danger); opacity: 0; } .field-error[data-visible] { opacity: 1; height: auto; } .field-error { transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth); } .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox > .field-error, .checkbox > [data-slot="field-error"], .switch > .field-error, .switch > [data-slot="field-error"], .radio > .field-error, .radio > [data-slot="field-error"] { margin: calc(var(--spacing) * 0); height: auto; min-height: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); color: var(--muted); opacity: 1; transition: none; } .label { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } :is(.label--required, [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"]) > .label, [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label):after { content: var(--tw-content); content: var(--tw-content); color: var(--danger); --tw-content: "*"; content: var(--tw-content); margin-inline-start: calc(var(--spacing) * .5); } .label--disabled, [data-disabled="true"] .label { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .label--invalid, [data-invalid="true"] .label, [aria-invalid="true"] .label { color: var(--danger); } .accordion { contain: layout style; width: 100%; } .accordion__body { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .accordion__body-inner { padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 4); color: var(--muted); } .accordion__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; margin-inline-start: auto; transition-duration: .25s; } .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .accordion__indicator[data-expanded="true"] { rotate: -180deg; } .accordion__item { --tw-border-style: none; border-style: none; position: relative; } .accordion__item:after { content: ""; inset-inline-start: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); border-radius: calc(var(--radius) * .25); background-color: var(--separator); width: 100%; height: 1px; position: absolute; } .accordion__item:last-child:after { content: none; } .accordion__item[data-hide-separator="true"]:after { display: none; } .accordion__trigger { cursor: var(--cursor-interactive); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 4); text-align: start; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); -webkit-tap-highlight-color: transparent; transition: opacity .15s var(--ease-out), box-shadow .15s var(--ease-out); flex: 1; justify-content: space-between; align-items: center; display: flex; } .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .accordion__trigger:hover:not([aria-expanded="true"]) { background-color: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { .accordion__trigger:hover:not([aria-expanded="true"]) { background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%); } } } .accordion__trigger:focus-visible:not([data-focused]), .accordion__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .accordion__trigger:disabled, .accordion__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .accordion__panel { opacity: 0; height: var(--disclosure-panel-height); transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out); overflow: clip; } .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .accordion__panel[data-expanded="true"] { will-change: height, opacity; opacity: 1; } .accordion--surface { background-color: var(--surface); border-radius: min(32px, var(--radius-3xl)); } @media (hover: hover) { .accordion--surface .accordion__trigger:hover:not([aria-expanded="true"]) { background-color: var(--default); } } .accordion--surface .accordion__item:after { background-color: var(--surface-foreground); } @supports (color: color-mix(in lab, red, red)) { .accordion--surface .accordion__item:after { background-color: color-mix(in oklab, var(--surface-foreground) 6%, transparent); } } .accordion--surface .accordion__item:after { width: 94%; inset-inline-start: 3%; } .accordion--surface .accordion__item:first-child [data-slot="accordion-trigger"] { border-start-start-radius: min(32px, var(--radius-3xl)); border-start-end-radius: min(32px, var(--radius-3xl)); } .accordion--surface .accordion__item:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"])) [data-slot="accordion-trigger"] { border-end-end-radius: min(32px, var(--radius-3xl)); border-end-start-radius: min(32px, var(--radius-3xl)); } .breadcrumbs { align-items: center; gap: calc(var(--spacing) * 1.5); display: flex; } .breadcrumbs .breadcrumbs__link { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); opacity: 1; text-decoration-line: none; position: relative; } .breadcrumbs .breadcrumbs__link:hover, .breadcrumbs .breadcrumbs__link[data-hovered="true"] { text-decoration-line: underline; } .breadcrumbs .breadcrumbs__link[data-current="true"] { color: var(--link); opacity: 1; } .breadcrumbs .breadcrumbs__item { justify-content: center; align-items: center; gap: calc(var(--spacing) * 1); flex-shrink: 0; display: flex; } .breadcrumbs .breadcrumbs__separator { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: var(--muted); } .breadcrumbs .breadcrumbs__separator:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .disclosure-group { contain: layout style; width: 100%; } .disclosure { position: relative; } .accordion__heading { display: flex; } .disclosure__trigger { cursor: var(--cursor-interactive); -webkit-tap-highlight-color: transparent; display: inline-block; } .disclosure__trigger:focus-visible:not([data-focused]), .disclosure__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .disclosure__trigger:disabled, .disclosure__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .disclosure__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: inherit; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; margin-inline-start: auto; transition-duration: .25s; } .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .disclosure__indicator[data-expanded="true"] { rotate: -180deg; } .disclosure__content { opacity: 0; height: var(--disclosure-panel-height); transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out); overflow: clip; } .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .disclosure__content[data-expanded="true"] { will-change: height, opacity; opacity: 1; } .disclosure__body { padding: calc(var(--spacing) * 2); } .link { border-radius: calc(var(--radius) * 1.5); --tw-font-weight: var(--font-weight-medium); width: fit-content; height: fit-content; font-weight: var(--font-weight-medium); color: var(--link); text-decoration-line: none; -webkit-text-decoration-color: var(--separator-tertiary); -webkit-text-decoration-color: var(--separator-tertiary); text-decoration-color: var(--separator-tertiary); text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; transition: color .1s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .1s var(--ease-out); align-items: center; text-decoration-thickness: 1.5px; display: inline-flex; position: relative; } .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .link { cursor: var(--cursor-interactive); } @media (hover: hover) { .link:hover, .link[data-hovered="true"] { text-decoration-line: underline; -webkit-text-decoration-color: var(--muted); -webkit-text-decoration-color: var(--muted); text-decoration-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .link:hover, .link[data-hovered="true"] { -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent); } } :is(.link:hover, .link[data-hovered="true"]) .link__icon { opacity: 1; } } .link:active, .link[data-pressed="true"] { text-decoration-line: underline; -webkit-text-decoration-color: var(--muted); -webkit-text-decoration-color: var(--muted); text-decoration-color: var(--muted); } :is(.link:active, .link[data-pressed="true"]) .link__icon { opacity: 1; } .link:focus-visible:not([data-focused]), .link[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } :is(.link:focus-visible:not([data-focused]), .link[data-focus-visible="true"]) .link__icon { opacity: 1; } .link[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .link .link__icon { pointer-events: none; color: currentColor; opacity: .6; width: .75em; height: .75em; transition: opacity .15s var(--ease-out); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .link .link__icon svg { transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .link .link__icon[data-default-icon="true"] { padding-bottom: calc(var(--spacing) * 1.5); margin-inline-start: calc(var(--spacing) * 1); } .link.button { gap: calc(var(--spacing) * 0); text-decoration-line: none; } .pagination { justify-content: space-between; align-items: center; gap: calc(var(--spacing) * 4); flex-direction: column; width: 100%; display: flex; } @media (min-width: 40rem) { .pagination { flex-direction: row; } } .pagination__summary { align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); align-self: flex-start; display: flex; } @media (min-width: 40rem) { .pagination__summary { align-self: center; } } .pagination__content { align-items: center; gap: calc(var(--spacing) * 1); align-self: flex-start; display: flex; } @media (min-width: 40rem) { .pagination__content { align-self: center; } } .pagination__item { display: inline-flex; } .pagination__link { isolation: isolate; width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); transform-origin: center; border-radius: calc(var(--radius) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; justify-content: center; align-items: center; display: inline-flex; position: relative; } @media (min-width: 48rem) { .pagination__link { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } .pagination__link { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .pagination__link { --pagination-link-bg: transparent; --pagination-link-bg-hover: var(--default-hover); --pagination-link-bg-pressed: var(--default-hover); --pagination-link-fg: var(--default-foreground); background-color: var(--pagination-link-bg); color: var(--pagination-link-fg); } .pagination__link:focus-visible, .pagination__link[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .pagination__link:disabled, .pagination__link[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .pagination__link:hover, .pagination__link[data-hovered="true"] { background-color: var(--pagination-link-bg-hover); } } .pagination__link:active, .pagination__link[data-pressed="true"] { background-color: var(--pagination-link-bg-pressed); transform: scale(.97); } .pagination__link[data-active="true"] { --pagination-link-bg: var(--default); --pagination-link-bg-hover: var(--default-hover); --pagination-link-bg-pressed: var(--default-hover); } .pagination__ellipsis { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; display: inline-flex; } @media (min-width: 48rem) { .pagination__ellipsis { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } .pagination__link--nav { gap: calc(var(--spacing) * 1.5); width: auto; padding-inline: calc(var(--spacing) * 2.5); } :is(.pagination__link--nav [data-slot="pagination-previous-icon"], .pagination__link--nav [data-slot="pagination-next-icon"]):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .pagination--sm .pagination__link { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (min-width: 48rem) { .pagination--sm .pagination__link { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } } .pagination--sm .pagination__link:active, .pagination--sm .pagination__link[data-pressed="true"] { transform: scale(.98); } .pagination--sm .pagination__link--nav { width: auto; padding-inline: calc(var(--spacing) * 2); } .pagination--sm .pagination__ellipsis { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (min-width: 48rem) { .pagination--sm .pagination__ellipsis { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } } .pagination--sm .pagination__summary { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .pagination--lg .pagination__link { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .pagination--lg .pagination__link { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } } .pagination--lg .pagination__link:active, .pagination--lg .pagination__link[data-pressed="true"] { transform: scale(.96); } .pagination--lg .pagination__link--nav { width: auto; padding-inline: calc(var(--spacing) * 3); } .pagination--lg .pagination__ellipsis { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .pagination--lg .pagination__ellipsis { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } } .pagination--lg .pagination__summary { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .tabs { gap: calc(var(--spacing) * 2); display: flex; } .tabs[data-orientation="horizontal"] { flex-direction: column; } .tabs[data-orientation="vertical"] { flex-direction: row; } .tabs__list-container { background-color: var(--default); border-radius: calc(var(--radius) * 2.5); position: relative; } .tabs__list-container > .tabs__list-container__scroller[data-orientation="vertical"] { height: 100%; } .tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next { z-index: 2; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); cursor: var(--cursor-interactive); border-style: var(--tw-border-style); padding: calc(var(--spacing) * 0); color: var(--foreground); --tw-outline-style: none; transition: opacity .15s var(--ease-smooth); background-color: #0000; border-width: 0; border-radius: 3.40282e38px; outline-style: none; justify-content: center; align-items: center; display: none; position: absolute; } :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):hover { opacity: .7; } } :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-prev { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); inset-inline-start: calc(var(--spacing) * 1); top: 50%; } .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-next { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); inset-inline-end: calc(var(--spacing) * 1); top: 50%; } :is(.tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-prev, .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-next):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .tabs__list-container:has([data-orientation="vertical"]) > .tabs__list-container__scroll-prev { top: calc(var(--spacing) * 1); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .tabs__list-container:has([data-orientation="vertical"]) > .tabs__list-container__scroll-next { bottom: calc(var(--spacing) * 1); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .tabs__list-container:has( > :is([data-left-scroll="true"], [data-left-right-scroll="true"], [data-top-scroll="true"], [data-top-bottom-scroll="true"])) > .tabs__list-container__scroll-prev, .tabs__list-container:has( > :is([data-right-scroll="true"], [data-left-right-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"])) > .tabs__list-container__scroll-next { display: inline-flex; } .tabs__list { padding: calc(var(--spacing) * 1); display: inline-flex; } .tabs__list[data-orientation="horizontal"] { flex-direction: row; width: max-content; min-width: 100%; } .tabs__list[data-orientation="vertical"] { gap: calc(var(--spacing) * 1); flex-direction: column; } .tabs__list[data-orientation="vertical"] .tabs__tab { min-width: calc(var(--spacing) * 20); } .tabs__tab { height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 3); width: 100%; padding-inline: calc(var(--spacing) * 4); text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; z-index: 1; cursor: var(--cursor-interactive); transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .15s var(--ease-smooth); outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs__tab[data-selected="true"] { color: var(--segment-foreground); } .tabs__tab[data-selected="true"] .tabs__separator, .tabs__tab[data-selected="true"] + .tabs__tab .tabs__separator { opacity: 0; } .tabs__tab:disabled, .tabs__tab[data-disabled="true"], .tabs__tab[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .tabs__tab:not([data-selected="true"]):not([data-disabled="true"]):hover, .tabs__tab[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) { opacity: .7; } } .tabs__tab:focus-visible:not([data-focused]), .tabs__tab[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .tabs--align-start > :is(.tabs__list-container, .tabs__list) .tabs__tab { text-align: start; justify-content: flex-start; } .tabs--align-end > :is(.tabs__list-container, .tabs__list) .tabs__tab { text-align: end; justify-content: flex-end; } .tabs__separator { pointer-events: none; border-radius: calc(var(--radius) * .5); background-color: var(--muted); position: absolute; } @supports (color: color-mix(in lab, red, red)) { .tabs__separator { background-color: color-mix(in oklab, var(--muted) 25%, transparent); } } .tabs__separator { transition: opacity .15s var(--ease-smooth); } .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs__list[data-orientation="horizontal"] .tabs__separator { inset-inline-start: calc(var(--spacing) * 0); width: 1px; height: 50%; top: 25%; } .tabs__list[data-orientation="vertical"] .tabs__separator { inset-inline-start: 5%; top: calc(var(--spacing) * 0); width: 90%; height: 1px; } .tabs__panel { width: 100%; padding: calc(var(--spacing) * 2); --tw-outline-style: none; outline-style: none; } .tabs__panel[data-exiting="true"] { inset-inline-start: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); width: 100%; position: absolute; } .tabs__panel[data-orientation="horizontal"] { margin-top: calc(var(--spacing) * 4); } .tabs__panel[data-orientation="vertical"] { margin-inline-start: calc(var(--spacing) * 4); } .tabs__indicator { inset-inline-start: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); border-radius: calc(var(--radius) * 3); background-color: var(--segment); --tw-shadow: var(--surface-shadow); width: 100%; height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: -1; transition-property: translate, width, height; transition-duration: .25s; transition-timing-function: var(--ease-out-fluid); position: absolute; } .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs--secondary > .tabs__list-container { background-color: #0000; border-radius: 0; } .tabs--secondary > .tabs__list-container .tabs__list { padding: calc(var(--spacing) * 0); } .tabs--secondary > .tabs__list-container .tabs__separator { display: none; } .tabs--secondary > .tabs__list-container .tabs__tab { border-radius: 0; } .tabs--secondary > .tabs__list-container .tabs__tab[data-selected="true"] { color: var(--foreground); } .tabs--secondary > .tabs__list-container .tabs__indicator { background-color: var(--accent); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: 0; } .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--border); } .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator { top: auto; bottom: calc(var(--spacing) * 0); height: calc(var(--spacing) * .5); } .tabs--secondary[data-orientation="vertical"] > .tabs__list-container { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--border); } .tabs--secondary[data-orientation="vertical"] > .tabs__list-container .tabs__indicator { inset-inline-start: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); height: 100%; width: calc(var(--spacing) * .5); } .button { isolation: isolate; height: calc(var(--spacing) * 10); transform-origin: center; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: calc(var(--radius) * 3); width: fit-content; padding-inline: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } @media (min-width: 48rem) { .button { height: calc(var(--spacing) * 9); } } .button { transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .button { cursor: var(--cursor-interactive); --button-bg: transparent; --button-bg-hover: var(--button-bg); --button-bg-pressed: var(--button-bg-hover); --button-fg: currentColor; background-color: var(--button-bg); color: var(--button-fg); } .button:focus-visible:not([data-focused]), .button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .button:disabled, .button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .button[data-pending="true"] { pointer-events: none; } .button:active, .button[data-pressed="true"] { will-change: transform; background-color: var(--button-bg-pressed); transform: scale(.97); } @media (hover: hover) { .button:hover, .button[data-hovered="true"] { background-color: var(--button-bg-hover); } } .button svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { pointer-events: none; margin-inline: calc(var(--spacing) * -.5); margin-block: calc(var(--spacing) * .5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; align-self: center; } @media (min-width: 40rem) { .button svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { margin-block: calc(var(--spacing) * 1); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .button--sm { height: calc(var(--spacing) * 9); padding-inline: calc(var(--spacing) * 3); } @media (min-width: 48rem) { .button--sm { height: calc(var(--spacing) * 8); } } .button--sm svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .button--sm:active, .button--sm[data-pressed="true"] { transform: scale(.98); } .button--lg { height: calc(var(--spacing) * 11); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .button--lg { height: calc(var(--spacing) * 10); } } .button--lg:active, .button--lg[data-pressed="true"] { transform: scale(.96); } .button--primary { --button-bg: var(--accent); --button-bg-hover: var(--accent-hover); --button-bg-pressed: var(--accent-hover); --button-fg: var(--accent-foreground); } .button--secondary { --button-bg: var(--default); --button-bg-hover: var(--default-hover); --button-bg-pressed: var(--default-hover); --button-fg: var(--accent-soft-foreground); } .button--tertiary { --button-bg: var(--default); --button-bg-hover: var(--default-hover); --button-bg-pressed: var(--default-hover); } .button--ghost, .button--outline { --button-bg: transparent; --button-bg-hover: var(--default); --button-bg-pressed: var(--default); --button-fg: var(--default-foreground); } .button--outline { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); --button-bg-hover: var(--default); } @supports (color: color-mix(in lab, red, red)) { .button--outline { --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent); } } .button--danger { --button-bg: var(--danger); --button-bg-hover: var(--danger-hover); --button-bg-pressed: var(--danger-hover); --button-fg: var(--danger-foreground); } .button--danger-soft { --button-bg: var(--danger-soft); --button-bg-hover: var(--danger-soft-hover); --button-bg-pressed: var(--danger-soft-hover); --button-fg: var(--danger-soft-foreground); } .button--icon-only { width: calc(var(--spacing) * 10); padding: calc(var(--spacing) * 0); } @media (min-width: 48rem) { .button--icon-only { width: calc(var(--spacing) * 9); } } .button--icon-only.button--sm { width: calc(var(--spacing) * 9); } @media (min-width: 48rem) { .button--icon-only.button--sm { width: calc(var(--spacing) * 8); } } .button--icon-only.button--lg { width: calc(var(--spacing) * 11); } @media (min-width: 48rem) { .button--icon-only.button--lg { width: calc(var(--spacing) * 10); } } .button--full-width { width: 100%; } .button-group { justify-content: center; align-items: center; gap: calc(var(--spacing) * 0); height: auto; display: inline-flex; } .button-group--horizontal { flex-direction: row; } .button-group--vertical { flex-direction: column; } .button-group .button { border-radius: 0; } .button-group--horizontal .button:first-child { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .button-group--vertical .button:first-child { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .button-group--vertical .button:last-child { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--vertical .button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .button-group .button:active, .button-group .button[data-pressed="true"] { transform: none; } .button-group .button:focus-visible:not([data-focused]), .button-group .button[data-focus-visible="true"] { z-index: 10; } .button-group__separator { border-radius: calc(var(--radius) * .5); opacity: .15; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; position: absolute; } .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .button-group--horizontal .button-group__separator { inset-inline-start: -1px; width: 1px; height: 50%; top: 25%; } .button-group--vertical .button-group__separator { inset-inline-start: 25%; width: 50%; height: 1px; top: -1px; } .button-group--horizontal .button--outline:first-child { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0; } .button-group--horizontal .button--outline:last-child { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0; } .button-group--horizontal .button--outline:not(:first-child):not(:last-child) { border-inline-style: var(--tw-border-style); border-inline-width: 0; } .button-group--vertical .button--outline:first-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .button-group--vertical .button--outline:last-child { border-top-style: var(--tw-border-style); border-top-width: 0; } .button-group--vertical .button--outline:not(:first-child):not(:last-child) { border-block-style: var(--tw-border-style); border-block-width: 0; } .button-group--full-width { width: 100%; } .toggle-button { isolation: isolate; height: calc(var(--spacing) * 10); transform-origin: center; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: calc(var(--radius) * 3); width: fit-content; padding-inline: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } @media (min-width: 48rem) { .toggle-button { height: calc(var(--spacing) * 9); } } .toggle-button { transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toggle-button { cursor: var(--cursor-interactive); --toggle-button-bg: var(--default); --toggle-button-bg-hover: var(--default-hover); --toggle-button-bg-pressed: var(--default-hover); --toggle-button-fg: currentColor; --toggle-button-bg-selected: var(--accent-soft); --toggle-button-bg-selected-hover: var(--accent-soft-hover); --toggle-button-bg-selected-pressed: var(--accent-soft-hover); --toggle-button-fg-selected: var(--accent-soft-foreground); background-color: var(--toggle-button-bg); color: var(--toggle-button-fg); } .toggle-button:focus-visible:not([data-focused]), .toggle-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .toggle-button:disabled, .toggle-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .toggle-button:hover, .toggle-button[data-hovered="true"] { background-color: var(--toggle-button-bg-hover); } } .toggle-button:active, .toggle-button[data-pressed="true"] { background-color: var(--toggle-button-bg-pressed); transform: scale(.97); } .toggle-button[data-selected="true"] { background-color: var(--toggle-button-bg-selected); color: var(--toggle-button-fg-selected); } @media (hover: hover) { .toggle-button[data-selected="true"]:hover, .toggle-button[data-selected="true"][data-hovered="true"] { background-color: var(--toggle-button-bg-selected-hover); } } .toggle-button[data-selected="true"]:active, .toggle-button[data-selected="true"][data-pressed="true"] { background-color: var(--toggle-button-bg-selected-pressed); } .toggle-button svg { pointer-events: none; margin-inline: calc(var(--spacing) * -.5); margin-block: calc(var(--spacing) * .5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; align-self: center; } @media (min-width: 40rem) { .toggle-button svg { margin-block: calc(var(--spacing) * 1); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .toggle-button--sm { height: calc(var(--spacing) * 9); padding-inline: calc(var(--spacing) * 3); } @media (min-width: 48rem) { .toggle-button--sm { height: calc(var(--spacing) * 8); } } .toggle-button--sm svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toggle-button--sm:active, .toggle-button--sm[data-pressed="true"] { transform: scale(.98); } .toggle-button--lg { height: calc(var(--spacing) * 11); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (min-width: 48rem) { .toggle-button--lg { height: calc(var(--spacing) * 10); } } .toggle-button--lg:active, .toggle-button--lg[data-pressed="true"] { transform: scale(.96); } .toggle-button--default { --toggle-button-bg: var(--default); --toggle-button-bg-hover: var(--default-hover); --toggle-button-bg-pressed: var(--default-hover); } .toggle-button--ghost { --toggle-button-bg: transparent; --toggle-button-bg-hover: var(--default); --toggle-button-bg-pressed: var(--default); --toggle-button-fg: var(--default-foreground); } .toggle-button--icon-only { width: calc(var(--spacing) * 10); padding: calc(var(--spacing) * 0); } @media (min-width: 48rem) { .toggle-button--icon-only { width: calc(var(--spacing) * 9); } } .toggle-button--icon-only.toggle-button--sm { width: calc(var(--spacing) * 9); } @media (min-width: 48rem) { .toggle-button--icon-only.toggle-button--sm { width: calc(var(--spacing) * 8); } } .toggle-button--icon-only.toggle-button--lg { width: calc(var(--spacing) * 11); } @media (min-width: 48rem) { .toggle-button--icon-only.toggle-button--lg { width: calc(var(--spacing) * 10); } } .toggle-button-group { justify-content: center; align-items: center; gap: calc(var(--spacing) * 0); width: fit-content; height: auto; display: inline-flex; } .toggle-button-group--horizontal { flex-direction: row; } .toggle-button-group--vertical { flex-direction: column; } .toggle-button-group--full-width { width: 100%; } .toggle-button-group .toggle-button { border-radius: 0; } .toggle-button-group--horizontal .toggle-button:first-child { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:first-child { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:last-child { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .toggle-button-group .toggle-button:active, .toggle-button-group .toggle-button[data-pressed="true"] { transform: none; } .toggle-button-group .toggle-button:focus-visible:not([data-focused]), .toggle-button-group .toggle-button[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .toggle-button-group--full-width .toggle-button { flex: 1; } .toggle-button-group__separator { border-radius: calc(var(--radius) * .5); opacity: .15; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; position: absolute; } .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toggle-button-group--horizontal .toggle-button-group__separator { inset-inline-start: -1px; width: 1px; height: 50%; top: 25%; } .toggle-button-group--vertical .toggle-button-group__separator { inset-inline-start: 25%; width: 50%; height: 1px; top: -1px; } .toggle-button-group--detached { gap: calc(var(--spacing) * 1); } .toggle-button-group--detached .toggle-button { border-radius: calc(var(--radius) * 3); } .toggle-button-group--detached .toggle-button-group__separator { display: none; } .toolbar { align-items: center; gap: calc(var(--spacing) * 2); grid-auto-flow: column; width: fit-content; display: grid; } .toolbar .separator--vertical { align-self: center; height: 50%; } .toolbar .separator--horizontal { justify-content: center; justify-self: center; width: 50%; } .toolbar--vertical { grid-auto-flow: row; justify-content: flex-start; align-items: flex-start; } .toolbar--vertical .button-group { justify-content: flex-start; } .toolbar--attached { border-radius: calc(var(--radius) * 3); background-color: var(--surface); padding: calc(var(--spacing) * 1); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dropdown { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .dropdown__trigger { --tw-outline-style: none; transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; display: inline-block; } .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .dropdown__trigger { cursor: var(--cursor-interactive); } .dropdown__trigger:focus-visible:not([data-focused]), .dropdown__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .dropdown__trigger:disabled, .dropdown__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .dropdown__trigger[data-pending="true"] { pointer-events: none; } .dropdown__trigger:active, .dropdown__trigger[data-pressed="true"] { transform: scale(.97); } .dropdown__popover { max-width: 48svw; transform-origin: var(--trigger-anchor-point); scroll-padding-block: calc(var(--spacing) * 1); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); overflow-y: auto; } @media (min-width: 48rem) { .dropdown__popover { min-width: calc(var(--spacing) * 55); } } .dropdown__popover { border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--overlay-shadow); } .dropdown__popover:focus-visible:not([data-focused]), .dropdown__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .dropdown__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .dropdown__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .dropdown__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .dropdown__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .dropdown__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .dropdown__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .dropdown__popover[data-exiting="true"], .dropdown__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .dropdown__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .dropdown__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .dropdown__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .dropdown__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .dropdown__popover [data-slot="dropdown-menu"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .dropdown__popover [data-slot="menu-item"] { padding-inline: calc(var(--spacing) * 2.5); } .dropdown__menu { gap: calc(var(--spacing) * .5); width: 100%; padding: calc(var(--spacing) * 1); flex-direction: column; display: flex; position: relative; overflow: clip; } .dropdown__menu [data-slot="separator"] { width: 94%; margin-inline-start: 3%; } .list-box-item { min-height: calc(var(--spacing) * 9); justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * 2); width: 100%; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out); outline-style: none; display: flex; position: relative; } .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item { cursor: var(--cursor-interactive); } .list-box-item [data-slot="label"] { pointer-events: none; -webkit-user-select: none; user-select: none; width: fit-content; } .list-box-item [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; user-select: none; } .list-box-item:has(.list-box-item__indicator) { padding-inline-end: calc(var(--spacing) * 7); } .list-box-item:focus-visible:not([data-focused]), .list-box-item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .list-box-item:active, .list-box-item[data-pressed="true"] { transform: scale(.98); } @media (hover: hover) { .list-box-item:hover, .list-box-item[data-hovered="true"] { background-color: var(--default); } } .list-box-item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .list-box-item__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--default-foreground); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; inset-inline-end: calc(var(--spacing) * 2); flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .25s; display: flex; position: absolute; top: 50%; } .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .3s; transition-duration: .3s; } .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] { transition: stroke-dashoffset .25s linear; } :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .list-box-item--danger .list-box-item__indicator, .list-box-item--danger [data-slot="label"] { color: var(--danger); } .list-box-section { align-items: flex-start; gap: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .list-box { width: 100%; padding: calc(var(--spacing) * 1); position: relative; overflow: clip; } .list-box > * + * { margin-top: calc(var(--spacing) * 1); } .list-box [data-slot="separator"][data-orientation="horizontal"] { width: 94%; margin-inline-start: 3%; } .menu-item { min-height: calc(var(--spacing) * 9); justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * 2); width: 100%; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out); outline-style: none; display: flex; position: relative; } .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item { cursor: var(--cursor-interactive); } .menu-item [data-slot="label"] { pointer-events: none; -webkit-user-select: none; user-select: none; width: fit-content; } .menu-item [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; user-select: none; } .menu-item [data-slot="submenu-indicator"] svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .menu-item:has(.menu-item__indicator) { padding-inline-start: calc(var(--spacing) * 7); } .menu-item[data-has-submenu="true"]:has(.menu-item__indicator) { padding-inline-start: calc(var(--spacing) * 2); padding-inline-end: calc(var(--spacing) * 7); } .menu-item:focus-visible:not([data-focused]), .menu-item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .menu-item:active, .menu-item[data-pressed="true"] { will-change: transform; transform: scale(.98); } @media (hover: hover) { .menu-item:hover, .menu-item[data-hovered="true"] { background-color: var(--default); } } :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"] { transition: stroke-dashoffset .1s linear; } :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--dot"] { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1; } .menu-item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .menu-item__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; inset-inline-start: calc(var(--spacing) * 2); flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .25s; display: flex; position: absolute; top: 50%; } .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item[data-has-submenu="true"] .menu-item__indicator { inset-inline-start: auto; inset-inline-end: calc(var(--spacing) * 2); } .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]) { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .3s; transition-duration: .3s; } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item__indicator [data-slot="menu-item-indicator--dot"] { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]) { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; transition-duration: .25s; } .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item__indicator [data-slot="menu-item-indicator--dot"] { --tw-scale-x: 70%; --tw-scale-y: 70%; --tw-scale-z: 70%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; } .menu-item__indicator--submenu { color: var(--muted); } .menu-item__indicator--submenu svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .menu-item--danger .menu-item__indicator, .menu-item--danger [data-slot="label"] { color: var(--danger); } .menu-section { align-items: flex-start; gap: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .menu { gap: calc(var(--spacing) * 1); width: 100%; padding: calc(var(--spacing) * 1); flex-direction: column; display: flex; position: relative; overflow: clip; } .menu [data-slot="separator"] { width: 94%; margin-inline-start: 3%; } .tag-group { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; position: relative; } .tag-group__list { gap: calc(var(--spacing) * 1.5); flex-wrap: wrap; display: flex; position: relative; } .tag-group [slot="description"], .tag-group [data-slot="description"], .tag-group [slot="errorMessage"], .tag-group [data-slot="error-message"] { padding: calc(var(--spacing) * 1); } .tag { --optical-offset: .031em; align-items: center; gap: calc(var(--spacing) * 1); border-radius: calc(var(--radius) * 1.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out); transform-origin: center; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); display: inline-flex; position: relative; } .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tag { cursor: var(--cursor-interactive); } .tag svg { pointer-events: none; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: currentColor; flex-shrink: 0; align-self: center; } .tag:is([data-disabled="true"], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tag:is(:focus-visible, [data-focus-visible]) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .tag:is([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } @media (hover: hover) { .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent-soft-hover); } } .tag--sm { padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * .5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .tag--lg { border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .tag--default { background-color: var(--default); color: var(--default-foreground); } @media (hover: hover) { .tag--default:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--default-hover); } } .tag--surface { background-color: var(--surface); color: var(--surface-foreground); } @media (hover: hover) { .tag--surface:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--surface-hover); } } .tag__remove-button:after { content: ""; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); position: absolute; top: 50%; left: 50%; } .tag__remove-button { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: inherit; } .tag__remove-button svg { width: inherit; height: inherit; color: currentColor; flex-shrink: 0; align-self: center; } .color-area { width: 100%; max-width: calc(var(--spacing) * 56); border-radius: calc(var(--radius) * 2); -webkit-tap-highlight-color: transparent; aspect-ratio: 1; background: var(--color-area-background); flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px #0000001a; } .color-area[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-area--show-dots:after { content: ""; pointer-events: none; inset: calc(var(--spacing) * 0); border-radius: inherit; background-image: radial-gradient(circle, #fff3 1px, #0000 1px); background-size: 8px 8px; position: absolute; } .color-area__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); will-change: width,height; background-color: var(--color-area-thumb-color); transition: width .15s var(--ease-out), height .15s var(--ease-out); border: 3px solid #fff; box-shadow: 0 0 0 1px #0000001a, inset 0 0 0 1px #0000001a; } .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-area__thumb[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-area__thumb[data-dragging="true"] { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .color-area__thumb[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-picker { display: inline-flex; } .color-picker__trigger { align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * .5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-flex; } .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-picker__trigger [data-slot="label"] { cursor: var(--cursor-interactive); } .color-picker__trigger:focus-visible:not([data-focused]), .color-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-picker__trigger:disabled, .color-picker__trigger[data-disabled="true"], .color-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-picker__popover { min-width: calc(var(--spacing) * 62); transform-origin: var(--trigger-anchor-point); scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; background-color: var(--overlay); padding-inline: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 2); padding-bottom: calc(var(--spacing) * 3); box-shadow: var(--overlay-shadow); border-radius: min(32px, calc(var(--radius) * 2.5)); gap: calc(var(--spacing) * 3); flex-direction: column; display: flex; overflow: hidden auto; } .color-picker__popover:focus-visible:not([data-focused]), .color-picker__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .color-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .color-picker__popover[data-entering="true"][data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .color-picker__popover[data-entering="true"][data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .color-picker__popover[data-entering="true"][data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .color-picker__popover[data-entering="true"][data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .color-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .color-picker__popover[data-exiting="true"], .color-picker__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .color-slider { gap: calc(var(--spacing) * 1); grid-template: "label output" "track track" / 1fr auto; width: 100%; display: grid; } .color-slider:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template: "track" / 1fr; gap: 0; } .color-slider:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-columns: 1fr; grid-template-areas: "label" "track"; } .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-columns: 1fr; grid-template-areas: "output" "track"; } .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) .color-slider__output { justify-self: end; } .color-slider [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .color-slider .color-slider__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .color-slider .color-slider__track { border-radius: calc(var(--radius) * 2); grid-area: track; position: relative; } .color-slider .color-slider__track:before, .color-slider .color-slider__track:after { content: ""; z-index: 0; pointer-events: none; position: absolute; } .color-slider .color-slider__thumb { cursor: grab; border-radius: calc(var(--radius) * 2); -webkit-tap-highlight-color: transparent; border-style: var(--tw-border-style); border-width: 3px; border-color: var(--color-white); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: 1; transition: transform .25s var(--ease-out), box-shadow .15s var(--ease-out); justify-content: center; align-items: center; display: flex; position: absolute; } .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-slider .color-slider__thumb[data-dragging="true"] { cursor: grabbing; } .color-slider .color-slider__thumb[data-focus-visible="true"] { z-index: 10; --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-slider .color-slider__thumb[data-disabled="true"] { cursor: default; background-color: var(--default); } .color-slider:disabled, .color-slider[data-disabled="true"], .color-slider[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.color-slider:disabled, .color-slider[data-disabled="true"], .color-slider[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } .color-slider[data-orientation="horizontal"] { flex-direction: column; } .color-slider[data-orientation="horizontal"] .color-slider__track { height: calc(var(--spacing) * 5); border-radius: 0; justify-self: center; width: calc(100% - 1.25rem); box-shadow: inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__track:before, .color-slider[data-orientation="horizontal"] .color-slider__track:after { top: calc(var(--spacing) * 0); width: .625rem; height: 100%; } .color-slider[data-orientation="horizontal"] .color-slider__track:before { background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; border-start-start-radius: calc(var(--radius) * 2); border-end-start-radius: calc(var(--radius) * 2); inset-inline-start: -.625rem; box-shadow: inset 1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-start-end-radius: calc(var(--radius) * 2); border-end-end-radius: calc(var(--radius) * 2); inset-inline-end: -.625rem; box-shadow: inset -1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); top: 50%; } .color-slider[data-orientation="vertical"] { gap: calc(var(--spacing) * 2); flex-direction: row; grid-template: "output" "track" 1fr "label" / 1fr; place-items: center; height: 100%; } .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-rows: 1fr; grid-template-areas: "track"; gap: 0; } .color-slider[data-orientation="vertical"]:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-rows: 1fr auto; grid-template-areas: "track" "label"; } .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-rows: auto 1fr; grid-template-areas: "output" "track"; } .color-slider[data-orientation="vertical"] .color-slider__output, .color-slider[data-orientation="vertical"] [data-slot="label"] { text-align: center; } .color-slider[data-orientation="vertical"] .color-slider__track { width: calc(var(--spacing) * 5); border-radius: 0; justify-self: center; height: calc(100% - 1.25rem); box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__track:before, .color-slider[data-orientation="vertical"] .color-slider__track:after { width: 100%; height: .625rem; inset-inline-start: calc(var(--spacing) * 0); } .color-slider[data-orientation="vertical"] .color-slider__track:before { background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; border-end-end-radius: 999px; border-end-start-radius: 999px; bottom: -.625rem; box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-start-start-radius: 999px; border-start-end-radius: 999px; top: -.625rem; box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 1px #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); left: 50%; } .color-swatch { box-sizing: border-box; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); background: linear-gradient(var(--color-swatch-current), var(--color-swatch-current)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px #0000001a; } .color-swatch--circle { border-radius: calc(var(--radius) * 2); } .color-swatch--square { border-radius: calc(var(--radius) * .75); } .color-swatch--xs { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .color-swatch--xs.color-swatch--circle { border-radius: calc(var(--radius) * 1); } .color-swatch--sm { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .color-swatch--sm.color-swatch--circle { border-radius: calc(var(--radius) * 1.5); } .color-swatch--lg { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .color-swatch--lg.color-swatch--circle { border-radius: calc(var(--radius) * 3); } .color-swatch--xl { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .color-swatch--xl.color-swatch--circle { border-radius: calc(var(--radius) * 3); } .color-swatch-picker { align-items: center; gap: calc(var(--spacing) * 2); flex-wrap: wrap; display: flex; } .color-swatch-picker__item { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: border-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); border-width: 2px; border-color: #0000; outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-swatch-picker__item:focus-visible, .color-swatch-picker__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .color-swatch-picker__item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-swatch-picker__item[data-selected="true"] { border-color: var(--color-swatch-current); box-shadow: var(--field-shadow); } .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { transform: scale(.77); } .color-swatch-picker__swatch { border-radius: inherit; width: 100%; height: 100%; transition: transform .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); display: block; } .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .color-swatch-picker__swatch:hover { transform: scale(1.1); } } .color-swatch-picker__indicator { pointer-events: none; inset: calc(var(--spacing) * 0); z-index: 10; justify-content: center; align-items: center; display: flex; position: absolute; } .color-swatch-picker__indicator > * { width: 33.3333%; height: 33.3333%; color: var(--color-white); transition: transform .15s var(--ease-out); transform: scale(0) translateZ(0); } .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-swatch-picker__indicator[data-light-color="true"] .color-swatch-picker__indicator > * { color: var(--color-black); } .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__indicator > * { transform: scale(1) translateZ(0); } .color-swatch-picker--stack { flex-direction: column; } .color-swatch-picker--xs .color-swatch-picker__item { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1); border-style: var(--tw-border-style); border-width: 1px; } .color-swatch-picker--sm .color-swatch-picker__item { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(var(--radius) * 1.5); border-style: var(--tw-border-style); border-width: 2px; } .color-swatch-picker--lg .color-swatch-picker__item { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); border-radius: calc(var(--radius) * 3); border-style: var(--tw-border-style); border-width: 3px; } .color-swatch-picker--xl .color-swatch-picker__item { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); border-style: var(--tw-border-style); border-width: 3px; } .color-swatch-picker--square .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); } .color-swatch-picker--square .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item, .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * .75); } .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item, .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * .75); } .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); } .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); } .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } .color-input-group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; align-items: center; display: inline-flex; overflow: hidden; } .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .color-input-group:hover:not(:focus-within), .color-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .color-input-group[data-focus-within="true"], .color-input-group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; outline-style: none; } .color-input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .color-input-group[data-invalid="true"]:focus, .color-input-group[data-invalid="true"]:focus-visible, .color-input-group[data-invalid="true"][data-focused="true"], .color-input-group[data-invalid="true"][data-focus-visible="true"], .color-input-group[data-invalid="true"]:focus-within, .color-input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .color-input-group[data-disabled="true"], .color-input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-input-group__input { cursor: text; border-style: var(--tw-border-style); height: 100%; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; align-items: center; display: flex; } @media (min-width: 40rem) { .color-input-group__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .color-input-group__input::placeholder { color: var(--field-placeholder, var(--muted)); } .color-input-group:has([data-slot="color-input-group-prefix"]) .color-input-group__input { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline-start: calc(var(--spacing) * 2); } .color-input-group:has([data-slot="color-input-group-suffix"]) .color-input-group__input { border-start-end-radius: 0; border-end-end-radius: 0; padding-inline-end: calc(var(--spacing) * 2); } .color-input-group__input:focus, .color-input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .color-input-group__prefix { color: var(--field-placeholder, var(--muted)); flex-shrink: 0; align-items: center; margin-inline-start: calc(var(--spacing) * 3); margin-inline-end: calc(var(--spacing) * 0); display: flex; } .color-input-group__suffix { color: var(--field-placeholder, var(--muted)); flex-shrink: 0; align-items: center; margin-inline-end: calc(var(--spacing) * 3); display: flex; } .color-input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-input-group-bg); --color-input-group-bg: var(--default); --color-input-group-bg-hover: var(--default-hover); --color-input-group-bg-focus: var(--default); } @media (hover: hover) { .color-input-group--secondary:hover:not(:focus-within), .color-input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--color-input-group-bg-hover); } } .color-input-group--secondary:focus-within, .color-input-group--secondary[data-focus-within="true"] { background-color: var(--color-input-group-bg-focus); } .color-input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .color-input-group--secondary[data-invalid="true"]:focus, .color-input-group--secondary[data-invalid="true"]:focus-visible, .color-input-group--secondary[data-invalid="true"][data-focused="true"], .color-input-group--secondary[data-invalid="true"][data-focus-visible="true"], .color-input-group--secondary[data-invalid="true"]:focus-within, .color-input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--color-input-group-bg-focus); } .color-input-group--secondary [data-slot="color-input-group-input"] { background-color: #0000; } .color-input-group--full-width { width: 100%; } .color-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.color-field[data-invalid="true"], .color-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .color-field [data-slot="label"] { width: fit-content; } .color-field--full-width { width: 100%; } .slider { gap: calc(var(--spacing) * 1); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .slider [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .slider .slider__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .slider .slider__track { border-radius: calc(var(--radius) * 1.5); background-color: var(--default); grid-area: track; position: relative; } .slider .slider__fill { pointer-events: none; background-color: var(--accent); position: absolute; } .slider .slider__thumb { cursor: grab; border-radius: calc(var(--radius) * 1.5); background-color: var(--accent); -webkit-tap-highlight-color: transparent; transition: background-color .25s var(--ease-smooth), transform .25s var(--ease-out), box-shadow .15s var(--ease-out); justify-content: center; align-items: center; display: flex; position: absolute; } .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .slider .slider__thumb:after { z-index: 10; border-radius: calc(var(--radius) * 1); background-color: var(--accent-foreground); color: var(--color-black); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); content: ""; transform-origin: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); position: relative; } .slider .slider__thumb:after:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb:after:not(:is()) { transition-property: none; } } .slider .slider__thumb[data-dragging="true"] { cursor: grabbing; } .slider .slider__thumb[data-dragging="true"]:after { scale: .9; } .slider .slider__thumb[data-dragging="true"]:after:is() { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb[data-dragging="true"]:after:not(:is()) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .slider .slider__thumb[data-focus-visible="true"] { z-index: 10; --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .slider .slider__thumb[data-disabled="true"] { cursor: default; } .slider:disabled, .slider[data-disabled="true"], .slider[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.slider:disabled, .slider[data-disabled="true"], .slider[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } .slider[data-orientation="horizontal"] { flex-direction: column; } .slider[data-orientation="horizontal"] .slider__track { height: calc(var(--spacing) * 5); border-inline-style: var(--tw-border-style); border-inline-width: .75rem; border-inline-color: #0000; width: 100%; } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"] { border-inline-start-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"] { border-inline-end-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__fill, .slider[data-orientation="horizontal"] .slider__thumb { height: 100%; } .slider[data-orientation="horizontal"] .slider__thumb { width: 1.75rem; top: 50%; } .slider[data-orientation="horizontal"] .slider__thumb:after { width: 1.5rem; height: 1rem; } .slider[data-orientation="vertical"] { gap: calc(var(--spacing) * 2); flex-direction: row; grid-template: "output" "track" 1fr "label" / 1fr; height: 100%; } .slider[data-orientation="vertical"] .slider__output, .slider[data-orientation="vertical"] [data-slot="label"] { text-align: center; } .slider[data-orientation="vertical"] .slider__track { height: 100%; width: calc(var(--spacing) * 5); border-block-style: var(--tw-border-style); border-block-width: .75rem; border-block-color: #0000; justify-self: center; } .slider[data-orientation="vertical"] .slider__track[data-fill-start="true"] { border-bottom-color: var(--accent); } .slider[data-orientation="vertical"] .slider__track[data-fill-end="true"] { border-top-color: var(--accent); } .slider[data-orientation="vertical"] .slider__fill, .slider[data-orientation="vertical"] .slider__thumb { width: 100%; } .slider[data-orientation="vertical"] .slider__thumb { height: 1.75rem; left: 50%; } .slider[data-orientation="vertical"] .slider__thumb:after { width: 1rem; height: 1.5rem; } .switch { align-items: flex-start; gap: calc(var(--spacing) * 1); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); --switch-control-bg: var(--default); --switch-control-bg-hover: var(--switch-control-bg); flex-direction: column; display: flex; } @supports (color: color-mix(in lab, red, red)) { .switch { --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%); } } .switch { --switch-control-bg-pressed: var(--switch-control-bg-hover); --switch-control-bg-checked: var(--accent); --switch-control-bg-checked-hover: var(--accent-hover); } .switch[data-disabled="true"], .switch[data-disabled="true"] [data-slot="description"], .switch[data-disabled="true"] [data-slot="field-error"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .switch[data-disabled="true"] .switch__thumb { background-color: var(--default-foreground); } @supports (color: color-mix(in lab, red, red)) { .switch[data-disabled="true"] .switch__thumb { background-color: color-mix(in oklab, var(--default-foreground) 20%, transparent); } } .switch > [data-slot="description"] { width: 100%; min-width: calc(var(--spacing) * 0); padding-inline-start: 3.25rem; } .switch > [data-slot="field-error"] { width: 100%; min-width: calc(var(--spacing) * 0); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--muted); padding-inline-start: 3.25rem; } .switch.switch--sm > [data-slot="description"], .switch.switch--sm > [data-slot="field-error"] { padding-inline-start: 2.75rem; } .switch.switch--lg > [data-slot="description"], .switch.switch--lg > [data-slot="field-error"] { padding-inline-start: 3.75rem; } :is(.switch:disabled[aria-checked="true"], .switch:disabled[data-selected="true"], .switch[data-disabled="true"][aria-checked="true"], .switch[data-disabled="true"][data-selected="true"], .switch[aria-disabled="true"][aria-checked="true"], .switch[aria-disabled="true"][data-selected="true"]) .switch__thumb { opacity: .4; } .switch__control { border-radius: calc(var(--radius) * 1.5); background-color: var(--switch-control-bg); width: 2.5rem; height: 1.25rem; transition: background-color .25s var(--ease-smooth), box-shadow .15s var(--ease-out); flex-shrink: 0; align-items: center; display: flex; position: relative; overflow: hidden; } .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .switch:focus-visible .switch__control, .switch:has([data-slot="switch-content"][data-focus-visible="true"]) .switch__control, .switch [data-slot="switch-content"][data-focus-visible="true"] .switch__control { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .switch:hover .switch__control, .switch:has([data-slot="switch-content"][data-hovered="true"]) .switch__control, .switch [data-slot="switch-content"][data-hovered="true"] .switch__control { background-color: var(--switch-control-bg-hover); } .switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control { background-color: var(--switch-control-bg-pressed); } :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transform: none; } @media (prefers-reduced-motion: reduce) { :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transform: none; } } .switch[aria-checked="true"] .switch__control, .switch[data-selected="true"] .switch__control { background-color: var(--switch-control-bg-checked); } .switch[aria-checked="true"]:hover .switch__control, .switch[data-selected="true"]:hover .switch__control, .switch[aria-checked="true"][data-hovered="true"] .switch__control, .switch[data-selected="true"][data-hovered="true"] .switch__control, .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] .switch__control, .switch[aria-checked="true"]:active .switch__control, .switch[data-selected="true"]:active .switch__control, .switch[aria-checked="true"][data-pressed="true"] .switch__control, .switch[data-selected="true"][data-pressed="true"] .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch__content { cursor: inherit; align-items: center; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } .switch--sm .switch__control { border-radius: calc(var(--radius) * 1); width: 2rem; height: 1rem; } .switch--lg .switch__control { width: 3rem; height: 1.5rem; } .switch__thumb { transform-origin: center; border-radius: calc(var(--radius) * 1); background-color: var(--color-white); color: var(--color-black); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); width: 1.375rem; height: 1rem; transition: margin .3s var(--ease-out-fluid), background-color .2s var(--ease-out); margin-inline-start: calc(var(--spacing) * .5); display: flex; } .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .switch[aria-checked="true"] .switch__thumb, .switch[data-selected="true"] .switch__thumb { background-color: var(--accent-foreground); color: var(--accent); margin-inline-start: calc(100% - 1.5rem); box-shadow: 0 0 5px #00000005, 0 2px 10px #0000000f, 0 0 1px #0000004d; } .switch--sm .switch__thumb { border-radius: calc(var(--radius) * .75); width: 1.03125rem; height: .75rem; } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb), .switch[data-selected="true"] :is(.switch--sm .switch__thumb) { margin-inline-start: calc(100% - 1.15625rem); } .switch--lg .switch__thumb { border-radius: calc(var(--radius) * 1.5); width: 1.71875rem; height: 1.25rem; } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb), .switch[data-selected="true"] :is(.switch--lg .switch__thumb) { margin-inline-start: calc(100% - 1.84375rem); } .switch__thumb > * { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; } .switch [data-slot="label"] { -webkit-user-select: none; user-select: none; } .switch__content [data-slot="label"] { cursor: var(--cursor-interactive); } .switch [data-slot="description"] { cursor: default; -webkit-user-select: none; user-select: none; } .switch-group { gap: calc(var(--spacing) * 6); flex-direction: column; display: flex; } .switch-group__items { gap: calc(var(--spacing) * 4); display: flex; } .switch-group--horizontal .switch-group__items { flex-direction: row; } .switch-group--vertical .switch-group__items { flex-direction: column; } .badge { justify-content: center; align-items: center; gap: calc(var(--spacing) * .5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); min-height: calc(var(--spacing) * 7); min-width: calc(var(--spacing) * 7); border-radius: calc(var(--radius) * 3); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: 1.34; --badge-bg: var(--default); --badge-fg: var(--default-foreground); --badge-border: var(--background); background-color: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-border); background-clip: padding-box; flex-shrink: 0; line-height: 1.34; display: inline-flex; } .badge__label { padding-inline: calc(var(--spacing) * .5); } .badge-anchor { flex-shrink: 0; display: inline-flex; position: relative; } .badge--lg { min-height: calc(var(--spacing) * 8); min-width: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; line-height: 1.43; } .badge--sm { min-height: calc(var(--spacing) * 4); min-width: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); --tw-leading: 1.34; font-size: 10px; line-height: 1.34; } .badge--accent { --badge-fg: var(--accent-soft-foreground); } .badge--default { --badge-fg: var(--default-foreground); } .badge--success { --badge-fg: var(--success-soft-foreground); } .badge--warning { --badge-fg: var(--warning-soft-foreground); } .badge--danger { --badge-fg: var(--danger-soft-foreground); } .badge--top-right { top: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0); position: absolute; transform: translate(25%, -25%); } .badge--top-left { top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); position: absolute; transform: translate(-25%, -25%); } .badge--bottom-right { right: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); position: absolute; transform: translate(25%, 25%); } .badge--bottom-left { bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); position: absolute; transform: translate(-25%, 25%); } .badge--primary.badge--accent { --badge-bg: var(--accent); --badge-fg: var(--accent-foreground); } .badge--primary.badge--default { --badge-bg: var(--default); --badge-fg: var(--default-foreground); } .badge--primary.badge--success { --badge-bg: var(--success); --badge-fg: var(--success-foreground); } .badge--primary.badge--warning { --badge-bg: var(--warning); --badge-fg: var(--warning-foreground); } .badge--primary.badge--danger { --badge-bg: var(--danger); --badge-fg: var(--danger-foreground); } .badge--soft.badge--accent { --badge-bg: var(--accent-soft); --badge-fg: var(--accent-soft-foreground); } .badge--soft.badge--default { --badge-bg: var(--default-soft); --badge-fg: var(--default-soft-foreground); } .badge--soft.badge--success { --badge-bg: var(--success-soft); --badge-fg: var(--success-soft-foreground); } .badge--soft.badge--warning { --badge-bg: var(--warning-soft); --badge-fg: var(--warning-soft-foreground); } .badge--soft.badge--danger { --badge-bg: var(--danger-soft); --badge-fg: var(--danger-soft-foreground); } .chip { align-items: center; gap: calc(var(--spacing) * .5); border-radius: calc(var(--radius) * 2); width: fit-content; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * .5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --chip-bg: var(--default); --chip-fg: currentColor; background-color: var(--chip-bg); color: var(--chip-fg); flex-shrink: 0; display: inline-flex; } .chip__label { padding-inline: calc(var(--spacing) * .5); } .chip--accent { --chip-fg: var(--accent-soft-foreground); } .chip--danger { --chip-fg: var(--danger-soft-foreground); } .chip--default { --chip-fg: var(--default-foreground); } .chip--success { --chip-fg: var(--success-soft-foreground); } .chip--warning { --chip-fg: var(--warning-soft-foreground); } .chip--tertiary { --chip-bg: transparent; } .chip--sm { padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 0); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .chip--md { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .chip--lg { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .chip--primary.chip--accent { --chip-bg: var(--accent); --chip-fg: var(--accent-foreground); } .chip--primary.chip--success { --chip-bg: var(--success); --chip-fg: var(--success-foreground); } .chip--primary.chip--warning { --chip-bg: var(--warning); --chip-fg: var(--warning-foreground); } .chip--primary.chip--danger { --chip-bg: var(--danger); --chip-fg: var(--danger-foreground); } .chip--accent.chip--soft { --chip-bg: var(--accent-soft); --chip-fg: var(--accent-soft-foreground); } .chip--success.chip--soft { --chip-bg: var(--success-soft); --chip-fg: var(--success-soft-foreground); } .chip--warning.chip--soft { --chip-bg: var(--warning-soft); --chip-fg: var(--warning-soft-foreground); } .chip--danger.chip--soft { --chip-bg: var(--danger-soft); --chip-fg: var(--danger-soft-foreground); } .chip--default.chip--soft { --chip-bg: var(--default-soft); --chip-fg: var(--default-soft-foreground); } .table-root { grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; overflow: clip; } .table__scroll-container { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); scrollbar-gutter: auto; overflow-x: auto; } .table-root--primary { background-color: var(--surface-secondary); padding-inline: calc(var(--spacing) * 1); padding-bottom: calc(var(--spacing) * 1); border-radius: min(32px, calc(var(--radius) * 2.5)); } .table-root--secondary .table__header { border-bottom-style: var(--tw-border-style); background-color: #0000; border-bottom-width: 0; } .table-root--secondary .table__column { background-color: var(--surface-secondary); } .table-root--secondary :is(th.table__column:first-child, [role="row"] > [role="presentation"]:first-of-type > .table__column) { border-start-start-radius: min(32px, var(--radius-2xl)); border-end-start-radius: min(32px, var(--radius-2xl)); } .table-root--secondary :is(th.table__column:last-child, [role="row"] > [role="presentation"]:last-of-type > .table__column) { border-start-end-radius: min(32px, var(--radius-2xl)); border-end-end-radius: min(32px, var(--radius-2xl)); } .table-root--secondary .table__body { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .table-root--secondary .table__body tr:first-child td:first-child, .table-root--secondary .table__body tr:first-child td:last-child, .table-root--secondary .table__body tr:last-child td:first-child, .table-root--secondary .table__body tr:last-child td:last-child { border-radius: 0; } .table-root--secondary .table__body:not(tbody) { border-radius: 0; overflow: visible; } .table-root--secondary .table__row .table__cell { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator-tertiary); } @supports (color: color-mix(in lab, red, red)) { .table-root--secondary .table__row .table__cell { border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent); } } .table-root--secondary .table__row .table__cell { background-color: #0000; } @media (hover: hover) { .table-root--secondary .table__row:hover .table__cell, .table-root--secondary .table__row[data-hovered="true"] .table__cell { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .table-root--secondary .table__row:hover .table__cell, .table-root--secondary .table__row[data-hovered="true"] .table__cell { background-color: color-mix(in oklab, var(--default) 50%, transparent); } } } .table__content { border-collapse: separate; --tw-border-spacing-x: calc(var(--spacing) * 0); --tw-border-spacing-y: calc(var(--spacing) * 0); width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .table-root--primary .table__content { overflow: clip; } .table__header { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); } @supports (color: color-mix(in lab, red, red)) { .table__header { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } } .table__header { background-color: var(--surface-secondary); } .table__column { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); text-align: start; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); position: relative; } .table__column:after { content: ""; pointer-events: none; height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); width: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .5); background-color: var(--separator); inset-inline-end: calc(var(--spacing) * 0); position: absolute; top: 50%; } .table__column:last-child:not(:only-child):after { content: none; } .table__column[data-allows-sorting="true"] { cursor: var(--cursor-interactive); } @media (hover: hover) { .table__column[data-allows-sorting="true"]:hover, .table__column[data-allows-sorting="true"][data-hovered="true"] { color: var(--foreground); } } .table__column:focus-visible, .table__column[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--focus); outline-style: none; } [role="row"] > [role="presentation"]:last-of-type:not(:only-of-type) > .table__column:after { content: none; } .table__sortable-column-header { justify-content: space-between; align-items: center; display: flex; } .table__sortable-column-indicator { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .1s; --tw-ease: var(--ease-out); transition-duration: .1s; transition-timing-function: var(--ease-out); place-content: center; display: inline-grid; } .table__sortable-column-indicator[data-direction="descending"] { rotate: 180deg; } .table__body tr:first-child td:first-child { border-start-start-radius: min(32px, var(--radius-2xl)); } .table__body tr:first-child td:last-child { border-start-end-radius: min(32px, var(--radius-2xl)); } .table__body tr:last-child td:first-child { border-end-start-radius: min(32px, var(--radius-2xl)); } .table__body tr:last-child td:last-child { border-end-end-radius: min(32px, var(--radius-2xl)); } .table__body:not(tbody) { border-radius: min(32px, var(--radius-2xl)); height: 100%; position: relative; overflow: clip; } .table__row { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); height: 100%; position: relative; } @supports (color: color-mix(in lab, red, red)) { .table__row { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } } .table__row:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } @media (hover: hover) { .table__row:hover .table__cell, .table__row[data-hovered="true"] .table__cell { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .table__row:hover .table__cell, .table__row[data-hovered="true"] .table__cell { background-color: color-mix(in oklab, var(--surface) 40%, transparent); } } } .table__row[data-selected="true"] .table__cell { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .table__row[data-selected="true"] .table__cell { background-color: color-mix(in oklab, var(--surface) 10%, transparent); } } .table__row[aria-disabled="true"], .table__row[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .table__row:focus-visible, .table__row[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .table__row[data-dragging="true"] { opacity: .5; } .table__row[data-drop-target="true"] .table__cell { background-color: var(--accent-soft); } .table__cell { background-color: var(--surface); height: 100%; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); vertical-align: middle; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--foreground); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator-tertiary); } @supports (color: color-mix(in lab, red, red)) { .table__cell { border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent); } } .table__cell:focus-visible, .table__cell[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--focus); outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) :is(.table__cell, .table__column) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):only-child, .table__row:is(:focus-visible, [data-focus-visible="true"]) > :only-child :is(.table__cell, .table__column) { border-radius: calc(var(--radius) * 1); --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):first-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :first-child:not(:only-child) :is(.table__cell, .table__column) { --tw-shadow: inset 2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):last-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :last-child:not(:only-child) :is(.table__cell, .table__column) { --tw-shadow: inset -2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); outline-style: none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):not(:first-child):not(:last-child):not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :not(:first-child):not(:last-child):not(:only-child) :is(.table__cell, .table__column) { --tw-shadow: inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .table__cell[data-tree-column] { padding-inline-start: calc(1rem * var(--table-row-level, 1)); } .table__footer { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); align-items: center; display: flex; } .table__resizable-container { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); scrollbar-gutter: auto; position: relative; overflow: auto; } .table__column-resizer { height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); border-radius: calc(var(--radius) * .5); background-color: var(--separator); box-sizing: content-box; --tw-translate-x: calc(1 / 2 * 100%); width: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); cursor: col-resize; touch-action: none; padding-inline: calc(var(--spacing) * 2); --tw-border-style: none; --tw-outline-style: none; inset-inline-end: calc(var(--spacing) * 0); background-clip: content-box; border-style: none; outline-style: none; position: absolute; top: 50%; } .table__column-resizer[data-hovered="true"], .table__column-resizer:hover, .table__column-resizer[data-resizing="true"] { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--accent); } .table__column-resizer[data-focus-visible="true"], .table__column-resizer:focus-visible { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--focus); } .table__column:has(.table__column-resizer):after { content: none; } .table__load-more td, .table__load-more [role="rowheader"] { padding-block: calc(var(--spacing) * 3); text-align: center; } :is(.table__load-more td, .table__load-more [role="rowheader"]) > * { margin-inline: auto; } .table__load-more-content { justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2); display: flex; } .alert { justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 4); background-color: var(--surface); width: 100%; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: min(32px, var(--radius-3xl)); flex-direction: row; display: flex; } .alert__content { flex-direction: column; flex-grow: 1; align-items: flex-start; height: 100%; display: flex; } .alert__indicator { padding: calc(var(--spacing) * 1); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; display: flex; } .alert__indicator [data-slot="alert-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .alert__title { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .alert__description { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); } .alert--default .alert__indicator, .alert--default .alert__title { color: var(--foreground); } .alert--accent .alert__indicator, .alert--accent .alert__title { color: var(--accent-soft-foreground); } .alert--success .alert__indicator, .alert--success .alert__title { color: var(--success-soft-foreground); } .alert--warning .alert__indicator, .alert--warning .alert__title { color: var(--warning-soft-foreground); } .alert--danger .alert__indicator, .alert--danger .alert__title { color: var(--danger-soft-foreground); } .empty-state { padding: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); } .skeleton { pointer-events: none; border-radius: calc(var(--radius) * .5); background-color: var(--surface-tertiary); position: relative; overflow: hidden; } @supports (color: color-mix(in lab, red, red)) { .skeleton { background-color: color-mix(in oklab, var(--surface-tertiary) 70%, transparent); } } .skeleton--shimmer:after { inset: calc(var(--spacing) * 0); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); --tw-gradient-position: to right; animation: 2s linear infinite skeleton; position: absolute; } @supports (background-image: linear-gradient(in lab, red, red)) { .skeleton--shimmer:after { --tw-gradient-position: to right in oklab; } } .skeleton--shimmer:after { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: transparent; --tw-gradient-via: var(--surface-tertiary); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-to: transparent; --tw-content: ""; content: var(--tw-content); } .skeleton--shimmer:has(.skeleton):after { content: none; } .skeleton--shimmer:has(.skeleton):before { inset: calc(var(--spacing) * 0); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); --tw-content: ""; content: var(--tw-content); z-index: 10; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(90deg, #0000 0%, #ffffff80 50%, #0000 100%); animation: 2s linear infinite skeleton; position: absolute; } .skeleton--shimmer:has(.skeleton) .skeleton:after { content: none; } .skeleton--pulse { animation: var(--animate-pulse); } .meter { gap: calc(var(--spacing) * 1); --meter-fill: var(--accent); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .meter [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .meter .meter__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .meter .meter__track { border-radius: calc(var(--radius) * .5); background-color: var(--default); height: calc(var(--spacing) * 2); grid-area: track; position: relative; overflow: hidden; } .meter .meter__fill { inset-inline-start: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); border-radius: calc(var(--radius) * .5); background-color: var(--meter-fill); height: 100%; transition: width .3s var(--ease-out); position: absolute; } .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .meter:disabled, .meter[data-disabled="true"], .meter[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.meter:disabled, .meter[data-disabled="true"], .meter[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } .meter--sm .meter__track { height: calc(var(--spacing) * 1); border-radius: calc(var(--radius) * .25); } .meter--sm .meter__fill { border-radius: calc(var(--radius) * .25); } .meter--lg .meter__track { height: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * .75); } .meter--lg .meter__fill { border-radius: calc(var(--radius) * .75); } .meter--default { --meter-fill: var(--default-foreground); } .meter--accent { --meter-fill: var(--accent); } .meter--success { --meter-fill: var(--success); } .meter--warning { --meter-fill: var(--warning); } .meter--danger { --meter-fill: var(--danger); } .progress-bar { gap: calc(var(--spacing) * 1); --progress-bar-fill: var(--accent); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .progress-bar [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .progress-bar .progress-bar__output { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); grid-area: output; } .progress-bar .progress-bar__track { border-radius: calc(var(--radius) * .5); background-color: var(--default); height: calc(var(--spacing) * 2); grid-area: track; position: relative; overflow: hidden; } .progress-bar .progress-bar__fill { inset-inline-start: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); border-radius: calc(var(--radius) * .5); background-color: var(--progress-bar-fill); height: 100%; transition: width .3s var(--ease-out); position: absolute; } .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .progress-bar:not([aria-valuenow]) .progress-bar__fill { width: 40%; animation: 1.5s cubic-bezier(.65, 0, .35, 1) infinite progress-bar-indeterminate; } .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .progress-bar:disabled, .progress-bar[data-disabled="true"], .progress-bar[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.progress-bar:disabled, .progress-bar[data-disabled="true"], .progress-bar[aria-disabled="true"]) [data-slot="label"] { opacity: 1; } @keyframes progress-bar-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } .progress-bar--sm .progress-bar__track { height: calc(var(--spacing) * 1); border-radius: calc(var(--radius) * .25); } .progress-bar--sm .progress-bar__fill { border-radius: calc(var(--radius) * .25); } .progress-bar--lg .progress-bar__track { height: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * .75); } .progress-bar--lg .progress-bar__fill { border-radius: calc(var(--radius) * .75); } .progress-bar--default { --progress-bar-fill: var(--default-foreground); } .progress-bar--accent { --progress-bar-fill: var(--accent); } .progress-bar--success { --progress-bar-fill: var(--success); } .progress-bar--warning { --progress-bar-fill: var(--warning); } .progress-bar--danger { --progress-bar-fill: var(--danger); } .progress-circle { --progress-circle-stroke: var(--accent); --progress-circle-track-stroke: var(--default); justify-content: center; align-items: center; display: inline-flex; } .progress-circle .progress-circle__track { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .progress-circle .progress-circle__track-circle { stroke: var(--progress-circle-track-stroke); } .progress-circle .progress-circle__fill-circle { stroke: var(--progress-circle-stroke); transition: stroke-dashoffset .3s var(--ease-out); } .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .progress-circle:not([aria-valuenow]) .progress-circle__track { animation: 1s linear infinite progress-circle-spin; } .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .progress-circle:disabled, .progress-circle[data-disabled="true"], .progress-circle[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @keyframes progress-circle-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .progress-circle--sm .progress-circle__track { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .progress-circle--lg .progress-circle__track { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .progress-circle--default { --progress-circle-stroke: var(--default-foreground); } .progress-circle--accent { --progress-circle-stroke: var(--accent); } .progress-circle--success { --progress-circle-stroke: var(--success); } .progress-circle--warning { --progress-circle-stroke: var(--warning); } .progress-circle--danger { --progress-circle-stroke: var(--danger); } .spinner { pointer-events: none; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); flex-shrink: 0; animation: .75s linear infinite spin; display: inline-flex; } .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .spinner--sm { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .spinner--lg { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .spinner--xl { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .spinner--current { color: inherit; } .spinner--accent { color: var(--accent); } .spinner--danger { color: var(--danger); } .spinner--success { color: var(--success); } .spinner--warning { color: var(--warning); } .toast-region { pointer-events: none; z-index: var(--z-index-toast); --tw-outline-style: none; outline-style: none; width: calc(100vw - 2rem); position: fixed; } @media (min-width: 40rem) { .toast-region { width: auto; min-width: var(--toast-width); } } .toast-region { display: block; } .toast-region--bottom { bottom: calc(var(--spacing) * 4); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .toast-region--bottom-start { inset-inline-start: calc(var(--spacing) * 4); bottom: calc(var(--spacing) * 4); } .toast-region--bottom-end { inset-inline-end: calc(var(--spacing) * 4); bottom: calc(var(--spacing) * 4); } .toast-region--top { top: calc(var(--spacing) * 4); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); left: 50%; } .toast-region--top-start { inset-inline-start: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4); } .toast-region--top-end { inset-inline-end: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4); } .toast-region:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; outline-color: var(--focus); } .toast { border-radius: min(32px, var(--radius-3xl)); --toast-y: var(--offset-collapsed, 0px); --toast-enter: 0%; --toast-scale: var(--scale-collapsed, 1); transform: translateY(calc(var(--dir, 1) * (var(--toast-y) + var(--toast-enter)))) scale(var(--toast-scale)); height: var(--toast-height, auto); pointer-events: auto; justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 1.5); background-color: var(--surface); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --toast-ease: var(--ease-out-fluid); --toast-enter-duration: .35s; --toast-exit-duration: .25s; --toast-translate-duration: var(--toast-enter-duration); --toast-height-duration: var(--toast-enter-duration); --toast-opacity-duration: .15s; transition: transform var(--toast-translate-duration) var(--toast-ease), height var(--toast-height-duration) var(--toast-ease), opacity var(--toast-opacity-duration) var(--toast-ease); flex-direction: row; display: flex; position: absolute; inset-inline: 0; } .toast:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .toast:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .toast:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toast:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toast[data-entering="true"] { --toast-enter: -100%; } .toast--bottom, .toast--bottom-start, .toast--bottom-end { --dir: -1; transform-origin: bottom; bottom: 0; } :is(.toast--bottom, .toast--bottom-start, .toast--bottom-end)[data-expanded="true"]:after { top: calc(-1 * var(--gap, 12px) - 1px); bottom: 0; } .toast--top, .toast--top-start, .toast--top-end { --dir: 1; transform-origin: top; top: 0; } :is(.toast--top, .toast--top-start, .toast--top-end)[data-expanded="true"]:after { top: 0; bottom: calc(-1 * var(--gap, 12px) - 1px); } .toast > :not([data-slot="toast-close"]) { transition: opacity .2s var(--toast-ease); } .toast > :not([data-slot="toast-close"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast > :not([data-slot="toast-close"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast > :not([data-slot="toast-close"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toast > :not([data-slot="toast-close"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast > :not([data-slot="toast-close"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast > :not([data-slot="toast-close"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toast:not([data-frontmost="true"]):not([data-expanded="true"]) { --toast-y: var(--offset-collapsed, 0px); height: var(--front-height, 0px); overflow: hidden; } .toast:not([data-frontmost="true"]):not([data-expanded="true"]) > :not([data-slot="toast-close"]) { opacity: 0; } .toast:not([data-frontmost="true"]):not([data-expanded="true"]) .toast__close-button { pointer-events: none; opacity: 0; outline: none; } .toast[data-expanded="true"] { --toast-y: var(--offset-expanded, 0px); --toast-scale: 1; height: var(--toast-height, auto); } .toast[data-expanded="true"]:after { content: ""; z-index: -1; position: absolute; inset-inline: 0; } .toast[data-exiting="true"] { opacity: 0; } .toast[data-exiting="true"][data-frontmost="true"] { --toast-translate-duration: var(--toast-exit-duration); --toast-opacity-duration: .15s; --toast-enter: -100%; --toast-scale: 1; } .toast[data-exiting="true"][data-expanded="true"]:not([data-frontmost="true"]) { --toast-translate-duration: .2s; --toast-opacity-duration: .15s; --toast-scale: .96; } .toast[data-exiting="true"]:not([data-expanded="true"]):not([data-frontmost="true"]) { --toast-translate-duration: .2s; --toast-opacity-duration: .15s; --toast-scale: calc(var(--scale-collapsed, 1) * .96); } .toast[data-hidden="true"] { pointer-events: none; opacity: 0; display: flex; } .toast:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; outline-color: var(--focus); } .toast__content { flex-direction: column; flex-grow: 1; align-self: center; align-items: flex-start; display: flex; } .toast__indicator { padding: calc(var(--spacing) * 1); color: var(--overlay-foreground); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .toast__indicator [data-slot="toast-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toast__indicator [data-slot="spinner"], .toast__indicator [data-slot="spinner-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]) { animation: toast-indicator-fade .15s var(--toast-ease), toast-indicator-scale .2s var(--toast-ease); } .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast__indicator[data-swapped="true"] > :not([data-slot="spinner"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .toast__title { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--overlay-foreground); } .toast__description { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); } .toast__close-button { pointer-events: none; inset-inline-end: calc(var(--spacing) * -1); top: calc(var(--spacing) * -1); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); border-color: var(--border); background-color: var(--default); opacity: 0; position: absolute; } @media (min-width: 40rem) { .toast__close-button { border-style: var(--tw-border-style); background-color: var(--overlay); border-width: 1px; } } .toast__close-button { transition: opacity .15s var(--ease-smooth); } .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .toast__close-button [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } @media (min-width: 40rem) { .toast__close-button [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } @media (hover: hover) { .toast__close-button:hover, .toast__close-button[data-hovered="true"] { background-color: var(--default); } } .toast[data-frontmost="true"]:hover .toast__close-button, .toast[data-expanded="true"]:hover .toast__close-button { pointer-events: auto; opacity: 1; } .toast[data-exiting="true"] .toast__close-button { pointer-events: none; opacity: 0; } .toast__action { margin-top: calc(var(--spacing) * 2); } @media (min-width: 40rem) { .toast__action { margin-top: calc(var(--spacing) * 0); } } .toast--accent .toast__title { color: var(--accent-soft-foreground); } .toast--success .toast__title, .toast--success .toast__indicator { color: var(--success-soft-foreground); } .toast--warning .toast__title, .toast--warning .toast__indicator { color: var(--warning-soft-foreground); } .toast--danger .toast__title, .toast--danger .toast__indicator { color: var(--danger-soft-foreground); } @keyframes toast-indicator-fade { from { opacity: 0; } } @keyframes toast-indicator-scale { from { scale: .92; } } .checkbox-group { flex-direction: column; display: flex; } .checkbox-group [data-slot="checkbox"] { margin-top: calc(var(--spacing) * 4); } .checkbox { align-items: flex-start; gap: calc(var(--spacing) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-direction: column; display: flex; } .checkbox > [data-slot="description"], .checkbox > [data-slot="field-error"] { width: 100%; min-width: calc(var(--spacing) * 0); cursor: default; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); -webkit-user-select: none; user-select: none; padding-inline-start: calc(var(--spacing) * 7); } .checkbox [data-slot="label"] { -webkit-user-select: none; user-select: none; } .checkbox .checkbox__content [data-slot="label"] { cursor: var(--cursor-interactive); } .checkbox[data-disabled="true"], .checkbox[data-disabled="true"] [data-slot="description"], .checkbox[data-disabled="true"] [data-slot="field-error"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.checkbox[data-selected="true"], .checkbox[data-indeterminate="true"]) .checkbox__indicator { border-color: var(--accent-foreground); } .checkbox [data-slot="checkbox-default-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); stroke-width: 2.5px; color: var(--accent-foreground); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .2s; transition-duration: .2s; } .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] { transition: stroke-dashoffset .15s linear 15ms; } .checkbox[data-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] { color: var(--danger-foreground); } .checkbox[data-indeterminate="true"] [data-slot="checkbox-default-indicator--indeterminate"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .checkbox[data-indeterminate="true"][data-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"], .checkbox[data-indeterminate="true"][aria-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"] { color: var(--danger-foreground); } .checkbox__control { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * .75); border-style: var(--tw-border-style); border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border, var(--border)); background-color: var(--field-background, var(--default)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; overflow: hidden; } .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox__control { cursor: var(--cursor-interactive); } .checkbox__control:before { pointer-events: none; inset: calc(var(--spacing) * 0); z-index: 0; transform-origin: center; --tw-scale-x: 70%; --tw-scale-y: 70%; --tw-scale-z: 70%; scale: var(--tw-scale-x) var(--tw-scale-y); border-radius: calc(var(--radius) * .75); background-color: var(--accent); opacity: 0; --tw-content: ""; content: var(--tw-content); transition: scale .1s var(--ease-linear), opacity .2s var(--ease-linear), background-color .2s var(--ease-out); position: absolute; } .checkbox__control:before:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox__control:before:not(:is()) { transition-property: none; } } .checkbox:focus-visible .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-focus-visible="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-focus-visible="true"] .checkbox__control { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .checkbox:hover .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-hovered="true"] .checkbox__control { border-color: var(--field-border-hover); } :is(.checkbox:hover .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-hovered="true"] .checkbox__control):before { background-color: var(--accent-hover); } .checkbox[aria-checked="true"] .checkbox__control, .checkbox[data-selected="true"] .checkbox__control { color: var(--accent-foreground); border-color: #0000; } :is(.checkbox[aria-checked="true"] .checkbox__control, .checkbox[data-selected="true"] .checkbox__control):before { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1; } .checkbox[data-indeterminate="true"] .checkbox__control { background-color: var(--accent); color: var(--accent-foreground); } .checkbox:active[data-indeterminate="true"] .checkbox__control, .checkbox[data-pressed="true"][data-indeterminate="true"] .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"] .checkbox__control { background-color: var(--accent-hover); } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus-visible, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focused="true"], :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focus-visible="true"], :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus-within, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[data-invalid="true"][data-selected="true"] .checkbox__control, .checkbox[aria-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[aria-invalid="true"][data-selected="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: #0000; } :is(.checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[data-invalid="true"][data-selected="true"] .checkbox__control, .checkbox[aria-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[aria-invalid="true"][data-selected="true"] .checkbox__control):before { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); background-color: var(--danger); opacity: 1; } .checkbox[data-indeterminate="true"][aria-invalid="true"] .checkbox__control, .checkbox[data-indeterminate="true"][data-invalid="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); } .checkbox__indicator { z-index: 10; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); justify-content: center; align-items: center; display: flex; position: relative; } .checkbox__indicator svg { width: 100%; height: 100%; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .checkbox--secondary .checkbox__control { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--checkbox-control-bg); --checkbox-control-bg: var(--default); } .checkbox:hover :is(.checkbox--secondary .checkbox__control), .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) :is(.checkbox--secondary .checkbox__control), .checkbox [data-slot="checkbox-content"][data-hovered="true"] :is(.checkbox--secondary .checkbox__control) { border-color: var(--field-border-hover); } .checkbox__content { cursor: inherit; align-items: center; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } .checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control { background-color: var(--checkbox-control-bg); } :is(.checkbox--secondary[aria-checked="true"] .checkbox__control, .checkbox--secondary[data-selected="true"] .checkbox__control):before, .checkbox--secondary[data-indeterminate="true"] .checkbox__control, .checkbox--secondary[data-indeterminate="true"] .checkbox__control:before { background-color: var(--accent); } .fieldset { gap: calc(var(--spacing) * 6); flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: calc(var(--spacing) * 0); display: flex; } .fieldset__legend { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .fieldset__field-group { width: 100%; } :where(.fieldset__field-group > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } .fieldset__actions { align-items: center; gap: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1); display: flex; } .input-otp { align-items: center; gap: calc(var(--spacing) * 2); width: 100%; display: flex; position: relative; } .input-otp[data-disabled="true"] { cursor: not-allowed; opacity: .5; } .input-otp__group { min-width: calc(var(--spacing) * 0); align-items: center; gap: calc(var(--spacing) * 2); display: flex; } .input-otp__slot { height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 9.5); min-width: calc(var(--spacing) * 0); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; flex: 1; justify-content: center; align-items: center; display: flex; position: relative; } .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input-otp__slot:hover, .input-otp__slot[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .input-otp__slot[data-active="true"] { z-index: 10; background-color: var(--field-focus); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; outline-style: none; } .input-otp__slot[data-filled="true"] { background-color: var(--field-focus); } .input-otp__slot[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input-otp__slot[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input-otp__slot[data-invalid="true"]:focus, .input-otp__slot[data-invalid="true"]:focus-visible, .input-otp__slot[data-invalid="true"][data-focused="true"], .input-otp__slot[data-invalid="true"][data-focus-visible="true"], .input-otp__slot[data-invalid="true"]:focus-within, .input-otp__slot[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot[data-invalid="true"] { background-color: var(--field-focus); } .input-otp__slot-value { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-tracking: -.27px; letter-spacing: -.27px; animation: slot-value-in .25s var(--ease-smooth) both; transform-origin: bottom; } .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .input-otp__caret { height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * .5); background-color: var(--field-placeholder, var(--muted)); width: 2px; animation: 1.2s ease-out infinite caret-blink; position: absolute; } .input-otp__separator { border-radius: calc(var(--radius) * .5); background-color: var(--separator); flex-shrink: 0; width: 6px; height: 2px; } .input-otp--secondary .input-otp__slot { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-otp-slot-bg); --input-otp-slot-bg: var(--default); --input-otp-slot-bg-hover: var(--default-hover); --input-otp-slot-bg-focus: var(--default); } @media (hover: hover) { .input-otp--secondary .input-otp__slot:hover, .input-otp--secondary .input-otp__slot[data-hovered="true"] { background-color: var(--input-otp-slot-bg-hover); } } .input-otp--secondary .input-otp__slot[data-active="true"], .input-otp--secondary .input-otp__slot[data-filled="true"] { background-color: var(--input-otp-slot-bg-focus); } @keyframes slot-value-in { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .input { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; outline-style: none; } .input::placeholder { color: var(--field-placeholder, var(--muted)); } @media (min-width: 40rem) { .input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .input { border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input:hover:not(:focus):not(:focus-visible), .input[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .input:focus, .input[data-focused="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .input[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input[data-invalid="true"]:focus, .input[data-invalid="true"]:focus-visible, .input[data-invalid="true"][data-focused="true"], .input[data-invalid="true"][data-focus-visible="true"], .input[data-invalid="true"]:focus-within, .input[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-invalid="true"] { background-color: var(--field-focus); } .input:disabled, .input[data-disabled="true"], .input[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-bg); --input-bg: var(--default); --input-bg-hover: var(--default-hover); --input-bg-focus: var(--default); } @media (hover: hover) { .input--secondary:hover:not(:focus):not(:focus-visible), .input--secondary[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) { background-color: var(--input-bg-hover); } } .input--secondary:focus, .input--secondary[data-focused="true"] { background-color: var(--input-bg-focus); } .input--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input--secondary[data-invalid="true"]:focus, .input--secondary[data-invalid="true"]:focus-visible, .input--secondary[data-invalid="true"][data-focused="true"], .input--secondary[data-invalid="true"][data-focus-visible="true"], .input--secondary[data-invalid="true"]:focus-within, .input--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--secondary[data-invalid="true"] { background-color: var(--input-bg-focus); } .input--full-width { width: 100%; } .input-group { min-height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); outline-style: none; align-items: center; display: inline-flex; } .input-group:has([data-slot="input-group-textarea"]) { align-items: flex-start; height: auto; } .input-group { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input-group:hover:not(:focus-within), .input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .input-group:has([data-slot="input-group-input"]:focus), .input-group:has([data-slot="input-group-textarea"]:focus) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input-group[data-invalid="true"]:focus, .input-group[data-invalid="true"]:focus-visible, .input-group[data-invalid="true"][data-focused="true"], .input-group[data-invalid="true"][data-focus-visible="true"], .input-group[data-invalid="true"]:focus-within, .input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .input-group[data-disabled="true"], .input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :-webkit-any(.input-group:has([data-slot="input-group-input"]:-webkit-autofill), .input-group:has([data-slot="input-group-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } :is(.input-group:has([data-slot="input-group-input"]:autofill), .input-group:has([data-slot="input-group-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } .input-group__input { border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; } .input-group__input::placeholder { color: var(--field-placeholder, var(--muted)); } @media (min-width: 40rem) { .input-group__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .input-group:has([data-slot="input-group-prefix"]) .input-group__input { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline-start: calc(var(--spacing) * 0); } .input-group:has([data-slot="input-group-suffix"]) .input-group__input { border-start-end-radius: 0; border-end-end-radius: 0; padding-inline-end: calc(var(--spacing) * 0); } .input-group__input:focus, .input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .input-group__input:-webkit-autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:-webkit-autofill:hover { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:-webkit-autofill:active { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input:autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .input-group__input[data-slot="input-group-textarea"] { resize: vertical; min-height: 38px; } .input-group__prefix { height: 100%; padding-inline: calc(var(--spacing) * 3); color: var(--field-placeholder, var(--muted)); border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; border-inline-end-color: var(--field-border); border-inline-start: none; background-color: #0000; border-top: none; border-bottom: none; border-start-start-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--field-radius, calc(var(--radius) * 1.5)); justify-content: center; align-items: center; display: flex; } .input-group:has([data-slot="input-group-textarea"]) .input-group__prefix { align-items: flex-start; padding-top: .5rem; } .input-group__prefix { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); } .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .input-group__suffix { height: 100%; padding-inline: calc(var(--spacing) * 3); color: var(--field-placeholder, var(--muted)); border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; border-inline-start-color: var(--field-border); border-inline-end: none; background-color: #0000; border-top: none; border-bottom: none; border-start-start-radius: 0; border-start-end-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-end-end-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-end-start-radius: 0; justify-content: center; align-items: center; display: flex; } .input-group:has([data-slot="input-group-textarea"]) .input-group__suffix { align-items: flex-start; padding-top: .5rem; } .input-group__suffix { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); } .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-group-bg); --input-group-bg: var(--default); --input-group-bg-hover: var(--default-hover); --input-group-bg-focus: var(--default); } @media (hover: hover) { .input-group--secondary:hover:not(:focus-within), .input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--input-group-bg-hover); } } .input-group--secondary:has([data-slot="input-group-input"]:focus), .input-group--secondary:has([data-slot="input-group-textarea"]:focus) { background-color: var(--input-group-bg-focus); } .input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .input-group--secondary[data-invalid="true"]:focus, .input-group--secondary[data-invalid="true"]:focus-visible, .input-group--secondary[data-invalid="true"][data-focused="true"], .input-group--secondary[data-invalid="true"][data-focus-visible="true"], .input-group--secondary[data-invalid="true"]:focus-within, .input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--input-group-bg-focus); } .input-group--secondary [data-slot="input-group-input"], .input-group--secondary [data-slot="input-group-textarea"] { background-color: #0000; } .input-group--full-width { width: 100%; } .number-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.number-field[data-invalid="true"], .number-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .number-field [data-slot="label"] { width: fit-content; } .number-field__group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); outline-style: none; grid-template-columns: 1fr; align-items: center; display: grid; overflow: hidden; } .number-field__group:has([slot="decrement"]) { grid-template-columns: 40px 1fr; } .number-field__group:has([slot="increment"]) { grid-template-columns: 1fr 40px; } .number-field__group:has([slot="decrement"]):has([slot="increment"]) { grid-template-columns: 40px 1fr 40px; } .number-field__group { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .number-field__group:hover:not(:focus-within), .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .number-field__group[data-focus-within="true"], .number-field__group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .number-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .number-field__group[data-invalid="true"]:focus, .number-field__group[data-invalid="true"]:focus-visible, .number-field__group[data-invalid="true"][data-focused="true"], .number-field__group[data-invalid="true"][data-focus-visible="true"], .number-field__group[data-invalid="true"]:focus-within, .number-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .number-field__group[data-disabled="true"], .number-field__group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :-webkit-any(.number-field__group:has([data-slot="number-field-input"]:-webkit-autofill), .number-field__group:has([data-slot="number-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } :is(.number-field__group:has([data-slot="number-field-input"]:autofill), .number-field__group:has([data-slot="number-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } .number-field__input { min-width: calc(var(--spacing) * 0); border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; } @media (min-width: 40rem) { .number-field__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .number-field__group:has([slot="decrement"]) .number-field__input { border-start-start-radius: 0; border-end-start-radius: 0; } .number-field__group:has([slot="increment"]) .number-field__input { border-start-end-radius: 0; border-end-end-radius: 0; } .number-field__input:focus, .number-field__input:focus-visible { --tw-outline-style: none; outline-style: none; } .number-field__input:-webkit-autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:-webkit-autofill:hover { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:-webkit-autofill:active { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__input:autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .number-field__increment-button, .number-field__decrement-button { height: 100%; width: calc(var(--spacing) * 10); color: var(--field-foreground, var(--foreground)); --tw-outline-style: none; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); background-color: #0000; border-style: solid; border-radius: 0; outline-style: none; justify-content: center; align-items: center; display: flex; } :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .number-field__increment-button, .number-field__decrement-button { cursor: var(--cursor-interactive); } :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] { background-color: var(--field-foreground, var(--foreground)); } @supports (color: color-mix(in lab, red, red)) { :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] { background-color: color-mix(in oklab, var(--field-foreground, var(--foreground)) 10%, transparent); } } :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] { transform: scale(.97); } :is(.number-field__increment-button, .number-field__decrement-button):disabled, :is(.number-field__increment-button, .number-field__decrement-button)[data-disabled="true"], :is(.number-field__increment-button, .number-field__decrement-button)[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.number-field__increment-button, .number-field__decrement-button) [data-slot="number-field-increment-button-icon"], :is(.number-field__increment-button, .number-field__decrement-button) [data-slot="number-field-decrement-button-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .number-field__increment-button { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--field-placeholder, var(--muted)); border-start-start-radius: 0; border-start-end-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-end-end-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-end-start-radius: 0; } @supports (color: color-mix(in lab, red, red)) { .number-field__increment-button { border-color: color-mix(in oklab, var(--field-placeholder, var(--muted)) 15%, transparent); } } .number-field__decrement-button { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; border-color: var(--field-placeholder, var(--muted)); border-start-start-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--field-radius, calc(var(--radius) * 1.5)); } @supports (color: color-mix(in lab, red, red)) { .number-field__decrement-button { border-color: color-mix(in oklab, var(--field-placeholder, var(--muted)) 15%, transparent); } } .number-field--secondary .number-field__group { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--number-field-group-bg); --number-field-group-bg: var(--default); --number-field-group-bg-hover: var(--default-hover); --number-field-group-bg-focus: var(--default); } @media (hover: hover) { .number-field--secondary .number-field__group:hover:not(:focus-within), .number-field--secondary .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--number-field-group-bg-hover); } } .number-field--secondary .number-field__group:focus-within, .number-field--secondary .number-field__group[data-focus-within="true"] { background-color: var(--number-field-group-bg-focus); } .number-field--secondary .number-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .number-field--secondary .number-field__group[data-invalid="true"]:focus, .number-field--secondary .number-field__group[data-invalid="true"]:focus-visible, .number-field--secondary .number-field__group[data-invalid="true"][data-focused="true"], .number-field--secondary .number-field__group[data-invalid="true"][data-focus-visible="true"], .number-field--secondary .number-field__group[data-invalid="true"]:focus-within, .number-field--secondary .number-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--number-field-group-bg-focus); } .number-field--secondary .number-field__group [data-slot="number-field-input"] { background-color: #0000; } .number-field--full-width, .number-field__group--full-width { width: 100%; } .radio-group { flex-direction: column; display: flex; } .radio-group[data-orientation="vertical"] [data-slot="radio"] { margin-top: calc(var(--spacing) * 4); } .radio-group[data-orientation="horizontal"] { gap: calc(var(--spacing) * 4); flex-flow: wrap; } .radio-group--secondary .radio__control { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--radio-control-bg); --radio-control-bg: var(--default); --radio-control-bg-hover: var(--default-hover); } .radio:has([data-slot="radio-content"][data-hovered="true"]) :is(.radio-group--secondary .radio__control), .radio [data-slot="radio-content"][data-hovered="true"] :is(.radio-group--secondary .radio__control) { border-color: var(--field-border-hover); } .radio:not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before { background-color: var(--radio-control-bg); } .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before { background-color: var(--radio-control-bg-hover); } .radio { align-items: flex-start; gap: calc(var(--spacing) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-direction: column; display: flex; } .radio [data-slot="label"] { -webkit-user-select: none; user-select: none; } .radio .radio__content [data-slot="label"] { cursor: var(--cursor-interactive); } .radio > [data-slot="description"], .radio > [data-slot="field-error"] { width: 100%; min-width: calc(var(--spacing) * 0); cursor: default; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); -webkit-user-select: none; user-select: none; padding-inline-start: calc(var(--spacing) * 7); } .radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"], :is(.radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"]) [data-slot="description"], :is(.radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"]) [data-slot="field-error"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .radio__content { cursor: inherit; align-items: center; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline-style: none; display: inline-flex; position: relative; } .radio__control { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1); border-style: var(--tw-border-style); border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border, var(--border)); background-color: var(--field-background, var(--default)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; } .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .radio__control { cursor: var(--cursor-interactive); } .radio:has([data-slot="radio-content"][data-focus-visible="true"]) .radio__control, .radio [data-slot="radio-content"][data-focus-visible="true"] .radio__control { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .radio:has([data-slot="radio-content"][data-hovered="true"]) .radio__control, .radio [data-slot="radio-content"][data-hovered="true"] .radio__control { border-color: var(--field-border-hover); } .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(:has(input:checked)) .radio__control .radio__indicator:empty:before { background-color: var(--field-hover); } .radio:has([data-slot="radio-content"][data-pressed="true"]) .radio__control, .radio [data-slot="radio-content"][data-pressed="true"] .radio__control { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .radio[data-selected] .radio__control, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__control, .radio:has(input:checked) .radio__control { background-color: var(--accent); border-color: #0000; } .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__control, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__control, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__control { background-color: var(--accent-hover); } .radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus-visible, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focused="true"], :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focus-visible="true"], :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus-within, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus-visible, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focused="true"], :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focus-visible="true"], :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus-within, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio__indicator { inset: calc(var(--spacing) * 0); pointer-events: none; justify-content: center; align-items: center; display: flex; position: absolute; } .radio__indicator:empty:before { content: ""; border-radius: calc(var(--radius) * 1); background-color: var(--field-background, var(--default)); width: 100%; height: 100%; transition: scale .2s var(--ease-out), background-color .2s var(--ease-out); scale: 1; } .radio__indicator:empty:before:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .radio__indicator:empty:before:not(:is()) { transition-property: none; } } .radio[data-selected] .radio__indicator:empty:before, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty:before, .radio:has(input:checked) .radio__indicator:empty:before { background-color: var(--accent-foreground); scale: .4286; } .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty:before, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__indicator:empty:before, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty:before { scale: .5714; } .textfield { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.textfield[data-invalid="true"], .textfield[aria-invalid="true"]) [data-slot="description"] { display: none; } .textfield--full-width, .textfield--full-width [data-slot="input"], .textfield--full-width [data-slot="textarea"] { width: 100%; } .search-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.search-field[data-invalid="true"], .search-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .search-field [data-slot="label"] { width: fit-content; } .search-field[data-empty="true"] [data-slot="search-field-clear-button"] { pointer-events: none; opacity: 0; } .search-field__group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; align-items: center; display: inline-flex; position: relative; overflow: hidden; } .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .search-field__group:hover:not(:focus-within), .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .search-field__group[data-focus-within="true"], .search-field__group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; outline-style: none; } .search-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .search-field__group[data-invalid="true"]:focus, .search-field__group[data-invalid="true"]:focus-visible, .search-field__group[data-invalid="true"][data-focused="true"], .search-field__group[data-invalid="true"][data-focus-visible="true"], .search-field__group[data-invalid="true"]:focus-within, .search-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .search-field__group[data-disabled="true"], .search-field__group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :-webkit-any(.search-field__group:has([data-slot="search-field-input"]:-webkit-autofill), .search-field__group:has([data-slot="search-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } :is(.search-field__group:has([data-slot="search-field-input"]:autofill), .search-field__group:has([data-slot="search-field-input"]:autofill)) { background-color: var(--field-focus); border-color: var(--field-border-focus); } .search-field__input { border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; } @media (min-width: 40rem) { .search-field__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .search-field__input::-webkit-search-cancel-button { appearance: none; } .search-field__input::-webkit-search-decoration { appearance: none; } .search-field__group:has([data-slot="search-field-search-icon"]) .search-field__input { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline-start: calc(var(--spacing) * 2); } .search-field__group:has([slot="clear"]) .search-field__input { border-start-end-radius: 0; border-end-end-radius: 0; padding-inline-end: calc(var(--spacing) * 2); } .search-field__input:focus, .search-field__input:focus-visible { --tw-outline-style: none; outline-style: none; } .search-field__input:-webkit-autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:-webkit-autofill:hover { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:-webkit-autofill:active { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__input:autofill { -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out; box-shadow: inset 0 0 0 1000px #0000; } .search-field__search-icon { pointer-events: none; color: var(--field-placeholder, var(--muted)); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; margin-inline-start: calc(var(--spacing) * 3); margin-inline-end: calc(var(--spacing) * 0); } .search-field__clear-button { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; margin-inline-end: calc(var(--spacing) * 2); } .search-field__clear-button [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .search-field--secondary .search-field__group { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--search-field-group-bg); --search-field-group-bg: var(--default); --search-field-group-bg-hover: var(--default-hover); --search-field-group-bg-focus: var(--default); } @media (hover: hover) { .search-field--secondary .search-field__group:hover:not(:focus-within), .search-field--secondary .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--search-field-group-bg-hover); } } .search-field--secondary .search-field__group:focus-within, .search-field--secondary .search-field__group[data-focus-within="true"] { background-color: var(--search-field-group-bg-focus); } .search-field--secondary .search-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .search-field--secondary .search-field__group[data-invalid="true"]:focus, .search-field--secondary .search-field__group[data-invalid="true"]:focus-visible, .search-field--secondary .search-field__group[data-invalid="true"][data-focused="true"], .search-field--secondary .search-field__group[data-invalid="true"][data-focus-visible="true"], .search-field--secondary .search-field__group[data-invalid="true"]:focus-within, .search-field--secondary .search-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--search-field-group-bg-focus); } .search-field--secondary .search-field__group [data-slot="search-field-input"] { background-color: #0000; } .search-field--full-width, .search-field__group--full-width { width: 100%; } .textarea { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; outline-style: none; } .textarea::placeholder { color: var(--field-placeholder, var(--muted)); } @media (min-width: 40rem) { .textarea { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .textarea { border-width: var(--border-width-field); border-color: var(--field-border); min-height: 38px; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .textarea:hover:not(:focus):not(:focus-visible), .textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .textarea:focus, .textarea[data-focused="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .textarea[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .textarea[data-invalid="true"]:focus, .textarea[data-invalid="true"]:focus-visible, .textarea[data-invalid="true"][data-focused="true"], .textarea[data-invalid="true"][data-focus-visible="true"], .textarea[data-invalid="true"]:focus-within, .textarea[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-invalid="true"] { background-color: var(--field-focus); } .textarea:disabled, .textarea[data-disabled="true"], .textarea[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textarea--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--textarea-bg); --textarea-bg: var(--default); --textarea-bg-hover: var(--default-hover); --textarea-bg-focus: var(--default); } @media (hover: hover) { .textarea--secondary:hover:not(:focus):not(:focus-visible), .textarea--secondary[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--textarea-bg-hover); } } .textarea--secondary:focus, .textarea--secondary[data-focused="true"] { background-color: var(--textarea-bg-focus); } .textarea--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .textarea--secondary[data-invalid="true"]:focus, .textarea--secondary[data-invalid="true"]:focus-visible, .textarea--secondary[data-invalid="true"][data-focused="true"], .textarea--secondary[data-invalid="true"][data-focus-visible="true"], .textarea--secondary[data-invalid="true"]:focus-within, .textarea--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--secondary[data-invalid="true"] { background-color: var(--textarea-bg-focus); } .textarea--full-width { width: 100%; } .calendar { width: calc(var(--spacing) * 63); max-width: calc(var(--spacing) * 63); container-type: inline-size; } .calendar--week-view .calendar__cell, .calendar--day-view .calendar__cell { aspect-ratio: 1; place-self: center; width: 100%; height: auto; } .calendar--day-view .calendar__grid { flex-direction: column; display: flex; } .calendar--day-view .calendar__grid-header { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar--day-view .calendar__grid-header > tr { display: contents; } .calendar--day-view .calendar__grid-body { margin-top: calc(var(--spacing) * 1); grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar--day-view .calendar__grid-body > tr { display: contents; } .calendar--day-view .calendar__grid-body > tr:first-child > td { margin-top: calc(var(--spacing) * 0); } .calendar__header { padding-inline: calc(var(--spacing) * .5); padding-bottom: calc(var(--spacing) * 4); justify-content: space-between; align-items: center; display: flex; } .calendar__header:has(.calendar-year-picker__trigger[data-open="true"]) .calendar__nav-button { pointer-events: none; opacity: 0; } .calendar__heading { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); flex: 1; } .calendar__nav-button { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(var(--radius) * 2); color: var(--accent-soft-foreground); will-change: scale; transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); justify-content: center; align-items: center; display: flex; } .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar__nav-button { cursor: var(--cursor-interactive); } @media (hover: hover) { .calendar__nav-button:hover, .calendar__nav-button[data-hovered="true"] { background-color: var(--default); color: var(--accent-soft-foreground); } } .calendar__nav-button:active, .calendar__nav-button[data-pressed="true"] { transform: scale(.95); } .calendar__nav-button:focus-visible, .calendar__nav-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .calendar__nav-button:disabled, .calendar__nav-button[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .calendar__nav-button-icon { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .calendar__nav-button-icon:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .calendar__grid { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar__grid[aria-readonly="true"] .calendar__cell { pointer-events: none; } .calendar__grid-header, .calendar__grid-header > tr, .calendar__grid-body, .calendar__grid-body > tr { display: contents; } .calendar__grid-body > tr:first-child > td { margin-top: calc(var(--spacing) * 1); } .calendar__grid-row { display: contents; } .calendar__header-cell { padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); justify-content: center; align-items: center; display: flex; } .calendar__cell { aspect-ratio: 1; border-radius: calc(var(--radius) * 3); text-align: center; width: 100%; height: 100%; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; will-change: scale; transition: transform .25s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar__cell { cursor: var(--cursor-interactive); } .calendar__cell:focus-visible:not([data-focused]), .calendar__cell[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .calendar__cell[data-today="true"] { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } @media (hover: hover) { .calendar__cell[data-today="true"]:hover:not([data-selected="true"]), .calendar__cell[data-today="true"][data-hovered="true"]:not([data-selected="true"]) { background-color: var(--accent-soft-hover); } } .calendar__cell[data-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } .calendar__cell:active, .calendar__cell[data-pressed="true"] { background-color: var(--default); transform: scale(.95); } :is(.calendar__cell:active, .calendar__cell[data-pressed="true"])[data-selected="true"] { background-color: var(--accent-hover); } @media (hover: hover) { .calendar__cell:hover:not([data-selected="true"]), .calendar__cell[data-hovered="true"]:not([data-selected="true"]) { background-color: var(--default); } } .calendar__cell[data-outside-month="true"] { color: var(--muted); opacity: .5; } .calendar__cell[data-selected="true"][data-outside-month="true"] { background-color: var(--default); } .calendar__cell[data-unavailable="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .calendar__cell:disabled:not([data-outside-month="true"]), .calendar__cell[data-disabled="true"]:not([data-outside-month="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } .calendar__cell-indicator { bottom: calc(var(--spacing) * 1); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); width: 3px; height: 3px; translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .25); background-color: var(--muted); position: absolute; left: 50%; } [data-selected="true"] > .calendar__cell-indicator { background-color: var(--accent-foreground); } .range-calendar { width: calc(var(--spacing) * 63); max-width: calc(var(--spacing) * 63); container-type: inline-size; } .range-calendar--week-view .range-calendar__cell, .range-calendar--day-view .range-calendar__cell { aspect-ratio: 1; place-self: center; width: 100%; height: auto; } .range-calendar--day-view .range-calendar__grid { flex-direction: column; display: flex; } .range-calendar--day-view .range-calendar__grid-header { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .range-calendar--day-view .range-calendar__grid-header > tr { display: contents; } .range-calendar--day-view .range-calendar__grid-body { margin-top: calc(var(--spacing) * 1); grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .range-calendar--day-view .range-calendar__grid-body > tr { display: contents; } .range-calendar--day-view .range-calendar__grid-body > tr:first-child > td { margin-top: calc(var(--spacing) * 0); } .range-calendar__header { padding-inline: calc(var(--spacing) * .5); padding-bottom: calc(var(--spacing) * 4); justify-content: space-between; align-items: center; display: flex; } .range-calendar__header:has(.calendar-year-picker__trigger[data-open="true"]) .range-calendar__nav-button { pointer-events: none; opacity: 0; } .range-calendar__heading { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); flex: 1; } .range-calendar__nav-button { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(var(--radius) * 1.5); color: var(--accent-soft-foreground); will-change: scale; transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); justify-content: center; align-items: center; display: flex; } .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .range-calendar__nav-button { cursor: var(--cursor-interactive); } @media (hover: hover) { .range-calendar__nav-button:hover, .range-calendar__nav-button[data-hovered="true"] { background-color: var(--default); color: var(--accent-soft-foreground); } } .range-calendar__nav-button:active, .range-calendar__nav-button[data-pressed="true"] { transform: scale(.95); } .range-calendar__nav-button:focus-visible, .range-calendar__nav-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .range-calendar__nav-button:disabled, .range-calendar__nav-button[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .range-calendar__nav-button-icon { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .range-calendar__nav-button-icon:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .range-calendar__grid { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .range-calendar__grid[aria-readonly="true"] .range-calendar__cell { pointer-events: none; } .range-calendar__grid-header, .range-calendar__grid-header > tr, .range-calendar__grid-body, .range-calendar__grid-body > tr { display: contents; } .range-calendar__grid-body > tr:first-child > td { margin-top: calc(var(--spacing) * 1); } .range-calendar__grid-row { display: contents; } .range-calendar__header-cell { padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); justify-content: center; align-items: center; display: flex; } .range-calendar__cell { z-index: 1; margin-inline: calc(var(--spacing) * 0); border-radius: calc(var(--radius) * 3); padding: calc(var(--spacing) * 0); --tw-outline-style: none; cursor: var(--cursor-interactive); will-change: background-color, border-color; transition: box-shadow .1s var(--ease-out), border-color .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; margin-block: 2px; position: relative; } .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .range-calendar__cell .range-calendar__cell-button { aspect-ratio: 1; border-radius: calc(var(--radius) * 3); width: 100%; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); -webkit-tap-highlight-color: transparent; will-change: scale; transition: scale .2s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); justify-content: center; align-items: center; display: flex; } .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .range-calendar__cell:focus-visible:not([data-focused]), .range-calendar__cell[data-focus-visible="true"] { z-index: 2; } :is(.range-calendar__cell:focus-visible:not([data-focused]), .range-calendar__cell[data-focus-visible="true"]) .range-calendar__cell-button { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .range-calendar__cell[data-today="true"] .range-calendar__cell-button { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } @media (hover: hover) { :is(.range-calendar__cell[data-today="true"]:hover:not([data-selected="true"]), .range-calendar__cell[data-today="true"][data-hovered="true"]:not([data-selected="true"])) .range-calendar__cell-button { background-color: var(--accent-soft-hover); } } .range-calendar__cell[data-selected="true"]:not([data-outside-month="true"]) { background-color: var(--accent-soft); border-radius: 0; } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) { border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"] { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *) { border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"] { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]), .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) { z-index: 2; } :is(.range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]), .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"])) .range-calendar__cell-button { background-color: var(--accent); color: var(--accent-foreground); } .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]) { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } :is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"]) .range-calendar__cell-button { scale: .9; } :is(:is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"])[data-selection-start="true"], :is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"])[data-selection-end="true"]) .range-calendar__cell-button { background-color: var(--accent-hover); } @media (hover: hover) { :is(.range-calendar__cell:hover:not([data-selected="true"]), .range-calendar__cell[data-hovered="true"]:not([data-selected="true"])) .range-calendar__cell-button { background-color: var(--default); } } .range-calendar__cell[data-outside-month="true"] { color: var(--muted); opacity: .5; } .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not([data-selection-start="true"], [data-selection-end="true"]) { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not([data-selection-start="true"], [data-selection-end="true"]) { background-color: color-mix(in oklab, var(--default) 20%, transparent); } } .range-calendar__cell[data-unavailable="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .range-calendar__cell:disabled:not([data-outside-month="true"]), .range-calendar__cell[data-disabled="true"]:not([data-outside-month="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"] { border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"], .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"] { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"] { border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); } .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"][data-outside-month="true"], .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"][data-selection-end="true"] { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .range-calendar__cell-indicator { bottom: calc(var(--spacing) * 1); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); width: 3px; height: 3px; translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .25); background-color: var(--muted); position: absolute; left: 50%; } [data-selected="true"] > .range-calendar__cell-indicator { background-color: var(--accent-foreground); } .calendar:has(.calendar-year-picker__year-grid), .range-calendar:has(.calendar-year-picker__year-grid) { position: relative; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] { will-change: opacity; transition: opacity .15s var(--ease-out), visibility 0s linear; } :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"] { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s var(--ease-out), visibility 0s linear .15s; } :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__trigger { justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 1); border-radius: calc(var(--radius) * 1); --tw-outline-style: none; cursor: var(--cursor-interactive); touch-action: manipulation; outline-style: none; flex: 1; display: flex; } .calendar-year-picker__trigger:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .calendar-year-picker__trigger-heading { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition: color .15s var(--ease-out); } .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__trigger-indicator { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--accent-soft-foreground); } .calendar-year-picker__trigger-indicator:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { transform: rotate(180deg); } .calendar-year-picker__trigger-indicator { transition: transform .15s var(--ease-out); } .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator { transform: rotate(90deg); } .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading { color: var(--accent-soft-foreground); } .calendar-year-picker__year-grid { pointer-events: none; scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); align-content: flex-start; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 1); opacity: 0; will-change: opacity; grid-template-columns: repeat(3, 1fr); display: grid; position: absolute; inset-inline-start: calc(var(--spacing) * 0); inset-inline-end: calc(var(--spacing) * 0); overflow-y: auto; } .calendar-year-picker__year-grid[data-open="true"] { pointer-events: auto; opacity: 1; transition: opacity .2s var(--ease-out) 50ms; } .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__year-cell { height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 3); padding-inline: calc(var(--spacing) * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out); transform-origin: center; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; justify-content: center; align-items: center; display: inline-flex; position: relative; } .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .calendar-year-picker__year-cell { cursor: var(--cursor-interactive); } @media (hover: hover) and (pointer: fine) { .calendar-year-picker__year-cell:is(:hover, [data-hovered="true"]):not([data-selected="true"]) { background-color: var(--default); color: var(--default-foreground); } } .calendar-year-picker__year-cell[data-selected="true"], .calendar-year-picker__year-cell[aria-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } @media (hover: hover) and (pointer: fine) { :is(.calendar-year-picker__year-cell[data-selected="true"], .calendar-year-picker__year-cell[aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent-hover); } } .calendar-year-picker__year-cell:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .date-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.date-field[data-invalid="true"], .date-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .date-field [data-slot="label"] { width: fit-content; } .date-field--full-width { width: 100%; } .time-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.time-field[data-invalid="true"], .time-field[aria-invalid="true"]) [data-slot="description"] { display: none; } .time-field [data-slot="label"] { width: fit-content; } .time-field--full-width { width: 100%; } .date-input-group { height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; align-items: center; display: inline-flex; overflow: hidden; } .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .date-input-group:hover:not(:focus-within), .date-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .date-input-group[data-focus-within="true"]:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])), .date-input-group:focus-within:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; outline-style: none; } .date-input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .date-input-group[data-invalid="true"]:focus, .date-input-group[data-invalid="true"]:focus-visible, .date-input-group[data-invalid="true"][data-focused="true"], .date-input-group[data-invalid="true"][data-focus-visible="true"], .date-input-group[data-invalid="true"]:focus-within, .date-input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"] { background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } .date-input-group[data-disabled="true"], .date-input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-input-group__input { cursor: text; border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; outline-style: none; flex: 1; align-items: center; gap: 1px; display: flex; } @media (min-width: 40rem) { .date-input-group__input { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .date-input-group:has([data-slot="date-input-group-prefix"]) .date-input-group__input { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline-start: calc(var(--spacing) * 2); } .date-input-group:has([data-slot="date-input-group-suffix"]) .date-input-group__input { border-start-end-radius: 0; border-end-end-radius: 0; padding-inline-end: calc(var(--spacing) * 2); } .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="start"] { flex: none; padding-inline-end: calc(var(--spacing) * 0); } .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="end"] { padding-inline-start: calc(var(--spacing) * 0); } .date-input-group__input:focus, .date-input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .date-input-group__input-container { scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; flex: 1; align-items: center; width: fit-content; display: flex; overflow: auto clip; } .date-input-group__segment { border-radius: calc(var(--radius) * .75); padding-inline: calc(var(--spacing) * .5); text-align: end; text-wrap: nowrap; --tw-outline-style: none; outline-style: none; display: inline-block; } .date-input-group__segment[data-type="literal"] { padding: calc(var(--spacing) * 0); color: var(--muted); } .date-input-group__segment[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .date-input-group__segment:focus, .date-input-group__segment[data-focused="true"] { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } .date-input-group__segment[data-disabled="true"] { opacity: .5; } .date-input-group__segment[data-invalid="true"] { color: var(--danger); } .date-input-group__segment[data-invalid="true"]:focus, .date-input-group__segment[data-invalid="true"][data-focused="true"] { background-color: var(--danger-soft); color: var(--danger-soft-foreground); } .date-input-group__prefix { pointer-events: none; color: var(--field-placeholder, var(--muted)); flex-shrink: 0; align-items: center; margin-inline-start: calc(var(--spacing) * 3); margin-inline-end: calc(var(--spacing) * 0); display: flex; } .date-input-group__suffix { pointer-events: none; color: var(--field-placeholder, var(--muted)); flex-shrink: 0; align-items: center; margin-inline-end: calc(var(--spacing) * 3); display: flex; } .date-input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--date-input-group-bg); --date-input-group-bg: var(--default); --date-input-group-bg-hover: var(--default-hover); --date-input-group-bg-focus: var(--default); } @media (hover: hover) { .date-input-group--secondary:hover:not(:focus-within), .date-input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--date-input-group-bg-hover); } } .date-input-group--secondary:focus-within, .date-input-group--secondary[data-focus-within="true"] { background-color: var(--date-input-group-bg-focus); } .date-input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } .date-input-group--secondary[data-invalid="true"]:focus, .date-input-group--secondary[data-invalid="true"]:focus-visible, .date-input-group--secondary[data-invalid="true"][data-focused="true"], .date-input-group--secondary[data-invalid="true"][data-focus-visible="true"], .date-input-group--secondary[data-invalid="true"]:focus-within, .date-input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary[data-invalid="true"] { border-color: var(--color-field-border-invalid); background-color: var(--date-input-group-bg-focus); } .date-input-group--secondary [data-slot="date-input-group-input"] { background-color: #0000; } .date-input-group--full-width { width: 100%; } .date-picker { gap: calc(var(--spacing) * 1); flex-direction: column; display: inline-flex; } .date-picker .date-input-group__suffix, .date-picker .date-input-group__prefix { pointer-events: auto; } .date-picker__trigger { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); width: 100%; padding: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: box-shadow .15s var(--ease-out); align-items: center; display: inline-flex; } .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-picker__trigger:focus-visible:not([data-focused]), .date-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .date-picker__trigger:disabled, .date-picker__trigger[data-disabled="true"], .date-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-picker__trigger-indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--field-placeholder, var(--muted)); justify-content: center; align-items: center; display: inline-flex; } .date-picker__popover { width: fit-content; transform-origin: var(--trigger-anchor-point); scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); overflow-y: auto; } .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-picker__popover { box-shadow: var(--overlay-shadow); border-radius: min(32px, calc(var(--radius) * 2.5)); } .date-picker__popover:focus-visible:not([data-focused]), .date-picker__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .date-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .date-picker__popover[data-entering="true"][data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .date-picker__popover[data-entering="true"][data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .date-picker__popover[data-entering="true"][data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .date-picker__popover[data-entering="true"][data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .date-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .date-picker__popover[data-exiting="true"], .date-picker__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .date-picker__popover .calendar__nav-button-icon, .date-picker__popover .range-calendar__nav-button-icon { rotate: 0deg; } .date-range-picker { gap: calc(var(--spacing) * 1); flex-direction: column; display: inline-flex; } .date-range-picker .date-input-group__suffix, .date-range-picker .date-input-group__prefix { pointer-events: auto; } .date-range-picker__trigger { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); width: 100%; padding: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: box-shadow .15s var(--ease-out); align-items: center; display: inline-flex; } .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-range-picker__trigger:focus-visible:not([data-focused]), .date-range-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .date-range-picker__trigger:disabled, .date-range-picker__trigger[data-disabled="true"], .date-range-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-range-picker__trigger-indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--field-placeholder, var(--muted)); justify-content: center; align-items: center; display: inline-flex; } .date-range-picker__range-separator { padding-inline: calc(var(--spacing) * 1); color: var(--field-placeholder, var(--muted)); -webkit-user-select: none; user-select: none; } .date-range-picker__popover { width: fit-content; transform-origin: var(--trigger-anchor-point); scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); overflow-y: auto; } .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-range-picker__popover { box-shadow: var(--overlay-shadow); border-radius: min(32px, calc(var(--radius) * 2.5)); } .date-range-picker__popover:focus-visible:not([data-focused]), .date-range-picker__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .date-range-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .date-range-picker__popover[data-entering="true"][data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .date-range-picker__popover[data-entering="true"][data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .date-range-picker__popover[data-entering="true"][data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .date-range-picker__popover[data-entering="true"][data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .date-range-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .date-range-picker__popover[data-exiting="true"], .date-range-picker__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .date-range-picker__popover .range-calendar__nav-button-icon, .date-range-picker__popover .calendar__nav-button-icon { rotate: 0deg; } .card { gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 4); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: min(32px, var(--radius-3xl)); flex-direction: column; display: flex; position: relative; overflow: visible; } .card__header { flex-direction: column; display: flex; } .card__title { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .card__description { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); color: var(--muted); } .card__content { gap: calc(var(--spacing) * 1); flex-direction: column; flex: 1; display: flex; } .card__footer { flex-direction: row; align-items: center; display: flex; } .card--transparent { --tw-border-style: none; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; border-style: none; } .card--default { background-color: var(--surface); } .card--secondary { background-color: var(--surface-secondary); } .card--tertiary { background-color: var(--surface-tertiary); } .header { width: 100%; padding-inline: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1.5); padding-bottom: calc(var(--spacing) * 1); text-align: start; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); } .separator { border-radius: calc(var(--radius) * .5); border-top-style: var(--tw-border-style); border-top-width: 0; border-bottom-style: var(--tw-border-style); background-color: var(--separator); border-bottom-width: 0; flex-shrink: 0; width: 100%; height: 1px; } .separator--horizontal { width: 100%; height: 1px; } .separator--vertical { height: auto; min-height: calc(var(--spacing) * 2); align-self: stretch; width: 1px; } .separator--default { background-color: var(--separator); } .separator--secondary { background-color: var(--separator-secondary); } .separator--tertiary { background-color: var(--separator-tertiary); } .surface { color: var(--foreground); position: relative; } .surface--transparent { background-color: #0000; } .surface--default { background-color: var(--surface); color: var(--surface-foreground); } .surface--secondary { background-color: var(--surface-secondary); color: var(--surface-secondary-foreground); } .surface--tertiary { background-color: var(--surface-tertiary); color: var(--surface-tertiary-foreground); } .avatar { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); background-color: var(--default); flex-shrink: 0; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; } .avatar__fallback { background-color: var(--default); width: 100%; height: 100%; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); justify-content: center; align-items: center; display: flex; } .avatar__image { inset: calc(var(--spacing) * 0); aspect-ratio: 1; width: 100%; height: 100%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; transition-duration: .25s; position: absolute; } .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .avatar--sm { --avatar-size: 2rem; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 2); } .avatar--sm .avatar__fallback { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .avatar--md { --avatar-size: 2.5rem; } .avatar--lg { --avatar-size: 3rem; width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); border-radius: calc(var(--radius) * 3); } .avatar--lg .avatar__fallback { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .avatar__fallback--accent { color: var(--accent-soft-foreground); } .avatar__fallback--default { color: var(--default-soft-foreground); } .avatar__fallback--success { color: var(--success-soft-foreground); } .avatar__fallback--warning { color: var(--warning-soft-foreground); } .avatar__fallback--danger { color: var(--danger-soft-foreground); } .avatar--soft { background-color: #0000; } .avatar--soft .avatar__fallback--accent { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } .avatar--soft .avatar__fallback--success { background-color: var(--success-soft); color: var(--success-soft-foreground); } .avatar--soft .avatar__fallback--warning { background-color: var(--warning-soft); color: var(--warning-soft-foreground); } .avatar--soft .avatar__fallback--default { background-color: var(--default-soft); color: var(--default-soft-foreground); } .avatar--soft .avatar__fallback--danger { background-color: var(--danger-soft); color: var(--danger-soft-foreground); } .avatar-group { --avatar-group-overlap: .5rem; --avatar-group-seam: 2px; align-items: center; display: inline-flex; } .avatar-group--grid { gap: calc(var(--spacing) * 3); flex-wrap: wrap; } .avatar-group:not(.avatar-group--grid) > .avatar + .avatar, .avatar-group:not(.avatar-group--grid) > .avatar + .avatar-group__count { margin-inline-start: calc(-1 * var(--avatar-group-overlap, .5rem)); } .avatar-group__count { flex-shrink: 0; } .avatar-group--ring:not(.avatar-group--grid) > .avatar, .avatar-group--ring:not(.avatar-group--grid) > .avatar-group__count { box-shadow: 0 0 0 var(--avatar-group-seam, 2px) var(--background); position: relative; } .avatar-group--clip:not(.avatar-group--grid) > .avatar:not(:last-child) { --avatar-group-cut-center: calc(100% + (var(--avatar-size, 2.5rem) / 2) - var(--avatar-group-overlap, .5rem)); --avatar-group-cut-radius: calc((var(--avatar-size, 2.5rem) / 2) + var(--avatar-group-seam, 2px)); -webkit-mask-image: radial-gradient(circle at var(--avatar-group-cut-center) 50%, transparent var(--avatar-group-cut-radius), #000 var(--avatar-group-cut-radius)); -webkit-mask-image: radial-gradient(circle at var(--avatar-group-cut-center) 50%, transparent var(--avatar-group-cut-radius), #000 var(--avatar-group-cut-radius)); -webkit-mask-image: radial-gradient(circle at var(--avatar-group-cut-center) 50%, transparent var(--avatar-group-cut-radius), #000 var(--avatar-group-cut-radius)); mask-image: radial-gradient(circle at var(--avatar-group-cut-center) 50%, transparent var(--avatar-group-cut-radius), #000 var(--avatar-group-cut-radius)); } :is(.avatar-group--clip:not(.avatar-group--grid):dir(rtl) > .avatar:not(:last-child), :dir(rtl) .avatar-group--clip:not(.avatar-group--grid) > .avatar:not(:last-child)) { --avatar-group-cut-center: calc(0% - (var(--avatar-size, 2.5rem) / 2) + var(--avatar-group-overlap, .5rem)); } .avatar-group--clip:not(.avatar-group--grid) > .avatar:not(:last-child) .avatar__fallback { box-sizing: border-box; padding-inline-end: calc(var(--avatar-group-overlap, .5rem) * .35); } .alert-dialog__trigger { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .alert-dialog__trigger:focus-visible:not([data-focused]), .alert-dialog__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .alert-dialog__trigger:disabled, .alert-dialog__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .alert-dialog__trigger:active, .alert-dialog__trigger[data-pressed="true"] { transform: scale(.97); } .alert-dialog__backdrop { inset: calc(var(--spacing) * 0); z-index: var(--z-index-overlay); height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; display: flex; position: fixed; } .alert-dialog__backdrop[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out); transition-duration: .15s; transition-timing-function: var(--ease-out); --tw-enter-opacity: 0; } .alert-dialog__backdrop[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out); transition-duration: .1s; transition-timing-function: var(--ease-out); --tw-exit-opacity: 0; } .alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"] { will-change: opacity; } :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__backdrop--transparent { background-color: #0000; } .alert-dialog__backdrop--opaque { background-color: var(--backdrop); } .alert-dialog__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .alert-dialog__container { height: var(--visual-viewport-height); width: 100%; min-width: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 4); flex-direction: column; flex: 1; align-items: center; display: flex; } @media (min-width: 40rem) { .alert-dialog__container { width: fit-content; padding: calc(var(--spacing) * 10); } } .alert-dialog__container { pointer-events: none; } .alert-dialog__container[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .25s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-enter-opacity: 0; --tw-enter-scale: calc(105*1%); transition-duration: .25s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .alert-dialog__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(1*var(--spacing)); } @media (min-width: 40rem) { .alert-dialog__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(0*100%); } } .alert-dialog__container[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .alert-dialog__container[data-entering="true"][data-placement="center"] { --tw-enter-translate-y: calc(0*-100%); } .alert-dialog__container[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .alert-dialog__container[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-opacity: 0; --tw-exit-scale: .95; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"] { will-change: opacity,transform; } :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__dialog { min-height: calc(var(--spacing) * 0); background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); width: 100%; max-height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-radius: min(32px, var(--radius-3xl)); padding: calc(var(--spacing) * 6); pointer-events: auto; outline-style: none; flex-direction: column; display: flex; position: relative; overflow: clip; } .alert-dialog__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .alert-dialog__dialog[data-placement="auto"] { margin-block: auto; } } .alert-dialog__dialog[data-placement="center"] { margin-block: auto; } .alert-dialog__dialog[data-placement="bottom"] { margin-top: auto; } .alert-dialog__dialog[data-placement="top"] { margin-top: calc(var(--spacing) * 0); } .alert-dialog__dialog--xs { max-width: var(--container-xs); } .alert-dialog__dialog--sm { max-width: var(--container-sm); } .alert-dialog__dialog--md { max-width: var(--container-md); } .alert-dialog__dialog--lg { max-width: var(--container-lg); } .alert-dialog__dialog--cover { width: 100%; height: 100%; min-height: 100%; } .alert-dialog__header { gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .alert-dialog__header > .modal__icon { margin-bottom: calc(var(--spacing) * 0); } .alert-dialog__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .alert-dialog__icon { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .alert-dialog__icon [data-slot="alert-dialog-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .alert-dialog__icon--default { background-color: var(--default); color: var(--foreground); } .alert-dialog__icon--accent { background-color: var(--accent-soft); color: var(--accent-soft-foreground); } .alert-dialog__icon--success { background-color: var(--success-soft); color: var(--success-soft-foreground); } .alert-dialog__icon--warning { background-color: var(--warning-soft); color: var(--warning-soft-foreground); } .alert-dialog__icon--danger { background-color: var(--danger-soft); color: var(--danger-soft-foreground); } .alert-dialog__body { min-height: calc(var(--spacing) * 0); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; color: var(--muted); margin: -3px; margin-block: calc(var(--spacing) * 0); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1; padding: 3px; line-height: 1.43; overflow-y: auto; } .alert-dialog__footer { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); flex-direction: row; display: flex; } .alert-dialog__close-trigger { inset-inline-end: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4); position: absolute; } .alert-dialog__header + .alert-dialog__body { margin-top: calc(var(--spacing) * 2); } .alert-dialog__header + .alert-dialog__footer, .alert-dialog__body + .alert-dialog__footer { margin-top: calc(var(--spacing) * 5); } .drawer__trigger { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .drawer__trigger:focus-visible:not([data-focused]), .drawer__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .drawer__trigger:disabled, .drawer__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .drawer__trigger:active, .drawer__trigger[data-pressed="true"] { transform: scale(.97); } .drawer__backdrop { inset: calc(var(--spacing) * 0); z-index: var(--z-index-overlay); height: var(--visual-viewport-height); opacity: 1; width: 100%; transition: opacity .25s cubic-bezier(.32, .72, 0, 1); position: fixed; } .drawer__backdrop[data-entering="true"] { opacity: 0; } .drawer__backdrop[data-exiting="true"] { opacity: 0; transition-duration: .2s; transition-timing-function: cubic-bezier(.32, .72, 0, 1); } .drawer__backdrop[data-exiting="true"], .drawer__backdrop[data-entering="true"] { will-change: opacity; } @media (prefers-reduced-motion: reduce) { .drawer__backdrop { transition: none; } } .drawer__backdrop--transparent { background-color: #0000; } .drawer__backdrop--opaque { background-color: var(--backdrop); } .drawer__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .drawer__content { pointer-events: none; inset: calc(var(--spacing) * 0); z-index: var(--z-index-overlay); height: var(--visual-viewport-height); width: 100%; min-width: calc(var(--spacing) * 0); display: flex; position: fixed; } .drawer__content--bottom { align-items: flex-end; } .drawer__content--top { align-items: flex-start; } .drawer__content--left { justify-content: flex-start; } .drawer__content--right { justify-content: flex-end; } .drawer__dialog { background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; padding: calc(var(--spacing) * 6); pointer-events: auto; --drawer-enter-duration: .25s; --drawer-exit-duration: .2s; --drawer-enter-ease: cubic-bezier(.32, .72, 0, 1); --drawer-exit-ease: cubic-bezier(.32, .72, 0, 1); will-change: translate; transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease); outline-style: none; flex-direction: column; display: flex; position: relative; } @media (prefers-reduced-motion: reduce) { .drawer__dialog { transition: none; } } .drawer__dialog[data-placement="bottom"] { border-start-start-radius: min(32px, var(--radius-2xl)); border-start-end-radius: min(32px, var(--radius-2xl)); width: 100%; max-height: 85vh; } .drawer__dialog[data-placement="top"] { border-end-end-radius: min(32px, var(--radius-2xl)); border-end-start-radius: min(32px, var(--radius-2xl)); width: 100%; max-height: 85vh; } .drawer__dialog[data-placement="left"] { height: 100%; width: calc(var(--spacing) * 80); border-radius: 0; max-width: 85vw; } @media (min-width: 40rem) { .drawer__dialog[data-placement="left"] { width: calc(var(--spacing) * 96); } } .drawer__dialog[data-placement="right"] { height: 100%; width: calc(var(--spacing) * 80); border-radius: 0; max-width: 85vw; } @media (min-width: 40rem) { .drawer__dialog[data-placement="right"] { width: calc(var(--spacing) * 96); } } [data-exiting="true"] .drawer__dialog { transition-duration: var(--drawer-exit-duration); transition-timing-function: var(--drawer-exit-ease); } .drawer__content--left .drawer__dialog, .drawer__content--right .drawer__dialog, .drawer__content--top .drawer__dialog, .drawer__content--bottom .drawer__dialog { translate: 0; } .drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog { translate: -100%; } .drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog { translate: 100%; } .drawer__content--top[data-entering="true"] .drawer__dialog, .drawer__content--top[data-exiting="true"] .drawer__dialog { translate: 0 -100%; } .drawer__content--bottom[data-entering="true"] .drawer__dialog, .drawer__content--bottom[data-exiting="true"] .drawer__dialog { translate: 0 100%; } .drawer__dialog--top { padding-bottom: calc(var(--spacing) * 2); } .drawer__dialog--top .drawer__handle { padding-bottom: calc(var(--spacing) * 0); } .drawer__header { gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .drawer__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .drawer__body { min-height: calc(var(--spacing) * 0); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; color: var(--muted); margin: -3px; margin-block: calc(var(--spacing) * 0); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1; padding: 3px; line-height: 1.43; overflow-y: auto; } .drawer__footer { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); flex-direction: row; display: flex; } .drawer__handle { padding-bottom: calc(var(--spacing) * 2); justify-content: center; align-items: center; display: flex; } .drawer__handle > [data-slot="drawer-handle-bar"] { height: calc(var(--spacing) * 1); width: calc(var(--spacing) * 9); border-radius: calc(var(--radius) * .25); background-color: var(--separator); } .drawer__close-trigger { inset-inline-end: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4); position: absolute; } .drawer__header + .drawer__body { margin-top: calc(var(--spacing) * 2); } .drawer__header + .drawer__footer, .drawer__body + .drawer__footer { margin-top: calc(var(--spacing) * 5); } .drawer__handle + .drawer__header, .drawer__handle + .drawer__body { margin-top: calc(var(--spacing) * 0); } .modal__trigger { cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .modal__trigger:focus-visible:not([data-focused]), .modal__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .modal__trigger:disabled, .modal__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .modal__trigger:active, .modal__trigger[data-pressed="true"] { transform: scale(.97); } .modal__backdrop { inset: calc(var(--spacing) * 0); z-index: var(--z-index-overlay); height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; display: flex; position: fixed; } .modal__backdrop[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out); transition-duration: .15s; transition-timing-function: var(--ease-out); --tw-enter-opacity: 0; } .modal__backdrop[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out); transition-duration: .1s; transition-timing-function: var(--ease-out); --tw-exit-opacity: 0; } .modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"] { will-change: opacity; } :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__backdrop--transparent { background-color: #0000; } .modal__backdrop--opaque { background-color: var(--backdrop); } .modal__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .modal__container { height: var(--visual-viewport-height); width: 100%; min-width: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 4); flex-direction: column; flex: 1; align-items: center; display: flex; } @media (min-width: 40rem) { .modal__container { width: fit-content; padding: calc(var(--spacing) * 10); } } .modal__container { pointer-events: none; } .modal__container[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .25s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-enter-opacity: 0; --tw-enter-scale: calc(105*1%); transition-duration: .25s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .modal__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(1*var(--spacing)); } @media (min-width: 40rem) { .modal__container[data-entering="true"][data-placement="auto"] { --tw-enter-translate-y: calc(0*100%); } } .modal__container[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .modal__container[data-entering="true"][data-placement="center"] { --tw-enter-translate-y: calc(0*-100%); } .modal__container[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .modal__container[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-opacity: 0; --tw-exit-scale: .95; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .modal__container[data-exiting="true"], .modal__container[data-entering="true"] { will-change: opacity,transform; } :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__container--scroll-outside { height: auto; min-height: var(--visual-viewport-height); overflow-y: visible; } .modal__backdrop:has(.modal__container--scroll-outside) { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); -webkit-overflow-scrolling: touch; align-items: flex-start; overflow-y: auto; } .modal__container--full { padding: calc(var(--spacing) * 0); } @media (min-width: 40rem) { .modal__container--full { padding: calc(var(--spacing) * 0); } } .modal__container--full[data-entering="true"] { --tw-enter-translate-y: calc(0*100%); --tw-enter-scale: 1; } @media (min-width: 40rem) { .modal__container--full[data-entering="true"] { --tw-enter-translate-y: calc(0*100%); } } .modal__container--full[data-exiting="true"] { --tw-exit-scale: 1; } .modal__dialog { background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); width: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-radius: min(32px, var(--radius-3xl)); padding: calc(var(--spacing) * 6); pointer-events: auto; outline-style: none; flex-direction: column; display: flex; position: relative; } .modal__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .modal__dialog[data-placement="auto"] { margin-block: auto; } } .modal__dialog[data-placement="center"] { margin-block: auto; } .modal__dialog[data-placement="bottom"] { margin-top: auto; } .modal__dialog[data-placement="top"] { margin-top: calc(var(--spacing) * 0); } .modal__dialog--scroll-inside { max-height: 100%; min-height: calc(var(--spacing) * 0); overflow: clip; } .modal__dialog--scroll-outside { height: auto; min-height: calc(var(--spacing) * 0); flex-shrink: 0; } .modal__dialog--xs { max-width: var(--container-xs); } .modal__dialog--sm { max-width: var(--container-sm); } .modal__dialog--md { max-width: var(--container-md); } .modal__dialog--lg { max-width: var(--container-lg); } .modal__dialog--cover { width: 100%; height: 100%; min-height: 100%; } .modal__dialog--full { --tw-shadow: 0 0 #0000; width: 100%; height: 100%; min-height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: 0; } .modal__header { gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .modal__header > .modal__icon { margin-bottom: calc(var(--spacing) * 0); } .modal__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .modal__icon { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: calc(var(--radius) * 3); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .modal__body { min-height: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; color: var(--muted); margin: -3px; margin-block: calc(var(--spacing) * 0); flex: 1; padding: 3px; line-height: 1.43; overflow: visible; } .modal__body--scroll-inside { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-y: auto; } .modal__body--scroll-outside { overflow-y: visible; } .modal__footer { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); flex-direction: row; display: flex; } .modal__close-trigger { inset-inline-end: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4); position: absolute; } .modal__header + .modal__body { margin-top: calc(var(--spacing) * 2); } .modal__header + .modal__footer, .modal__body + .modal__footer { margin-top: calc(var(--spacing) * 5); } .popover { transform-origin: var(--trigger-anchor-point); background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--overlay-shadow); } .popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .popover[data-exiting="true"], .popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .popover__dialog { padding: calc(var(--spacing) * 4); --tw-outline-style: none; outline-style: none; } .popover__heading { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .popover__trigger { transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .popover__trigger { cursor: var(--cursor-interactive); } .popover__trigger:focus-visible:not([data-focused]), .popover__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .popover__trigger:disabled, .popover__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tooltip { max-width: var(--container-xs); transform-origin: var(--trigger-anchor-point); background-color: var(--overlay); padding: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); word-break: break-all; border-radius: min(32px, var(--radius-xl)); box-shadow: var(--overlay-shadow); } .tooltip[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .tooltip[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .tooltip[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .tooltip[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .tooltip[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .tooltip[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .tooltip[data-exiting="true"], .tooltip[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .tooltip [data-slot="overlay-arrow"] { stroke: var(--border); } @supports (color: color-mix(in lab, red, red)) { .tooltip [data-slot="overlay-arrow"] { stroke: color-mix(in oklab, var(--border) 40%, transparent); } } .tooltip [data-slot="overlay-arrow"] { fill: var(--overlay); } .tooltip[data-placement="bottom"] [data-slot="overlay-arrow"] { rotate: 180deg; } .tooltip[data-placement="left"] [data-slot="overlay-arrow"] { rotate: -90deg; } .tooltip[data-placement="right"] [data-slot="overlay-arrow"] { rotate: 90deg; } .tooltip__trigger { transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); display: inline-block; } .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tooltip__trigger:focus-visible:not([data-focused]), .tooltip__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .combo-box { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.combo-box[data-invalid="true"], .combo-box[aria-invalid="true"]) [data-slot="description"] { display: none; } .combo-box [data-slot="label"] { width: fit-content; } .combo-box [data-slot="input"] { min-width: calc(var(--spacing) * 0); flex: 1; } .combo-box [data-slot="input"]:has( + .combo-box__trigger) { padding-inline-end: calc(var(--spacing) * 7); } .combo-box [data-slot="input"]:focus, .combo-box [data-slot="input"][data-focus] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .combo-box [data-slot="input"]:disabled, .combo-box [data-slot="input"][data-disabled], .combo-box [data-slot="input"][aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .combo-box__input-group { isolation: isolate; align-items: center; display: inline-flex; position: relative; } .combo-box__value { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); overflow-wrap: break-word; color: var(--field-foreground, var(--foreground)); } .combo-box__value:empty { display: none; } .combo-box__value[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .combo-box__value [data-slot="list-box-item-indicator"] { display: none; } .combo-box__trigger { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); height: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); cursor: pointer; color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; -webkit-tap-highlight-color: transparent; --tw-border-style: none; --tw-outline-style: none; inset-inline-end: calc(var(--spacing) * 0); background-color: #0000; border-style: none; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; padding-inline-end: calc(var(--spacing) * 2); transition-duration: .15s; display: flex; position: absolute; top: 50%; } @media (hover: hover) { .combo-box__trigger:hover, .combo-box__trigger[data-hovered="true"] { color: var(--field-foreground, var(--foreground)); } } .combo-box__trigger:focus-visible:not([data-focused]), .combo-box__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-radius: .25rem; outline-style: none; } .combo-box__trigger[data-pressed="true"] { opacity: .7; } .combo-box__trigger:disabled, .combo-box__trigger[data-disabled], .combo-box__trigger[aria-disabled="true"] { cursor: not-allowed; opacity: .5; } .combo-box__trigger [data-slot="combo-box-trigger-default-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; transition-duration: .15s; } .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .combo-box__trigger[data-open="true"] [data-slot="combo-box-trigger-default-icon"] { rotate: 180deg; } .combo-box__popover { min-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: calc(var(--spacing) * 1); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--overlay-shadow); overflow-y: auto; } .combo-box__popover:focus-visible:not([data-focused]), .combo-box__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .combo-box__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .combo-box__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .combo-box__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .combo-box__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .combo-box__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .combo-box__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .combo-box__popover[data-exiting="true"], .combo-box__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .combo-box__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .combo-box__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .combo-box__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .combo-box__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .combo-box__popover [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .combo-box__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .combo-box__popover [data-slot="list-box-item"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } .combo-box--full-width, .combo-box__input-group--full-width { width: 100%; } .select { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } :is(.select[data-invalid="true"], .select[aria-invalid="true"]) [data-slot="description"] { display: none; } .select [data-slot="label"] { width: fit-content; } .select__trigger { isolation: isolate; min-height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: inline-flex; position: relative; } .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .select__trigger { cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--field-border); } .select__trigger:has(.select__indicator) { padding-inline-end: calc(var(--spacing) * 7); } @media (hover: hover) { .select__trigger:hover:not(:has(.select__clear-button:hover)), .select__trigger[data-hovered="true"]:not(:has(.select__clear-button:hover)) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .select__trigger:focus-visible:not([data-focused]), .select__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus-visible, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focused="true"], :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focus-visible="true"], :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus-within, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger { background-color: var(--field-focus); } .select__trigger:disabled, .select__trigger[data-disabled="true"], .select__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .select--secondary .select__trigger { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--select-trigger-bg); --select-trigger-bg: var(--default); --select-trigger-bg-hover: var(--default-hover); --select-trigger-bg-focus: var(--default); } @media (hover: hover) { .select--secondary .select__trigger:hover:not(:has(.select__clear-button:hover)), .select--secondary .select__trigger[data-hovered="true"]:not(:has(.select__clear-button:hover)) { background-color: var(--select-trigger-bg-hover); } } .select--secondary .select__trigger:focus-visible:not([data-focused]), .select--secondary .select__trigger[data-focus-visible="true"], .select[data-invalid="true"] :is(.select--secondary .select__trigger), .select[aria-invalid="true"] :is(.select--secondary .select__trigger) { background-color: var(--select-trigger-bg-focus); } .select__value { text-align: start; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); overflow-wrap: break-word; color: currentColor; flex: 1; } @media (min-width: 40rem) { .select__value { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .select__value[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .select__value [data-slot="list-box-item-indicator"] { display: none; } .select__clear-button { isolation: isolate; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); transform-origin: center; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); border-radius: calc(var(--radius) * 1.5); padding: calc(var(--spacing) * 1); color: var(--muted); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); background-color: #0000; flex-shrink: 0; justify-content: center; align-self: center; align-items: center; display: inline-flex; position: relative; } .select__clear-button:after { inset: calc(var(--spacing) * -.5); content: ""; position: absolute; } .select__clear-button:not([data-empty="true"]) { transition: opacity .15s var(--ease-smooth); } .select__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .select__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .select__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .select__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .select__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .select__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .select__clear-button[data-empty="true"] { pointer-events: none; opacity: 0; } .select__clear-button [data-slot="select-clear-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } @media (hover: hover) { .select__clear-button:hover, .select__clear-button[data-hovered="true"] { background-color: var(--default-hover); } } .select__clear-button:active, .select__clear-button[data-pressed="true"] { transform: scale(.93); } .select__indicator { inset-block: calc(var(--spacing) * 0); color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; flex-shrink: 0; justify-content: center; align-items: center; margin-block: auto; transition-duration: .15s; display: flex; position: absolute; inset-inline-end: calc(var(--spacing) * 2); } .select__indicator[data-open="true"] { rotate: 180deg; } .select__indicator[data-slot="select-default-indicator"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .select__popover { min-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: calc(var(--spacing) * 1); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--overlay-shadow); overflow-y: auto; } .select__popover:focus-visible:not([data-focused]), .select__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .select__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .15s; transition-timing-function: ease; } .select__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .select__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .select__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .select__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .select__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: ease; } .select__popover[data-exiting="true"], .select__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .select__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .select__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .select__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .select__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .select__popover [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .select__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .select__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], .select__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } .select--full-width, .select__trigger--full-width { width: 100%; } .autocomplete { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .autocomplete__trigger { isolation: isolate; min-height: calc(var(--spacing) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: inline-flex; position: relative; } .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .autocomplete__trigger { cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--field-border); } .autocomplete__trigger:has(.autocomplete__indicator) { padding-inline-end: calc(var(--spacing) * 7); } @media (hover: hover) { .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)), .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--field-hover); border-color: var(--field-border-hover); } } .autocomplete__trigger:focus-visible:not([data-focused]), .autocomplete__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--field-border-focus); background-color: var(--field-focus); outline-style: none; } .autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus-visible, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focused="true"], :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focus-visible="true"], :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus-within, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger { background-color: var(--field-focus); } .autocomplete__trigger:disabled, .autocomplete__trigger[data-disabled="true"], .autocomplete__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .autocomplete--secondary .autocomplete__trigger { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--autocomplete-trigger-bg); --autocomplete-trigger-bg: var(--default); --autocomplete-trigger-bg-hover: var(--default-hover); --autocomplete-trigger-bg-focus: var(--default); } @media (hover: hover) { .autocomplete--secondary .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)), .autocomplete--secondary .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--autocomplete-trigger-bg-hover); } } .autocomplete--secondary .autocomplete__trigger:focus-visible:not([data-focused]), .autocomplete--secondary .autocomplete__trigger[data-focus-visible="true"], .autocomplete[data-invalid="true"] :is(.autocomplete--secondary .autocomplete__trigger), .autocomplete[aria-invalid="true"] :is(.autocomplete--secondary .autocomplete__trigger) { background-color: var(--autocomplete-trigger-bg-focus); } .autocomplete__value { text-align: start; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); overflow-wrap: break-word; color: currentColor; flex: 1; } @media (min-width: 40rem) { .autocomplete__value { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .autocomplete__value[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } .autocomplete__value [data-slot="list-box-item-indicator"] { display: none; } .autocomplete__indicator { inset-block: calc(var(--spacing) * 0); color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; cursor: var(--cursor-interactive); flex-shrink: 0; justify-content: center; align-items: center; margin-block: auto; transition-duration: .15s; display: flex; position: absolute; inset-inline-end: calc(var(--spacing) * 2); } .autocomplete__indicator[data-open="true"] { rotate: 180deg; } .autocomplete__indicator[data-slot="autocomplete-default-indicator"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .autocomplete__popover { width: var(--trigger-width); max-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: calc(var(--spacing) * 1); overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 0); padding-top: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-outline-style: none; border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--overlay-shadow); outline-style: none; flex-direction: column; display: flex; overflow: hidden; } .autocomplete__popover:focus, .autocomplete__popover:focus-visible:not([data-focused]), .autocomplete__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .autocomplete__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .25s; --tw-ease: cubic-bezier(.32, .72, 0, 1); --tw-enter-opacity: 0; --tw-enter-scale: .95; transition-duration: .25s; transition-timing-function: cubic-bezier(.32, .72, 0, 1); } .autocomplete__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .autocomplete__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .autocomplete__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .autocomplete__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .autocomplete__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-scale: .95; --tw-exit-opacity: 0; pointer-events: none; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .autocomplete__popover[data-exiting="true"], .autocomplete__popover[data-entering="true"] { transition-property: opacity, transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); will-change: opacity,transform; } .autocomplete__popover [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } .autocomplete__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } .autocomplete__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } .autocomplete__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } .autocomplete__popover [data-slot="list-box"] { max-height: 320px; min-height: calc(var(--spacing) * 0); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; overflow-y: auto; } .autocomplete__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .autocomplete__popover [role="presentation"] > [data-slot="list-box-item"] { width: calc(100% - var(--spacing) * 3); } .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } .autocomplete__popover [data-slot="search-field"] { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); --tw-outline-style: none; outline-style: none; flex-shrink: 0; } .autocomplete__popover [data-slot="empty-state"] { text-align: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--overlay-foreground); } @supports (color: color-mix(in lab, red, red)) { .autocomplete__popover [data-slot="empty-state"] { color: color-mix(in oklab, var(--overlay-foreground) 60%, transparent); } } .autocomplete--full-width, .autocomplete__trigger--full-width { width: 100%; } .autocomplete__clear-button { isolation: isolate; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); transform-origin: center; border-radius: calc(var(--radius) * 1.5); padding: calc(var(--spacing) * 1); color: var(--muted); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); cursor: var(--cursor-interactive); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); background-color: #0000; flex-shrink: 0; justify-content: center; align-self: center; align-items: center; margin-inline-end: calc(var(--spacing) * 0); display: inline-flex; position: relative; } .autocomplete__clear-button:not([data-empty="true"]) { transition: opacity .15s var(--ease-smooth); } .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .autocomplete__clear-button[data-empty="true"] { pointer-events: none; opacity: 0; } .autocomplete__clear-button [data-slot="autocomplete-clear-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } @media (hover: hover) { .autocomplete__clear-button:hover, .autocomplete__clear-button[data-hovered="true"] { background-color: var(--default-hover); } } .autocomplete__clear-button:active, .autocomplete__clear-button[data-pressed="true"] { transform: scale(.93); } .kbd { height: calc(var(--spacing) * 6); align-items: center; display: inline-flex; } :where(.kbd > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } .kbd { border-radius: calc(var(--radius) * 1); background-color: var(--default); padding-inline: calc(var(--spacing) * 2); text-align: center; font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--muted); } :where(.kbd:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) { --tw-space-x-reverse: 1; } .kbd { word-spacing: -.25rem; } .kbd__abbr { justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none; display: flex; } .kbd__content { justify-content: center; align-items: center; display: flex; } .kbd--light { background-color: #0000; } .typography, .typography-prose { color: var(--foreground); } .typography-prose h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h4 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h5 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose h6 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography-prose p { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .typography-prose code { border-radius: calc(var(--radius) * .75); background-color: var(--default); padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * .5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--foreground); } .typography-prose a { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--link); text-underline-offset: 4px; text-decoration-line: underline; } .typography-prose blockquote { margin-top: calc(var(--spacing) * 4); border-inline-start-style: var(--tw-border-style); border-inline-start-width: 4px; border-color: var(--border); color: var(--muted); padding-inline-start: calc(var(--spacing) * 4); font-style: italic; } .typography-prose ul { margin-block: calc(var(--spacing) * 4); list-style-type: disc; } :where(.typography-prose ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } .typography-prose ul { padding-inline-start: calc(var(--spacing) * 6); } .typography-prose ol { margin-block: calc(var(--spacing) * 4); list-style-type: decimal; } :where(.typography-prose ol > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } .typography-prose ol { padding-inline-start: calc(var(--spacing) * 6); } .typography-prose li { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .typography-prose hr { margin-block: calc(var(--spacing) * 8); border-color: var(--separator); } .typography-prose pre { margin-block: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); background-color: var(--default); padding: calc(var(--spacing) * 4); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); overflow-x: auto; } .typography-prose strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--foreground); } .typography-prose em { font-style: italic; } .typography-prose img { margin-block: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 1.5); } .typography--h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h4 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h5 { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--h6 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .typography--body { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .typography--body-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .typography--body-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .typography--code { border-radius: calc(var(--radius) * .75); background-color: var(--default); padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * .5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--foreground); } .typography--align-start { text-align: start; } .typography--align-center { text-align: center; } .typography--align-end { text-align: end; } .typography--align-justify { text-align: justify; } .typography--color-default { color: var(--foreground); } .typography--color-muted { color: var(--muted); } .typography--truncate { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; } .typography--weight-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .typography--weight-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .typography--weight-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .typography--weight-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .scroll-shadow { --scroll-shadow-size: 40px; --scroll-shadow-scrollbar-size: 10px; --scroll-shadow-offset: 0px; position: relative; } @property --scroll-shadow-start-fade { syntax: ""; inherits: false; initial-value: 0; } @property --scroll-shadow-end-fade { syntax: ""; inherits: false; initial-value: 0; } @keyframes scroll-shadow-start-fade { from { --scroll-shadow-start-fade: 0px; } to { --scroll-shadow-start-fade: var(--scroll-shadow-size); } } @keyframes scroll-shadow-end-fade { from { --scroll-shadow-end-fade: var(--scroll-shadow-size); } to { --scroll-shadow-end-fade: 0px; } } .scroll-shadow--vertical { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overflow-y: auto; } .scroll-shadow--horizontal { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overflow-x: auto; } .scroll-shadow--fade.scroll-shadow--vertical:where([data-top-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"], [data-scroll-shadow-mode="auto"]) { -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; } .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] { --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] { --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll="true"] { --scroll-linear-gradient: #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal:where([data-left-scroll="true"], [data-right-scroll="true"], [data-left-right-scroll="true"], [data-scroll-shadow-mode="auto"]) { -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: 0 0, 0 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); } .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] { --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"]:dir(rtl) { --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] { --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"]:dir(rtl) { --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll="true"] { --scroll-linear-gradient: to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent; } .scroll-shadow--hide-scrollbar { scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; scrollbar-width: none; --scroll-shadow-scrollbar-size: 0px; } @supports (animation-timeline: scroll(self)) { .scroll-shadow.scroll-shadow--fade[data-scroll-shadow-mode="auto"] { animation: linear both scroll-shadow-start-fade, linear both scroll-shadow-end-fade; animation-range: var(--scroll-shadow-offset) calc(var(--scroll-shadow-offset) + var(--scroll-shadow-size)), calc(100% - var(--scroll-shadow-size) - var(--scroll-shadow-offset)) calc(100% - var(--scroll-shadow-offset)); } .scroll-shadow.scroll-shadow--fade.scroll-shadow--vertical[data-scroll-shadow-mode="auto"] { --scroll-linear-gradient: 180deg, transparent 0, #000 var(--scroll-shadow-start-fade), #000 calc(100% - var(--scroll-shadow-end-fade)), transparent 100%; animation-timeline: scroll(self), scroll(self); } .scroll-shadow.scroll-shadow--fade.scroll-shadow--horizontal[data-scroll-shadow-mode="auto"] { --scroll-linear-gradient: 90deg, transparent 0, #000 var(--scroll-shadow-start-fade), #000 calc(100% - var(--scroll-shadow-end-fade)), transparent 100%; animation-timeline: scroll(self inline), scroll(self inline); } .scroll-shadow.scroll-shadow--fade.scroll-shadow--horizontal[data-scroll-shadow-mode="auto"]:dir(rtl) { --scroll-linear-gradient: 270deg, transparent 0, #000 var(--scroll-shadow-start-fade), #000 calc(100% - var(--scroll-shadow-end-fade)), transparent 100%; } } .app-layout__body { min-height: calc(var(--spacing, .25rem) * 0); min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; flex: 1; display: flex; } .app-layout__header { top: calc(var(--spacing, .25rem) * 0); z-index: 40; flex-shrink: 0; position: sticky; } .app-layout__toolbar { --navbar-height: 56px; top: var(--navbar-height); z-index: 39; flex-shrink: 0; position: sticky; } .app-layout__footer { flex-shrink: 0; } .app-layout__menu-toggle { margin-inline-start: -.5rem; display: none; } @media (max-width: 768px) { .app-layout__menu-toggle { display: inline-flex; } } [data-app-layout] [data-slot="sidebar-trigger"] { margin-inline-start: -.5rem; } .app-layout__main { min-width: calc(var(--spacing, .25rem) * 0); flex: 1; } [data-app-layout][data-scroll-mode="content"] { height: 100dvh; min-height: 0; overflow: hidden; } [data-app-layout][data-scroll-mode="content"] .app-layout__main { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior-y: contain; min-height: 0; overflow-y: auto; } [data-app-layout][data-scroll-mode="content"] .app-layout__main:focus-visible { outline: none; } .app-layout__aside { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--border); background-color: var(--background); --app-layout-aside-width: 320px; --app-layout-aside-duration: .2s; height: 100dvh; width: var(--app-layout-aside-width); transition: width var(--app-layout-aside-duration) ease, border-color var(--app-layout-aside-duration) ease; flex-shrink: 0; position: sticky; top: 0; overflow: hidden; } .app-layout__aside > * { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); width: var(--app-layout-aside-width); height: 100%; transition: translate var(--app-layout-aside-duration) ease; overflow-y: auto; } .app-layout__aside[data-state="closed"] { border-inline-start-color: #0000; width: 0; } .app-layout__aside[data-state="closed"] > * { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .app-layout__aside[data-state="closed"] > :dir(rtl) { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } @media (prefers-reduced-motion: reduce) { .app-layout__aside, .app-layout__aside > * { transition: none; } } @media (max-width: 1024px) { .app-layout__aside { display: none; } } .app-layout__aside-trigger { margin-inline-end: -.5rem; } @media (max-width: 1024px) { .app-layout__aside-trigger { display: none; } } @media (max-width: 768px) { [data-app-layout] > [data-slot="sidebar"], [data-app-layout] [data-slot="sidebar-trigger"] { display: none; } } .navbar[data-in-app-layout="true"] { z-index: auto; width: 100%; height: 100%; position: static; } .navbar[data-in-app-layout="true"].navbar--sticky, .navbar[data-in-app-layout="true"].navbar--static, .navbar[data-in-app-layout="true"].navbar--floating { box-shadow: none; border: none; border-radius: 0; margin: 0; position: static; } [data-app-layout][data-resizable] { min-height: calc(var(--spacing, .25rem) * 0); flex-direction: row; height: 100dvh; display: flex; } .app-layout__resizable { min-height: calc(var(--spacing, .25rem) * 0); min-width: calc(var(--spacing, .25rem) * 0); flex: 1; height: 100%; display: flex; } .app-layout__sidebar-panel { min-height: calc(var(--spacing, .25rem) * 0); min-width: calc(var(--spacing, .25rem) * 0); position: relative; overflow: hidden; } .app-layout__aside-panel { min-height: calc(var(--spacing, .25rem) * 0); min-width: calc(var(--spacing, .25rem) * 0); border-style: var(--tw-border-style); border-width: 0; position: relative; overflow: hidden; } .app-layout__main-panel { min-height: calc(var(--spacing, .25rem) * 0); min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; display: flex; position: relative; overflow: hidden; } [data-app-layout][data-resizable] [data-slot="sidebar"], [data-app-layout][data-resizable] .sidebar__offcanvas-wrapper { width: 100%; transition: none; } [data-app-layout][data-resizable] .sidebar--default, [data-app-layout][data-resizable] .sidebar--default.sidebar--right { box-shadow: none; } [data-app-layout][data-resizable] .app-layout__aside, [data-app-layout][data-resizable] .app-layout__aside-panel { border-left-color: #0000; border-right-color: #0000; } [data-app-layout][data-resizable] .app-layout__aside-panel > aside, [data-app-layout][data-resizable] .app-layout__aside-panel > [data-slot="aside"], [data-app-layout][data-resizable] .app-layout__aside-panel > div { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); width: 100%; height: 100%; overflow-y: auto; } .app-layout__mobile-aside-sheet { width: 100%; max-width: min(360px, 88vw); } .app-layout__mobile-aside-dialog { height: 100dvh; padding: 0; } .app-layout__mobile-aside { flex-direction: column; height: 100%; min-height: 0; display: flex; } .action-bar { pointer-events: none; inset-inline: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 6); z-index: 50; justify-content: center; display: flex; position: fixed; } .action-bar [data-slot="toolbar"] { border-radius: calc(var(--radius) * 3); } .action-bar__wrapper { pointer-events: auto; --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); padding: 6px 12px; } .action-bar__prefix { align-items: center; gap: calc(var(--spacing, .25rem) * 2.5); display: flex; } .action-bar__content { align-items: center; gap: calc(var(--spacing, .25rem) * 1); display: flex; } .action-bar__suffix { align-items: center; display: flex; } .action-bar__label { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); } @media (max-width: 639px) { .action-bar__wrapper { padding: 4px 8px; } .action-bar__prefix { gap: calc(var(--spacing, .25rem) * 1.5); } .action-bar__label { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } } .agenda { --agenda-slot-height: 60px; --agenda-time-column-width: 58px; --agenda-current-time-color: var(--color-danger); --agenda-day-header-height: calc(var(--spacing) * 10); --agenda-all-day-min-height: calc(var(--spacing) * 8); --agenda-event-radius: var(--radius-md); --agenda-month-event-height: 20px; --agenda-month-event-gap: 2px; --agenda-month-date-offset: 20px; -webkit-user-select: none; user-select: none; flex-direction: column; height: 100%; display: flex; overflow: hidden; } .agenda__header { align-items: center; gap: calc(var(--spacing, .25rem) * 3); padding-inline: calc(var(--spacing, .25rem) * 4); padding-top: calc(var(--spacing, .25rem) * 4); padding-bottom: calc(var(--spacing, .25rem) * 1); display: flex; } .agenda__heading { font-size: var(--text-xl, 1.25rem); line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); flex: 1; } .agenda__navigation { align-items: center; gap: calc(var(--spacing, .25rem) * 1); display: flex; } .agenda__nav-button:dir(rtl) svg { --tw-scale-x: calc(100% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } .agenda__today-button { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .agenda__view-selector { width: fit-content; } .agenda__body { flex-direction: column; flex: 1; display: flex; position: relative; overflow: hidden; } .agenda__body--month { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overflow: auto; } .agenda__week-header { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); padding-inline-start: var(--agenda-time-column-width); display: flex; } .agenda__day-header { min-width: calc(var(--spacing, .25rem) * 0); justify-content: center; align-items: center; gap: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * 1.5); height: var(--agenda-day-header-height); flex-direction: row; flex: 1; display: flex; } .agenda__day-header-name { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: 1; --tw-font-weight: var(--font-weight-medium, 500); line-height: 1; font-weight: var(--font-weight-medium, 500); color: var(--muted); text-transform: capitalize; } .agenda__day-header-name[data-today="true"] { color: var(--foreground); } .agenda__day-header-date { border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * .5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: 1; --tw-font-weight: var(--font-weight-medium, 500); line-height: 1; font-weight: var(--font-weight-medium, 500); color: var(--muted); justify-content: center; align-items: center; display: flex; } .agenda__day-header-date[data-today="true"] { background-color: var(--danger); color: var(--color-white, #fff); } .agenda__all-day-section { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); min-height: var(--agenda-all-day-min-height); padding-inline-start: var(--agenda-time-column-width); grid-auto-rows: min-content; align-items: start; gap: 2px 0; padding-top: 4px; padding-bottom: 4px; display: grid; position: relative; } .agenda__all-day-toggle { z-index: 10; width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); border-radius: calc(var(--radius) * .5); color: var(--muted); --tw-outline-style: none; inset-inline-start: calc(var(--agenda-time-column-width) - var(--spacing) * 6); top: calc(var(--spacing) * 3); cursor: var(--cursor-interactive); outline-style: none; justify-content: center; align-items: center; display: flex; position: absolute; transform: translateY(-50%); } .agenda__all-day-toggle svg { transition: rotate .15s; } .agenda__all-day-toggle[data-expanded] svg { rotate: 0deg; } .agenda__all-day-toggle:not([data-expanded]) svg { rotate: -90deg; } .agenda__all-day-toggle:not([data-expanded]):dir(rtl) svg { rotate: 90deg; } @media (hover: hover) { .agenda__all-day-toggle:hover { background-color: var(--default); } } .agenda__all-day-toggle:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__all-day-label { color: var(--muted); width: var(--agenda-time-column-width); text-align: end; top: 50%; padding-inline-end: 8px; font-size: 11px; position: absolute; inset-inline-start: 0; transform: translateY(-50%); } .agenda__all-day-summary { color: var(--muted); justify-content: center; align-items: center; min-height: 22px; font-size: 11px; display: flex; } .agenda__all-day-event { text-overflow: ellipsis; white-space: nowrap; border-radius: calc(var(--radius) * .75); padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * .5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); background-color: var(--agenda-event-accent, var(--color-accent)); color: #fff; z-index: 1; min-height: 22px; cursor: var(--cursor-interactive); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; outline-style: none; margin: 0 2px; line-height: 22px; display: block; overflow: hidden; } @media (hover: hover) { .agenda__all-day-event:hover, .agenda__all-day-event[data-hovered="true"] { opacity: .8; } } .agenda__all-day-event:focus-visible:not(:focus), .agenda__all-day-event[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__all-day-event[data-status="unconfirmed"] { border: 1px dashed var(--agenda-event-accent, var(--color-accent)); color: var(--agenda-event-accent, var(--color-accent)); background-color: #0000; } .agenda__all-day-dividers { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); display: flex; position: absolute; inset-inline-start: var(--agenda-time-column-width); } .agenda__all-day-divider { min-width: calc(var(--spacing, .25rem) * 0); border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--separator); flex: 1; } .agenda__all-day-divider[data-weekend] { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .agenda__all-day-divider[data-weekend] { background-color: color-mix(in oklab, var(--default) 40%, transparent); } } .agenda__time-grid { scrollbar-width: none; scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; flex: 1; align-items: flex-start; display: flex; position: relative; overflow-y: auto; } .agenda__time-grid--day .agenda__day-column, .agenda__time-grid--week .agenda__day-column { min-width: calc(var(--spacing, .25rem) * 0); border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--separator); flex: 1; } .agenda__time-grid--week .agenda__day-column:first-child { border-inline-start: none; } .agenda__time-labels { z-index: 10; width: var(--agenda-time-column-width); height: fit-content; flex-direction: column; flex-shrink: 0; display: flex; position: sticky; inset-inline-start: calc(var(--spacing, .25rem) * 0); } .agenda__time-label { text-align: end; --tw-leading: 1; color: var(--muted); height: var(--agenda-slot-height); padding-inline-end: calc(var(--spacing, .25rem) * 2); font-size: 11px; line-height: 1; position: relative; } .agenda__time-label span { inset-inline-end: calc(var(--spacing, .25rem) * 2); top: calc(var(--spacing, .25rem) * 0); position: absolute; transform: translateY(-50%); } .agenda__day-column { position: relative; } .agenda__day-column[data-weekend] { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .agenda__day-column[data-weekend] { background-color: color-mix(in oklab, var(--default) 40%, transparent); } } .agenda__time-slot { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); height: var(--agenda-slot-height); cursor: var(--cursor-interactive); } .agenda__time-slot[data-last] { border-bottom: none; } .agenda__event { right: calc(var(--spacing, .25rem) * .5); left: calc(var(--spacing, .25rem) * .5); z-index: 20; padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 1); border-radius: var(--agenda-event-radius); cursor: var(--cursor-interactive); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: var(--agenda-event-color, var(--color-accent-soft)); border-inline-start: 3px solid var(--agenda-event-accent, var(--color-accent)); outline-style: none; min-height: 20px; transition: opacity .15s; position: absolute; overflow: hidden; } .agenda__event:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .agenda__event:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .agenda__event:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .agenda__event:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .agenda__event:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .agenda__event:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .agenda__event:hover, .agenda__event[data-hovered="true"] { opacity: .8; } } .agenda__event[data-selected="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--agenda-event-accent, var(--color-accent)); } .agenda__event:focus-visible:not(:focus), .agenda__event[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__event[data-dragging="true"] { --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); opacity: .9; cursor: grabbing; } .agenda__event[data-resizing="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--agenda-event-accent, var(--color-accent)); } .agenda__event[data-status="unconfirmed"] { border-inline-start: none; border: 1px dashed var(--agenda-event-accent, var(--color-accent)); color: var(--agenda-event-accent, var(--color-accent)); background-color: #0000; } .agenda__event-title { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: var(--leading-tight, 1.25); line-height: var(--leading-tight, 1.25); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); display: block; overflow: hidden; } .agenda__event-time { text-overflow: ellipsis; white-space: nowrap; --tw-leading: var(--leading-tight, 1.25); font-size: 10px; line-height: var(--leading-tight, 1.25); color: var(--muted); display: block; overflow: hidden; } .agenda__resize-handle { right: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); cursor: row-resize; height: 8px; position: absolute; } .agenda__resize-handle:after { content: ""; bottom: calc(var(--spacing, .25rem) * .5); height: calc(var(--spacing, .25rem) * .5); background-color: var(--agenda-event-accent, var(--color-accent)); opacity: 0; border-radius: 3.40282e38px; width: 24px; transition: opacity .15s; display: block; position: absolute; left: 50%; transform: translate(-50%); } .agenda__resize-handle:hover:after, .agenda__resize-handle:active:after { opacity: .6; } .agenda__create-preview { pointer-events: none; right: calc(var(--spacing, .25rem) * .5); left: calc(var(--spacing, .25rem) * .5); z-index: 10; border-radius: var(--agenda-event-radius); background-color: var(--color-accent-soft); border: 1px dashed var(--color-accent); opacity: .6; position: absolute; } .agenda__drop-preview { pointer-events: none; right: calc(var(--spacing, .25rem) * .5); left: calc(var(--spacing, .25rem) * .5); z-index: 10; border-radius: var(--agenda-event-radius); opacity: .5; border: 2px solid; position: absolute; } .agenda__current-time-indicator { pointer-events: none; right: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); z-index: 30; align-items: center; height: 0; display: flex; position: absolute; } .agenda__current-time-label { padding-inline: calc(var(--spacing, .25rem) * .5); padding-block: calc(var(--spacing, .25rem) * .5); --tw-leading: 1; white-space: nowrap; background-color: var(--agenda-current-time-color); color: #fff; border-radius: var(--radius-md); font-size: 10px; line-height: 1; } .agenda__current-time-label-wrap { width: var(--agenda-time-column-width); flex-shrink: 0; justify-content: flex-end; align-items: center; padding-inline-end: 1px; display: flex; } .agenda__current-time-track { flex: 1; height: 2px; position: relative; } .agenda__current-time-line--faded { inset: calc(var(--spacing, .25rem) * 0); background-color: var(--agenda-current-time-color); opacity: .2; position: absolute; } .agenda__current-time-line--active { top: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); background-color: var(--agenda-current-time-color); position: absolute; } .agenda__current-time-line--active:before { content: ""; background-color: var(--agenda-current-time-color); inset-inline-start: 0; border-radius: 2px; width: 2px; height: 8px; display: block; position: absolute; top: 50%; transform: translateY(-50%); } .agenda__month-grid { flex-direction: column; flex: 1; display: flex; } .agenda__month-weekday-header { top: calc(var(--spacing, .25rem) * 0); z-index: 20; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); background-color: var(--background); display: flex; position: sticky; } .agenda__month-weekday { padding-block: calc(var(--spacing, .25rem) * 1.5); --tw-font-weight: var(--font-weight-medium, 500); font-size: 11px; font-weight: var(--font-weight-medium, 500); color: var(--muted); flex: 1; justify-content: center; align-items: center; display: flex; } .agenda__month-weekday[data-today="true"] { --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .agenda__month-row { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); flex: 1; min-height: 100px; display: flex; position: relative; } .agenda__month-row:has([data-dragging]) { z-index: 40; overflow: visible; } .agenda__month-row:last-child { border-bottom: none; } .agenda__month-cell { padding: calc(var(--spacing, .25rem) * 1); padding-top: calc(var(--agenda-month-spanning-zone, 0px) + var(--agenda-month-date-offset) + 2px); flex-direction: column; flex: 1; display: flex; position: relative; overflow: hidden; } .agenda__month-cell:has([data-dragging]) { z-index: 40; overflow: visible; } .agenda__month-cell + .agenda__month-cell { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--separator); } .agenda__month-cell[data-weekend] { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .agenda__month-cell[data-weekend] { background-color: color-mix(in oklab, var(--default) 40%, transparent); } } .agenda__month-cell[data-drop-target] { box-shadow: inset 0 0 0 2px var(--agenda-drop-color, var(--color-accent)); border-radius: var(--radius-md); } .agenda__month-cell[data-outside-month="true"] { opacity: .4; } .agenda__month-spanning-event { text-overflow: ellipsis; white-space: nowrap; border-radius: calc(var(--radius) * .75); padding-inline: calc(var(--spacing, .25rem) * 1.5); --tw-leading: 1; --tw-font-weight: var(--font-weight-medium, 500); font-size: 10px; line-height: 1; font-weight: var(--font-weight-medium, 500); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: var(--agenda-event-accent, var(--color-accent)); color: #fff; cursor: var(--cursor-interactive); z-index: 1; outline-style: none; align-items: center; display: flex; overflow: hidden; } @media (hover: hover) { .agenda__month-spanning-event:hover, .agenda__month-spanning-event[data-hovered="true"] { opacity: .8; } } .agenda__month-spanning-event:focus-visible:not(:focus), .agenda__month-spanning-event[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__month-spanning-event[data-status="unconfirmed"] { border: 1px dashed var(--agenda-event-accent, var(--color-accent)); color: var(--agenda-event-accent, var(--color-accent)); background-color: #0000; } .agenda__month-cell-date { inset-inline-end: calc(var(--spacing, .25rem) * 1); top: calc(var(--spacing, .25rem) * 1); z-index: 10; border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * .5); --tw-leading: 1; --tw-font-weight: var(--font-weight-medium, 500); font-size: 11px; line-height: 1; font-weight: var(--font-weight-medium, 500); color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; justify-content: center; align-items: center; display: flex; position: absolute; } @media (hover: hover) { .agenda__month-cell-date:hover { background-color: var(--default); } } .agenda__month-cell-date:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__month-cell-date[data-today="true"] { background-color: var(--danger); color: var(--color-white, #fff); } @media (hover: hover) { .agenda__month-cell-date[data-today="true"]:hover { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .agenda__month-cell-date[data-today="true"]:hover { background-color: color-mix(in oklab, var(--danger) 80%, transparent); } } } .agenda__month-cell-more { text-overflow: ellipsis; white-space: nowrap; border-radius: calc(var(--radius) * .5); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 1); text-align: start; --tw-leading: var(--leading-tight, 1.25); font-size: 10px; line-height: var(--leading-tight, 1.25); color: var(--muted); --tw-outline-style: none; cursor: var(--cursor-interactive); -webkit-tap-highlight-color: transparent; outline-style: none; margin-top: 1px; padding-block: 1px; overflow: hidden; } @media (hover: hover) { .agenda__month-cell-more:hover { background-color: var(--default); } } .agenda__month-cell-more:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__month-event { text-overflow: ellipsis; white-space: nowrap; border-radius: calc(var(--radius) * .5); padding-inline: calc(var(--spacing, .25rem) * 1); --tw-leading: var(--leading-tight, 1.25); font-size: 10px; line-height: var(--leading-tight, 1.25); cursor: var(--cursor-interactive); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: var(--agenda-event-color, var(--color-accent-soft)); color: var(--agenda-event-text, var(--color-accent-soft-foreground)); outline-style: none; padding-block: 1px; overflow: hidden; } .agenda__month-event + .agenda__month-event { margin-top: 1px; } @media (hover: hover) { .agenda__month-event:hover, .agenda__month-event[data-hovered="true"] { opacity: .8; } } .agenda__month-event:focus-visible:not(:focus), .agenda__month-event[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .agenda__month-event[data-dragging] { z-index: 50; cursor: grabbing; } .agenda__month-event[data-status="unconfirmed"] { border: 1px dashed var(--agenda-event-text, var(--color-accent)); color: var(--agenda-event-text, var(--color-accent)); background-color: #0000; } .agenda--month .agenda__time-grid, .agenda--month .agenda__all-day-section, .agenda--month .agenda__week-header { display: none; } @media (max-width: 639px) { .agenda { --agenda-slot-height: 48px; --agenda-time-column-width: 58px; --agenda-month-event-height: 16px; --agenda-month-event-gap: 1px; --agenda-month-date-offset: 16px; } .agenda__header { padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 3); padding-bottom: calc(var(--spacing, .25rem) * 1); grid-template-rows: auto auto; grid-template-columns: 1fr auto; gap: 8px; display: grid; } .agenda__heading { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); grid-area: 1 / 1; } .agenda__navigation { grid-area: 1 / 2; } .agenda__view-selector { grid-area: 2 / 1; } .agenda__time-label { font-size: 9px; } .agenda__event { padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * .5); } .agenda__event-title { font-size: 10px; } .agenda__event-time, .agenda__resize-handle { display: none; } .agenda__day-header-name { font-size: 10px; } .agenda__day-header-date { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .agenda__all-day-event { min-height: 18px; font-size: 10px; line-height: 18px; } .agenda__month-row { min-height: 72px; } .agenda__month-cell-date, .agenda__month-event, .agenda__month-spanning-event { font-size: 9px; } .agenda__current-time-label { padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * .5); font-size: 9px; } .agenda__create-preview { display: none; } } .area-chart { width: 100%; } .area-chart .recharts-cartesian-axis-tick-value { font-size: 10px; fill: var(--muted) !important; } .area-chart .recharts-cartesian-axis-line, .area-chart .recharts-cartesian-axis-tick-line { stroke: none !important; } .area-chart .recharts-cartesian-grid line { stroke: var(--muted); stroke-opacity: .15; } .area-chart .recharts-tooltip-cursor { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1px; } .area-chart .recharts-tooltip-wrapper { z-index: 10; } .area-chart .recharts-active-dot circle { stroke: var(--surface); stroke-width: 2px; } .bar-chart { width: 100%; } .bar-chart .recharts-cartesian-axis-tick-value { font-size: 10px; fill: var(--muted) !important; } .bar-chart .recharts-cartesian-axis-line, .bar-chart .recharts-cartesian-axis-tick-line { stroke: none !important; } .bar-chart .recharts-cartesian-grid line { stroke: var(--muted); stroke-opacity: .15; } .bar-chart .recharts-tooltip-cursor { fill: currentColor; opacity: .05; } .carousel { --tw-outline-style: none; --carousel-gap: calc(var(--spacing) * 4); outline-style: none; } .carousel:focus-visible:not(:focus), .carousel[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .carousel__viewport-wrapper { position: relative; } .carousel__viewport { overflow: hidden; } .carousel__content { display: flex; } .carousel__content--horizontal { flex-direction: row; margin-inline-start: calc(var(--carousel-gap) * -1); } .carousel__item { min-width: calc(var(--spacing, .25rem) * 0); flex: 0 0 100%; position: relative; } .carousel__item--horizontal { padding-inline-start: var(--carousel-gap); } .carousel__previous, .carousel__next { z-index: 10; position: absolute; } :is(.carousel__previous:dir(rtl) svg, .carousel__next:dir(rtl) svg) { --tw-scale-x: calc(100% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } .carousel__previous--in-place, .carousel__next--in-place { top: 50%; translate: 0 -50%; } .carousel__previous--in-place { inset-inline-start: calc(var(--spacing) * 5); } .carousel__next--in-place { inset-inline-end: calc(var(--spacing) * 5); } .carousel__previous--modal, .carousel__next--modal { top: 50%; translate: 0 -50%; } .carousel__previous--modal { inset-inline-start: calc(var(--spacing) * -15); } .carousel__next--modal { inset-inline-end: calc(var(--spacing) * -15); } .carousel__previous--miniatures, .carousel__next--miniatures { top: auto; flex-shrink: 0; position: relative; inset-inline: auto; transform: none; } .carousel__dots { justify-content: center; align-items: center; gap: calc(var(--spacing, .25rem) * 2); margin-top: calc(var(--spacing, .25rem) * 4); display: flex; } .carousel__dot { width: calc(var(--spacing, .25rem) * 2); height: calc(var(--spacing, .25rem) * 2); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: var(--default); border-radius: calc(var(--radius) * 9999); cursor: var(--cursor-interactive); outline-style: none; transition: background-color .2s; } @media (hover: hover) { .carousel__dot:hover, .carousel__dot[data-hovered="true"] { background-color: var(--default-hover); } } .carousel__dot:focus-visible:not(:focus), .carousel__dot[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .carousel__dot[data-selected="true"] { background-color: var(--accent); } .carousel__thumbnails { align-items: center; gap: calc(var(--spacing, .25rem) * 3); margin-inline: calc(var(--spacing, .25rem) * -1); margin-top: calc(var(--spacing, .25rem) * 4); padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * 1); cursor: var(--cursor-interactive); display: flex; } .carousel__thumbnails--miniatures { margin-top: calc(var(--spacing, .25rem) * 0); justify-content: center; } .carousel__thumbnail { width: calc(var(--spacing, .25rem) * 16); height: calc(var(--spacing, .25rem) * 16); border-radius: calc(var(--radius) * 2); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-shrink: 0; transition: box-shadow .15s, opacity .15s, transform .15s; position: relative; } .carousel__thumbnail img { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); border-radius: calc(var(--radius) * 2); object-fit: cover; -webkit-user-select: none; user-select: none; width: 100%; height: 100%; position: absolute; } @media (hover: hover) { .carousel__thumbnail:hover, .carousel__thumbnail[data-hovered="true"] { opacity: .85; } } .carousel__thumbnail:active, .carousel__thumbnail[data-pressed="true"] { transform: scale(.95); } .carousel__thumbnail:focus-visible:not(:focus), .carousel__thumbnail[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .carousel__thumbnail[data-selected="true"] { box-shadow: 0 0 0 2px var(--color-accent); } @media (prefers-reduced-motion: reduce) { .carousel__thumbnail { transition: none; } } .carousel--modal { align-items: center; gap: calc(var(--spacing, .25rem) * 4); flex-direction: column; display: flex; } .carousel--miniatures { flex-direction: column; align-items: center; display: flex; } .chain-of-thought { width: 100%; max-width: none; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .chain-of-thought__trigger { width: fit-content; cursor: var(--cursor-interactive); justify-content: flex-start; gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 0); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); background-color: #0000; transform: none; } @media (hover: hover) { .chain-of-thought__trigger:hover, .chain-of-thought__trigger[data-hovered="true"] { color: var(--foreground); background-color: #0000; } } .chain-of-thought__trigger:active, .chain-of-thought__trigger[data-pressed="true"] { background-color: #0000; transform: none; } .chain-of-thought--streaming .chain-of-thought__trigger { color: var(--foreground); } .chain-of-thought__steps { gap: calc(var(--spacing, .25rem) * 3); border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; border-color: var(--default); flex-direction: column; padding-inline-start: calc(var(--spacing, .25rem) * 3); display: flex; } .chain-of-thought__step { gap: calc(var(--spacing, .25rem) * 1); flex-direction: column; display: flex; } .chain-of-thought__step-header { align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; } .chain-of-thought__step-indicator { width: calc(var(--spacing, .25rem) * 1.5); height: calc(var(--spacing, .25rem) * 1.5); background-color: var(--muted); border-radius: 3.40282e38px; flex-shrink: 0; } @supports (color: color-mix(in lab, red, red)) { .chain-of-thought__step-indicator { background-color: color-mix(in oklab, var(--muted) 40%, transparent); } } .chain-of-thought__step-label { --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); --tw-tracking: var(--tracking-wide, .025em); letter-spacing: var(--tracking-wide, .025em); color: var(--muted); } .chain-of-thought__step-content { --tw-leading: var(--leading-relaxed, 1.625); line-height: var(--leading-relaxed, 1.625); color: var(--foreground); } .chat-attachment { border-radius: calc(var(--radius) * 1.5); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); background-color: #0000; flex-shrink: 0; position: relative; } .chat-attachment[data-variant="media"] { width: calc(var(--spacing, .25rem) * 16); height: calc(var(--spacing, .25rem) * 16); overflow: hidden; } .chat-attachment[data-variant="file"] { height: calc(var(--spacing, .25rem) * 16); max-width: calc(var(--spacing, .25rem) * 64); align-items: center; gap: calc(var(--spacing, .25rem) * 2.5); padding-inline: calc(var(--spacing, .25rem) * 3); display: flex; } .chat-attachment__preview { justify-content: center; align-items: center; display: flex; overflow: hidden; } .chat-attachment[data-variant="media"] .chat-attachment__preview { width: 100%; height: 100%; } .chat-attachment[data-variant="file"] .chat-attachment__preview { width: auto; height: auto; color: var(--muted); flex-shrink: 0; } .chat-attachment__preview-image, .chat-attachment__preview-video { object-fit: cover; width: 100%; height: 100%; } .chat-attachment__icon { justify-content: center; align-items: center; display: inline-flex; } .chat-attachment__icon svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } .chat-attachment[data-variant="file"] > .chat-attachment__info, .chat-attachment[data-variant="file"] > .chat-attachment__name { min-width: calc(var(--spacing, .25rem) * 0); flex: 1; } .chat-attachment[data-variant="file"] .chat-attachment__info { justify-content: center; gap: calc(var(--spacing, .25rem) * .5); flex-direction: column; display: flex; } .chat-attachment[data-variant="media"] > .chat-attachment__info, .chat-attachment[data-variant="media"] > .chat-attachment__name { pointer-events: none; inset-inline: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #000000bf; } @supports (color: color-mix(in lab, red, red)) { .chat-attachment[data-variant="media"] > .chat-attachment__info, .chat-attachment[data-variant="media"] > .chat-attachment__name { --tw-gradient-from: color-mix(in oklab, var(--color-black, #000) 75%, transparent); } } .chat-attachment[data-variant="media"] > .chat-attachment__info, .chat-attachment[data-variant="media"] > .chat-attachment__name { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-top: calc(var(--spacing, .25rem) * 5); padding-bottom: calc(var(--spacing, .25rem) * 1); opacity: 0; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); position: absolute; } .chat-attachment[data-variant="media"]:hover > .chat-attachment__info, .chat-attachment[data-variant="media"]:hover > .chat-attachment__name, .chat-attachment[data-variant="media"]:focus-within > .chat-attachment__info, .chat-attachment[data-variant="media"]:focus-within > .chat-attachment__name { opacity: 1; } .chat-attachment__name { min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); display: block; overflow: hidden; } .chat-attachment[data-variant="file"] .chat-attachment__name { --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); } .chat-attachment[data-variant="media"] .chat-attachment__name { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--color-white, #fff); } .chat-attachment__size { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); display: block; } .chat-attachment[data-variant="media"] .chat-attachment__size { display: none; } .chat-attachment__remove { background-color: var(--default); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); } @media (hover: hover) { .chat-attachment__remove:hover { background-color: var(--default-hover); color: var(--foreground); } } .chat-attachment[data-variant="media"] .chat-attachment__remove { inset-inline-end: calc(var(--spacing, .25rem) * 1.5); top: calc(var(--spacing, .25rem) * 1.5); opacity: .7; --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-backdrop-blur: blur(var(--blur-sm, 8px)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); position: absolute; } .chat-attachment[data-variant="file"] .chat-attachment__remove { background-color: #0000; flex-shrink: 0; } .chat-attachment[data-variant="media"] [data-slot="chat-attachment-remove"] { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); } .chat-attachment[data-variant="media"] [data-slot="chat-attachment-remove"] svg { width: calc(var(--spacing, .25rem) * 2); height: calc(var(--spacing, .25rem) * 2); } .chat-attachment[data-variant="file"] [data-slot="chat-attachment-remove"] { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } .chat-attachment[data-variant="file"] [data-slot="chat-attachment-remove"] svg { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); } @media (hover: hover) { .chat-attachment[data-variant="media"] .chat-attachment__remove { opacity: 0; } .chat-attachment[data-variant="media"]:hover .chat-attachment__remove, .chat-attachment[data-variant="media"]:focus-within .chat-attachment__remove { opacity: 1; } } .chat-attachment-group { align-items: flex-start; gap: calc(var(--spacing, .25rem) * 2); flex-wrap: wrap; display: flex; } .chat-conversation { min-height: calc(var(--spacing, .25rem) * 0); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); --chat-conversation-shadow-size: 32px; --chat-conversation-scrollbar-mask-size: 10px; -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black); -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black); mask-image: linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black); -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%; -webkit-mask-size: calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%; mask-size: calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%; -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black); -webkit-mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%; flex-direction: column; flex: 1; display: flex; position: relative; overflow-y: auto; } .chat-conversation__content { flex-direction: column; width: 100%; margin-inline: auto; display: flex; } .chat-conversation__scroll-anchor { width: 100%; height: 1px; scroll-margin-top: calc(var(--spacing, .25rem) * 4); flex-shrink: 0; } .chat-conversation__scroll-button-container { bottom: calc(var(--spacing, .25rem) * 4); z-index: 10; width: max-content; margin-inline: auto; position: sticky; } .chat-conversation__scroll-button-container[data-state="hidden"] { pointer-events: none; visibility: hidden; } .chat-conversation__scroll-button { border-style: var(--tw-border-style); background-color: var(--surface); color: var(--foreground); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-width: 1px; border-color: #0000; } .chat-conversation__scroll-button:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .chat-conversation__scroll-button:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .chat-conversation__scroll-button:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after { border-color: var(--border); } @media (prefers-color-scheme: dark) { .chat-conversation__scroll-button:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .chat-conversation__scroll-button, .chat-conversation__scroll-button:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .chat-conversation__scroll-button:before, .chat-conversation__scroll-button:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .chat-conversation__scroll-button:after { border-color: var(--border); } } .chat-conversation__scroll-button { --button-bg: var(--surface); --button-bg-hover: var(--surface); --button-bg-pressed: var(--surface); --button-fg: var(--foreground); } .chat-list-view { width: 100%; } .chat-list-view__icon { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: var(--muted); flex-shrink: 0; } .chat-list-view__text { min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; display: flex; } .chat-list-view__title { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); overflow: hidden; } .chat-list-view__preview { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); overflow: hidden; } .chat-list-view__meta { color: var(--muted); flex-shrink: 0; margin-inline-start: auto; font-size: 11px; } .chat-list-view--compact .chat-list-view__preview, .chat-list-view--compact .chat-list-view__meta { display: none; } @keyframes chat-loader-bounce { 0%, 80%, to { opacity: .35; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } } @keyframes chat-loader-pulse { 0%, to { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } } .chat-loader__dots { align-items: center; gap: calc(var(--spacing, .25rem) * 1); display: inline-flex; } .chat-loader__dot { background-color: var(--muted); border-radius: 3.40282e38px; width: .375rem; height: .375rem; animation: 1.2s ease-in-out infinite both chat-loader-bounce; } .chat-loader__dot:first-child { animation-delay: -.24s; } .chat-loader__dot:nth-child(2) { animation-delay: -.12s; } .chat-loader__dots--sm .chat-loader__dot { width: .3125rem; height: .3125rem; } .chat-loader__dots--lg .chat-loader__dot { width: .5rem; height: .5rem; } .chat-loader__pulse { background-color: var(--accent); border-radius: 3.40282e38px; width: .5rem; height: .5rem; animation: 1.4s ease-in-out infinite chat-loader-pulse; } .chat-loader__pulse--sm { width: .375rem; height: .375rem; } .chat-loader__pulse--lg { width: .625rem; height: .625rem; } .chat-loader__skeleton { align-items: flex-start; gap: calc(var(--spacing, .25rem) * 3); width: 100%; display: flex; } .chat-loader__skeleton-avatar { background-color: var(--default); border-radius: 3.40282e38px; flex-shrink: 0; width: 2rem; height: 2rem; } .chat-loader__skeleton-avatar--sm { width: 1.5rem; height: 1.5rem; } .chat-loader__skeleton-avatar--lg { width: 2.25rem; height: 2.25rem; } .chat-loader__skeleton-block { min-width: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; flex: 1; display: flex; } .chat-loader__skeleton-line { height: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * .75); background-color: var(--default); width: 100%; } .chat-loader__skeleton-line--sm { height: calc(var(--spacing, .25rem) * 2.5); } .chat-loader__skeleton-line--lg { height: calc(var(--spacing, .25rem) * 3.5); } .chat-loader__skeleton-line:nth-child(2) { width: 85%; } .chat-loader__skeleton-line:nth-child(3) { width: 65%; } .chat-loader__spinner { display: inline-flex; } @media (prefers-reduced-motion: reduce) { .chat-loader__dot, .chat-loader__pulse { opacity: .7; animation: none; } } .chat-source { height: calc(var(--spacing, .25rem) * 5); align-items: center; display: inline-flex; } .chat-source__trigger { height: calc(var(--spacing, .25rem) * 5); align-items: center; max-width: 100%; display: inline-flex; } .chat-source .hover-card__trigger { height: calc(var(--spacing, .25rem) * 5); align-items: center; display: inline-flex; } .chat-source__trigger-link { height: calc(var(--spacing, .25rem) * 5); max-width: calc(var(--spacing, .25rem) * 32); align-items: center; gap: calc(var(--spacing, .25rem) * 1); background-color: var(--default); padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * 0); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: 1; color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .15s; border-radius: 3.40282e38px; line-height: 1; text-decoration-line: none; transition-duration: .15s; display: inline-flex; overflow: hidden; } @media (hover: hover) { .chat-source__trigger-link:hover { background-color: var(--default-hover); color: var(--foreground); } } .chat-source__icon, .chat-source__document-icon { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); object-fit: cover; border-radius: 3.40282e38px; flex-shrink: 0; } .chat-source__icon-fallback { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); background-color: var(--muted); --tw-font-weight: var(--font-weight-medium, 500); font-size: 10px; font-weight: var(--font-weight-medium, 500); color: var(--muted); border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .chat-source__title { min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; text-align: start; --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); overflow: hidden; } .chat-source__preview { width: calc(var(--spacing, .25rem) * 80); padding: calc(var(--spacing, .25rem) * 0); } .chat-source__preview-link { gap: calc(var(--spacing, .25rem) * 1.5); padding: calc(var(--spacing, .25rem) * 1); flex-direction: column; text-decoration-line: none; display: flex; } .chat-source__preview-header { align-items: center; gap: calc(var(--spacing, .25rem) * 1.5); display: flex; } .chat-source__preview-title { -webkit-line-clamp: 2; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .chat-source__preview-description { -webkit-line-clamp: 2; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .chat-sources, .chat-sources [data-slot="disclosure-heading"] { width: 100%; } .chat-sources__trigger { height: auto; min-height: calc(var(--spacing, .25rem) * 8); cursor: pointer; align-items: center; gap: calc(var(--spacing, .25rem) * 2); width: fit-content; padding-inline: calc(var(--spacing, .25rem) * 0); padding-block: calc(var(--spacing, .25rem) * 1); text-align: start; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--muted); display: inline-flex; } @media (hover: hover) { .chat-sources__trigger:hover { color: var(--foreground); } } .chat-sources__trigger { -webkit-tap-highlight-color: transparent; transition: color .1s var(--ease-out); } .chat-sources .chat-sources__content { transition: height .15s var(--ease-out-quad), opacity .15s var(--ease-out); } .chat-sources [data-slot="disclosure-indicator"] { transition-duration: .15s; } @media (prefers-reduced-motion: reduce) { .chat-sources .chat-sources__content, .chat-sources [data-slot="disclosure-indicator"] { transition: none; } } .chat-sources__content { border-top-style: var(--tw-border-style); border-top-width: 0; border-color: var(--default); } .chat-sources__content[data-expanded="true"] { border-top-style: var(--tw-border-style); border-top-width: 1px; } .chat-sources__content-body { padding-top: calc(var(--spacing, .25rem) * 2); } .chat-sources__list { align-items: center; gap: calc(var(--spacing, .25rem) * 2); flex-wrap: wrap; display: flex; } .chat-sources__trigger-label { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: inline-flex; } .chat-tool { border-radius: calc(var(--radius) * 1.5); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--default); width: 100%; overflow: hidden; } .chat-tool [data-slot="disclosure-heading"], .chat-tool-group [data-slot="disclosure-heading"] { width: 100%; } .chat-tool__trigger, .chat-tool-group__trigger { height: auto; min-height: calc(var(--spacing, .25rem) * 9); cursor: pointer; justify-content: space-between; align-items: center; gap: calc(var(--spacing, .25rem) * 2); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); text-align: start; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); color: var(--foreground); -webkit-tap-highlight-color: transparent; border-radius: 0; display: inline-flex; } @media (hover: hover) { .chat-tool__trigger:hover, .chat-tool__trigger[data-hovered="true"], .chat-tool-group__trigger:hover, .chat-tool-group__trigger[data-hovered="true"] { background-color: var(--default); } } .chat-tool__trigger:active, .chat-tool__trigger[data-pressed="true"], .chat-tool-group__trigger:active, .chat-tool-group__trigger[data-pressed="true"] { background-color: var(--default); } .chat-tool__trigger[data-expandable="false"], .chat-tool__trigger[data-expandable="false"]:hover, .chat-tool__trigger[data-expandable="false"][data-hovered="true"], .chat-tool__trigger[data-expandable="false"]:active, .chat-tool__trigger[data-expandable="false"][data-pressed="true"] { cursor: default; background-color: #0000; } .chat-tool--streaming .chat-tool__trigger, .chat-tool--running .chat-tool__trigger { color: var(--foreground); } .chat-tool--error { border-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .chat-tool--error { border-color: color-mix(in oklab, var(--danger) 30%, transparent); } } .chat-tool--requires-action { border-color: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .chat-tool--requires-action { border-color: color-mix(in oklab, var(--warning) 40%, transparent); } } .chat-tool__trigger-label { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); display: flex; } .chat-tool__trigger-label > .text-shimmer { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: inline-flex; } .chat-tool__content { border-top-style: var(--tw-border-style); border-top-width: 0; border-color: var(--default); } .chat-tool__content:not([data-expanded="true"]), .chat-tool-group__content:not([data-expanded="true"]) { opacity: 0; height: 0 !important; } .chat-tool__content-body { gap: calc(var(--spacing, .25rem) * 1); padding: calc(var(--spacing, .25rem) * 1); flex-direction: column; display: flex; } .chat-tool__args-label, .chat-tool__result-label, .chat-tool__error-label { margin-bottom: calc(var(--spacing, .25rem) * 1); --tw-font-weight: var(--font-weight-medium, 500); font-size: 10px; font-weight: var(--font-weight-medium, 500); --tw-tracking: var(--tracking-wide, .025em); letter-spacing: var(--tracking-wide, .025em); color: var(--muted); text-transform: uppercase; } .chat-tool__args, .chat-tool__result, .chat-tool__error { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .chat-tool__args .code-block, .chat-tool__result .code-block { margin-block: calc(var(--spacing, .25rem) * 1); border-radius: calc(var(--radius) * 1.5); } .chat-tool__args .code-block__code, .chat-tool__result .code-block__code { --tw-leading: calc(var(--spacing, .25rem) * 5); font-size: 11px; line-height: calc(var(--spacing, .25rem) * 5); } .chat-tool__args .code-block__code pre, .chat-tool__result .code-block__code pre { padding-inline: calc(var(--spacing, .25rem) * 2.5); padding-block: calc(var(--spacing, .25rem) * 1.5); } .chat-tool__error { color: var(--danger); } .chat-tool__approval { gap: calc(var(--spacing, .25rem) * 2); padding-top: calc(var(--spacing, .25rem) * 3); flex-direction: column; display: flex; } .chat-tool__approval-actions { justify-content: flex-end; align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; } .chat-tool__meta { border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--default); padding-top: calc(var(--spacing, .25rem) * 2); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .chat-tool__status { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); color: var(--muted); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .chat-tool-group { border-radius: calc(var(--radius) * 1.5); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--default); width: 100%; overflow: hidden; } .chat-tool-group__content { border-top-style: var(--tw-border-style); border-top-width: 0; border-color: var(--default); } .chat-tool-group__content-body { gap: calc(var(--spacing, .25rem) * 1.5); padding: calc(var(--spacing, .25rem) * 1); flex-direction: column; display: flex; } .chat-tool-group__trigger-label { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); display: flex; } .chat-message-actions { align-items: flex-start; display: flex; } .chat-message--user { flex-direction: column; align-items: flex-end; width: 100%; display: flex; } .chat-message--assistant { align-items: flex-start; gap: calc(var(--spacing, .25rem) * 3); width: 100%; padding-block: calc(var(--spacing, .25rem) * 2); flex-direction: row; display: flex; } .chat-message__body { min-width: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; flex: 1; padding-inline-end: calc(var(--spacing, .25rem) * 12); display: flex; } .chat-message__bubble { border-radius: calc(var(--radius) * 2); background-color: var(--default); padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 2); color: var(--foreground); } .chat-message__content { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-leading: var(--leading-relaxed, 1.625); line-height: var(--leading-relaxed, 1.625); color: var(--foreground); } .chat-message--assistant .chat-message__content { width: 100%; max-width: none; } .chat-message__media { gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; display: flex; } .chat-message__actions { opacity: .5; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); align-items: flex-start; display: flex; } @media (hover: hover) { .chat-message--assistant:hover .chat-message__actions, .chat-message--user:hover .chat-message__actions { opacity: 1; } } .chat-message__action { color: var(--muted); } .chat-message__avatar { flex-shrink: 0; align-self: flex-start; } .chat-message__avatar-spacer { width: calc(var(--spacing, .25rem) * 8); height: calc(var(--spacing, .25rem) * 8); flex-shrink: 0; align-self: flex-start; } .cell-color-picker { --cell-color-picker-swatch-size: 1.25rem; display: flex; } .cell-color-picker .cell-color-picker__trigger { height: calc(var(--spacing, .25rem) * 9); align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 3); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: flex; } .cell-color-picker .cell-color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .cell-color-picker .cell-color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .cell-color-picker .cell-color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .cell-color-picker .cell-color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .cell-color-picker .cell-color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .cell-color-picker .cell-color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .cell-color-picker .cell-color-picker__trigger { border-width: var(--border-width-field); border-color: var(--color-field-border); padding-inline-end: .75rem; } @media (hover: hover) { .cell-color-picker .cell-color-picker__trigger:hover, .cell-color-picker .cell-color-picker__trigger[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--color-field-border-hover); } } .cell-color-picker .cell-color-picker__trigger:focus-visible:not(:focus), .cell-color-picker .cell-color-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .cell-color-picker .cell-color-picker__trigger:disabled, .cell-color-picker .cell-color-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .cell-color-picker .cell-color-picker__trigger--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-default); } @media (hover: hover) { .cell-color-picker .cell-color-picker__trigger--secondary:hover, .cell-color-picker .cell-color-picker__trigger--secondary[data-hovered="true"] { background-color: var(--color-default-hover); } } .cell-color-picker .cell-color-picker__trigger--secondary:focus-visible:not(:focus), .cell-color-picker .cell-color-picker__trigger--secondary[data-focus-visible="true"] { background-color: var(--color-default); } .cell-color-picker .cell-color-picker__label { min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; text-align: start; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); flex: 1; overflow: hidden; } .cell-color-picker .cell-color-picker__value-display { text-overflow: ellipsis; white-space: nowrap; text-align: end; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); flex-shrink: 0; margin-inline-start: auto; overflow: hidden; } .cell-color-picker .cell-color-picker__swatch { width: var(--cell-color-picker-swatch-size); height: var(--cell-color-picker-swatch-size); border-radius: 3.40282e38px; flex-shrink: 0; } .cell-color-picker .cell-color-picker__popover { min-width: var(--trigger-width); } .cell-select { --cell-select-indicator-size: .75rem; } .cell-select .cell-select__trigger { height: calc(var(--spacing, .25rem) * 9); align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing, .25rem) * 3); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: flex; } .cell-select .cell-select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .cell-select .cell-select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .cell-select .cell-select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .cell-select .cell-select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .cell-select .cell-select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .cell-select .cell-select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .cell-select .cell-select__trigger { border-width: var(--border-width-field); border-color: var(--color-field-border); padding-inline-end: .75rem; } @media (hover: hover) { .cell-select .cell-select__trigger:hover, .cell-select .cell-select__trigger[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--color-field-border-hover); } } .cell-select .cell-select__trigger:focus-visible:not(:focus), .cell-select .cell-select__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .cell-select .cell-select__trigger:disabled, .cell-select .cell-select__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .cell-select .cell-select__trigger--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-default); } @media (hover: hover) { .cell-select .cell-select__trigger--secondary:hover, .cell-select .cell-select__trigger--secondary[data-hovered="true"] { background-color: var(--color-default-hover); } } .cell-select .cell-select__trigger--secondary:focus-visible:not(:focus), .cell-select .cell-select__trigger--secondary[data-focus-visible="true"] { background-color: var(--color-default); } .cell-select .cell-select__label { min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; text-align: start; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); flex: 1; overflow: hidden; } .cell-select .cell-select__value { text-overflow: ellipsis; white-space: nowrap; text-align: end; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); flex-shrink: 0; margin-inline-start: auto; overflow: hidden; } .cell-select .cell-select__indicator { margin-block: calc(var(--spacing, .25rem) * 0); color: var(--muted); width: var(--cell-select-indicator-size); height: var(--cell-select-indicator-size); flex-shrink: 0; position: static; } .cell-select .cell-select__indicator[data-open="true"] { rotate: 0deg; } .cell-select .cell-select__popover { min-width: var(--trigger-width); } .cell-switch { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; outline-style: none; gap: 0; } .cell-switch .cell-switch__trigger { height: calc(var(--spacing, .25rem) * 9); align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 3); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; display: flex; } .cell-switch .cell-switch__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .cell-switch .cell-switch__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .cell-switch .cell-switch__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .cell-switch .cell-switch__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .cell-switch .cell-switch__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .cell-switch .cell-switch__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .cell-switch .cell-switch__trigger { border-width: var(--border-width-field); border-color: var(--color-field-border); padding-inline-end: .75rem; } .cell-switch .cell-switch__trigger--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-default); } .cell-switch .cell-switch__control--secondary { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .cell-switch .cell-switch__control--secondary { background-color: color-mix(in oklab, var(--muted) 20%, transparent); } } .cell-switch .cell-switch__label { min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; text-align: start; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); flex: 1; overflow: hidden; } .cell-switch .cell-switch__control { flex-shrink: 0; } @media (hover: hover) { .cell-switch .cell-switch__trigger[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--color-field-border-hover); } .cell-switch .cell-switch__trigger--secondary[data-hovered="true"] { background-color: var(--color-default-hover); } .cell-switch .cell-switch__trigger[data-hovered="true"] .cell-switch__control--secondary { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .cell-switch .cell-switch__trigger[data-hovered="true"] .cell-switch__control--secondary { background-color: color-mix(in oklab, var(--muted) 20%, transparent); } } } .cell-switch .cell-switch__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .cell-switch .cell-switch__trigger--secondary[data-focus-visible="true"] { background-color: var(--color-default); } .cell-switch[data-disabled="true"] .cell-switch__trigger, .cell-switch .cell-switch__trigger[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .cell-switch .cell-switch__trigger[data-pressed="true"] .cell-switch__control--secondary { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .cell-switch .cell-switch__trigger[data-pressed="true"] .cell-switch__control--secondary { background-color: color-mix(in oklab, var(--muted) 30%, transparent); } } .cell-slider { --cell-slider-thumb-width: 2px; --cell-slider-thumb-height: 16px; --tw-outline-style: none; -webkit-tap-highlight-color: transparent; outline-style: none; grid-template: none; gap: 0; display: block; } .cell-slider .cell-slider__track { height: calc(var(--spacing, .25rem) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 3); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; align-items: center; display: flex; position: relative; overflow: hidden; } .cell-slider .cell-slider__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .cell-slider .cell-slider__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .cell-slider .cell-slider__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .cell-slider .cell-slider__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .cell-slider .cell-slider__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .cell-slider .cell-slider__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .cell-slider .cell-slider__track { border-width: var(--border-width-field); border-color: var(--color-field-border); padding-right: .75rem; } @media (hover: hover) { .cell-slider .cell-slider__track:hover, .cell-slider .cell-slider__track[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--color-field-border-hover); } } .cell-slider .cell-slider__track[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .cell-slider .cell-slider__track--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-default); } @media (hover: hover) { .cell-slider .cell-slider__track--secondary:hover, .cell-slider .cell-slider__track--secondary[data-hovered="true"] { background-color: var(--color-surface-tertiary); } } .cell-slider .cell-slider__track--secondary[data-focus-visible="true"] { background-color: var(--color-default); } .cell-slider .cell-slider__track--secondary .cell-slider__fill { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .cell-slider .cell-slider__track--secondary .cell-slider__fill { background-color: color-mix(in oklab, var(--muted) 20%, transparent); } } .cell-slider .cell-slider__fill { pointer-events: none; inset-block: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); background-color: var(--color-default); border-radius: 0; position: absolute; } .cell-slider .cell-slider__thumb { top: calc(var(--spacing, .25rem) * 0); --tw-translate-y: calc(1 / 2 * 100%); height: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); --tw-outline-style: none; z-index: 2; width: calc(var(--cell-slider-thumb-width) * 2); box-shadow: none; cursor: var(--cursor-interactive); background: none; border: none; border-radius: 0; outline-style: none; justify-content: center; align-items: center; display: flex; position: absolute; } .cell-slider .cell-slider__thumb:after { content: ""; width: var(--cell-slider-thumb-width); height: var(--cell-slider-thumb-height); border-radius: var(--radius-md); background-color: var(--color-foreground); opacity: 0; box-shadow: none; transition: opacity .15s var(--ease-smooth), transform .12s var(--ease-smooth); display: block; } .cell-slider .cell-slider__thumb:after:is() { transition-property: none; } @media (prefers-reduced-motion: reduce) { .cell-slider .cell-slider__thumb:after:not(:is()) { transition-property: none; } } .cell-slider .cell-slider__thumb[data-focus-visible="true"] { box-shadow: none; outline: none; } .cell-slider .cell-slider__thumb[data-focus-visible="true"]:after { opacity: .7; --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; transform: scaleY(1.2); } .cell-slider .cell-slider__thumb[data-dragging="true"] { cursor: var(--cursor-interactive); } .cell-slider .cell-slider__thumb[data-dragging="true"]:after { opacity: .7; transform: scaleY(1.5); } @media (hover: hover) { .cell-slider .cell-slider__track:hover .cell-slider__thumb:not([data-dragging="true"]):after, .cell-slider .cell-slider__track[data-hovered="true"] .cell-slider__thumb:not([data-dragging="true"]):after { opacity: .4; } } .cell-slider .cell-slider__label { pointer-events: none; max-width: 60%; min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; text-align: start; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); z-index: 1; inset-inline-start: calc(var(--spacing, .25rem) * 3); position: absolute; top: 50%; overflow: hidden; transform: translateY(-50%); } .cell-slider .cell-slider__output { pointer-events: none; text-align: end; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); color: var(--muted); z-index: 1; font-variant-numeric: tabular-nums; inset-inline-end: calc(var(--spacing, .25rem) * 3); position: absolute; top: 50%; transform: translateY(-50%); } .cell-slider[data-disabled="true"] .cell-slider__track, .cell-slider[aria-disabled="true"] .cell-slider__track { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .cell-slider[data-orientation="horizontal"] { flex-direction: row; } .cell-slider[data-orientation="horizontal"] .cell-slider__track { height: calc(var(--spacing, .25rem) * 9); border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-inline-width: 0; } .cell-slider[data-orientation="horizontal"] .cell-slider__fill, .cell-slider[data-orientation="horizontal"] .cell-slider__thumb { height: 100%; } .cell-slider[data-orientation="horizontal"] .cell-slider__thumb { width: 1.25rem; top: 0; } .cell-slider[data-orientation="horizontal"] .cell-slider__thumb:after { width: var(--cell-slider-thumb-width); height: var(--cell-slider-thumb-height); } .chart-tooltip { gap: calc(var(--spacing, .25rem) * 1.5); border-radius: calc(var(--radius) * 1); border-style: var(--tw-border-style); background-color: var(--overlay); min-width: 140px; padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); border-width: 1px; border-color: var(--separator); box-shadow: var(--overlay-shadow); font-variant-numeric: tabular-nums; flex-direction: column; display: flex; } .chart-tooltip__header { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--muted); } .chart-tooltip__item { align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; } .chart-tooltip__indicator { flex-shrink: 0; } .chart-tooltip__indicator--dot { width: calc(var(--spacing, .25rem) * 2); height: calc(var(--spacing, .25rem) * 2); border-radius: 3.40282e38px; } .chart-tooltip__indicator--line { height: calc(var(--spacing, .25rem) * 3); width: calc(var(--spacing, .25rem) * 1); border-radius: 3.40282e38px; } .chart-tooltip__label { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); flex: 1; } .chart-tooltip__value { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .checkbox-button-group { gap: calc(var(--spacing, .25rem) * 3); --checkbox-button-group-item-radius: var(--radius-2xl); display: flex; } .checkbox-button-group--grid { display: grid; } .checkbox-button-group > [data-slot="checkbox-button-group-item"] { display: contents; } .checkbox-button-group__item { align-items: stretch; gap: calc(var(--spacing, .25rem) * 4); padding-inline: calc(var(--spacing, .25rem) * 5); padding-block: calc(var(--spacing, .25rem) * 4); --tw-ring-color: transparent; --tw-outline-style: none; -webkit-tap-highlight-color: transparent; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); background-color: var(--surface); border-radius: var(--checkbox-button-group-item-radius); cursor: var(--cursor-interactive); outline-style: none; flex-direction: column; display: flex; position: relative; } .checkbox-button-group__item[data-selected="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--accent); border-color: #0000; } .checkbox-button-group__item:focus-visible:not(:focus), .checkbox-button-group__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .checkbox-button-group__item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox-button-group__indicator { inset-inline-end: calc(var(--spacing, .25rem) * 4); top: calc(var(--spacing, .25rem) * 3); position: absolute; } .checkbox-button-group__indicator[data-custom="true"] { color: var(--accent); opacity: 0; transition: opacity .15s ease-out; } .checkbox-button-group__indicator[data-custom="true"] svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } [data-selected="true"] > .checkbox-button-group__indicator[data-custom="true"] { opacity: 1; } .checkbox-button-group__item-content { min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; display: flex; } .checkbox-button-group__item-icon { flex-shrink: 0; } .checkbox-button-group__item-icon svg { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); } .code-block { margin-block: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 2); background-color: var(--surface-secondary); width: 100%; color: var(--surface-secondary-foreground); flex-direction: column; display: flex; overflow: clip; } .code-block__header { justify-content: space-between; align-items: center; gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 2); display: flex; } .code-block__code { --tw-leading: var(--leading-relaxed, 1.625); width: 100%; font-size: 13px; line-height: var(--leading-relaxed, 1.625); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overflow-x: auto; } .code-block__code pre { margin: calc(var(--spacing, .25rem) * 0); padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); background: none !important; } .code-block__code code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); } .code-block__code .line { padding-inline: 0 !important; } .code-block__code .shiki, .code-block__code .shiki span { color: var(--shiki-light, var(--color-surface-secondary-foreground)); } :is(.dark, .glass-dark, .mouve-dark, .brutalism-dark, [data-theme="dark"], [data-theme$="-dark"]) .code-block__code .shiki, :is(.dark, .glass-dark, .mouve-dark, .brutalism-dark, [data-theme="dark"], [data-theme$="-dark"]) .code-block__code .shiki span { color: var(--shiki-dark, var(--color-surface-secondary-foreground)); } .code-block__copy-button { cursor: var(--cursor-interactive); color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; outline-style: none; flex-shrink: 0; } .code-block__copy-button.button--icon-only.button--sm { width: 24px; height: 24px; } .code-block__copy-button.button--icon-only.button--sm svg { width: 12px; height: 12px; margin: 0; } .code-block__copy-button:focus-visible:not(:focus), .code-block__copy-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .code-block__copy-button:disabled, .code-block__copy-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .code-block__copy-button:hover, .code-block__copy-button[data-hovered="true"] { color: var(--foreground); } } .composed-chart { width: 100%; } .composed-chart .recharts-cartesian-axis-tick-value { font-size: 10px; fill: var(--muted) !important; } .composed-chart .recharts-cartesian-axis-line, .composed-chart .recharts-cartesian-axis-tick-line { stroke: none !important; } .composed-chart .recharts-cartesian-grid line { stroke: var(--muted); stroke-opacity: .15; } .composed-chart .recharts-tooltip-cursor { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1px; } .composed-chart .recharts-active-dot circle { stroke: var(--surface); stroke-width: 2px; } .command__backdrop { inset: calc(var(--spacing, .25rem) * 0); z-index: 50; height: var(--visual-viewport-height); justify-content: center; align-items: flex-start; width: 100%; display: flex; position: fixed; } .command__backdrop[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .15s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-enter-opacity: 0; } .command__backdrop[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .1s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-exit-opacity: 0; } .command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"] { will-change: opacity; } :is(.command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.command__backdrop[data-exiting="true"], .command__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .command__backdrop--transparent { background-color: #0000; } .command__backdrop--opaque { background-color: #00000080; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--opaque { background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent); } } .command__backdrop--opaque:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--opaque:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } .command__backdrop--opaque:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .command__backdrop--opaque:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--opaque:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .command__backdrop--opaque:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } @media (prefers-color-scheme: dark) { .command__backdrop--opaque:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--opaque { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--opaque:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--opaque { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } .command__backdrop--opaque:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--opaque:before, .command__backdrop--opaque:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--opaque:after { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--opaque:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--opaque:before, .command__backdrop--opaque:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--opaque:after { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } } .command__backdrop--blur { background-color: #00000080; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--blur { background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent); } } .command__backdrop--blur { --tw-backdrop-blur: blur(var(--blur-md, 12px)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .command__backdrop--blur:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--blur:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } .command__backdrop--blur:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .command__backdrop--blur:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--blur:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .command__backdrop--blur:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } @media (prefers-color-scheme: dark) { .command__backdrop--blur:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--blur { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--blur:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--blur { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } .command__backdrop--blur:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--blur:before, .command__backdrop--blur:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--blur:after { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .command__backdrop--blur:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--blur:before, .command__backdrop--blur:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .command__backdrop--blur:after { background-color: color-mix(in oklab, var(--color-black, #000) 60%, transparent); } } } .command__container { height: var(--visual-viewport-height); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 4); pointer-events: none; justify-content: center; align-items: flex-start; padding-top: 15vh; display: flex; } .command__container[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .2s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-enter-opacity: 0; --tw-enter-scale: .95; --tw-enter-translate-y: calc(2*var(--spacing)*-1); transition-duration: .2s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .command__container[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: cubic-bezier(.25, .46, .45, .94); --tw-exit-opacity: 0; --tw-exit-scale: .95; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .command__container[data-exiting="true"], .command__container[data-entering="true"] { will-change: opacity,transform; } :is(.command__container[data-exiting="true"], .command__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.command__container[data-exiting="true"], .command__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.command__container[data-exiting="true"], .command__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.command__container[data-exiting="true"], .command__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.command__container[data-exiting="true"], .command__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.command__container[data-exiting="true"], .command__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .command__dialog { border-radius: calc(var(--radius) * 2); background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; pointer-events: auto; interpolate-size: allow-keywords; outline-style: none; flex-direction: column; transition: height .2s cubic-bezier(.16, 1, .3, 1); display: flex; position: relative; overflow: hidden; } .command__dialog:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .command__dialog:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .command__dialog:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .command__dialog:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .command__dialog:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .command__dialog:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .command__input-group { align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--border); width: 100%; display: flex; } @supports (color: color-mix(in lab, red, red)) { .command__input-group { border-color: color-mix(in oklab, var(--border) 70%, transparent); } } .command__input-group [data-slot="command-input-group-input"] { min-width: calc(var(--spacing, .25rem) * 0); padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 3); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--foreground); --tw-outline-style: none; background-color: #0000; outline-style: none; flex: 1; } .command__input-group [data-slot="command-input-group-input"]::placeholder { color: var(--muted); } .command__input-group [data-slot="command-input-group-input"]::-webkit-search-cancel-button { appearance: none; } .command__input-group [data-slot="command-input-group-input"]::-webkit-search-decoration { appearance: none; } .command__input-group:has([data-slot="command-input-group-prefix"]) [data-slot="command-input-group-input"] { padding-inline-start: calc(var(--spacing, .25rem) * 0); } .command__input-group:has([data-slot="command-input-group-suffix"]) [data-slot="command-input-group-input"] { padding-inline-end: calc(var(--spacing, .25rem) * 0); } .command__input-group[data-empty="true"] [data-slot="command-input-group-clear-button"] { pointer-events: none; opacity: 0; } .command__input-group-clear-button { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); flex-shrink: 0; margin-inline-end: calc(var(--spacing, .25rem) * 3); } .command__input-group-clear-button [data-slot="close-button-icon"] { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); } .command__input-group-prefix { color: var(--muted); flex-shrink: 0; align-items: center; padding-inline-start: calc(var(--spacing, .25rem) * 4); display: flex; } .command__input-group-prefix svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .command__input-group-suffix { color: var(--muted); flex-shrink: 0; align-items: center; padding-inline-end: calc(var(--spacing, .25rem) * 4); display: flex; } .command__input-group-suffix svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .command__list { overscroll-behavior: contain; padding: calc(var(--spacing, .25rem) * 1.5); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); --tw-outline-style: none; -webkit-overflow-scrolling: touch; outline-style: none; flex: 1; overflow-y: auto; } .command__item { align-items: center; gap: calc(var(--spacing, .25rem) * 2.5); border-radius: calc(var(--radius) * 1); padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--foreground); --tw-outline-style: none; -webkit-user-select: none; user-select: none; cursor: var(--cursor-interactive); outline-style: none; display: flex; position: relative; } @media (hover: hover) { .command__item:hover, .command__item[data-hovered="true"] { background-color: var(--default); } } .command__item[data-focused="true"] { background-color: var(--default); } .command__item:active, .command__item[data-pressed="true"] { background-color: var(--default-hover); } .command__item[data-disabled="true"] { opacity: .5; cursor: default; } .command__item svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: var(--muted); flex-shrink: 0; } .command__item kbd { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); margin-inline-start: auto; } .command__group + .command__group { margin-top: calc(var(--spacing, .25rem) * 1); } .command__group-heading { padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--muted); -webkit-user-select: none; user-select: none; } .command__separator { margin-inline: calc(var(--spacing, .25rem) * 3); margin-block: calc(var(--spacing, .25rem) * 1); background-color: var(--separator); height: 1px; } .command__header { align-items: center; gap: calc(var(--spacing, .25rem) * 2); width: 100%; padding: calc(var(--spacing, .25rem) * 2); padding-bottom: calc(var(--spacing, .25rem) * 0); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); display: flex; } .command__footer { align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--border); width: 100%; display: flex; } @supports (color: color-mix(in lab, red, red)) { .command__footer { border-color: color-mix(in oklab, var(--border) 50%, transparent); } } .command__footer { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .command__footer { background-color: color-mix(in oklab, var(--default) 50%, transparent); } } .command__footer { padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 1); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .command__empty { height: 100%; padding-block: calc(var(--spacing, .25rem) * 6); text-align: center; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); justify-content: center; align-items: center; display: flex; } .command__dialog--sm { width: 100%; max-width: var(--container-sm, 24rem); max-height: min(80vh, 300px); } .command__dialog--md { width: 100%; max-width: var(--container-lg, 32rem); max-height: min(80vh, 356px); } .command__dialog--lg { width: 100%; max-width: var(--container-xl, 36rem); max-height: min(80vh, 440px); } .context-menu__trigger { -webkit-touch-callout: none; display: inline-block; position: relative; } .context-menu__popover { max-width: 48svw; scroll-padding-block: calc(var(--spacing, .25rem) * 1); overscroll-behavior: contain; border-radius: calc(var(--radius) * 3); background-color: var(--overlay); padding: calc(var(--spacing, .25rem) * 0); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); --tw-outline-style: none; outline-style: none; overflow-y: auto; } @media (min-width: 48rem) { .context-menu__popover { min-width: calc(var(--spacing, .25rem) * 55); } } .context-menu__popover { box-shadow: var(--shadow-overlay); transform-origin: var(--trigger-anchor-point, center); } .context-menu__popover:focus-visible:not(:focus), .context-menu__popover[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } .context-menu__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: ease; --tw-enter-opacity: 0; --tw-enter-scale: .9; transition-duration: .15s; transition-timing-function: ease; } .context-menu__popover[data-entering="true"][data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .context-menu__popover[data-entering="true"][data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .context-menu__popover[data-entering="true"][data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .context-menu__popover[data-entering="true"][data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .context-menu__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: ease; --tw-exit-scale: .95; --tw-exit-opacity: 0; transition-duration: .1s; transition-timing-function: ease; } .context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"] { will-change: opacity,transform; } :is(.context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.context-menu__popover[data-exiting="true"], .context-menu__popover[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .context-menu__popover [data-slot="context-menu-menu"] { padding: calc(var(--spacing, .25rem) * 1.5); --tw-outline-style: none; outline-style: none; } .context-menu__popover [data-slot="context-menu-separator"] { width: 94%; margin-left: 3%; } .context-menu__menu { gap: calc(var(--spacing, .25rem) * .5); width: 100%; padding: calc(var(--spacing, .25rem) * 1); flex-direction: column; display: flex; position: relative; overflow: clip; } .context-menu__separator { margin-block: calc(var(--spacing, .25rem) * 1); background-color: var(--separator); width: 100%; height: 1px; } .data-grid { --data-grid-selection-column-width: 40px; --data-grid-drag-handle-column-width: 32px; --data-grid-tree-toggle-size: 24px; --data-grid-tree-gap: 4px; width: 100%; position: relative; } .data-grid__selection-column { width: var(--data-grid-selection-column-width); padding-inline-end: calc(var(--spacing, .25rem) * 0); } .data-grid__selection-column:after { content: none; } .data-grid__selection-cell { width: var(--data-grid-selection-column-width); padding-inline-end: calc(var(--spacing, .25rem) * 0); } .data-grid__drag-handle-column { width: var(--data-grid-drag-handle-column-width); padding-inline: calc(var(--spacing, .25rem) * 0); } .data-grid__drag-handle-column:after { content: none; } .data-grid__drag-handle-cell { width: var(--data-grid-drag-handle-column-width); padding-inline: calc(var(--spacing, .25rem) * 0); } .data-grid__drag-handle { cursor: grab; width: 100%; height: 100%; padding: calc(var(--spacing, .25rem) * 0); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; --tw-border-style: none; --tw-leading: 1; color: var(--muted); background-color: #0000; border-style: none; outline-style: none; justify-content: center; align-items: center; line-height: 1; display: flex; } .data-grid__drag-handle svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .data-grid__drag-handle:focus-visible:not(:focus), .data-grid__drag-handle[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } @media (hover: hover) { .data-grid__drag-handle:hover, .data-grid__drag-handle[data-hovered="true"] { color: var(--foreground); } } .data-grid__drag-handle:active, .data-grid__drag-handle[data-pressed="true"] { cursor: grabbing; } .data-grid .react-aria-DropIndicator { --tw-outline-style: none; outline-style: none; } .data-grid .react-aria-DropIndicator td { padding: calc(var(--spacing, .25rem) * 0); height: 2px; } .data-grid .react-aria-DropIndicator[data-drop-target] td { background-color: var(--accent); } [data-slot="data-grid"] .table__row[data-dragging="true"] { opacity: .5; } .data-grid__sort-icon { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .1s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .1s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); flex-shrink: 0; display: inline-flex; } .data-grid__sort-icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .data-grid__sort-icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .data-grid__sort-icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .data-grid__sort-icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .data-grid__sort-icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .data-grid__sort-icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .data-grid__sort-icon[data-direction="descending"] { rotate: 180deg; } .data-grid__empty-state { padding-block: calc(var(--spacing, .25rem) * 12); text-align: center; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); justify-content: center; align-items: center; display: flex; } [data-slot="data-grid"][data-vertical-align="top"] .table__cell { vertical-align: top; } [data-slot="data-grid"][data-vertical-align="middle"] .table__cell { vertical-align: middle; } [data-slot="data-grid"][data-vertical-align="bottom"] .table__cell { vertical-align: bottom; } [data-slot="data-grid"][data-vertical-align="top"] .table__body:not(tbody) [data-slot="table-cell"] { align-items: flex-start; display: flex; } [data-slot="data-grid"][data-vertical-align="middle"] .table__body:not(tbody) [data-slot="table-cell"] { align-items: center; display: flex; } [data-slot="data-grid"][data-vertical-align="bottom"] .table__body:not(tbody) [data-slot="table-cell"] { align-items: flex-end; display: flex; } [data-slot="data-grid"] [data-align="end"] { text-align: end; } [data-slot="data-grid"] [data-align="center"] { text-align: center; } [data-slot="data-grid"] [data-pinned] { z-index: 2; position: sticky; } [data-slot="data-grid"] .table__column[data-pinned], [data-slot="data-grid"] .data-grid__selection-column[data-pinned], [data-slot="data-grid"] .data-grid__drag-handle-column[data-pinned] { background-color: var(--surface-secondary); } [data-slot="data-grid"] .table__cell[data-pinned], [data-slot="data-grid"] .data-grid__selection-cell[data-pinned], [data-slot="data-grid"] .data-grid__drag-handle-cell[data-pinned] { background-color: var(--surface); } [data-slot="data-grid"] [data-pinned]:after { content: none; } @media (hover: hover) { [data-slot="data-grid"] .table__row:hover [data-pinned].table__cell, [data-slot="data-grid"] .table__row[data-hovered="true"] [data-pinned].table__cell { background-color: var(--color-surface); } @supports (color: color-mix(in lab, red, red)) { [data-slot="data-grid"] .table__row:hover [data-pinned].table__cell, [data-slot="data-grid"] .table__row[data-hovered="true"] [data-pinned].table__cell { background-color: color-mix(in oklch, var(--color-surface) 40%, var(--color-surface-secondary)); } } } [data-slot="data-grid"] .table__row[data-selected="true"] [data-pinned].table__cell { background-color: var(--color-surface); } @supports (color: color-mix(in lab, red, red)) { [data-slot="data-grid"] .table__row[data-selected="true"] [data-pinned].table__cell { background-color: color-mix(in oklch, var(--color-surface) 10%, var(--color-surface-secondary)); } } [data-slot="data-grid"][data-pinned-start-detached] [data-pinned="start"][data-pinned-edge]:after { content: ""; pointer-events: none; inset-inline-end: calc(var(--spacing, .25rem) * 0); top: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); --tw-translate-y: calc(var(--spacing, .25rem) * 0); width: 1px; height: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); background: var(--color-separator); position: absolute; } [data-slot="data-grid"][data-pinned-end-detached] [data-pinned="end"][data-pinned-edge]:after { content: ""; pointer-events: none; inset-inline-start: calc(var(--spacing, .25rem) * 0); top: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); --tw-translate-y: calc(var(--spacing, .25rem) * 0); width: 1px; height: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); background: var(--color-separator); position: absolute; } [data-slot="data-grid"][data-pinned-start-detached] .table__body tr:first-child td:first-child[data-pinned="start"][data-pinned-edge], [data-slot="data-grid"][data-pinned-start-detached] .table__body tr:last-child td:first-child[data-pinned="start"][data-pinned-edge], [data-slot="data-grid"][data-pinned-end-detached] .table__body tr:first-child td:last-child[data-pinned="end"][data-pinned-edge], [data-slot="data-grid"][data-pinned-end-detached] .table__body tr:last-child td:last-child[data-pinned="end"][data-pinned-edge] { border-radius: 0; } .table-root--secondary [data-pinned].table__cell { background-color: var(--background); } .table-root--secondary .table__column[data-pinned] { background-color: var(--surface-secondary); } .data-grid__tree-cell { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: var(--data-grid-tree-gap); display: flex; } .data-grid__tree-toggle { width: var(--data-grid-tree-toggle-size); height: var(--data-grid-tree-toggle-size); flex-shrink: 0; } .data-grid__tree-toggle-icon { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: var(--muted); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .15s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .15s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); } .data-grid__tree-toggle-icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .data-grid__tree-toggle-icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .data-grid__tree-toggle-icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .data-grid__tree-toggle-icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .data-grid__tree-toggle-icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .data-grid__tree-toggle-icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .data-grid__tree-toggle-icon[data-expanded] { rotate: 90deg; } .data-grid__tree-toggle-icon:dir(rtl):not([data-expanded]) { rotate: 180deg; } .data-grid__tree-toggle-spacer { width: var(--data-grid-tree-toggle-size); height: var(--data-grid-tree-toggle-size); flex-shrink: 0; display: inline-block; } .table__row:last-child .table__cell { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .drop-zone { gap: calc(var(--spacing, .25rem) * 3); --drop-zone-border-style: dashed; flex-direction: column; display: flex; } .drop-zone__area { justify-content: center; align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); padding-inline: calc(var(--spacing, .25rem) * 6); padding-block: calc(var(--spacing, .25rem) * 8); text-align: center; --tw-outline-style: none; border-width: 1px; border-style: var(--drop-zone-border-style); border-color: var(--color-border-secondary); forced-color-adjust: none; outline-style: none; flex-direction: column; transition: background-color .15s, border-color .15s; display: flex; } .drop-zone__area:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drop-zone__area:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drop-zone__area:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .drop-zone__area:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drop-zone__area:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drop-zone__area:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .drop-zone__area[data-drop-target] { background-color: var(--accent-soft); border-color: var(--color-accent); } .drop-zone__area[data-focus-visible] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .drop-zone__area[data-disabled] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .drop-zone__icon { color: var(--muted); justify-content: center; align-items: center; display: flex; } .drop-zone__icon svg { width: calc(var(--spacing, .25rem) * 8); height: calc(var(--spacing, .25rem) * 8); } .drop-zone__label { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); } .drop-zone__description { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .drop-zone__trigger { isolation: isolate; margin-top: calc(var(--spacing, .25rem) * 1); height: calc(var(--spacing, .25rem) * 10); justify-content: center; align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 3); border-style: var(--tw-border-style); padding-inline: calc(var(--spacing, .25rem) * 4); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); white-space: nowrap; --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; border-width: 1px; outline-style: none; display: inline-flex; position: relative; } @media (min-width: 48rem) { .drop-zone__trigger { height: calc(var(--spacing, .25rem) * 9); } } .drop-zone__trigger { border-color: var(--border); cursor: var(--cursor-interactive); --button-bg: transparent; --button-bg-hover: var(--color-default); } @supports (color: color-mix(in lab, red, red)) { .drop-zone__trigger { --button-bg-hover: color-mix(in srgb, var(--color-default) 60%, transparent); } } .drop-zone__trigger { --button-bg-pressed: var(--color-default); --button-fg: var(--color-default-foreground); background-color: var(--button-bg); color: var(--button-fg); transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .drop-zone__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drop-zone__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drop-zone__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .drop-zone__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drop-zone__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drop-zone__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .drop-zone__trigger:hover, .drop-zone__trigger[data-hovered="true"] { background-color: var(--button-bg-hover); } } .drop-zone__trigger:active, .drop-zone__trigger[data-pressed="true"] { background-color: var(--button-bg-pressed); transform: scale(.97); } .drop-zone__trigger:focus-visible:not(:focus), .drop-zone__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .drop-zone__trigger:disabled, .drop-zone__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .drop-zone__trigger[data-pending="true"] { pointer-events: none; } .drop-zone__trigger svg:not([data-slot="spinner"] svg) { pointer-events: none; margin-inline: calc(var(--spacing, .25rem) * -.5); margin-block: calc(var(--spacing, .25rem) * .5); width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); flex-shrink: 0; align-self: center; } @media (min-width: 40rem) { .drop-zone__trigger svg:not([data-slot="spinner"] svg) { margin-block: calc(var(--spacing, .25rem) * 1); width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } } .drop-zone__input { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .drop-zone__file-list { gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; display: flex; } .drop-zone__file-item { align-items: flex-start; gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); padding: calc(var(--spacing, .25rem) * 3); border-width: 1px; border-color: var(--color-border); transition: border-color .15s; display: flex; position: relative; } .drop-zone__file-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drop-zone__file-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drop-zone__file-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .drop-zone__file-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drop-zone__file-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drop-zone__file-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .drop-zone__file-item[data-status="failed"] { border-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .drop-zone__file-item[data-status="failed"] { border-color: color-mix(in oklab, var(--danger) 30%, transparent); } } .drop-zone__file-format-icon { flex-shrink: 0; width: 32px; height: 40px; position: relative; } .drop-zone__file-format-icon-badge { bottom: calc(var(--spacing, .25rem) * 1); left: calc(var(--spacing, .25rem) * 0); height: calc(var(--spacing, .25rem) * 3.5); padding-inline: 3px; padding-block: calc(var(--spacing, .25rem) * .5); --tw-leading: 1; --tw-font-weight: var(--font-weight-bold, 700); font-size: 8px; line-height: 1; font-weight: var(--font-weight-bold, 700); text-transform: uppercase; color: #fff; white-space: nowrap; border-radius: .25rem; align-items: center; max-width: 32px; display: flex; position: absolute; overflow: hidden; } .drop-zone__file-format-icon-badge[data-color="red"] { background-color: var(--color-red-500, oklch(63.7% .237 25.331)); } .drop-zone__file-format-icon-badge[data-color="green"] { background-color: var(--color-green-500, oklch(72.3% .219 149.579)); } .drop-zone__file-format-icon-badge[data-color="blue"] { background-color: var(--color-blue-500, oklch(62.3% .214 259.815)); } .drop-zone__file-format-icon-badge[data-color="orange"] { background-color: var(--color-orange-500, oklch(70.5% .213 47.604)); } .drop-zone__file-format-icon-badge[data-color="purple"] { background-color: var(--color-purple-500, oklch(62.7% .265 303.9)); } .drop-zone__file-format-icon-badge[data-color="gray"] { background-color: var(--color-gray-500, oklch(55.1% .027 264.364)); } .drop-zone__file-info { min-width: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * .5); flex-direction: column; flex: 1; display: flex; } .drop-zone__file-name { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); overflow: hidden; } .drop-zone__file-meta { align-items: center; gap: calc(var(--spacing, .25rem) * 1); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); display: flex; } .drop-zone__file-progress { margin-top: calc(var(--spacing, .25rem) * 1); width: 100%; } .drop-zone__file-item[data-status="complete"] .drop-zone__file-progress .progress-bar__fill { --progress-bar-fill: var(--success); } .drop-zone__file-item[data-status="failed"] .drop-zone__file-progress .progress-bar__fill { --progress-bar-fill: var(--danger); } .drop-zone__file-retry-trigger { margin-top: calc(var(--spacing, .25rem) * .5); cursor: pointer; padding: calc(var(--spacing, .25rem) * 0); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--danger); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); background-color: #0000; outline-style: none; } @media (hover: hover) { .drop-zone__file-retry-trigger:hover, .drop-zone__file-retry-trigger[data-hovered="true"] { text-decoration: underline; } } .drop-zone__file-retry-trigger:focus-visible:not(:focus), .drop-zone__file-retry-trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .drop-zone__file-remove-trigger { border-radius: calc(var(--radius) * .75); padding: calc(var(--spacing, .25rem) * 1); color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; transition: color .15s; display: flex; } .drop-zone__file-remove-trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drop-zone__file-remove-trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drop-zone__file-remove-trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .drop-zone__file-remove-trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drop-zone__file-remove-trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drop-zone__file-remove-trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .drop-zone__file-remove-trigger svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } @media (hover: hover) { .drop-zone__file-remove-trigger:hover, .drop-zone__file-remove-trigger[data-hovered="true"] { color: var(--foreground); } } .drop-zone__file-remove-trigger:active, .drop-zone__file-remove-trigger[data-pressed="true"] { color: var(--foreground); } .drop-zone__file-remove-trigger:focus-visible:not(:focus), .drop-zone__file-remove-trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .drop-zone__file-remove-trigger:disabled, .drop-zone__file-remove-trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .emoji-picker__trigger { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); outline-style: none; } .emoji-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .emoji-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .emoji-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .emoji-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .emoji-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .emoji-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .emoji-picker__trigger { cursor: var(--cursor-interactive); } .emoji-picker__trigger:focus-visible:not(:focus), .emoji-picker__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .emoji-picker__trigger:disabled, .emoji-picker__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .emoji-picker__trigger:active, .emoji-picker__trigger[data-pressed="true"] { transform: scale(.97); } .emoji-picker__value { --tw-leading: 1; line-height: 1; } .emoji-picker__popover { border-radius: calc(var(--radius) * 2); background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; box-sizing: border-box; outline-style: none; flex-direction: column; display: flex; overflow: hidden; } .emoji-picker__popover[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .15s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-enter-opacity: 0; --tw-enter-scale: .95; } .emoji-picker__popover[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .1s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-exit-opacity: 0; --tw-exit-scale: .95; } .emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"] { will-change: opacity,transform; } :is(.emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.emoji-picker__popover[data-entering="true"], .emoji-picker__popover[data-exiting="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .emoji-picker__popover--sm { width: 240px; height: 280px; } .emoji-picker__popover--md { width: 280px; height: 350px; } .emoji-picker__popover--lg { width: 320px; height: 420px; } .emoji-picker__content { gap: calc(var(--spacing, .25rem) * 1.5); padding: calc(var(--spacing, .25rem) * 2); flex-direction: column; flex: 1; display: flex; overflow: hidden; } .emoji-picker__grid { padding-top: calc(var(--spacing, .25rem) * 1); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); --tw-outline-style: none; -webkit-overflow-scrolling: touch; outline-style: none; flex: 1; scroll-padding: 4px; overflow: auto; } .emoji-picker__grid:has( ~ [data-slot="emoji-picker-footer"]) { padding-bottom: calc(var(--spacing, .25rem) * 10); } .emoji-picker__item { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; width: 100%; height: 100%; cursor: var(--cursor-interactive); outline-style: none; justify-content: center; align-items: center; display: flex; } @media (hover: hover) { .emoji-picker__item:hover, .emoji-picker__item[data-hovered="true"] { background-color: var(--default); } } .emoji-picker__item[data-focused="true"] { background-color: var(--default); } .emoji-picker__item[data-pressed="true"] { background-color: var(--default-hover); } .emoji-picker__item:focus-visible:not(:focus), .emoji-picker__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .emoji-picker__item[data-selected="true"] { background-color: var(--default-hover); } .emoji-picker__item:disabled, .emoji-picker__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .emoji-picker__item--sm { font-size: 20px; } .emoji-picker__item--md { font-size: 24px; } .emoji-picker__item--lg { font-size: 28px; } .emoji-picker__footer { inset-inline: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--border); width: 100%; display: flex; position: absolute; } @supports (color: color-mix(in lab, red, red)) { .emoji-picker__footer { border-color: color-mix(in oklab, var(--border) 50%, transparent); } } .emoji-picker__footer { background-color: var(--surface); padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .emoji-picker__empty { height: 100%; padding-block: calc(var(--spacing, .25rem) * 6); text-align: center; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); flex: 1; justify-content: center; align-items: center; display: flex; } .emoji-picker__skin-tone-options { align-items: center; gap: calc(var(--spacing, .25rem) * .5); padding: calc(var(--spacing, .25rem) * 1); display: flex; } .emoji-picker__skin-tone-picker { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); border-radius: calc(var(--radius) * .75); font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); --tw-leading: 1; --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; line-height: 1; display: flex; } @media (hover: hover) { .emoji-picker__skin-tone-picker:hover, .emoji-picker__skin-tone-picker[data-hovered="true"] { background-color: var(--default); } } .emoji-picker__skin-tone-picker:focus-visible:not(:focus), .emoji-picker__skin-tone-picker[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .emoji-picker__skin-tone-picker:disabled, .emoji-picker__skin-tone-picker[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .emoji-picker__skin-tone-option { border-radius: calc(var(--radius) * 2); padding: calc(var(--spacing, .25rem) * 1); font-size: var(--text-xl, 1.25rem); line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25))); --tw-leading: 1; --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; justify-content: center; align-items: center; line-height: 1; display: flex; } @media (hover: hover) { .emoji-picker__skin-tone-option:hover, .emoji-picker__skin-tone-option[data-hovered="true"] { background-color: var(--default); } } .emoji-picker__skin-tone-option:focus-visible:not(:focus), .emoji-picker__skin-tone-option[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .emoji-picker__skin-tone-option[data-selected="true"] { background-color: var(--default-hover); } .emoji-picker__skin-tone-option:disabled, .emoji-picker__skin-tone-option[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .empty-state { text-align: center; flex-direction: column; align-items: center; display: flex; } .empty-state--sm { gap: calc(var(--spacing, .25rem) * 3); padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 6); } .empty-state--md { gap: calc(var(--spacing, .25rem) * 4); padding-inline: calc(var(--spacing, .25rem) * 6); padding-block: calc(var(--spacing, .25rem) * 8); } .empty-state--lg { gap: calc(var(--spacing, .25rem) * 5); padding-inline: calc(var(--spacing, .25rem) * 8); padding-block: calc(var(--spacing, .25rem) * 12); } .empty-state__header { align-items: center; gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; display: flex; } .empty-state__media { color: var(--muted); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .empty-state__media[data-variant="icon"] { background-color: var(--default); color: var(--foreground); border-radius: 3.40282e38px; } .empty-state--sm .empty-state__media[data-variant="icon"] { width: calc(var(--spacing, .25rem) * 10); height: calc(var(--spacing, .25rem) * 10); } .empty-state--sm .empty-state__media[data-variant="icon"] svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .empty-state--md .empty-state__media[data-variant="icon"] { width: calc(var(--spacing, .25rem) * 12); height: calc(var(--spacing, .25rem) * 12); } .empty-state--md .empty-state__media[data-variant="icon"] svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } .empty-state--lg .empty-state__media[data-variant="icon"] { width: calc(var(--spacing, .25rem) * 14); height: calc(var(--spacing, .25rem) * 14); } .empty-state--lg .empty-state__media[data-variant="icon"] svg { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); } .empty-state__title { --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .empty-state--sm .empty-state__title { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .empty-state--md .empty-state__title { font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); } .empty-state--lg .empty-state__title { font-size: var(--text-lg, 1.125rem); line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))); } .empty-state__description { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); } .empty-state--sm .empty-state__description { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .empty-state__content { align-items: center; gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; display: flex; } .emoji-reaction-button { align-items: center; gap: calc(var(--spacing, .25rem) * 1.5); border-style: var(--tw-border-style); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: var(--default); -webkit-user-select: none; user-select: none; transition: transform .2s var(--ease-smooth), background-color .1s var(--ease-out), border-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); border-width: 1px; border-color: #0000; border-radius: 3.40282e38px; outline-style: none; display: inline-flex; } .emoji-reaction-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .emoji-reaction-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .emoji-reaction-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .emoji-reaction-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .emoji-reaction-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .emoji-reaction-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .emoji-reaction-button { cursor: var(--cursor-interactive); } .emoji-reaction-button[data-selected="true"] { border-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .emoji-reaction-button[data-selected="true"] { border-color: color-mix(in oklab, var(--accent) 30%, transparent); } } .emoji-reaction-button[data-selected="true"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .emoji-reaction-button[data-selected="true"] { background-color: color-mix(in oklab, var(--accent) 10%, transparent); } } @media (hover: hover) { .emoji-reaction-button:hover, .emoji-reaction-button[data-hovered="true"] { background-color: var(--default); } .emoji-reaction-button[data-selected="true"]:hover, .emoji-reaction-button[data-selected="true"][data-hovered="true"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .emoji-reaction-button[data-selected="true"]:hover, .emoji-reaction-button[data-selected="true"][data-hovered="true"] { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } } .emoji-reaction-button:focus-visible:not(:focus), .emoji-reaction-button[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .emoji-reaction-button:active, .emoji-reaction-button[data-pressed="true"] { transform: scale(.95); } .emoji-reaction-button[data-readonly="true"] { pointer-events: none; cursor: default; } .emoji-reaction-button:active[data-readonly="true"], .emoji-reaction-button[data-pressed="true"][data-readonly="true"] { transform: none; } .emoji-reaction-button:disabled, .emoji-reaction-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .emoji-reaction-button--sm { padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * 1); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .emoji-reaction-button--md { padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * 1); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .emoji-reaction-button--lg { padding-inline: calc(var(--spacing, .25rem) * 2.5); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); } .emoji-reaction-button__emoji { --tw-leading: 1; line-height: 1; } .emoji-reaction-button__count { --tw-leading: 1; --tw-font-weight: var(--font-weight-medium, 500); line-height: 1; font-weight: var(--font-weight-medium, 500); color: var(--muted); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } [data-selected="true"] > .emoji-reaction-button__count { color: var(--accent); } .file-tree { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); padding: calc(var(--spacing, .25rem) * 1); --tw-outline-style: none; forced-color-adjust: none; --file-tree-indent: calc(var(--spacing) * 4); --file-tree-item-px: 8px; --file-tree-guide-color: currentColor; outline-style: none; flex-direction: column; display: flex; overflow: auto; } @supports (color: color-mix(in lab, red, red)) { .file-tree { --file-tree-guide-color: color-mix(in srgb, currentColor 10%, transparent); } } .file-tree { --file-tree-chevron-offset: 0px; } .file-tree:has(.file-tree__drag-handle):not(:has(.file-tree__checkbox)) { --file-tree-chevron-offset: 22px; } .file-tree[data-focus-visible] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .file-tree[data-empty] { padding-block: calc(var(--spacing, .25rem) * 6); text-align: center; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); justify-content: center; align-items: center; min-height: 100px; font-style: italic; display: flex; } .file-tree__item { color: var(--foreground); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; border-radius: calc(var(--radius) * 1); cursor: var(--cursor-interactive); outline-style: none; align-items: center; display: flex; position: relative; } @media (hover: hover) { .file-tree__item:hover:not(:has(.file-tree__chevron:hover)), .file-tree__item[data-hovered="true"]:not(:has(.file-tree__chevron:hover)) { background-color: var(--default); } } .file-tree__item:active, .file-tree__item[data-pressed="true"] { background-color: var(--default-hover); } .file-tree__item:focus-visible:not(:focus), .file-tree__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .file-tree__item:disabled, .file-tree__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .file-tree__item[data-selected="true"] { background-color: var(--default); } .file-tree__item[data-selected="true"]:has( + [data-selected="true"]) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .file-tree__item[data-selected="true"] + [data-selected="true"] { border-top-left-radius: 0; border-top-right-radius: 0; } .file-tree__guide-line { pointer-events: none; -webkit-user-select: none; user-select: none; background-color: var(--file-tree-guide-color); width: 1px; position: absolute; inset-block: 0; } .file-tree__guide-line--hover { opacity: 0; transition: opacity .15s; } .file-tree:hover .file-tree__guide-line--hover { opacity: 1; } .file-tree__guide-line--none { display: none; } .file-tree__item-content { align-items: center; gap: calc(var(--spacing, .25rem) * .5); width: 100%; padding-inline-start: calc((var(--tree-item-level) - 1) * var(--file-tree-indent)); display: flex; } .file-tree__checkbox { flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .file-tree__chevron { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); border-radius: calc(var(--radius) * .75); visibility: hidden; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .file-tree__item[data-has-child-items] .file-tree__chevron { visibility: visible; cursor: var(--cursor-interactive); } @media (hover: hover) { .file-tree__item[data-has-child-items] .file-tree__chevron:hover { background-color: var(--default-hover); } } .file-tree__indicator { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); color: var(--muted); transition: rotate .15s; rotate: 0deg; } .file-tree__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .file-tree__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .file-tree__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .file-tree__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .file-tree__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .file-tree__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .file-tree__indicator:dir(rtl) { rotate: 180deg; } .file-tree__item[data-expanded] .file-tree__indicator { rotate: 90deg; } .file-tree__icon { color: var(--muted); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .file-tree__icon svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .file-tree__label { text-overflow: ellipsis; white-space: nowrap; padding-inline: calc(var(--spacing, .25rem) * .5); color: var(--foreground); -webkit-user-select: none; user-select: none; flex: 1; overflow: hidden; } .file-tree__section:not(:first-child) { margin-top: calc(var(--spacing, .25rem) * 3); } .file-tree__section-header { padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--muted); -webkit-user-select: none; user-select: none; } .file-tree__drag-handle { color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); opacity: 0; cursor: grab; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; transition: opacity .15s; display: flex; } .file-tree__drag-handle svg { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); } .file-tree__drag-handle:active { cursor: grabbing; } @media (hover: hover) { .file-tree__item:hover .file-tree__drag-handle { opacity: .4; } .file-tree__item .file-tree__drag-handle:hover { opacity: .7; } } .file-tree__item[data-dragging] { opacity: .4; } .file-tree__item[data-drop-target] { background-color: var(--accent-soft); outline: 2px solid var(--color-accent); outline-offset: -2px; } .file-tree .react-aria-DropIndicator { --tw-outline-style: none; outline-style: none; } .file-tree .react-aria-DropIndicator[data-drop-target] { outline: 1px solid var(--color-accent); } .file-tree--sm { --file-tree-indent: calc(var(--spacing) * 2.5); --file-tree-item-px: 10px; } .file-tree__item--sm { padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * .5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .file-tree__item--sm .file-tree__icon svg { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); } .file-tree--md { --file-tree-indent: calc(var(--spacing) * 3); --file-tree-item-px: 12px; } .file-tree__item--md { padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 1); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .file-tree__item--md .file-tree__icon svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .file-tree--lg { --file-tree-indent: calc(var(--spacing) * 6); --file-tree-item-px: 8px; } .file-tree__item--lg { padding-inline: calc(var(--spacing, .25rem) * 2.5); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); } .file-tree__item--lg .file-tree__icon svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } .floating-toc__trigger { padding: calc(var(--spacing, .25rem) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); --floating-toc-bar-width: 16px; --floating-toc-bar-active-width: 24px; --floating-toc-bar-height: 2px; --floating-toc-bar-active-height: 2px; --floating-toc-bar-level-step: 3px; --floating-toc-bar-gap: 12px; align-items: flex-end; gap: var(--floating-toc-bar-gap); outline-style: none; flex-direction: column; display: inline-flex; } .floating-toc__trigger[data-placement="left"] { align-items: flex-start; } .floating-toc__trigger:focus-visible:not(:focus), .floating-toc__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .floating-toc__bar { width: var(--floating-toc-bar-active-width); height: var(--floating-toc-bar-active-height); justify-content: flex-end; align-items: center; display: flex; } [data-placement="left"] > .floating-toc__bar { justify-content: flex-start; } .floating-toc__bar:after { content: ""; border-radius: calc(var(--radius) * .5); background-color: var(--border); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .15s; width: calc(var(--floating-toc-bar-width) - (var(--floating-toc-level, 1) - 1) * var(--floating-toc-bar-level-step)); height: var(--floating-toc-bar-height); transition-duration: .15s; display: block; } .floating-toc__bar[data-active="true"]:after { background-color: var(--accent); width: calc(var(--floating-toc-bar-active-width) - (var(--floating-toc-level, 1) - 1) * var(--floating-toc-bar-level-step)); height: var(--floating-toc-bar-active-height); } .floating-toc__content { border-radius: calc(var(--radius) * 2); background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; padding: calc(var(--spacing, .25rem) * 1.5); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); overscroll-behavior: contain; --floating-toc-item-indent: .75rem; outline-style: none; max-height: min(60vh, 400px); overflow-y: auto; } .floating-toc__content[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .15s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-enter-opacity: 0; --tw-enter-scale: .97; } .floating-toc__content[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .1s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-exit-opacity: 0; --tw-exit-scale: .97; } .floating-toc__content[data-placement="bottom"][data-entering="true"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .floating-toc__content[data-placement="top"][data-entering="true"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .floating-toc__content[data-placement="left"][data-entering="true"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .floating-toc__content[data-placement="right"][data-entering="true"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"] { will-change: opacity,transform; } :is(.floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.floating-toc__content[data-exiting="true"], .floating-toc__content[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .floating-toc__item { border-radius: calc(var(--radius) * 1); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 1.5); text-align: start; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); white-space: nowrap; color: var(--muted); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; align-items: center; padding-inline-start: calc(.75rem + (var(--floating-toc-level, 1) - 1) * var(--floating-toc-item-indent)); display: flex; position: relative; } @media (hover: hover) { .floating-toc__item:hover, .floating-toc__item[data-hovered="true"] { background-color: var(--default); } } .floating-toc__item[data-focused="true"] { background-color: var(--default); } .floating-toc__item:active, .floating-toc__item[data-pressed="true"] { background-color: var(--default-hover); } .floating-toc__item:focus-visible:not(:focus), .floating-toc__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .floating-toc__item:disabled, .floating-toc__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .floating-toc__item[data-active="true"] { color: var(--accent); } .holo-card { width: fit-content; perspective: var(--holo-card-perspective); transform-origin: 50%; transform-style: preserve-3d; touch-action: pan-y pinch-zoom; --holo-card-width: 302px; --holo-card-height: 453px; --holo-card-radius: 20px; --holo-card-bleed: 36px; --holo-card-perspective: 600px; --holo-card-gradient: linear-gradient(140deg, #3a3730 0%, #302f2c 18%, #282829 38%, #212226 58%, #1a1b22 78%, #12131c 100%); --holo-card-inset-color: #ffffff0f; --holo-card-pattern: repeating-linear-gradient(115deg, #ff7773d9 0px, #ffed5fd9 3px, #a8ff5fd9 6px, #83fff7d9 9px, #7894ffd9 12px, #d875ffd9 15px, #ff7773d9 18px), repeating-linear-gradient(90deg, #0006 0px, #0006 1px, transparent 1px, transparent 3px); --holo-card-pattern-size: auto; --holo-card-pattern-opacity: .9; --holo-card-texture-opacity: .1; --holo-card-pointer-x: 50%; --holo-card-pointer-y: 50%; --holo-card-background-x: 50%; --holo-card-background-y: 50%; --holo-card-opacity: 0; display: grid; } .holo-card__rotator { transform-origin: 50%; transform-style: preserve-3d; will-change: transform; pointer-events: auto; display: grid; } .holo-card__frame { width: calc(var(--holo-card-width) + var(--holo-card-bleed) * 2); height: calc(var(--holo-card-height) + var(--holo-card-bleed) * 2); grid-area: 1 / 1; position: relative; overflow: clip; } .holo-card__surface { width: var(--holo-card-width); height: var(--holo-card-height); z-index: 1; border-radius: var(--holo-card-radius); background: var(--holo-card-gradient); box-shadow: 0 4px 16px rgb(0 0 0 / calc(.12 * var(--holo-card-opacity))), 0 12px 32px rgb(0 0 0 / calc(.08 * var(--holo-card-opacity))); transition: box-shadow .15s; position: absolute; top: 50%; left: 50%; overflow: clip; transform: translate(-50%, -50%); } .holo-card__rotator, .holo-card__frame, .holo-card__surface, .holo-card__inset { outline: 1px solid #0000; } .holo-card__image { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); object-fit: cover; -webkit-user-select: none; user-select: none; z-index: 0; border-radius: inherit; width: 100%; height: 100%; position: absolute; } .holo-card__inset { border: 1px solid var(--holo-card-inset-color); border-radius: calc(var(--holo-card-radius) - 8px); z-index: 1; position: absolute; inset: 8px; overflow: clip; } .holo-card__pattern { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); z-index: 2; mix-blend-mode: overlay; opacity: var(--holo-card-texture-opacity); background-image: var(--holo-card-pattern); background-size: var(--holo-card-pattern-size); border-radius: inherit; background-repeat: repeat; position: absolute; } .holo-card__content { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); z-index: 20; text-shadow: 0 4px 24px rgb(0 0 0 / calc(.55 * var(--holo-card-opacity))); display: flex; position: absolute; } .holo-card__content > * { pointer-events: auto; } .holo-card__shine { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); z-index: 6; border-radius: inherit; filter: brightness(1.25) contrast(1.1) saturate(1.2); mix-blend-mode: color-dodge; opacity: var(--holo-card-opacity); will-change: opacity; display: grid; position: absolute; overflow: hidden; } .holo-card__shine > * { grid-area: 1 / 1; } .holo-card__shine:before, .holo-card__shine:after { content: ""; border-radius: inherit; grid-area: 1 / 1; } .holo-card__shine:before { background-blend-mode: screen; filter: brightness(0) contrast(1.1); mix-blend-mode: hard-light; background: #fff; } .holo-card__shine:after { background-image: radial-gradient(farthest-corner circle at var(--holo-card-pointer-x) var(--holo-card-pointer-y), #b8b8b8 0%, #c7c7c730 25%, #000 90%); mix-blend-mode: luminosity; filter: brightness(.5) contrast(2); background-position: 50%; background-size: cover; } .holo-card__shine-pattern { inset: calc(var(--spacing, .25rem) * 0); z-index: 2; mix-blend-mode: soft-light; opacity: var(--holo-card-pattern-opacity); background-image: var(--holo-card-pattern); background-size: var(--holo-card-pattern-size); background-repeat: repeat; background-position: calc(((50% - var(--holo-card-background-x)) * 2.6) + 50%) calc(((50% - var(--holo-card-background-y)) * 3.5) + 50%); border-radius: inherit; position: absolute; } .hover-card__trigger { display: inline-flex; } .hover-card__content { border-radius: calc(var(--radius) * 2); background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; max-width: var(--container-sm, 24rem); padding: calc(var(--spacing, .25rem) * 4); outline-style: none; } .hover-card__content[data-entering="true"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .15s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .15s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-enter-opacity: 0; --tw-enter-scale: .97; } .hover-card__content[data-exiting="true"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); --tw-duration: .1s; --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1)); transition-duration: .1s; transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1)); --tw-exit-opacity: 0; --tw-exit-scale: .97; } .hover-card__content[data-placement="bottom"][data-entering="true"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } .hover-card__content[data-placement="top"][data-entering="true"] { --tw-enter-translate-y: calc(1*var(--spacing)); } .hover-card__content[data-placement="left"][data-entering="true"] { --tw-enter-translate-x: calc(1*var(--spacing)); } .hover-card__content[data-placement="right"][data-entering="true"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } .hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"] { will-change: opacity,transform; } :is(.hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.hover-card__content[data-exiting="true"], .hover-card__content[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .hover-card__arrow { display: block; } .hover-card__arrow svg { fill: var(--overlay); } .hover-card__arrow[data-placement="bottom"] svg { rotate: 180deg; } .hover-card__arrow[data-placement="left"] svg { rotate: -90deg; } .hover-card__arrow[data-placement="right"] svg { rotate: 90deg; } .inline-select { --inline-select-value-max-width: 12rem; --inline-select-indicator-size: .75rem; flex-shrink: 0; } .inline-select .inline-select__trigger { min-height: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * .75); border-style: var(--tw-border-style); padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * .5); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .1s; --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: #0000; border-width: 0; outline-style: none; transition-duration: .1s; } .inline-select .inline-select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .inline-select .inline-select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .inline-select .inline-select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .inline-select .inline-select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .inline-select .inline-select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .inline-select .inline-select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .inline-select .inline-select__trigger { cursor: var(--cursor-interactive); border-width: 0; padding-inline-end: .25rem; } @media (hover: hover) { .inline-select .inline-select__trigger:hover, .inline-select .inline-select__trigger[data-hovered="true"] { color: var(--foreground); background-color: #0000; border-color: #0000; } } .inline-select .inline-select__trigger:focus-visible:not(:focus), .inline-select .inline-select__trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; background-color: #0000; border-color: #0000; outline-style: none; } .inline-select .inline-select__trigger:disabled, .inline-select .inline-select__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .inline-select .inline-select__value { text-overflow: ellipsis; white-space: nowrap; max-width: var(--inline-select-value-max-width); overflow: hidden; } .inline-select .inline-select__indicator { margin-block: calc(var(--spacing, .25rem) * 0); color: var(--muted); width: var(--inline-select-indicator-size); height: var(--inline-select-indicator-size); position: static; } .inline-select .inline-select__indicator[data-open="true"] { rotate: 0deg; } .inline-select .inline-select__popover { min-width: calc(var(--spacing, .25rem) * 48); } .kanban { --ring-offset-width: 0px; grid-auto-flow: column; grid-auto-columns: minmax(var(--kanban-column-min-width), 1fr); gap: var(--kanban-column-gap); --kanban-column-min-width: 280px; --kanban-column-gap: 16px; --kanban-column-height: 480px; scroll-snap-type: x var(--tw-scroll-snap-strictness); --tw-scroll-snap-strictness: mandatory; display: grid; overflow-x: auto; } .kanban__column { scroll-snap-align: center; gap: calc(var(--spacing, .25rem) * 2); min-width: var(--kanban-column-min-width); flex-direction: column; display: flex; } .kanban__column-body { background-color: var(--default); flex-direction: column; flex: 1; display: flex; } @supports (color: color-mix(in lab, red, red)) { .kanban__column-body { background-color: color-mix(in oklab, var(--default) 40%, transparent); } } .kanban__column-body { border-radius: calc(var(--radius-2xl) + var(--radius-sm)); min-height: 100px; } .kanban__column-header { align-items: center; gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 1); padding-block: calc(var(--spacing, .25rem) * 1.5); display: flex; } .kanban__column-actions { align-items: center; gap: calc(var(--spacing, .25rem) * .5); opacity: 0; flex-shrink: 0; margin-inline-start: auto; transition: opacity .15s; display: flex; } .kanban__column-actions:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .kanban__column-actions:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .kanban__column-actions:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .kanban__column-actions:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .kanban__column-actions:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .kanban__column-actions:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .kanban__column-header:hover .kanban__column-actions { opacity: 1; } } .kanban__column-actions:focus-within, .kanban__column-actions:has([aria-expanded="true"]), .kanban__column-actions:has([data-open]) { opacity: 1; } .kanban__column-indicator { flex-shrink: 0; } .kanban__column-indicator:empty { width: calc(var(--spacing, .25rem) * 2.5); height: calc(var(--spacing, .25rem) * 2.5); background-color: var(--default); border-radius: 3.40282e38px; } .kanban__column-indicator:not(:empty) { color: var(--muted); justify-content: center; align-items: center; display: flex; } .kanban__column-indicator:not(:empty) svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .kanban__column-title { margin: calc(var(--spacing, .25rem) * 0); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .kanban__column-count { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--muted); } .kanban__card-list { gap: calc(var(--spacing, .25rem) * 2); min-height: 100%; padding: calc(var(--spacing, .25rem) * 2); padding-bottom: calc(var(--spacing, .25rem) * 4); --tw-outline-style: none; outline-style: none; flex-direction: column; flex: 1; display: flex; } .kanban__card-list[data-focus-visible] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .kanban__card-list[data-empty] { justify-content: center; align-items: center; } .kanban__card { border-radius: calc(var(--radius) * 1.5); --tw-outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; transition: opacity .2s; position: relative; } .kanban__card:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .kanban__card:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .kanban__card:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .kanban__card:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .kanban__card:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .kanban__card:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .kanban__card[data-focused="true"]:not([data-focus-visible="true"]) { --tw-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; } .kanban__card:focus-visible:not(:focus), .kanban__card[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; --tw-ring-color: var(--color-separator); outline-style: none; } .kanban__card:disabled, .kanban__card[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .kanban__card[data-dragging] { opacity: .5; } .kanban__card-content { border-radius: calc(var(--radius) * 1.5); background-color: var(--overlay); flex-direction: column; transition: box-shadow .15s; display: flex; overflow: hidden; } .kanban__card-content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .kanban__card-content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .kanban__card-content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .kanban__card-content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .kanban__card-content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .kanban__card-content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .kanban__card:hover > .kanban__card-content, .kanban__card[data-hovered="true"] > .kanban__card-content { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .kanban__card[data-selected="true"] > .kanban__card-content { background-color: var(--accent-soft); } .kanban__scroll-shadow { margin-bottom: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 1.5); flex-direction: column; flex: 1; display: flex; } .kanban__card-list .react-aria-DropIndicator { --tw-outline-style: none; outline-style: none; } .kanban__card-list .react-aria-DropIndicator[data-drop-target] { outline: 1px solid var(--color-accent); } @supports (color: color-mix(in lab, red, red)) { .kanban__card-list .react-aria-DropIndicator[data-drop-target] { outline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); } } .kanban__card-list .react-aria-DropIndicator[data-drop-target] { border-radius: 1px; } .kanban__drop-indicator { --tw-outline-style: none; outline-style: none; } .kanban__drop-indicator[data-drop-target] { border-radius: calc(var(--radius) * 1.5); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--separator); height: var(--kanban-drop-height, 2.5rem); flex-shrink: 0; transition: height .15s ease-out; } .kanban__drop-indicator[data-drop-target]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .kanban__drop-indicator[data-drop-target]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .kanban__drop-indicator[data-drop-target]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .kanban__drop-indicator[data-drop-target]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .kanban__drop-indicator[data-drop-target]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .kanban__drop-indicator[data-drop-target]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .kanban__drag-handle { padding: calc(var(--spacing, .25rem) * 0); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; --tw-border-style: none; font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); --tw-leading: 1; color: var(--muted); clip-path: inset(50%); white-space: nowrap; background-color: #0000; border-style: none; border-width: 0; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; width: 1px; height: 1px; margin: -1px; padding: 0; line-height: 1; display: flex; position: absolute; overflow: hidden; } .kanban__drag-handle:focus, .kanban__drag-handle:focus-visible, .kanban__drag-handle[data-focus-visible="true"] { clip-path: none; white-space: normal; --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); width: auto; height: auto; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; margin: 0; padding: 0; position: static; overflow: visible; } .kanban__card[data-focus-visible="true"] .kanban__drag-handle { clip-path: none; white-space: normal; width: auto; height: auto; margin: 0; padding: 0; position: static; overflow: visible; } .kanban__empty { padding-block: calc(var(--spacing, .25rem) * 8); text-align: center; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); justify-content: center; align-items: center; display: flex; } .kanban--sm { --kanban-column-min-width: 240px; --kanban-column-gap: 12px; } .kanban__card-content--sm { gap: calc(var(--spacing, .25rem) * 1.5); padding: calc(var(--spacing, .25rem) * 2); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .kanban--md { --kanban-column-min-width: 280px; --kanban-column-gap: 16px; } .kanban__card-content--md { gap: calc(var(--spacing, .25rem) * 2); padding: calc(var(--spacing, .25rem) * 3); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .kanban--lg { --kanban-column-min-width: 320px; --kanban-column-gap: 20px; } .kanban__card-content--lg { gap: calc(var(--spacing, .25rem) * 3); padding: calc(var(--spacing, .25rem) * 4); font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); } .kpi { border-radius: calc(var(--radius) * 2); padding: calc(var(--spacing, .25rem) * 4); flex-direction: column; display: flex; position: relative; } .kpi__header { margin-bottom: calc(var(--spacing, .25rem) * 1); align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; } .kpi__content { align-items: center; column-gap: calc(var(--spacing, .25rem) * 2); flex: 1; grid-template-rows: auto; grid-template-columns: 1fr auto; display: grid; } .kpi__icon { width: calc(var(--spacing, .25rem) * 8); height: calc(var(--spacing, .25rem) * 8); border-radius: calc(var(--radius) * 1); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .kpi__icon svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .kpi__icon[data-status="success"] { background-color: var(--success); } @supports (color: color-mix(in lab, red, red)) { .kpi__icon[data-status="success"] { background-color: color-mix(in oklab, var(--success) 10%, transparent); } } .kpi__icon[data-status="success"] { color: var(--success); } .kpi__icon[data-status="warning"] { background-color: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .kpi__icon[data-status="warning"] { background-color: color-mix(in oklab, var(--warning) 10%, transparent); } } .kpi__icon[data-status="warning"] { color: var(--warning); } .kpi__icon[data-status="danger"] { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .kpi__icon[data-status="danger"] { background-color: color-mix(in oklab, var(--danger) 10%, transparent); } } .kpi__icon[data-status="danger"] { color: var(--danger); } .kpi__actions { top: calc(var(--spacing) * 4 - var(--spacing) * 1.5); position: absolute; inset-inline-end: calc(var(--spacing) * 4 - var(--spacing) * 1.5); } .kpi__title { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--muted); } .kpi__value { font-size: var(--text-2xl, 1.5rem); line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); --tw-tracking: var(--tracking-tight, -.025em); letter-spacing: var(--tracking-tight, -.025em); color: var(--foreground); } .kpi__trend { flex-shrink: 0; } .kpi__progress { margin-top: calc(var(--spacing, .25rem) * 1); grid-column: 1 / -1; } .kpi__chart { --kpi-chart-fade: 10%; --kpi-chart-mask: linear-gradient(to right, transparent 0%, black var(--kpi-chart-fade), black calc(100% - var(--kpi-chart-fade)), transparent 100%); -webkit-mask-image: var(--kpi-chart-mask); -webkit-mask-image: var(--kpi-chart-mask); -webkit-mask-image: var(--kpi-chart-mask); mask-image: var(--kpi-chart-mask); overflow: hidden; } .kpi__chart[data-has-tooltip] { overflow: visible; -webkit-mask-image: none; mask-image: none; } .kpi__chart[data-has-tooltip] .recharts-surface { -webkit-mask-image: var(--kpi-chart-mask); -webkit-mask-image: var(--kpi-chart-mask); -webkit-mask-image: var(--kpi-chart-mask); mask-image: var(--kpi-chart-mask); } .kpi > .kpi__chart { margin-top: calc(var(--spacing, .25rem) * 2); margin-right: calc(var(--spacing, .25rem) * -4); margin-bottom: calc(var(--spacing, .25rem) * -4); margin-left: calc(var(--spacing, .25rem) * -4); border-bottom-right-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); } .kpi > .kpi__chart:has( + .kpi__separator, + .kpi__footer) { margin-bottom: calc(var(--spacing, .25rem) * 0); border-radius: 0; } .kpi__separator { margin-right: calc(var(--spacing, .25rem) * -4); margin-left: calc(var(--spacing, .25rem) * -4); width: calc(100% + var(--spacing) * 8); } .kpi__footer { margin-bottom: calc(var(--spacing, .25rem) * -1); } .kpi__separator + .kpi__footer { margin-top: calc(var(--spacing, .25rem) * 0); } .kpi-group { background-color: var(--surface); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); overflow: hidden; } .kpi-group--horizontal { border-radius: calc(var(--radius) * 2); flex-direction: row; display: flex; } .kpi-group--horizontal > [data-slot="kpi"] { border-style: var(--tw-border-style); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-width: 0; border-radius: 0; flex: 1; } .kpi-group--vertical { border-radius: calc(var(--radius) * 2); flex-direction: column; display: flex; } .kpi-group--vertical > [data-slot="kpi"] { border-style: var(--tw-border-style); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-width: 0; border-radius: 0; } .kpi-group__separator { background-color: var(--separator); flex-shrink: 0; } .kpi-group--horizontal > .kpi-group__separator { margin-block: calc(var(--spacing, .25rem) * 4); align-self: stretch; width: 1px; } .kpi-group--vertical > .kpi-group__separator { align-self: stretch; height: 1px; } .line-chart { width: 100%; } .line-chart .recharts-cartesian-axis-tick-value { font-size: 10px; fill: var(--muted) !important; } .line-chart .recharts-cartesian-axis-line, .line-chart .recharts-cartesian-axis-tick-line { stroke: none !important; } .line-chart .recharts-cartesian-grid line { stroke: var(--muted); stroke-opacity: .15; } .line-chart .recharts-tooltip-cursor { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1px; } .line-chart .recharts-active-dot circle { stroke: var(--surface); stroke-width: 2px; } .list-view { min-height: calc(var(--spacing, .25rem) * 0); --tw-outline-style: none; outline-style: none; width: 100%; position: relative; } .list-view--primary { background-color: var(--surface-secondary); padding: calc(var(--spacing, .25rem) * 1); border-radius: calc(var(--radius) * 2.5); } .list-view__item { align-items: center; gap: calc(var(--spacing, .25rem) * 3); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 3); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); cursor: var(--cursor-interactive); outline-style: none; display: flex; } .list-view__item:focus-visible, .list-view__item[data-focus-visible="true"] { --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .list-view__item:disabled, .list-view__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .list-view__item[data-dragging="true"] { opacity: .5; } .list-view--primary .list-view__item { background-color: var(--surface); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator-tertiary); } @supports (color: color-mix(in lab, red, red)) { .list-view--primary .list-view__item { border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent); } } .list-view--primary .list-view__item:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } @media (hover: hover) { .list-view--primary .list-view__item:hover, .list-view--primary .list-view__item[data-hovered="true"] { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .list-view--primary .list-view__item:hover, .list-view--primary .list-view__item[data-hovered="true"] { background-color: color-mix(in oklab, var(--surface) 40%, transparent); } } } .list-view--primary .list-view__item[data-selected="true"] { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .list-view--primary .list-view__item[data-selected="true"] { background-color: color-mix(in oklab, var(--surface) 10%, transparent); } } .list-view--primary:not([data-virtualized]) .list-view__item:first-child { border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); } .list-view--primary:not([data-virtualized]) .list-view__item:last-child { border-bottom-right-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); } .list-view--primary[data-virtualized] { overflow: hidden; } .list-view--secondary .list-view__item { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator-tertiary); } @supports (color: color-mix(in lab, red, red)) { .list-view--secondary .list-view__item { border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent); } } .list-view--secondary .list-view__item { background-color: #0000; } .list-view--secondary .list-view__item:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } @media (hover: hover) { .list-view--secondary .list-view__item:hover, .list-view--secondary .list-view__item[data-hovered="true"] { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .list-view--secondary .list-view__item:hover, .list-view--secondary .list-view__item[data-hovered="true"] { background-color: color-mix(in oklab, var(--default) 50%, transparent); } } } .list-view--secondary .list-view__item[data-selected="true"] { background-color: var(--accent-soft); } @media (hover: hover) { .list-view--secondary .list-view__item[data-selected="true"]:hover, .list-view--secondary .list-view__item[data-selected="true"][data-hovered="true"] { background-color: var(--accent-soft-hover); } } .list-view__selection-cell { flex-shrink: 0; align-items: center; display: flex; } .list-view__item-content { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 3); flex: 1; display: flex; } .list-view__item-content svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: var(--muted); flex-shrink: 0; } .list-view__title { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); overflow: hidden; } .list-view__description { margin-top: calc(var(--spacing, .25rem) * .5); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); overflow: hidden; } .list-view__item-action { flex-shrink: 0; margin-inline-start: auto; padding-inline-start: calc(var(--spacing, .25rem) * 2); } .list-view__empty-state { padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 8); justify-content: center; align-items: center; display: flex; } .list-view__load-more { padding-block: calc(var(--spacing, .25rem) * 3); justify-content: center; align-items: center; display: flex; } .map { --map-control-size: calc(var(--spacing) * 8); --map-control-offset: calc(var(--spacing) * 2); --map-control-attribution-clearance: calc(var(--spacing) * 12); --map-popup-max-width: 248px; --map-marker-color: var(--accent); --map-marker-ring-color: var(--surface); --map-route-color: #4285f4; --map-route-opacity: .8; --map-route-width: 3; background-color: var(--default); width: 100%; height: 100%; position: relative; overflow: hidden; } .map.maplibregl-map { -webkit-tap-highlight-color: #0000; font: 12px / 20px Helvetica Neue, Arial, Helvetica, sans-serif; } .map .maplibregl-canvas { top: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); --tw-outline-style: none; outline-style: none; position: absolute; } .map .maplibregl-canvas:focus { --tw-outline-style: none; outline-style: none; } .map .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; -webkit-user-select: none; user-select: none; } .map .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; } .map .maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer { cursor: pointer; } .map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate, .map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas { touch-action: pan-x pan-y; } .map .maplibregl-canvas-container.maplibregl-touch-drag-pan, .map .maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: pinch-zoom; } .map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan, .map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: none; } .map .maplibregl-marker { top: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); will-change: transform; transition: opacity .2s; position: absolute; } .map .maplibregl-popup { top: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); pointer-events: none; will-change: transform; display: flex; position: absolute; } .map .maplibregl-popup-anchor-top, .map .maplibregl-popup-anchor-top-left, .map .maplibregl-popup-anchor-top-right { flex-direction: column; } .map .maplibregl-popup-anchor-bottom, .map .maplibregl-popup-anchor-bottom-left, .map .maplibregl-popup-anchor-bottom-right { flex-direction: column-reverse; } .map .maplibregl-popup-anchor-left { flex-direction: row; } .map .maplibregl-popup-anchor-right { flex-direction: row-reverse; } .map .maplibregl-popup-content { padding: calc(var(--spacing, .25rem) * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); pointer-events: auto; background-color: #0000; border-radius: 0; position: relative; } .map .maplibregl-popup-tip { display: none; } .map .maplibregl-ctrl-top-left, .map .maplibregl-ctrl-top-right, .map .maplibregl-ctrl-bottom-left, .map .maplibregl-ctrl-bottom-right { z-index: 10; pointer-events: none; position: absolute; } .map .maplibregl-ctrl-top-left { top: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); } .map .maplibregl-ctrl-top-right { top: calc(var(--spacing, .25rem) * 0); right: calc(var(--spacing, .25rem) * 0); } .map .maplibregl-ctrl-bottom-left { bottom: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); } .map .maplibregl-ctrl-bottom-right { right: calc(var(--spacing, .25rem) * 0); bottom: calc(var(--spacing, .25rem) * 0); } .map .maplibregl-ctrl { clear: both; pointer-events: auto; transform: translate(0); } .map .maplibregl-ctrl-top-left .maplibregl-ctrl { float: left; margin-top: calc(var(--spacing, .25rem) * 2.5); margin-left: calc(var(--spacing, .25rem) * 2.5); } .map .maplibregl-ctrl-top-right .maplibregl-ctrl { float: right; margin-top: calc(var(--spacing, .25rem) * 2.5); margin-right: calc(var(--spacing, .25rem) * 2.5); } .map .maplibregl-ctrl-bottom-left .maplibregl-ctrl { float: left; margin-bottom: calc(var(--spacing, .25rem) * 2.5); margin-left: calc(var(--spacing, .25rem) * 2.5); } .map .maplibregl-ctrl-bottom-right .maplibregl-ctrl { float: right; margin-right: calc(var(--spacing, .25rem) * 2.5); margin-bottom: calc(var(--spacing, .25rem) * 2.5); } .map .maplibregl-ctrl-attrib { margin: calc(var(--spacing, .25rem) * 0); padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 0); border-radius: var(--radius-full); color: oklch(20% 0 0); background-color: oklch(100% 0 0 / .82); line-height: 20px; } .map .maplibregl-ctrl-attrib.maplibregl-compact { box-sizing: content-box; min-height: calc(var(--spacing, .25rem) * 5); padding: 2px 28px 2px 8px; position: relative; } .map .maplibregl-ctrl-attrib-button { top: calc(var(--spacing, .25rem) * 0); right: calc(var(--spacing, .25rem) * 0); width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); cursor: pointer; border-style: var(--tw-border-style); padding: calc(var(--spacing, .25rem) * 0); color: oklch(8% 0 0); background-color: #0000; border-width: 0; justify-content: center; align-items: center; display: flex; position: absolute; } .map .maplibregl-ctrl-attrib-button:before { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold, 700); color: oklch(100% 0 0); content: "i"; background-color: oklch(8% 0 0); border-radius: 3.40282e38px; justify-content: center; align-items: center; font-family: ui-sans-serif, system-ui, sans-serif; display: flex; } .map .maplibregl-ctrl-attrib-button:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .map .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button { appearance: none; list-style: none; } .map .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker { display: none; } .map .maplibregl-ctrl-attrib-inner { align-items: center; gap: calc(var(--spacing, .25rem) * 1); display: inline-flex; } .map .maplibregl-ctrl-attrib a { color: inherit; text-decoration: none; } .map .maplibregl-ctrl-attrib a:hover { text-decoration: underline; } .map .maplibregl-attrib-empty { display: none; } .map__loader { inset: calc(var(--spacing, .25rem) * 0); z-index: 10; --tw-backdrop-blur: blur(var(--blur-xs, 4px)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); background-color: var(--overlay); justify-content: center; align-items: center; display: flex; position: absolute; } @supports (color: color-mix(in lab, red, red)) { .map__loader { background-color: color-mix(in oklab, var(--overlay) 50%, transparent); } } .map__loader-spinner { color: var(--muted); } .map__marker { justify-content: center; align-items: center; display: flex; } .map__marker-content { cursor: pointer; justify-content: center; align-items: center; display: flex; position: relative; } .map__default-marker { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); border-style: var(--tw-border-style); background-color: var(--map-marker-color); border-width: 2px; border-color: var(--map-marker-ring-color); box-shadow: var(--overlay-shadow); border-radius: 3.40282e38px; display: block; position: relative; } .map__marker-label { pointer-events: none; --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); --tw-font-weight: var(--font-weight-medium, 500); font-size: 10px; font-weight: var(--font-weight-medium, 500); white-space: nowrap; color: var(--foreground); position: absolute; left: 50%; } .map__marker-label--top { margin-bottom: calc(var(--spacing, .25rem) * 1); bottom: 100%; } .map__marker-label--bottom { margin-top: calc(var(--spacing, .25rem) * 1); top: 100%; } .map__popup-content { min-width: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * 4); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); background-color: var(--overlay); border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--overlay-shadow); color: var(--foreground); max-width: var(--map-popup-max-width); overflow-wrap: anywhere; position: relative; } .map__popup-content > * { max-width: 100%; min-width: calc(var(--spacing, .25rem) * 0); } .map__popup-content[data-close-button="true"] { padding-right: calc(var(--spacing) * 10); } .map__popup-close-button { top: calc(var(--spacing, .25rem) * 2); right: calc(var(--spacing, .25rem) * 2); z-index: 10; width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); position: absolute; } .map__popup-close-button [data-slot="close-button-icon"] { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); } .map__tooltip { pointer-events: none; border-radius: calc(var(--radius) * .75); padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 1); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); background-color: var(--foreground); box-shadow: var(--overlay-shadow); color: var(--background); max-width: var(--map-popup-max-width); } .map__controls { z-index: 10; gap: calc(var(--spacing, .25rem) * 1.5); flex-direction: column; display: flex; position: absolute; } .map__controls--top-left { top: var(--map-control-offset); left: var(--map-control-offset); } .map__controls--top-right { top: var(--map-control-offset); right: var(--map-control-offset); } .map__controls--bottom-left { bottom: calc(var(--map-control-offset) + var(--map-control-attribution-clearance)); left: var(--map-control-offset); } .map__controls--bottom-right { right: var(--map-control-offset); bottom: calc(var(--map-control-offset) + var(--map-control-attribution-clearance)); } .map__control-button { color: var(--foreground); } .map__control-button.button { padding: calc(var(--spacing, .25rem) * 0); width: var(--map-control-size); height: var(--map-control-size); min-width: var(--map-control-size); } .map__control-icon { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .map__control-spinner { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: currentColor; } .map__compass-icon { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .2s; transform-style: preserve-3d; transition-duration: .2s; } .map__compass-icon [data-needle="north-right"] { fill: oklch(63.7% .237 25.331); } .map__compass-icon [data-needle="north-left"] { fill: oklch(70.4% .191 22.216); } .map__compass-icon [data-needle="south-right"] { fill: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .map__compass-icon [data-needle="south-right"] { fill: color-mix(in oklch, var(--muted) 70%, transparent); } } .map__compass-icon [data-needle="south-left"] { fill: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .map__compass-icon [data-needle="south-left"] { fill: color-mix(in oklch, var(--muted) 38%, transparent); } } .markdown { width: 100%; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-leading: var(--leading-relaxed, 1.625); line-height: var(--leading-relaxed, 1.625); color: var(--foreground); } .markdown p { margin-bottom: calc(var(--spacing, .25rem) * 3); } .markdown p:last-child { margin-bottom: calc(var(--spacing, .25rem) * 0); } .markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin-top: calc(var(--spacing, .25rem) * 4); margin-bottom: calc(var(--spacing, .25rem) * 2); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } :is(.markdown h1, .markdown h2, .markdown h3, .markdown h4):first-child { margin-top: calc(var(--spacing, .25rem) * 0); } .markdown h1 { font-size: var(--text-xl, 1.25rem); line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25))); } .markdown h2 { font-size: var(--text-lg, 1.125rem); line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))); } .markdown h3 { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .markdown ul, .markdown ol { margin-bottom: calc(var(--spacing, .25rem) * 3); list-style-position: inside; } :where(:is(.markdown ul, .markdown ol) > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing, .25rem) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing, .25rem) * 1) * calc(1 - var(--tw-space-y-reverse))); } .markdown ul, .markdown ol { padding-inline-start: calc(var(--spacing, .25rem) * 2); } :is(.markdown ul, .markdown ol):last-child { margin-bottom: calc(var(--spacing, .25rem) * 0); } .markdown ul { list-style-type: disc; } .markdown ul li::marker { color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .markdown ul li::marker { color: color-mix(in oklab, var(--muted) 40%, transparent); } } .markdown ol { list-style-type: decimal; } .markdown li { --tw-leading: var(--leading-relaxed, 1.625); line-height: var(--leading-relaxed, 1.625); } .markdown a { color: var(--link); text-underline-offset: 2px; text-decoration-line: underline; } .markdown blockquote { margin-block: calc(var(--spacing, .25rem) * 3); border-inline-start-style: var(--tw-border-style); border-inline-start-width: 2px; border-color: var(--border); color: var(--muted); padding-inline-start: calc(var(--spacing, .25rem) * 4); font-style: italic; } .markdown hr { margin-block: calc(var(--spacing, .25rem) * 4); border-color: var(--border); } .markdown table { margin-bottom: calc(var(--spacing, .25rem) * 3); border-collapse: collapse; width: 100%; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .markdown th, .markdown td { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); text-align: start; } .markdown th { background-color: var(--surface-secondary); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); } .markdown__block { width: 100%; } .markdown__inline-code { border-radius: calc(var(--radius) * .5); background-color: var(--default); padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * .5); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); color: var(--foreground); font-size: .875em; } @keyframes sd-fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes sd-blurIn { 0% { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(); } } @keyframes sd-slideUp { 0% { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .markdown [data-sd-animate] { animation: var(--sd-animation, sd-fadeIn) var(--sd-duration, .15s) var(--sd-easing, ease) var(--sd-delay, 0s) both; } .native-select { gap: calc(var(--spacing, .25rem) * 1); flex-direction: column; display: inline-flex; } :is(.native-select[data-invalid="true"], .native-select[aria-invalid="true"]) [data-slot="description"] { display: none; } .native-select [data-slot="label"] { width: fit-content; } .native-select [data-slot="description"] { padding-inline: calc(var(--spacing, .25rem) * 1); } .native-select__trigger { align-items: center; display: inline-flex; position: relative; } .native-select__select { min-height: calc(var(--spacing, .25rem) * 9); appearance: none; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); border-width: 1px; outline-style: none; display: inline-flex; position: relative; } .native-select__select:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .native-select__select:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .native-select__select:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .native-select__select:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .native-select__select:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .native-select__select:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .native-select__select { cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--color-field-border); padding-inline-end: calc(var(--native-select-indicator-offset, .5rem) + var(--native-select-indicator-size, 1rem) + .5rem); } @media (hover: hover) { .native-select__select:hover, .native-select__select[data-hovered="true"] { background-color: var(--field-hover); border-color: var(--color-field-border-hover); } } .native-select__select:focus-visible:not(:focus), .native-select__select[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .native-select__select:focus { border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; --tw-ring-offset-width: 3px; outline-style: solid; } :is(.native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select):focus, :is(.native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select):focus-visible, :is(.native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select)[data-focused="true"], :is(.native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select)[data-focus-visible="true"], :is(.native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select):focus-within, :is(.native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select)[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .native-select[data-invalid="true"] .native-select__select, .native-select[aria-invalid="true"] .native-select__select { background-color: var(--color-field-focus); } .native-select__select:disabled, .native-select__select[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .native-select__select:has(option[value=""]:checked) { color: var(--field-placeholder, var(--muted)); } .native-select__select::-ms-expand { display: none; } .native-select__indicator { pointer-events: none; inset-block: calc(var(--spacing, .25rem) * 0); color: var(--field-placeholder, var(--muted)); flex-shrink: 0; justify-content: center; align-items: center; margin-block: auto; display: flex; position: absolute; inset-inline-end: calc(var(--spacing, .25rem) * 2); } .native-select__indicator svg { --native-select-indicator-size: 1rem; width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .native-select--secondary .native-select__select { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-default); } @media (hover: hover) { .native-select--secondary .native-select__select:hover, .native-select--secondary .native-select__select[data-hovered="true"] { background-color: var(--color-default-hover); } } .native-select--secondary .native-select__select:focus-visible:not(:focus), .native-select--secondary .native-select__select[data-focus-visible="true"], .native-select--secondary .native-select__select:focus { background-color: var(--color-default); } .native-select--full-width, .native-select__trigger--full-width { width: 100%; } .navbar { z-index: 40; background-color: var(--background); --navbar-height: 4rem; --navbar-max-width: 1024px; --navbar-transition-duration: .3s; flex-direction: column; width: 100%; display: flex; position: relative; } .navbar--sticky { top: calc(var(--spacing, .25rem) * 0); position: sticky; } .navbar--static { position: static; } .navbar--floating { top: calc(var(--spacing, .25rem) * 2); margin-inline: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); position: sticky; } .navbar[data-hidden="true"] { pointer-events: none; } .navbar[data-menu-open="true"] { border-bottom-color: #0000; } .navbar--static[data-menu-open="true"] { position: relative; } .navbar__header { align-items: center; gap: calc(var(--spacing, .25rem) * 4); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 6); max-width: var(--navbar-max-width); height: var(--navbar-height); margin-inline: auto; display: flex; } .navbar__header--max-sm { --navbar-max-width: 640px; } .navbar__header--max-md { --navbar-max-width: 768px; } .navbar__header--max-lg { --navbar-max-width: 1024px; } .navbar__header--max-xl { --navbar-max-width: 1280px; } .navbar__header--max-2xl { --navbar-max-width: 1536px; } .navbar__header--max-full { --navbar-max-width: 100%; } .navbar__header--sm { gap: calc(var(--spacing, .25rem) * 3); padding-inline: calc(var(--spacing, .25rem) * 4); --navbar-height: 3rem; } .navbar__header--lg { gap: calc(var(--spacing, .25rem) * 5); padding-inline: calc(var(--spacing, .25rem) * 8); --navbar-height: 5rem; } .navbar__brand { align-items: center; gap: calc(var(--spacing, .25rem) * 2); flex-shrink: 0; display: flex; } .navbar__content { align-items: center; gap: calc(var(--spacing, .25rem) * 1); display: flex; } .navbar__item { align-items: center; gap: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); color: var(--muted); cursor: var(--cursor-interactive); outline-style: none; padding: 6px 12px; display: flex; position: relative; } @media (hover: hover) { .navbar__item:hover, .navbar__item[data-hovered="true"] { color: var(--foreground); } } .navbar__item:focus-visible:not(:focus), .navbar__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .navbar__item:disabled, .navbar__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .navbar__item:active, .navbar__item[data-pressed="true"], .navbar__item[data-current="true"] { color: var(--foreground); } .navbar__item > [data-slot="icon"] { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); flex-shrink: 0; } .navbar__item--sm { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); padding: 4px 8px; } .navbar__item--sm > [data-slot="icon"] { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .navbar__item--lg { font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); padding: 8px 16px; } .navbar__item--lg > [data-slot="icon"] { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); } .navbar__label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .navbar__spacer { flex: 1; } .navbar__separator { height: calc(var(--spacing, .25rem) * 6); border-color: var(--separator); align-self: center; } .navbar__menu-toggle { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; width: calc(var(--spacing, .25rem) * 9); height: calc(var(--spacing, .25rem) * 9); cursor: var(--cursor-interactive); outline-style: none; justify-content: center; align-items: center; display: flex; position: relative; } @media (hover: hover) { .navbar__menu-toggle:hover, .navbar__menu-toggle[data-hovered="true"] { background-color: var(--default); } } .navbar__menu-toggle:focus-visible:not(:focus), .navbar__menu-toggle[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .navbar__menu-toggle:disabled, .navbar__menu-toggle[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .navbar__menu-toggle:active, .navbar__menu-toggle[data-pressed="true"] { background-color: var(--default-hover); } .navbar__menu-toggle--sm { width: calc(var(--spacing, .25rem) * 7); height: calc(var(--spacing, .25rem) * 7); } .navbar__menu-toggle--lg { width: calc(var(--spacing, .25rem) * 11); height: calc(var(--spacing, .25rem) * 11); } .navbar__menu-toggle-icon { pointer-events: none; width: calc(var(--spacing, .25rem) * 6); flex-direction: column; justify-content: center; align-items: center; height: 100%; display: flex; } .navbar__menu-toggle-icon:before, .navbar__menu-toggle-icon:after { height: 1px; width: calc(var(--spacing, .25rem) * 6); --tw-content: ""; content: var(--tw-content); background-color: currentColor; transition: transform .15s; display: block; } .navbar__menu-toggle-icon:before { transform: translateY(-4px) rotate(0); } .navbar__menu-toggle-icon:after { transform: translateY(4px) rotate(0); } .navbar__menu-toggle[data-selected="true"] .navbar__menu-toggle-icon:before { transform: translateY(.5px) rotate(45deg); } .navbar__menu-toggle[data-selected="true"] .navbar__menu-toggle-icon:after { transform: translateY(-.5px) rotate(-45deg); } .navbar__menu-toggle[data-pressed="true"] .navbar__menu-toggle-icon { opacity: .7; } @media (prefers-reduced-motion: reduce) { .navbar__menu-toggle-icon:before, .navbar__menu-toggle-icon:after { transition: none; } } .navbar__menu { inset-inline: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 1); background-color: var(--background); padding-inline: calc(var(--spacing, .25rem) * 6); padding-top: calc(var(--spacing, .25rem) * 2); padding-bottom: calc(var(--spacing, .25rem) * 6); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); flex-direction: column; display: flex; position: absolute; top: 100%; overflow: hidden auto; } .navbar__menu-item { align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); cursor: var(--cursor-interactive); outline-style: none; padding: 10px 12px; display: flex; } @media (hover: hover) { .navbar__menu-item:hover, .navbar__menu-item[data-hovered="true"] { background-color: var(--default); } } .navbar__menu-item:focus-visible:not(:focus), .navbar__menu-item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .navbar__menu-item:disabled, .navbar__menu-item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .navbar__menu-item:active, .navbar__menu-item[data-pressed="true"] { background-color: var(--default-hover); } .navbar__menu-item[data-current="true"] { background-color: var(--default); color: var(--foreground); } .navbar__menu-item > [data-slot="icon"] { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); flex-shrink: 0; } .navbar__menu-item--sm { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); padding: 8px 10px; } .navbar__menu-item--sm > [data-slot="icon"] { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .navbar__menu-item--lg { font-size: var(--text-lg, 1.125rem); line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))); padding: 12px 16px; } .navbar__menu-item--lg > [data-slot="icon"] { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); } .number-stepper { flex-shrink: 0; display: inline-flex; } .number-stepper__group { align-items: center; gap: calc(var(--spacing, .25rem) * 0); border-style: var(--tw-border-style); background-color: var(--default); padding: calc(var(--spacing, .25rem) * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-width: 0; border-radius: 3.40282e38px; display: inline-flex; } .number-stepper__input { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .number-stepper__decrement-button, .number-stepper__increment-button { height: calc(var(--spacing, .25rem) * 9); width: calc(var(--spacing, .25rem) * 9); border-style: var(--tw-border-style); background-color: var(--surface); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; border-width: 0; border-radius: 3.40282e38px; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; position: relative; } @media (min-width: 48rem) { .number-stepper__decrement-button, .number-stepper__increment-button { height: calc(var(--spacing, .25rem) * 8); width: calc(var(--spacing, .25rem) * 8); } } .number-stepper__decrement-button, .number-stepper__increment-button { cursor: var(--cursor-interactive); transition: background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), transform .25s var(--ease-smooth); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } :is(.number-stepper__decrement-button, .number-stepper__increment-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.number-stepper__decrement-button, .number-stepper__increment-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.number-stepper__decrement-button, .number-stepper__increment-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.number-stepper__decrement-button, .number-stepper__increment-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.number-stepper__decrement-button, .number-stepper__increment-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.number-stepper__decrement-button, .number-stepper__increment-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: var(--muted); flex-shrink: 0; transition: color .15s; } :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.number-stepper__decrement-button, .number-stepper__increment-button) svg:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { :is(:is(.number-stepper__decrement-button, .number-stepper__increment-button):hover, :is(.number-stepper__decrement-button, .number-stepper__increment-button)[data-hovered="true"]) svg { color: var(--foreground); } } :is(.number-stepper__decrement-button, .number-stepper__increment-button):active, :is(.number-stepper__decrement-button, .number-stepper__increment-button)[data-pressed="true"] { transform: scale(.97); } :is(.number-stepper__decrement-button, .number-stepper__increment-button):focus-visible:not(:focus), :is(.number-stepper__decrement-button, .number-stepper__increment-button)[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } :is(.number-stepper__decrement-button, .number-stepper__increment-button):disabled, :is(.number-stepper__decrement-button, .number-stepper__increment-button)[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .number-stepper__value { --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); font-variant-numeric: tabular-nums; justify-content: center; align-items: center; line-height: .85; display: flex; } .number-stepper__group--sm { gap: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * .5); border-radius: 3.40282e38px; } @media (min-width: 48rem) { .number-stepper__group--sm { padding: calc(var(--spacing, .25rem) * .5); } } .number-stepper__decrement-button--sm, .number-stepper__increment-button--sm { height: calc(var(--spacing, .25rem) * 8); width: calc(var(--spacing, .25rem) * 8); } @media (min-width: 48rem) { .number-stepper__decrement-button--sm, .number-stepper__increment-button--sm { height: calc(var(--spacing, .25rem) * 7); width: calc(var(--spacing, .25rem) * 7); } } :is(.number-stepper__decrement-button--sm, .number-stepper__increment-button--sm) svg { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); } :is(.number-stepper__decrement-button--sm, .number-stepper__increment-button--sm):active, :is(.number-stepper__decrement-button--sm, .number-stepper__increment-button--sm)[data-pressed="true"] { transform: scale(.98); } .number-stepper__value--sm { min-width: calc(var(--spacing, .25rem) * 6); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } @media (min-width: 48rem) { .number-stepper__value--sm { min-width: calc(var(--spacing, .25rem) * 5); } } .number-stepper__value--sm { height: calc(var(--spacing, .25rem) * 8); } @media (min-width: 48rem) { .number-stepper__value--sm { height: calc(var(--spacing, .25rem) * 7); } } .number-stepper__group--md { gap: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * .5); border-radius: 3.40282e38px; } @media (min-width: 48rem) { .number-stepper__group--md { padding: calc(var(--spacing, .25rem) * .5); } } .number-stepper__decrement-button--md, .number-stepper__increment-button--md { height: calc(var(--spacing, .25rem) * 9); width: calc(var(--spacing, .25rem) * 9); } @media (min-width: 48rem) { .number-stepper__decrement-button--md, .number-stepper__increment-button--md { height: calc(var(--spacing, .25rem) * 8); width: calc(var(--spacing, .25rem) * 8); } } :is(.number-stepper__decrement-button--md, .number-stepper__increment-button--md) svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } :is(.number-stepper__decrement-button--md, .number-stepper__increment-button--md):active, :is(.number-stepper__decrement-button--md, .number-stepper__increment-button--md)[data-pressed="true"] { transform: scale(.98); } .number-stepper__value--md { min-width: calc(var(--spacing, .25rem) * 7); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } @media (min-width: 48rem) { .number-stepper__value--md { min-width: calc(var(--spacing, .25rem) * 6); } } .number-stepper__value--md { height: calc(var(--spacing, .25rem) * 9); } @media (min-width: 48rem) { .number-stepper__value--md { height: calc(var(--spacing, .25rem) * 8); } } .number-stepper__group--lg { gap: calc(var(--spacing, .25rem) * .5); padding: calc(var(--spacing, .25rem) * .5); border-radius: 3.40282e38px; } @media (min-width: 48rem) { .number-stepper__group--lg { padding: calc(var(--spacing, .25rem) * .5); } } .number-stepper__decrement-button--lg, .number-stepper__increment-button--lg { height: calc(var(--spacing, .25rem) * 10); width: calc(var(--spacing, .25rem) * 10); } @media (min-width: 48rem) { .number-stepper__decrement-button--lg, .number-stepper__increment-button--lg { height: calc(var(--spacing, .25rem) * 9); width: calc(var(--spacing, .25rem) * 9); } } :is(.number-stepper__decrement-button--lg, .number-stepper__increment-button--lg) svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } @media (min-width: 48rem) { :is(.number-stepper__decrement-button--lg, .number-stepper__increment-button--lg) svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } } :is(.number-stepper__decrement-button--lg, .number-stepper__increment-button--lg):active, :is(.number-stepper__decrement-button--lg, .number-stepper__increment-button--lg)[data-pressed="true"] { transform: scale(.96); } .number-stepper__value--lg { min-width: calc(var(--spacing, .25rem) * 8); font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); } @media (min-width: 48rem) { .number-stepper__value--lg { min-width: calc(var(--spacing, .25rem) * 7); } } .number-stepper__value--lg { height: calc(var(--spacing, .25rem) * 10); } @media (min-width: 48rem) { .number-stepper__value--lg { height: calc(var(--spacing, .25rem) * 9); } } .pie-chart { width: 100%; } .pie-chart .recharts-pie-sector path { stroke: none; } .pie-chart .recharts-pie-label-text { font-size: 11px; fill: var(--muted) !important; } .pie-chart .recharts-pie-label-line { stroke: var(--muted); stroke-opacity: .3; } .pie-chart .recharts-label { fill: var(--foreground); } .pie-chart .recharts-tooltip-cursor { display: none; } .pie-chart .recharts-tooltip-wrapper { z-index: 10; } .number-value { font-variant-numeric: tabular-nums; } .item-card { align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 3); display: flex; } .item-card--default { background-color: var(--surface); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .item-card--secondary { background-color: var(--surface-secondary); } .item-card--tertiary { background-color: var(--surface-tertiary); } :is(.item-card--secondary, .item-card--tertiary) > [data-slot="item-card-icon"] { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :is(.item-card--secondary, .item-card--tertiary) > [data-slot="item-card-icon"] { background-color: color-mix(in oklab, var(--surface) 50%, transparent); } } .item-card--outline { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); background-color: #0000; } .item-card--transparent { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; } .item-card__icon { width: calc(var(--spacing, .25rem) * 9); height: calc(var(--spacing, .25rem) * 9); border-radius: calc(var(--radius) * 1); background-color: var(--default); color: var(--foreground); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .item-card__icon svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .item-card__content { min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; flex: 1; display: flex; } .item-card__title { text-overflow: ellipsis; white-space: nowrap; width: fit-content; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); overflow: hidden; } .item-card__description { margin-top: calc(var(--spacing, .25rem) * .5); text-overflow: ellipsis; white-space: nowrap; width: fit-content; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); overflow: hidden; } .item-card__action { flex-shrink: 0; margin-inline-start: auto; padding-inline-start: calc(var(--spacing, .25rem) * 2); } .item-card-group { border-radius: calc(var(--radius) * 2); } .item-card-group > [data-slot="item-card"] { border-style: var(--tw-border-style); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; border-width: 0; border-radius: 0; } .item-card-group--default { background-color: var(--surface); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .item-card-group--secondary { background-color: var(--surface-secondary); } .item-card-group--tertiary { background-color: var(--surface-tertiary); } :is(.item-card-group--secondary, .item-card-group--tertiary) [data-slot="separator"] { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { :is(.item-card-group--secondary, .item-card-group--tertiary) [data-slot="separator"] { background-color: color-mix(in oklab, var(--muted) 10%, transparent); } } :is(.item-card-group--secondary, .item-card-group--tertiary) > [data-slot="item-card"] > [data-slot="item-card-icon"] { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { :is(.item-card-group--secondary, .item-card-group--tertiary) > [data-slot="item-card"] > [data-slot="item-card-icon"] { background-color: color-mix(in oklab, var(--surface) 50%, transparent); } } .item-card-group--outline { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; } .item-card-group--transparent { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; border-radius: 0; } .item-card-group__header { padding-inline: calc(var(--spacing, .25rem) * 4); padding-top: calc(var(--spacing, .25rem) * 4); padding-bottom: calc(var(--spacing, .25rem) * 2); } .item-card-group__title { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .item-card-group__description { margin-top: calc(var(--spacing, .25rem) * .5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .item-card-group--list { flex-direction: column; display: flex; } .item-card-group--grid { --item-card-group-columns: 2; } .item-card-group--grid .item-card-group__header { padding: calc(var(--spacing, .25rem) * 0); } .item-card-group--grid { gap: calc(var(--spacing, .25rem) * 3); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); grid-template-columns: repeat(var(--item-card-group-columns), minmax(0, 1fr)); background-color: #0000; display: grid; } .item-card-group--grid > [data-slot="item-card-group-header"] { grid-column: 1 / -1; } .item-card-group--grid > [data-slot="item-card"] { border-radius: calc(var(--radius) * 2); background-color: var(--surface); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } [data-sheet-drawer] { touch-action: none; transition: transform .5s cubic-bezier(.32, .72, 0, 1); animation-duration: .5s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } [data-sheet-drawer][data-entering], [data-sheet-drawer][data-exiting], [data-sheet-drawer].sheet-dragging { will-change: transform; } [data-sheet-drawer][data-exiting] { animation-fill-mode: forwards; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="bottom"][data-entering] { animation-name: sheet-slideFromBottom; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="bottom"][data-exiting] { animation-name: sheet-slideToBottom; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="top"][data-entering] { animation-name: sheet-slideFromTop; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="top"][data-exiting] { animation-name: sheet-slideToTop; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="left"][data-entering] { animation-name: sheet-slideFromLeft; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="left"][data-exiting] { animation-name: sheet-slideToLeft; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="right"][data-entering] { animation-name: sheet-slideFromRight; } [data-sheet-drawer][data-sheet-snap-points="false"][data-sheet-drawer-direction="right"][data-exiting] { animation-name: sheet-slideToRight; } [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="bottom"] { transform: translate3d(0, var(--initial-transform, 100%), 0); } [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="top"] { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); } [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="left"] { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); } [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="right"] { transform: translate3d(var(--initial-transform, 100%), 0, 0); } [data-sheet-drawer][data-sheet-delayed-snap-points="true"][data-sheet-drawer-direction="top"], [data-sheet-drawer][data-sheet-delayed-snap-points="true"][data-sheet-drawer-direction="bottom"] { transform: translate3d(0, var(--snap-point-height, 0), 0); } [data-sheet-drawer][data-sheet-delayed-snap-points="true"][data-sheet-drawer-direction="left"], [data-sheet-drawer][data-sheet-delayed-snap-points="true"][data-sheet-drawer-direction="right"] { transform: translate3d(var(--snap-point-height, 0), 0, 0); } [data-sheet-overlay] { background: none !important; } [data-sheet-overlay]:before { content: ""; pointer-events: none; position: fixed; inset: 0; } [data-sheet-overlay][data-sheet-snap-points="false"]:before { animation-duration: .5s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } [data-sheet-overlay][data-sheet-snap-points="false"][data-entering]:before { animation-name: sheet-fadeIn; } [data-sheet-overlay][data-sheet-snap-points="false"][data-exiting]:before { animation-name: sheet-fadeOut; animation-fill-mode: forwards; } [data-sheet-animate="false"], [data-sheet-animate="false"]:before { transition: none !important; animation: none !important; } [data-sheet-overlay][data-sheet-snap-points="true"]:before { opacity: var(--sheet-backdrop-opacity, 0); } [data-sheet-overlay][data-sheet-snap-points="true"][data-sheet-dragging]:before { will-change: opacity; } [data-sheet-overlay][data-sheet-snap-points="true"]:not([data-sheet-dragging]):before { transition: opacity .5s cubic-bezier(.32, .72, 0, 1); } [data-sheet-overlay][data-sheet-snap-points="true"]:not([data-sheet-snap-points-overlay="true"]):not([data-sheet-dragging]):before { opacity: 0 !important; } [data-sheet-drawer]:not([data-sheet-custom-container="true"]):after { content: ""; pointer-events: none; background-color: var(--overlay); position: absolute; } [data-sheet-drawer][data-sheet-drawer-direction="top"]:after { top: initial; height: 200%; bottom: 100%; left: 0; right: 0; } [data-sheet-drawer][data-sheet-drawer-direction="bottom"]:after { top: 100%; bottom: initial; height: 200%; left: 0; right: 0; } [data-sheet-drawer][data-sheet-drawer-direction="left"]:after { left: initial; width: 200%; top: 0; bottom: 0; right: 100%; } [data-sheet-drawer][data-sheet-drawer-direction="right"]:after { left: 100%; right: initial; width: 200%; top: 0; bottom: 0; } [data-sheet-handle] { opacity: .7; touch-action: pan-y; border-radius: 1rem; width: 32px; height: 5px; margin-left: auto; margin-right: auto; display: block; position: relative; } [data-sheet-handle]:hover, [data-sheet-handle]:active { opacity: 1; } [data-slot="sheet-handle-hitarea"] { touch-action: inherit; align-items: center; width: max(100%, 2.75rem); height: max(100%, 2.75rem); display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (hover: hover) and (pointer: fine) { [data-sheet-drawer] { -webkit-user-select: none; user-select: none; } } @media (pointer: fine) { [data-slot="sheet-handle-hitarea"] { width: 100%; height: 100%; } } @media (prefers-reduced-motion: reduce) { [data-sheet-drawer] { transition-duration: .01ms !important; animation-duration: .01ms !important; } [data-sheet-overlay] { animation-duration: .01ms !important; } [data-sheet-overlay][data-sheet-snap-points="true"]:not([data-sheet-dragging]):before, .sheet__handle-bar { transition-duration: .01ms !important; } } @keyframes sheet-fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes sheet-fadeOut { to { opacity: 0; } } @keyframes sheet-slideFromBottom { 0% { transform: translate3d(0, var(--initial-transform, 100%), 0); } to { transform: translate(0); } } @keyframes sheet-slideToBottom { to { transform: translate3d(0, var(--initial-transform, 100%), 0); } } @keyframes sheet-slideFromTop { 0% { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); } to { transform: translate(0); } } @keyframes sheet-slideToTop { to { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); } } @keyframes sheet-slideFromLeft { 0% { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); } to { transform: translate(0); } } @keyframes sheet-slideToLeft { to { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); } } @keyframes sheet-slideFromRight { 0% { transform: translate3d(var(--initial-transform, 100%), 0, 0); } to { transform: translate(0); } } @keyframes sheet-slideToRight { to { transform: translate3d(var(--initial-transform, 100%), 0, 0); } } .sheet__backdrop { z-index: 50; position: fixed; inset: 0; } .sheet__backdrop--opaque:before { background-color: var(--backdrop); } .sheet__backdrop--blur:before { background-color: var(--background); } @supports (color: color-mix(in lab, red, red)) { .sheet__backdrop--blur:before { background-color: color-mix(in oklab, var(--background) 1%, transparent); } } .sheet__backdrop--blur:before { --tw-backdrop-blur: blur(var(--blur-sm, 8px)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .sheet__backdrop--transparent:before { background: none; } .sheet__content { z-index: 50; outline: none; position: fixed; } .sheet__content--bottom { border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); max-height: 96vh; bottom: 0; left: 0; right: 0; } .sheet__content--top { border-bottom-right-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); max-height: 96vh; top: 0; left: 0; right: 0; } .sheet__content--left { border-top-right-radius: calc(var(--radius) * 2); border-bottom-right-radius: calc(var(--radius) * 2); max-width: 96vw; height: 100dvh; top: 0; bottom: 0; left: 0; } .sheet__content--right { border-top-left-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); max-width: 96vw; height: 100dvh; top: 0; bottom: 0; right: 0; } [data-sheet-detached] { border-radius: calc(var(--radius) * 2); overflow: hidden; } [data-sheet-detached] .sheet__dialog { border-radius: calc(var(--radius) * 2); } [data-sheet-detached]:after { content: none; } [data-sheet-detached].sheet__content--bottom { bottom: .5rem; left: .5rem; right: .5rem; } [data-sheet-detached].sheet__content--top { top: .5rem; left: .5rem; right: .5rem; } [data-sheet-detached].sheet__content--left { top: .5rem; bottom: .5rem; left: .5rem; } [data-sheet-detached].sheet__content--right { top: .5rem; bottom: .5rem; right: .5rem; } [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="bottom"], [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="top"] { flex-direction: column; height: 100vh; max-height: none; display: flex; } [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="left"], [data-sheet-drawer][data-sheet-snap-points="true"][data-sheet-drawer-direction="right"] { flex-direction: row; width: 100vw; max-width: none; display: flex; } .sheet__dialog { background-color: var(--overlay); color: var(--overlay-foreground); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline: none; flex-direction: column; flex: auto; min-height: 0; display: flex; position: relative; overflow: hidden; } .sheet__dialog--bottom { border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); max-height: 96vh; } .sheet__dialog--top { border-bottom-right-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); max-height: 96vh; } [data-sheet-snap-points="true"] .sheet__dialog--bottom, [data-sheet-snap-points="true"] .sheet__dialog--top { max-height: none; } .sheet__dialog--left { border-top-right-radius: calc(var(--radius) * 2); border-bottom-right-radius: calc(var(--radius) * 2); height: 100%; } .sheet__dialog--right { border-top-left-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); height: 100%; } .sheet__header { flex-direction: column; flex-shrink: 0; gap: .25rem; padding: 1rem 1.25rem .5rem; display: flex; } .sheet__heading { font-size: var(--text-lg, 1.125rem); line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); } .sheet__body { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); -webkit-overflow-scrolling: touch; flex: auto; padding: .5rem 1.25rem; overflow-y: auto; } .sheet__footer { flex-shrink: 0; justify-content: flex-end; align-items: center; gap: .5rem; padding: .5rem 1.25rem 1rem; display: flex; } .sheet__handle { cursor: grab; touch-action: pan-y; justify-content: center; align-items: center; padding: .75rem 0; display: flex; position: relative; } .sheet__handle:active { cursor: grabbing; } .sheet__handle-bar { background-color: var(--default); border-radius: 3.40282e38px; width: 2rem; height: .3rem; transition: background-color .15s; display: block; } .sheet__handle:hover .sheet__handle-bar, .sheet__handle:active .sheet__handle-bar { background-color: var(--default-hover); } .sheet__close-trigger { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; color: var(--muted); cursor: var(--cursor-interactive); outline-style: none; position: absolute; top: .75rem; right: .75rem; } .sheet__close-trigger:focus-visible, .sheet__close-trigger[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .sheet__close-trigger:disabled, .sheet__close-trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .sheet__close-trigger:hover, .sheet__close-trigger[data-hovered="true"] { color: var(--foreground); } } .pressable-feedback { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; border-radius: inherit; cursor: var(--cursor-interactive); outline-style: none; display: inline-flex; position: relative; overflow: hidden; } .pressable-feedback:focus-visible:not(:focus), .pressable-feedback[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .pressable-feedback:disabled, .pressable-feedback[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .pressable-feedback__highlight { --pressable-feedback-highlight-color: currentColor; --pressable-feedback-highlight-opacity: .08; --pressable-feedback-highlight-pressed-opacity: .12; --pressable-feedback-transition-duration: .15s; pointer-events: none; border-radius: inherit; background-color: var(--pressable-feedback-highlight-color); opacity: 0; transition: opacity var(--pressable-feedback-transition-duration) ease; position: absolute; inset: 0; } @media (hover: hover) { :hover > .pressable-feedback__highlight, [data-hovered="true"] > .pressable-feedback__highlight { opacity: var(--pressable-feedback-highlight-opacity); } } :active > .pressable-feedback__highlight, [data-pressed="true"] > .pressable-feedback__highlight { opacity: var(--pressable-feedback-highlight-pressed-opacity); } :disabled > .pressable-feedback__highlight, [aria-disabled="true"] > .pressable-feedback__highlight { display: none; } .pressable-feedback__ripple { pointer-events: none; border-radius: inherit; width: 100%; height: 100%; margin: auto; display: block; position: absolute; inset: 0; overflow: hidden; } .pressable-feedback__ripple[aria-disabled="true"] { display: none; } @media (forced-colors: active) { .pressable-feedback__ripple { display: none; } } .pressable-feedback__ripple-surface { pointer-events: none; border-radius: inherit; inset: 0; } .pressable-feedback__ripple-surface:before, .pressable-feedback__ripple-surface:after { content: ""; opacity: 0; position: absolute; } .pressable-feedback__ripple-surface:before { background-color: var(--pressable-feedback-ripple-color, currentColor); width: 100%; height: 100%; transition: opacity var(--pressable-feedback-ripple-duration, .15s), background-color var(--pressable-feedback-ripple-duration, .15s); inset: 0; } .pressable-feedback__ripple-surface:after { background: radial-gradient(closest-side, var(--pressable-feedback-ripple-color, currentColor) max(100% - 70px, 65%), transparent 100%); transform-origin: 50%; transition: opacity .375s; inset: 0; } .pressable-feedback__ripple-surface.--hover:before { background-color: var(--pressable-feedback-ripple-color, currentColor); opacity: var(--pressable-feedback-ripple-hover-opacity, .08); } .pressable-feedback__ripple-surface.--press:after { opacity: var(--pressable-feedback-ripple-pressed-opacity, .12); transition-duration: 75ms; } .pressable-feedback__hold-confirm { --pressable-feedback-hold-confirm-duration: 2s; --pressable-feedback-hold-confirm-release-duration: .2s; justify-content: center; align-items: center; gap: inherit; pointer-events: none; border-radius: inherit; transition: clip-path var(--pressable-feedback-hold-confirm-release-duration) ease-out; display: flex; position: absolute; inset: 0; } .pressable-feedback__hold-confirm[data-sweep="right"] { clip-path: inset(0 100% 0 0); } .pressable-feedback__hold-confirm[data-sweep="left"] { clip-path: inset(0 0 0 100%); } .pressable-feedback__hold-confirm[data-sweep="down"] { clip-path: inset(0 0 100%); } .pressable-feedback__hold-confirm[data-sweep="up"] { clip-path: inset(100% 0 0); } .pressable-feedback__hold-confirm[data-holding="true"] { clip-path: inset(0); transition: clip-path var(--pressable-feedback-hold-confirm-duration) linear; } .pressable-feedback__hold-confirm[data-complete="true"] { clip-path: inset(0); transition: none; } :disabled > .pressable-feedback__hold-confirm, [aria-disabled="true"] > .pressable-feedback__hold-confirm { display: none; } .pressable-feedback__progress-feedback { --pressable-feedback-progress-feedback-duration: 2s; --pressable-feedback-progress-feedback-release-duration: .3s; justify-content: center; align-items: center; gap: inherit; pointer-events: none; border-radius: inherit; transition: clip-path var(--pressable-feedback-progress-feedback-release-duration) ease-out; display: flex; position: absolute; inset: 0; } .pressable-feedback__progress-feedback[data-sweep="right"] { clip-path: inset(0 100% 0 0); } .pressable-feedback__progress-feedback[data-sweep="left"] { clip-path: inset(0 0 0 100%); } .pressable-feedback__progress-feedback[data-sweep="down"] { clip-path: inset(0 0 100%); } .pressable-feedback__progress-feedback[data-sweep="up"] { clip-path: inset(100% 0 0); } .pressable-feedback__progress-feedback[data-progressing="true"] { clip-path: inset(0); transition: clip-path var(--pressable-feedback-progress-feedback-duration) linear; } .pressable-feedback__progress-feedback[data-complete="true"] { clip-path: inset(0); transition: none; } :disabled > .pressable-feedback__progress-feedback, [aria-disabled="true"] > .pressable-feedback__progress-feedback { display: none; } .prompt-input { width: 100%; position: relative; } .prompt-input__shell { border-radius: calc(var(--radius) * 2); border-style: solid; border-color: var(--field-border, var(--border)); border-width: var(--border-width-field, var(--field-border-width, 1px)); width: 100%; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); flex-direction: column; display: flex; position: relative; overflow: hidden; } .prompt-input__shell--primary { background-color: var(--field-background, var(--default)); border-color: var(--field-border, var(--border)); } @media (hover: hover) { .prompt-input__shell--primary:hover { border-color: var(--field-border-hover); } } .prompt-input:focus-within .prompt-input__shell--primary { background-color: var(--field-focus, var(--field-background, var(--default))); border-color: var(--field-border-focus, var(--field-border, var(--border))); } .prompt-input__shell--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--default); border-color: var(--field-border, var(--border)); } @media (hover: hover) { .prompt-input__shell--secondary:hover { background-color: var(--default-hover); } } .prompt-input:focus-within .prompt-input__shell--secondary { background-color: var(--default); border-color: var(--field-border-focus, var(--field-border, var(--border))); } .prompt-input__shell[data-dragging="true"] { background-color: var(--accent-soft); border-style: dotted; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .prompt-input__content { min-height: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 1); flex-direction: column; flex: 1; display: flex; } .prompt-input__attachments { gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 3); padding-bottom: calc(var(--spacing, .25rem) * 1); flex-wrap: wrap; display: flex; } :is(.prompt-input__textarea, .prompt-input__token-input) { margin-bottom: calc(var(--spacing, .25rem) * 14); min-height: calc(var(--spacing, .25rem) * 14); padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 3); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); } .prompt-input__attachments + :is(.prompt-input__textarea, .prompt-input__token-input) { padding-top: calc(var(--spacing, .25rem) * 1); } .prompt-input--sm :is(.prompt-input__textarea, .prompt-input__token-input) { margin-bottom: calc(var(--spacing, .25rem) * 10); min-height: calc(var(--spacing, .25rem) * 12); } .prompt-input--lg :is(.prompt-input__textarea, .prompt-input__token-input) { margin-bottom: calc(var(--spacing, .25rem) * 14); min-height: calc(var(--spacing, .25rem) * 18); } .prompt-input__textarea { resize: none; transition: height .1s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .prompt-input__textarea { transition: none; } } .prompt-input__token-input { font-size: var(--text-base, 1rem); line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1))); --tw-outline-style: none; outline-style: none; position: relative; overflow-y: auto; } @media (min-width: 40rem) { .prompt-input__token-input { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } } .prompt-input__token-input { color: var(--field-foreground, var(--foreground)); overflow-wrap: anywhere; max-height: var(--prompt-input-max-height); } .prompt-input__token-input[data-empty]:before { pointer-events: none; color: var(--field-placeholder, var(--muted)); content: attr(data-placeholder); position: absolute; } .prompt-input__token { border-radius: calc(var(--radius) * .75); background-color: var(--accent-soft); padding-inline: calc(var(--spacing, .25rem) * 1); vertical-align: baseline; color: var(--accent); white-space: nowrap; align-items: center; display: inline-flex; } .prompt-input__token[data-selected] { background-color: var(--accent); color: var(--accent-foreground); } .prompt-input__token[data-disabled] { opacity: .6; } .prompt-input__token-suggestions { max-width: min(22rem, 80svw); min-width: calc(var(--spacing, .25rem) * 56); scroll-padding-block: calc(var(--spacing, .25rem) * 1); overscroll-behavior: contain; border-radius: calc(var(--radius) * 2); background-color: var(--overlay); padding: calc(var(--spacing, .25rem) * 0); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); --tw-outline-style: none; box-shadow: var(--shadow-overlay); outline-style: none; overflow-y: auto; } .prompt-input__token-suggestions:has(:is([role="menu"], [role="listbox"]):empty) { visibility: hidden; } .prompt-input__shell .prompt-input__textarea.textarea, .prompt-input__shell .prompt-input__textarea.textarea:hover:not(:focus):not(:focus-visible), .prompt-input__shell .prompt-input__textarea.textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { box-shadow: none; --tw-shadow: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; background-color: #0000; border-color: #0000; } .prompt-input__shell .prompt-input__textarea.textarea:focus, .prompt-input__shell .prompt-input__textarea.textarea:focus-visible, .prompt-input__shell .prompt-input__textarea.textarea[data-focused="true"], .prompt-input__shell .prompt-input__textarea.textarea[data-focus-visible="true"] { box-shadow: none; --tw-shadow: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; background-color: #0000; border-color: #0000; outline: none; } .prompt-input__toolbar { inset-inline: calc(var(--spacing, .25rem) * 3); bottom: calc(var(--spacing, .25rem) * 3); justify-content: space-between; align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; position: absolute; } .prompt-input__toolbar-start, .prompt-input__toolbar-end { align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; } .prompt-input__toolbar-end { margin-inline-start: auto; } .prompt-input__footer { margin-top: calc(var(--spacing, .25rem) * 1); text-align: center; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .prompt-input__send { flex-shrink: 0; } .prompt-input[data-disabled="true"] { opacity: .6; } .prompt-input[data-pending="true"] .prompt-input__shell { opacity: .95; } .prompt-input[data-status="error"] .prompt-input__send { background-color: var(--danger); color: var(--danger-foreground); } .prompt-input[data-disabled="true"] .prompt-input__shell { cursor: not-allowed; } .prompt-input:not([data-disabled="true"]) .prompt-input__shell { cursor: text; } .prompt-input:not([data-disabled="true"]) .prompt-input__toolbar { cursor: default; } .prompt-input[data-layout="compact"] .prompt-input__shell--compact, .prompt-input[data-layout="inline"] .prompt-input__shell--inline { background-color: var(--field-background, var(--default)); border-color: var(--field-border, var(--border)); border-radius: var(--radius-2xl, 1rem); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), border-radius .2s var(--ease-out), box-shadow .15s var(--ease-out), min-height .2s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .prompt-input[data-layout="compact"] .prompt-input__shell--compact, .prompt-input[data-layout="inline"] .prompt-input__shell--inline { transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); } } @media (hover: hover) { .prompt-input[data-layout="compact"] .prompt-input__shell--compact:hover, .prompt-input[data-layout="inline"] .prompt-input__shell--inline:hover { border-color: var(--field-border-hover); } } .prompt-input[data-layout="compact"]:focus-within .prompt-input__shell--compact, .prompt-input[data-layout="inline"]:focus-within .prompt-input__shell--inline { background-color: var(--field-focus, var(--field-background, var(--default))); border-color: var(--field-border-focus, var(--field-border, var(--border))); } .prompt-input[data-layout="compact"] .prompt-input__send, .prompt-input[data-layout="compact"] [data-slot="prompt-input-action"], .prompt-input[data-layout="inline"] .prompt-input__send, .prompt-input[data-layout="inline"] [data-slot="prompt-input-action"] { width: calc(var(--spacing, .25rem) * 8); height: calc(var(--spacing, .25rem) * 8); max-height: calc(var(--spacing, .25rem) * 8); min-height: calc(var(--spacing, .25rem) * 8); max-width: calc(var(--spacing, .25rem) * 8); min-width: calc(var(--spacing, .25rem) * 8); flex-shrink: 0; } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)), .prompt-input[data-layout="inline"] .prompt-input__shell--inline { min-height: calc(var(--spacing, .25rem) * 12); border-radius: calc(var(--radius) * 3); padding-block: calc(var(--spacing, .25rem) * 0); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(calc(var(--spacing) * 12), auto); grid-template-areas: "attachments attachments attachments" "toolbar-start textarea toolbar-end"; display: grid; overflow: hidden; } .prompt-input[data-layout="inline"][data-expanded] .prompt-input__shell--inline, .prompt-input[data-layout="inline"] .prompt-input__shell--inline:has(.prompt-input__attachments > *) { border-radius: var(--radius-2xl, 1rem); } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) .prompt-input__content, .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) .prompt-input__toolbar, .prompt-input[data-layout="inline"] .prompt-input__content, .prompt-input[data-layout="inline"] .prompt-input__toolbar { display: contents; } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) :is(.prompt-input__textarea, .prompt-input__token-input), .prompt-input[data-layout="inline"] :is(.prompt-input__textarea, .prompt-input__token-input) { margin-bottom: calc(var(--spacing, .25rem) * 0); min-height: calc(var(--spacing, .25rem) * 12); resize: none; padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 3.5); transition: height .1s var(--ease-out), min-height .2s var(--ease-out); grid-area: textarea; align-self: flex-start; overflow-y: auto; } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) .prompt-input__textarea, .prompt-input[data-layout="inline"] .prompt-input__textarea { max-height: none; } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) :is(.prompt-input__textarea, .prompt-input__token-input) { max-height: calc(var(--spacing, .25rem) * 12); align-self: center; overflow-y: hidden; } @media (prefers-reduced-motion: reduce) { .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) :is(.prompt-input__textarea, .prompt-input__token-input), .prompt-input[data-layout="inline"] :is(.prompt-input__textarea, .prompt-input__token-input) { transition: none; } } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) .prompt-input__toolbar-start { height: calc(var(--spacing, .25rem) * 8); grid-area: toolbar-start; align-self: center; padding-inline-start: calc(var(--spacing, .25rem) * 2); } .prompt-input[data-layout="compact"]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments > *)) .prompt-input__toolbar-end { height: calc(var(--spacing, .25rem) * 8); grid-area: toolbar-end; align-self: center; padding-inline-end: calc(var(--spacing, .25rem) * 2); } .prompt-input[data-layout="inline"] .prompt-input__attachments { gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 3); padding-bottom: calc(var(--spacing, .25rem) * 1); flex-wrap: wrap; grid-area: attachments; display: flex; } .prompt-input[data-layout="inline"] .prompt-input__attachments + :is(.prompt-input__textarea, .prompt-input__token-input) { padding-top: calc(var(--spacing, .25rem) * 1); } .prompt-input[data-layout="inline"] .prompt-input__toolbar-start { margin-top: calc(var(--spacing, .25rem) * 2); height: calc(var(--spacing, .25rem) * 8); grid-area: toolbar-start; align-self: flex-start; padding-inline-start: calc(var(--spacing, .25rem) * 2); } .prompt-input[data-layout="inline"] .prompt-input__toolbar-end { margin-top: calc(var(--spacing, .25rem) * 2); height: calc(var(--spacing, .25rem) * 8); grid-area: toolbar-end; align-self: flex-start; padding-inline-end: calc(var(--spacing, .25rem) * 2); } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__shell--compact, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) { border-radius: var(--radius-2xl, 1rem); min-height: calc(var(--spacing, .25rem) * 28); flex-direction: column; display: flex; } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__content, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__content { min-height: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 1); flex-direction: column; flex: 1; display: flex; } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__toolbar, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__toolbar { inset-inline: calc(var(--spacing, .25rem) * 3); bottom: calc(var(--spacing, .25rem) * 3); justify-content: space-between; align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; position: absolute; } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__attachments, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__attachments { gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 3); padding-bottom: calc(var(--spacing, .25rem) * 1); flex-wrap: wrap; display: flex; } .prompt-input[data-layout="compact"][data-expanded] :is(.prompt-input__textarea, .prompt-input__token-input), .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) :is(.prompt-input__textarea, .prompt-input__token-input) { margin-bottom: calc(var(--spacing, .25rem) * 12); min-height: calc(var(--spacing, .25rem) * 18); resize: none; padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 3); transition: height .1s var(--ease-out), min-height .2s var(--ease-out); } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__textarea, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__textarea { max-height: none; } @media (prefers-reduced-motion: reduce) { .prompt-input[data-layout="compact"][data-expanded] :is(.prompt-input__textarea, .prompt-input__token-input), .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) :is(.prompt-input__textarea, .prompt-input__token-input) { transition: none; } } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__attachments + :is(.prompt-input__textarea, .prompt-input__token-input), .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__attachments + :is(.prompt-input__textarea, .prompt-input__token-input) { padding-top: calc(var(--spacing, .25rem) * 1); } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__toolbar-start, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__toolbar-start { flex-shrink: 0; padding-inline-start: calc(var(--spacing, .25rem) * 0); } .prompt-input[data-layout="compact"][data-expanded] .prompt-input__toolbar-end, .prompt-input[data-layout="compact"] .prompt-input__shell--compact:has(.prompt-input__attachments > *) .prompt-input__toolbar-end { flex-shrink: 0; padding-inline-end: calc(var(--spacing, .25rem) * 0); } .prompt-input [data-slot="select-trigger"].prompt-input__select-trigger--outline { --field-border: var(--border); --field-border-hover: var(--border); --field-border-focus: var(--border); box-shadow: none; border-style: solid; border-width: var(--border-width, 1px); border-color: var(--border); --button-bg-hover: var(--default); background-color: #0000; } @supports (color: color-mix(in lab, red, red)) { .prompt-input [data-slot="select-trigger"].prompt-input__select-trigger--outline { --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent); } } @media (hover: hover) { .prompt-input [data-slot="select-trigger"].prompt-input__select-trigger--outline:hover, .prompt-input [data-slot="select-trigger"].prompt-input__select-trigger--outline[data-hovered="true"] { border-color: var(--border); background-color: var(--button-bg-hover); } } .prompt-input [data-slot="select-trigger"].prompt-input__select-trigger--outline:focus-visible, .prompt-input [data-slot="select-trigger"].prompt-input__select-trigger--outline[data-focus-visible="true"] { border-color: var(--border); background-color: #0000; } .prompt-input:has( > .prompt-input__queue) { gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; width: 100%; display: flex; overflow-x: hidden; } .prompt-input:has( > .prompt-input__queue) > .prompt-input__shell { flex-shrink: 0; width: 100%; } .prompt-input__queue { border-radius: calc(var(--radius) * 2); border-style: solid; border-color: var(--field-border, var(--border)); border-width: var(--border-width-field, var(--field-border-width, 1px)); width: 100%; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); flex-shrink: 0; position: relative; overflow: hidden; } .prompt-input[data-variant="primary"] .prompt-input__queue, .prompt-input:not([data-variant]) .prompt-input__queue { background-color: var(--field-background, var(--default)); } .prompt-input[data-variant="secondary"] .prompt-input__queue { background-color: var(--default); } @media (hover: hover) { .prompt-input[data-variant="primary"] .prompt-input__queue:hover, .prompt-input:not([data-variant]) .prompt-input__queue:hover { border-color: var(--field-border-hover, var(--field-border, var(--border))); } } .prompt-input:focus-within[data-variant="primary"] .prompt-input__queue, .prompt-input:focus-within:not([data-variant]) .prompt-input__queue, .prompt-input[data-layout="compact"]:focus-within .prompt-input__queue, .prompt-input[data-layout="inline"]:focus-within .prompt-input__queue { border-color: var(--field-border-focus, var(--field-border, var(--border))); } .prompt-input__queue-list { max-height: calc(var(--spacing, .25rem) * 40); width: 100%; overflow-x: hidden; } .prompt-input__queue-list-items { margin: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * 0); list-style-type: none; } .prompt-input__queue-item { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 1); display: flex; } .prompt-input__queue-item + .prompt-input__queue-item { border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--border); } @supports (color: color-mix(in lab, red, red)) { .prompt-input__queue-item + .prompt-input__queue-item { border-color: color-mix(in oklab, var(--border) 50%, transparent); } } .prompt-input__queue-item-body { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); flex: 1; display: flex; } .prompt-input__queue-item-body:has(.prompt-input__queue-item-attachments) { align-items: stretch; gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; } .prompt-input__queue-item-body:has(.prompt-input__queue-item-attachments) .prompt-input__queue-item-icon { align-self: flex-start; } .prompt-input__queue-item > .prompt-input__queue-item-attachments { flex-basis: 100%; padding-inline-start: calc(var(--spacing, .25rem) * 9); } .prompt-input__queue-item:has( > .prompt-input__queue-item-attachments) { flex-wrap: wrap; } .prompt-input__queue-item:has( > .prompt-input__queue-item-attachments) .prompt-input__queue-item-actions { align-self: center; } .prompt-input__queue-item-handle { width: calc(var(--spacing, .25rem) * 7); height: calc(var(--spacing, .25rem) * 7); min-height: calc(var(--spacing, .25rem) * 7); min-width: calc(var(--spacing, .25rem) * 7); color: var(--muted); opacity: 1; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); flex-shrink: 0; } .prompt-input__queue-item-handle[data-reorder-enabled] { cursor: grab; } .prompt-input__queue-item-handle[data-reorder-enabled]:active { cursor: grabbing; } .prompt-input__queue-item-icon { color: var(--muted); flex-shrink: 0; justify-content: center; align-self: center; align-items: center; display: flex; } .prompt-input__queue-item-content { min-width: calc(var(--spacing, .25rem) * 0); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: var(--leading-tight, 1.25); line-height: var(--leading-tight, 1.25); overflow-wrap: anywhere; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1; align-self: center; display: -webkit-box; overflow: hidden; } .prompt-input__queue-item-body .prompt-input__queue-item-content { min-width: calc(var(--spacing, .25rem) * 0); flex: 1; } .prompt-input__queue-item-description { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: var(--leading-tight, 1.25); line-height: var(--leading-tight, 1.25); color: var(--muted); } .prompt-input__queue-item-actions { align-items: center; gap: calc(var(--spacing, .25rem) * .5); transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); flex-shrink: 0; align-self: center; display: flex; } .prompt-input__queue[data-actions-visibility="hover"] .prompt-input__queue-item-actions { opacity: 0; } .prompt-input__queue[data-actions-visibility="hover"] .prompt-input__queue-item:hover .prompt-input__queue-item-actions, .prompt-input__queue[data-actions-visibility="hover"] .prompt-input__queue-item:focus-within .prompt-input__queue-item-actions, .prompt-input__queue[data-actions-visibility="hover"] .prompt-input__queue-item:has([aria-expanded="true"]) .prompt-input__queue-item-actions, .prompt-input__queue[data-actions-visibility="hover"] .prompt-input__queue-item:has([data-open="true"]) .prompt-input__queue-item-actions, .prompt-input__queue[data-actions-visibility="always"] .prompt-input__queue-item-actions { opacity: 1; } .prompt-input__queue-item-attachments { min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); flex-wrap: wrap; display: flex; } .prompt-input__queue-item-attachments-overflow { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .prompt-suggestion { gap: calc(var(--spacing, .25rem) * 8); flex-direction: column; width: 100%; display: flex; } .prompt-suggestion__header { gap: calc(var(--spacing, .25rem) * 2); flex-direction: column; display: flex; } .prompt-suggestion__title { font-size: var(--text-2xl, 1.5rem); line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); --tw-tracking: var(--tracking-tight, -.025em); letter-spacing: var(--tracking-tight, -.025em); color: var(--foreground); } .prompt-suggestion__description { max-width: 640px; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); } .prompt-suggestion__group { gap: calc(var(--spacing, .25rem) * 3); flex-direction: column; display: flex; } .prompt-suggestion__group-label { font-size: var(--text-lg, 1.125rem); line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .prompt-suggestion__group-description { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); } .prompt-suggestion__items--pill { gap: calc(var(--spacing, .25rem) * 2); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-auto-rows: auto; width: 100%; display: grid; } @media (min-width: 40rem) { .prompt-suggestion__items--pill { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .prompt-suggestion__items--card { gap: calc(var(--spacing, .25rem) * 3); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-auto-rows: auto; display: grid; } @media (min-width: 40rem) { .prompt-suggestion__items--card { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .prompt-suggestion__items--card { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .prompt-suggestion__items--card > * { height: 100%; } .prompt-suggestion__item--pill { height: auto; min-height: calc(var(--spacing, .25rem) * 0); justify-content: space-between; align-items: flex-start; gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 3); text-align: start; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-leading: var(--leading-snug, 1.375); line-height: var(--leading-snug, 1.375); white-space: normal; color: var(--foreground); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); background-color: #0000; display: flex; } @media (hover: hover) { .prompt-suggestion__item--pill:hover { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .prompt-suggestion__item--pill:hover { background-color: color-mix(in oklab, var(--default) 40%, transparent); } } } .prompt-suggestion__item--pill { cursor: var(--cursor-interactive); } .prompt-suggestion__item--pill:focus-visible, .prompt-suggestion__item--pill[data-focus-visible="true"] { --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .prompt-suggestion__item-label { min-width: calc(var(--spacing, .25rem) * 0); text-wrap: pretty; align-items: center; display: flex; } .prompt-suggestion__item-end-icon { margin-top: calc(var(--spacing, .25rem) * .5); width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); color: var(--muted); opacity: 0; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); flex-shrink: 0; } .prompt-suggestion__item--pill:hover .prompt-suggestion__item-end-icon, .prompt-suggestion__item--pill[data-hovered="true"] .prompt-suggestion__item-end-icon { opacity: 1; } .prompt-suggestion__item-end-icon:dir(rtl) { --tw-scale-x: calc(100% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } .prompt-suggestion__item--card { gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 2); flex-direction: column; height: 100%; display: flex; } .prompt-suggestion__item-description { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .prompt-suggestion__item-footer { padding-top: calc(var(--spacing, .25rem) * 0); justify-content: space-between; align-items: center; margin-top: auto; display: flex; } .prompt-suggestion__item-tags { gap: calc(var(--spacing, .25rem) * 1.5); flex-wrap: wrap; display: flex; } .prompt-suggestion__item-meta { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .radar-chart { width: 100%; } .radar-chart .recharts-polar-angle-axis-tick-value { font-size: 11px; fill: var(--muted) !important; } .radar-chart .recharts-polar-radius-axis-tick-value { font-size: 10px; fill: var(--muted) !important; } .radar-chart .recharts-polar-grid-concentric-polygon, .radar-chart .recharts-polar-grid-concentric-circle, .radar-chart .recharts-polar-grid-angle line { stroke: var(--muted); stroke-opacity: .2; } .radar-chart .recharts-tooltip-cursor { display: none; } .radial-chart { width: 100%; } .radial-chart .recharts-tooltip-cursor { display: none; } .radial-chart .recharts-tooltip-wrapper { z-index: 10; } .radial-chart .recharts-radial-bar-background-sector { fill: var(--separator); } .radio-button-group { gap: calc(var(--spacing, .25rem) * 3); --radio-button-group-item-radius: var(--radius-2xl); display: flex; } .radio-button-group--grid { display: grid; } .radio-button-group > [data-slot="radio-button-group-item"] { display: contents; } .radio-button-group__item { align-items: stretch; gap: calc(var(--spacing, .25rem) * 4); padding-inline: calc(var(--spacing, .25rem) * 5); padding-block: calc(var(--spacing, .25rem) * 4); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); background-color: var(--surface); border-radius: var(--radio-button-group-item-radius); cursor: var(--cursor-interactive); outline-style: none; flex-direction: column; display: flex; position: relative; } .radio-button-group__item[data-selected="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--accent); border-color: #0000; } .radio-button-group__item:focus-visible:not(:focus), .radio-button-group__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .radio-button-group__item[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .radio-button-group__indicator { inset-inline-end: calc(var(--spacing, .25rem) * 4); top: calc(var(--spacing, .25rem) * 3); position: absolute; } .radio-button-group__indicator[data-custom="true"] { color: var(--accent); opacity: 0; transition: opacity .15s ease-out; } .radio-button-group__indicator[data-custom="true"] svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } [data-selected="true"] > .radio-button-group__indicator[data-custom="true"] { opacity: 1; } .radio-button-group__item-content { min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; display: flex; } .radio-button-group__item-icon { flex-shrink: 0; } .radio-button-group__item-icon svg { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); } .rating { --tw-outline-style: none; --rating-active-color: var(--color-warning); --rating-inactive-color: var(--color-surface-tertiary); outline-style: none; align-items: center; display: flex; } .rating[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .rating[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .rating[data-readonly="true"] { pointer-events: none; } .rating[data-readonly="true"] input { display: none; } .rating[data-readonly="true"]:focus-visible, .rating[data-readonly="true"][data-focus-visible="true"] { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .rating__item { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; justify-content: center; align-items: center; transition: transform .15s; display: flex; position: relative; } .rating__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .rating__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .rating__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .rating__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .rating__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .rating__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .rating__item:focus-visible:not(:focus), .rating__item[data-focus-visible="true"] { border-radius: calc(var(--radius) * .5); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .rating__item:disabled, .rating__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .rating__item:active:not([data-readonly="true"]), .rating__item[data-pressed="true"]:not([data-readonly="true"]) { transform: scale(.8); } .rating__item[data-readonly="true"] { pointer-events: none; cursor: default; } .rating__item[data-readonly="true"]:focus-visible:not(:focus), .rating__item[data-readonly="true"][data-focus-visible="true"] { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .rating__icon { color: var(--rating-inactive-color); justify-content: center; align-items: center; transition: color .1s ease-out; display: flex; position: relative; } .rating__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .rating__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .rating__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .rating__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .rating__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .rating__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .rating__icon svg { width: 100%; height: 100%; } .rating__item[data-active="true"] .rating__icon { color: var(--rating-active-color); } .rating__icon-partial { inset-block: calc(var(--spacing, .25rem) * 0); left: calc(var(--spacing, .25rem) * 0); color: var(--rating-active-color); width: var(--rating-partial); align-items: center; display: flex; position: absolute; overflow: hidden; } .rating__icon-partial svg { flex-shrink: 0; } .rating--sm { gap: 4px; } .rating__item--sm .rating__icon, .rating__item--sm .rating__icon-partial svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .rating--md { gap: 5px; } .rating__item--md .rating__icon, .rating__item--md .rating__icon-partial svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } .rating--lg { gap: 8px; } .rating__item--lg .rating__icon, .rating__item--lg .rating__icon-partial svg { width: calc(var(--spacing, .25rem) * 7); height: calc(var(--spacing, .25rem) * 7); } .resizable { --resizable-handle-size: 1px; --resizable-handle-hit-area: 8px; --resizable-handle-color: var(--color-separator); --resizable-handle-color-hover: var(--color-separator-secondary); --resizable-handle-color-active: var(--color-accent-soft); --resizable-indicator-pill-width: 6px; --resizable-indicator-pill-height: 32px; --resizable-indicator-drag-radius: var(--radius-sm, 6px); --resizable-indicator-drag-bg: var(--color-default); --resizable-indicator-drag-bg-hover: var(--color-default-hover); --resizable-indicator-drag-fg: var(--color-muted); --resizable-indicator-drag-fg-hover: var(--color-foreground); --resizable-indicator-drag-long: 20px; --resizable-indicator-drag-short: 13px; --resizable-indicator-drag-icon-size: 10px; --resizable-indicator-radius: var(--radius-full, 9999px); --resizable-transition-duration: .12s; height: 100%; min-height: calc(var(--spacing, .25rem) * 0); width: 100%; min-width: calc(var(--spacing, .25rem) * 0); display: flex; } .resizable--horizontal { flex-direction: row; } .resizable--vertical { flex-direction: column; } .resizable__panel { min-height: calc(var(--spacing, .25rem) * 0); min-width: calc(var(--spacing, .25rem) * 0); position: relative; overflow: hidden; } .resizable__handle { --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: var(--resizable-handle-color); cursor: var(--cursor-interactive, col-resize); touch-action: none; -webkit-user-select: none; user-select: none; transition: background-color var(--resizable-transition-duration) ease; outline-style: none; flex: none; justify-content: center; align-items: center; display: flex; position: relative; } .resizable__handle--horizontal { width: var(--resizable-handle-size); cursor: col-resize; } .resizable__handle--vertical { height: var(--resizable-handle-size); cursor: row-resize; } .resizable__handle:before { content: ""; background: none; position: absolute; } .resizable__handle--horizontal:before { top: 0; bottom: 0; left: calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2); right: calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2); } .resizable__handle--vertical:before { left: 0; right: 0; top: calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2); bottom: calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2); } .resizable__handle--primary { --resizable-handle-color: var(--color-separator); } .resizable__handle--secondary { --resizable-handle-color: var(--color-separator-secondary); } .resizable__handle--tertiary { --resizable-handle-color: var(--color-separator-tertiary); } @media (hover: hover) { .resizable__handle:hover, .resizable__handle[data-hovered="true"] { background-color: var(--resizable-handle-color-hover); } } .resizable__handle[data-resize-handle-active], .resizable__handle[data-resize-handle-state="drag"], .resizable__handle:active, .resizable__handle[data-pressed="true"] { background-color: var(--resizable-handle-color-active); } .resizable__handle:focus-visible:not(:focus), .resizable__handle[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .resizable__handle:disabled, .resizable__handle[aria-disabled="true"], .resizable__handle[data-disabled] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; cursor: default; } .resizable__handle-indicator { pointer-events: none; z-index: 1; justify-content: center; align-items: center; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .resizable__handle--pill .resizable__handle-indicator--pill, .resizable__handle-indicator--pill { width: var(--resizable-indicator-pill-width); height: var(--resizable-indicator-pill-height); border-radius: var(--resizable-indicator-radius); background-color: var(--color-default); transition: background-color var(--resizable-transition-duration) ease, transform var(--resizable-transition-duration) ease; } .resizable__handle--vertical .resizable__handle-indicator--pill { width: var(--resizable-indicator-pill-height); height: var(--resizable-indicator-pill-width); } @media (hover: hover) { .resizable__handle--pill:hover .resizable__handle-indicator--pill, .resizable__handle--pill[data-hovered="true"] .resizable__handle-indicator--pill { background-color: var(--color-default-hover); } } .resizable__handle--pill[data-resize-handle-active] .resizable__handle-indicator--pill, .resizable__handle--pill:active .resizable__handle-indicator--pill { background-color: var(--color-default-hover); } .resizable__handle-indicator--drag { border-radius: var(--resizable-indicator-drag-radius); background-color: var(--resizable-indicator-drag-bg); color: var(--resizable-indicator-drag-fg); transition: background-color var(--resizable-transition-duration) ease, color var(--resizable-transition-duration) ease; justify-content: center; align-items: center; display: inline-flex; } .resizable__handle-indicator-icon { width: var(--resizable-indicator-drag-icon-size); height: var(--resizable-indicator-drag-icon-size); display: block; } .resizable__handle--horizontal .resizable__handle-indicator--drag { width: var(--resizable-indicator-drag-short); height: var(--resizable-indicator-drag-long); } .resizable__handle--vertical .resizable__handle-indicator--drag { width: var(--resizable-indicator-drag-long); height: var(--resizable-indicator-drag-short); } @media (hover: hover) { .resizable__handle--drag:hover .resizable__handle-indicator--drag, .resizable__handle--drag[data-hovered="true"] .resizable__handle-indicator--drag { background-color: var(--resizable-indicator-drag-bg-hover); color: var(--resizable-indicator-drag-fg-hover); } } .resizable__handle--handle { background-color: #0000; } @media (hover: hover) { .resizable__handle--handle:hover, .resizable__handle--handle[data-hovered="true"] { background-color: #0000; } } .resizable__handle--handle[data-resize-handle-active], .resizable__handle--handle[data-resize-handle-state="drag"], .resizable__handle--handle:active, .resizable__handle--handle[data-pressed="true"] { background-color: #0000; } @media (prefers-reduced-motion: reduce) { .resizable__handle, .resizable__handle-indicator, .resizable__handle-indicator--pill, .resizable__handle-indicator--drag { transition: none; } } .rich-text-editor { width: 100%; position: relative; } .rich-text-editor__shell { min-height: calc(var(--spacing, .25rem) * 0); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); border-color: var(--field-border, var(--border)); border-width: var(--border-width-field, 1px); width: 100%; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); flex-direction: column; display: flex; position: relative; overflow: hidden; } .rich-text-editor__shell--primary { background-color: var(--field-background, var(--default)); border-color: var(--field-border, var(--border)); } .rich-text-editor__shell--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--default); border-color: var(--field-border, var(--border)); } @media (hover: hover) { .rich-text-editor:not([data-disabled="true"]) .rich-text-editor__shell:hover { border-color: var(--field-border-hover); } } .rich-text-editor:has(.rich-text-editor__prosemirror:focus) .rich-text-editor__shell--primary { background-color: var(--field-focus, var(--field-background, var(--default))); border-color: var(--field-border-focus, var(--field-border, var(--border))); } .rich-text-editor:has(.rich-text-editor__prosemirror:focus) .rich-text-editor__shell--secondary { background-color: var(--default); border-color: var(--field-border-focus, var(--field-border, var(--border))); } .rich-text-editor__toolbar.toolbar { min-height: calc(var(--spacing, .25rem) * 12); align-items: center; gap: calc(var(--spacing, .25rem) * 1); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 2); flex-wrap: wrap; display: flex; } .rich-text-editor__toolbar-group { align-items: center; gap: calc(var(--spacing, .25rem) * 1); display: flex; } .rich-text-editor__toolbar-separator.separator { margin-inline: calc(var(--spacing, .25rem) * 1); height: calc(var(--spacing, .25rem) * 6); background-color: var(--separator); flex-shrink: 0; align-self: center; width: 1px; } .rich-text-editor__toolbar-button { flex-shrink: 0; } .rich-text-editor__toolbar-button[data-active="true"], .rich-text-editor__toolbar-button[data-selected="true"] { background-color: var(--accent-soft); color: var(--accent); } .rich-text-editor__content { min-height: calc(var(--spacing, .25rem) * 0); flex: 1; overflow-y: auto; } .rich-text-editor__loading { min-height: 180px; } .rich-text-editor__prosemirror { min-height: 180px; padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 3); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-leading: calc(var(--spacing, .25rem) * 6); line-height: calc(var(--spacing, .25rem) * 6); color: var(--foreground); --tw-outline-style: none; outline-style: none; } .rich-text-editor__prosemirror > * + * { margin-top: calc(var(--spacing, .25rem) * 3); } .rich-text-editor__prosemirror h1, .rich-text-editor__prosemirror h2, .rich-text-editor__prosemirror h3 { --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); --tw-tracking: var(--tracking-normal, 0em); letter-spacing: var(--tracking-normal, 0em); color: var(--foreground); } .rich-text-editor__prosemirror h1 { font-size: var(--text-2xl, 1.5rem); line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5))); --tw-leading: calc(var(--spacing, .25rem) * 8); line-height: calc(var(--spacing, .25rem) * 8); } .rich-text-editor__prosemirror h2 { font-size: var(--text-xl, 1.25rem); line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25))); --tw-leading: calc(var(--spacing, .25rem) * 7); line-height: calc(var(--spacing, .25rem) * 7); } .rich-text-editor__prosemirror h3 { font-size: var(--text-lg, 1.125rem); line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))); --tw-leading: calc(var(--spacing, .25rem) * 7); line-height: calc(var(--spacing, .25rem) * 7); } .rich-text-editor__prosemirror p { min-height: calc(var(--spacing, .25rem) * 6); } .rich-text-editor__prosemirror ul, .rich-text-editor__prosemirror ol { padding-inline-start: calc(var(--spacing, .25rem) * 6); } .rich-text-editor__prosemirror ul { list-style-type: disc; } .rich-text-editor__prosemirror ol { list-style-type: decimal; } .rich-text-editor__prosemirror li + li { margin-top: calc(var(--spacing, .25rem) * 1); } .rich-text-editor__prosemirror blockquote { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 2px; border-color: var(--border); color: var(--muted); padding-inline-start: calc(var(--spacing, .25rem) * 4); } .rich-text-editor__prosemirror code { border-radius: calc(var(--radius) * .75); background-color: var(--default-hover); padding-inline: calc(var(--spacing, .25rem) * 1.5); padding-block: calc(var(--spacing, .25rem) * .5); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); color: var(--foreground); font-size: .9em; } .rich-text-editor__prosemirror pre { border-radius: calc(var(--radius) * 1.5); background-color: var(--default-hover); padding: calc(var(--spacing, .25rem) * 3); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--foreground); overflow-x: auto; } .rich-text-editor__prosemirror pre code { padding: calc(var(--spacing, .25rem) * 0); color: inherit; background-color: #0000; } .rich-text-editor__prosemirror a { color: var(--link); text-underline-offset: 2px; text-decoration-line: underline; } .rich-text-editor__prosemirror p.is-editor-empty:first-child:before, .rich-text-editor__prosemirror .is-empty:before { pointer-events: none; float: left; height: calc(var(--spacing, .25rem) * 0); color: var(--muted); content: attr(data-placeholder); } .rich-text-editor__bubble-menu { border-radius: calc(var(--radius) * 3); background-color: var(--overlay); padding: calc(var(--spacing, .25rem) * 1); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .rich-text-editor__bubble-menu-toolbar.toolbar { align-items: center; gap: calc(var(--spacing, .25rem) * 1); width: fit-content; display: flex; } .rich-text-editor__floating-menu { border-radius: calc(var(--radius) * 3); background-color: var(--overlay); padding: calc(var(--spacing, .25rem) * 1); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .rich-text-editor__floating-menu-toolbar.toolbar { align-items: center; gap: calc(var(--spacing, .25rem) * 1); width: fit-content; display: flex; } .rich-text-editor__suggestion-menu { width: calc(var(--spacing, .25rem) * 80); background-color: var(--overlay); padding: calc(var(--spacing, .25rem) * 1); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; border-radius: min(32px, var(--radius-3xl)); outline-style: none; flex-direction: column; display: flex; overflow: hidden; } .rich-text-editor__suggestion-menu-list { min-height: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 1); padding: calc(var(--spacing, .25rem) * 0); --tw-outline-style: none; outline-style: none; flex-direction: column; display: flex; overflow-y: auto; } .rich-text-editor__suggestion-menu-item { min-height: calc(var(--spacing, .25rem) * 12); align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 3); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 2); text-align: start; color: var(--foreground); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); cursor: var(--cursor-interactive); outline-style: none; display: flex; position: relative; } .rich-text-editor__suggestion-menu-item:focus-visible, .rich-text-editor__suggestion-menu-item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .rich-text-editor__suggestion-menu-item:active { transform: scale(.98); } @media (hover: hover) { .rich-text-editor__suggestion-menu-item:hover { background-color: var(--default); } } .rich-text-editor__suggestion-menu-item[data-highlighted="true"] { background-color: var(--default); } .rich-text-editor__suggestion-menu-icon { width: calc(var(--spacing, .25rem) * 9); height: calc(var(--spacing, .25rem) * 9); background-color: var(--default); color: var(--muted); border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .rich-text-editor__suggestion-menu-item[data-highlighted="true"] .rich-text-editor__suggestion-menu-icon { background-color: var(--overlay); color: var(--foreground); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .rich-text-editor__suggestion-menu-item-content { min-width: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * .5); flex-direction: column; flex: 1; display: flex; } .rich-text-editor__suggestion-menu-title { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-leading: calc(var(--spacing, .25rem) * 5); line-height: calc(var(--spacing, .25rem) * 5); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); overflow: hidden; } .rich-text-editor__suggestion-menu-description { text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-leading: calc(var(--spacing, .25rem) * 4); line-height: calc(var(--spacing, .25rem) * 4); color: var(--muted); display: block; overflow: hidden; } .rich-text-editor__suggestion-menu-empty { padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--muted); } .rich-text-editor__prosemirror .rich-text-editor__suggestion-decoration { border-radius: calc(var(--radius) * .5); background-color: var(--accent-soft); color: var(--accent); } .rich-text-editor__footer { min-height: calc(var(--spacing, .25rem) * 10); justify-content: space-between; align-items: center; gap: calc(var(--spacing, .25rem) * 3); padding-inline: calc(var(--spacing, .25rem) * 3); padding-block: calc(var(--spacing, .25rem) * 2); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); display: flex; } .rich-text-editor__character-count { color: var(--muted); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .rich-text-editor__character-count[data-over-limit="true"] { color: var(--danger); } .rich-text-editor__link-popover { border-radius: calc(var(--radius) * 2); background-color: var(--overlay); --tw-shadow: var(--overlay-shadow); width: 320px; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } .rich-text-editor__link-popover-content { gap: calc(var(--spacing, .25rem) * 3); padding: calc(var(--spacing, .25rem) * 3); flex-direction: column; display: flex; } .rich-text-editor__link-popover-trigger { display: inline-flex; } .rich-text-editor__link-input { width: 100%; } .rich-text-editor__link-popover-actions { justify-content: flex-end; align-items: center; gap: calc(var(--spacing, .25rem) * 2); display: flex; } .rich-text-editor[data-disabled="true"] { opacity: .6; } .rich-text-editor[data-disabled="true"] .rich-text-editor__shell { cursor: not-allowed; } .rich-text-editor:not([data-disabled="true"]) .rich-text-editor__shell { cursor: text; } .rich-text-editor:not([data-disabled="true"]) .rich-text-editor__toolbar, .rich-text-editor:not([data-disabled="true"]) .rich-text-editor__footer { cursor: default; } .rich-text-editor .ProseMirror-selectednode { outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; outline-color: var(--accent); border-radius: .25rem; } .segment { background-color: var(--default); padding: calc(var(--spacing, .25rem) * 1); border-radius: calc(var(--radius-2xl) + .25rem); align-items: center; display: inline-flex; position: relative; } .segment__item { z-index: 1; cursor: var(--cursor-interactive); height: calc(var(--spacing, .25rem) * 8); justify-content: center; align-items: center; gap: calc(var(--spacing, .25rem) * 1.5); border-radius: calc(var(--radius) * 3); width: 100%; padding-inline: calc(var(--spacing, .25rem) * 4); text-align: center; font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); white-space: nowrap; color: var(--muted); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .15s var(--ease-smooth); outline-style: none; display: flex; position: relative; } .segment__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .segment__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .segment__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .segment__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .segment__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .segment__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .segment__item[data-selected="true"] { color: var(--segment-foreground); } .segment__item[data-selected="true"] .segment__separator, .segment__item[data-selected="true"] + .segment__item .segment__separator { opacity: 0; } .segment__item:disabled, .segment__item[data-disabled="true"], .segment__item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .segment__item:not([data-selected="true"]):not([data-disabled="true"]):hover, .segment__item[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) { opacity: .7; } } .segment__item:focus-visible:not(:focus), .segment__item[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .segment__item svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); flex-shrink: 0; } .segment__separator { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .segment__separator { background-color: color-mix(in oklab, var(--muted) 25%, transparent); } } .segment__separator { pointer-events: none; width: 1px; height: 50%; transition: opacity .15s var(--ease-smooth); inset-inline-start: 0; border-radius: 4px; position: absolute; top: 25%; } .segment__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .segment__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .segment__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .segment__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .segment__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .segment__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .segment__item:first-child > .segment__separator { display: none; } .segment__indicator { z-index: -1; border-radius: var(--radius-3xl); background-color: var(--segment); width: 100%; height: 100%; box-shadow: var(--shadow-surface); transition-property: translate, width, height; transition-duration: .25s; transition-timing-function: var(--ease-out-fluid); position: absolute; top: 0; left: 0; } .segment__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .segment__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .segment__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .segment__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .segment__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .segment__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .segment--sm { padding: calc(var(--spacing, .25rem) * .5); } .segment__item--sm { height: calc(var(--spacing, .25rem) * 7); padding-inline: calc(var(--spacing, .25rem) * 2.5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .segment__item--md { height: calc(var(--spacing, .25rem) * 8); padding-inline: calc(var(--spacing, .25rem) * 4); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .segment__item--lg { height: calc(var(--spacing, .25rem) * 10); padding-inline: calc(var(--spacing, .25rem) * 5); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .segment--ghost { padding: calc(var(--spacing, .25rem) * 0); background-color: #0000; } .segment__item--ghost[data-selected="true"] { color: var(--accent-foreground); } .segment__indicator--ghost { background-color: var(--accent); box-shadow: none; } .stepper { --stepper-indicator-size: 28px; --stepper-separator-size: 2px; --stepper-vertical-gap: 16px; --stepper-active-color: var(--color-accent); --stepper-complete-color: var(--color-accent); --stepper-complete-fg: var(--color-accent-foreground); --stepper-inactive-border: var(--color-border); --stepper-inactive-fg: var(--color-muted); margin: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * 0); list-style-type: none; } .stepper--horizontal { align-items: flex-start; display: flex; } .stepper--vertical { flex-direction: column; display: flex; } .stepper__step { position: relative; } .stepper__step--horizontal { flex-direction: column; flex: 1; align-items: center; display: flex; position: relative; overflow: visible; } .stepper__step--vertical { padding-bottom: var(--stepper-vertical-gap); flex-direction: column; display: flex; position: relative; } .stepper__step--vertical:last-child { padding-bottom: 0; } .stepper__step-button { border-style: var(--tw-border-style); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .1s; --tw-outline-style: none; -webkit-tap-highlight-color: transparent; border-radius: calc(var(--radius) * 1); padding: calc(var(--spacing, .25rem) * 0); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); background-color: #0000; border-width: 0; outline-style: none; align-items: center; transition-duration: .1s; display: flex; } .stepper__step-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .stepper__step-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .stepper__step-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .stepper__step-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .stepper__step-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .stepper__step-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .stepper__step-button[data-clickable="true"] { cursor: var(--cursor-interactive); } @media (hover: hover) { :is(.stepper__step-button[data-clickable="true"]:hover, .stepper__step-button[data-clickable="true"][data-hovered="true"]) .stepper__indicator { opacity: .8; } } .stepper__step-button[data-clickable="true"]:active, .stepper__step-button[data-clickable="true"][data-pressed="true"] { opacity: .8; } .stepper__step-button[data-clickable="true"]:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .stepper__step-button--horizontal { z-index: 10; align-items: center; gap: calc(var(--spacing, .25rem) * 1.5); flex-direction: column; position: relative; } .stepper__step-button--vertical { z-index: 10; align-items: flex-start; gap: calc(var(--spacing, .25rem) * 2.5); flex-direction: row; position: relative; } .stepper__indicator { width: var(--stepper-indicator-size); height: var(--stepper-indicator-size); border: 2px solid; border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .stepper__indicator[data-status="inactive"] { border-color: var(--stepper-inactive-border); color: var(--stepper-inactive-fg); background-color: #0000; } .stepper__indicator[data-status="active"] { border-color: var(--stepper-active-color); color: var(--stepper-active-color); background-color: #0000; } .stepper__indicator[data-status="complete"] { background-color: var(--stepper-complete-color); border-color: var(--stepper-complete-color); color: var(--stepper-complete-fg); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); animation: .3s ease-out stepper-indicator-complete; } .stepper__indicator[data-status="complete"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .stepper__indicator[data-status="complete"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .stepper__indicator[data-status="complete"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .stepper__indicator[data-status="complete"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .stepper__indicator[data-status="complete"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .stepper__indicator[data-status="complete"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } @keyframes stepper-indicator-complete { 0% { transform: scale(1); } 50% { transform: scale(1.15); } to { transform: scale(1); } } .stepper__indicator--sm { --tw-font-weight: var(--font-weight-semibold, 600); font-size: 10px; font-weight: var(--font-weight-semibold, 600); } .stepper__indicator--md { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); } .stepper__indicator--lg { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); } .stepper__separator { display: flex; } .stepper__separator--horizontal { top: calc(var(--stepper-indicator-size) / 2 - var(--stepper-separator-size) / 2); position: absolute; inset-inline-start: calc(50% + var(--stepper-indicator-size) / 2); inset-inline-end: calc(-50% + var(--stepper-indicator-size) / 2); } .stepper__separator--vertical { top: var(--stepper-indicator-size); bottom: 0; position: absolute; inset-inline-start: calc(var(--stepper-indicator-size) / 2 - var(--stepper-separator-size) / 2); } .stepper__separator-track { background-color: var(--separator); position: relative; overflow: hidden; } .stepper__separator-track--horizontal { width: 100%; height: var(--stepper-separator-size); } .stepper__separator-track--vertical { height: 100%; width: var(--stepper-separator-size); } .stepper__separator-fill { inset: calc(var(--spacing, .25rem) * 0); background-color: var(--stepper-complete-color); position: absolute; } .stepper__separator-fill--horizontal { transform: scaleX(var(--stepper-separator-progress, 0)); transform-origin: 0; transition: transform .3s; } .stepper__separator-fill--horizontal:dir(rtl) { transform-origin: 100%; } .stepper__separator-fill--vertical { transform: scaleY(var(--stepper-separator-progress, 0)); transform-origin: top; transition: transform .3s; } .stepper__content { flex-direction: column; display: flex; } .stepper__content--horizontal { text-align: center; align-items: center; } .stepper__content--vertical { text-align: start; min-height: var(--stepper-indicator-size); align-items: flex-start; } .stepper__title { --tw-leading: var(--leading-tight, 1.25); line-height: var(--leading-tight, 1.25); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); color: var(--foreground); transition: color .3s; } .stepper__step[data-status="inactive"] .stepper__title { color: var(--muted); } .stepper__title--sm { font-size: 11px; } .stepper__title--md { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .stepper__title--lg { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); } .stepper__description { --tw-leading: var(--leading-snug, 1.375); line-height: var(--leading-snug, 1.375); color: var(--muted); transition: color .3s; } .stepper__step[data-status="inactive"] .stepper__description { opacity: .6; } .stepper__description--sm { margin-top: calc(var(--spacing, .25rem) * .5); font-size: 10px; } .stepper__description--md, .stepper__description--lg { margin-top: calc(var(--spacing, .25rem) * .5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); } .stepper__icon { justify-content: center; align-items: center; display: flex; } .stepper__icon svg { width: 55%; height: 55%; } .stepper__icon [data-slot="stepper-default-checkmark"] { width: 44%; height: 44%; } [data-slot="stepper-default-checkmark"] { transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } [data-slot="stepper-default-checkmark"] polyline { stroke-dasharray: 22; stroke-dashoffset: 0; animation: .2s ease-out 50ms both stepper-checkmark-draw; } [data-slot="stepper-default-checkmark"] polyline:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), [data-slot="stepper-default-checkmark"] polyline:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, [data-slot="stepper-default-checkmark"] polyline:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { [data-slot="stepper-default-checkmark"] polyline:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), [data-slot="stepper-default-checkmark"] polyline:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, [data-slot="stepper-default-checkmark"] polyline:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } @keyframes stepper-checkmark-draw { 0% { stroke-dashoffset: 22px; } to { stroke-dashoffset: 0; } } .stepper--sm { --stepper-indicator-size: 22px; --stepper-vertical-gap: 12px; } .stepper--md { --stepper-indicator-size: 28px; --stepper-vertical-gap: 16px; } .stepper--lg { --stepper-indicator-size: 36px; --stepper-vertical-gap: 24px; } @keyframes text-shimmer { 0% { translate: -100%; } to { translate: 100%; } } .text-shimmer { --spread: 4ch; width: fit-content; display: inline-block; position: relative; } .text-shimmer__text { display: inherit; align-items: inherit; gap: inherit; color: oklch(from currentColor l c h / calc(alpha * .45)); } .text-shimmer__highlight { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); display: inherit; align-items: inherit; gap: inherit; contain: strict; -webkit-text-fill-color: transparent; position: absolute; overflow: clip; } @supports ((-webkit-mask-clip: text)) { .text-shimmer__highlight { -webkit-mask-image: linear-gradient(#fff, #fff); mask-image: linear-gradient(#fff, #fff); -webkit-mask-clip: text; } } @supports ((-webkit-mask-image: -moz-element(#text)) or (mask-image: -moz-element(#text))) { .text-shimmer__highlight { -webkit-mask-image: var(--_firefox-mask); -webkit-mask-image: var(--_firefox-mask); -webkit-mask-image: var(--_firefox-mask); mask-image: var(--_firefox-mask); } } .text-shimmer__highlight:after { pointer-events: none; inset: calc(var(--spacing, .25rem) * 0); content: ""; background: linear-gradient(90deg, transparent calc(50% - var(--spread)), currentColor 50%, transparent calc(50% + var(--spread))); will-change: transform; animation: 2.5s infinite text-shimmer; position: absolute; } @media (prefers-reduced-motion: reduce) { .text-shimmer__highlight { display: none; } .text-shimmer__text { color: currentColor; } } .timeline { --timeline-spacing: var(--spacing, .25rem); --timeline-marker-size: calc(var(--timeline-spacing) * 7); --timeline-connector-size: calc(var(--timeline-spacing) * .5); --timeline-rail-width: calc(var(--timeline-spacing) * 7); --timeline-gap: calc(var(--timeline-spacing) * 3.5); --timeline-item-gap: calc(var(--timeline-spacing) * 4); --timeline-marker-border-width: calc(var(--timeline-spacing) * .25); --timeline-marker-border-width-lg: calc(var(--timeline-spacing) * .5); --timeline-current-color: var(--color-accent); --timeline-marker-border: var(--color-border); --timeline-marker-fg: var(--color-muted); --timeline-connector-color: var(--color-separator); margin: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * 0); list-style-type: none; } .timeline--axis-start, .timeline--axis-center { flex-direction: column; display: flex; } .timeline--compact { --timeline-item-gap: calc(var(--timeline-spacing) * 3); } .timeline--comfortable { --timeline-item-gap: calc(var(--timeline-spacing) * 4); } .timeline--sm { --timeline-marker-size: calc(var(--timeline-spacing) * 5.5); --timeline-rail-width: calc(var(--timeline-spacing) * 5.5); --timeline-gap: calc(var(--timeline-spacing) * 2.5); } .timeline--md { --timeline-marker-size: calc(var(--timeline-spacing) * 7); --timeline-rail-width: calc(var(--timeline-spacing) * 7); --timeline-gap: calc(var(--timeline-spacing) * 3.5); } .timeline--lg { --timeline-marker-size: calc(var(--timeline-spacing) * 9); --timeline-rail-width: calc(var(--timeline-spacing) * 9); --timeline-gap: calc(var(--timeline-spacing) * 4.5); } .timeline__item { padding-bottom: var(--timeline-item-gap); display: grid; position: relative; } .timeline__item[data-last="true"] { padding-bottom: 0; } .timeline--axis-start .timeline__item { grid-template-columns: var(--timeline-rail-width) minmax(0, 1fr) auto; column-gap: var(--timeline-gap); } .timeline--axis-center .timeline__item { grid-template-columns: minmax(0, 1fr) var(--timeline-rail-width) minmax(0, 1fr); column-gap: var(--timeline-gap); } .timeline__rail { min-height: var(--timeline-marker-size); grid-row: 1 / span 20; justify-content: center; display: flex; position: relative; } .timeline--axis-start .timeline__rail { grid-column: 1; } .timeline--axis-center .timeline__rail { grid-column: 2; } .timeline__marker { z-index: 10; border: var(--timeline-marker-border-width) solid var(--timeline-marker-border); color: var(--timeline-marker-fg); height: var(--timeline-marker-size); width: var(--timeline-marker-size); background-color: #0000; border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; display: flex; position: relative; } .timeline__marker svg { width: 55%; height: 55%; } .timeline__marker--sm { --tw-font-weight: var(--font-weight-semibold, 600); font-size: 10px; font-weight: var(--font-weight-semibold, 600); } .timeline__marker--md { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); } .timeline__marker--lg { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); border-width: var(--timeline-marker-border-width-lg); } .timeline__marker[data-status="default"], .timeline__marker[data-status="muted"] { border-color: var(--timeline-marker-border); color: var(--timeline-marker-fg); background-color: #0000; } .timeline__marker[data-status="muted"] { opacity: .7; } .timeline__marker[data-status="current"] { background-color: var(--accent-soft); color: var(--accent); border-color: var(--timeline-current-color); } .timeline__marker[data-status="success"] { background-color: var(--color-success); } @supports (color: color-mix(in lab, red, red)) { .timeline__marker[data-status="success"] { background-color: color-mix(in srgb, var(--color-success) 12%, transparent); } } .timeline__marker[data-status="success"] { border-color: var(--color-success); } @supports (color: color-mix(in lab, red, red)) { .timeline__marker[data-status="success"] { border-color: color-mix(in srgb, var(--color-success) 55%, var(--timeline-marker-border)); } } .timeline__marker[data-status="success"] { color: var(--color-success); } .timeline__marker[data-status="warning"] { background-color: var(--color-warning); } @supports (color: color-mix(in lab, red, red)) { .timeline__marker[data-status="warning"] { background-color: color-mix(in srgb, var(--color-warning) 12%, transparent); } } .timeline__marker[data-status="warning"] { border-color: var(--color-warning); } @supports (color: color-mix(in lab, red, red)) { .timeline__marker[data-status="warning"] { border-color: color-mix(in srgb, var(--color-warning) 55%, var(--timeline-marker-border)); } } .timeline__marker[data-status="warning"] { color: var(--color-warning); } .timeline__marker[data-status="danger"] { background-color: var(--color-danger); } @supports (color: color-mix(in lab, red, red)) { .timeline__marker[data-status="danger"] { background-color: color-mix(in srgb, var(--color-danger) 12%, transparent); } } .timeline__marker[data-status="danger"] { border-color: var(--color-danger); } @supports (color: color-mix(in lab, red, red)) { .timeline__marker[data-status="danger"] { border-color: color-mix(in srgb, var(--color-danger) 55%, var(--timeline-marker-border)); } } .timeline__marker[data-status="danger"] { color: var(--color-danger); } .timeline__connector { background-color: var(--timeline-connector-color); bottom: calc(var(--timeline-item-gap) * -1); left: calc(50% - var(--timeline-connector-size) / 2); top: var(--timeline-marker-size); width: var(--timeline-connector-size); position: absolute; } .timeline__item[data-last="true"] .timeline__connector:not([data-force]) { display: none; } .timeline__content { min-width: calc(var(--spacing, .25rem) * 0); min-height: var(--timeline-marker-size); flex-direction: column; display: flex; } .timeline__item--align-start .timeline__content { justify-content: flex-start; } .timeline__item--align-center .timeline__content { justify-content: center; } .timeline--axis-start .timeline__content { grid-column: 2; } .timeline--axis-center .timeline__content[data-side="start"] { text-align: right; grid-column: 1; justify-self: end; align-items: flex-end; } .timeline--axis-center .timeline__content[data-side="end"] { text-align: left; grid-column: 3; justify-self: start; align-items: flex-start; } .trend-chip__indicator { flex-shrink: 0; } .trend-chip__value { font-variant-numeric: tabular-nums; } .trend-chip__suffix { color: var(--muted); } .trend-chip--sm .trend-chip__indicator { width: calc(var(--spacing, .25rem) * 3); height: calc(var(--spacing, .25rem) * 3); } .trend-chip--md .trend-chip__indicator { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); } .trend-chip--lg .trend-chip__indicator { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .widget { border-radius: calc(var(--radius) * 2); background-color: var(--surface-secondary); flex-direction: column; display: flex; overflow: hidden; } .widget__header { margin-top: calc(var(--spacing, .25rem) * .5); min-height: calc(var(--spacing, .25rem) * 8); justify-content: space-between; align-items: center; gap: calc(var(--spacing, .25rem) * 3); padding-inline: calc(var(--spacing, .25rem) * 4); display: flex; } .widget__title { font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); --tw-font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600); color: var(--foreground); } .widget__description { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .widget__content { margin-inline: calc(var(--spacing, .25rem) * 1.5); margin-bottom: calc(var(--spacing, .25rem) * 1.5); border-radius: calc(var(--radius) * 1.5); background-color: var(--surface); padding: calc(var(--spacing, .25rem) * 4); flex: 1; overflow: hidden; } .widget__content:first-child { margin-top: calc(var(--spacing, .25rem) * 1.5); } .widget__content { box-shadow: 0 0 0 1px oklch(0% 0 0 / .03), 0 1px 2px oklch(0% 0 0 / .04); } .widget__footer { align-items: center; gap: calc(var(--spacing, .25rem) * 3); padding-inline: calc(var(--spacing, .25rem) * 4); padding-top: calc(var(--spacing, .25rem) * 3); padding-bottom: calc(var(--spacing, .25rem) * 4); display: flex; } .widget__legend { align-items: center; gap: calc(var(--spacing, .25rem) * 3); display: flex; } .widget__legend-item { align-items: center; gap: calc(var(--spacing, .25rem) * 1.5); display: flex; } .widget__legend-item-dot { width: calc(var(--spacing, .25rem) * 2.5); height: calc(var(--spacing, .25rem) * 2.5); border-radius: 3.40282e38px; flex-shrink: 0; } .widget__legend-item-label { font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); } .sidebar__provider { width: 100%; min-height: 100svh; display: flex; } .sidebar__provider:has(.sidebar__offcanvas-wrapper) { overflow-x: clip; } .sidebar { top: calc(var(--spacing, .25rem) * 0); border-color: var(--border); background-color: var(--background); --sidebar-width: 240px; --sidebar-width-collapsed: 48px; --sidebar-duration: .2s; --sidebar-ease: ease; --sidebar-edge-outline: #00000014; height: 100svh; width: var(--sidebar-width); min-width: var(--sidebar-width-collapsed); transition: width var(--sidebar-duration) var(--sidebar-ease), box-shadow .15s var(--ease-out); flex-direction: column; flex-shrink: 0; display: flex; position: sticky; } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } .dark .sidebar, [data-theme="dark"] .sidebar { --sidebar-edge-outline: #ffffff1a; } .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) { width: var(--sidebar-width-collapsed); overflow-x: clip; } .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) .sidebar__header, .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) .sidebar__footer { padding-inline: calc(var(--spacing, .25rem) * 1.5); } .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) .sidebar__header { align-items: center; } .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) .sidebar__header > * { justify-content: center; gap: calc(var(--spacing, .25rem) * 0); width: auto; padding: calc(var(--spacing, .25rem) * 0); } .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) .sidebar__header [data-sidebar="label"] { display: none; } .sidebar[data-state="collapsed"]:not([data-collapsible="offcanvas"]) .sidebar__content { padding-inline: calc(var(--spacing, .25rem) * 1.5); } .sidebar[data-collapsible="icon"] [data-sidebar="label"], .sidebar[data-collapsible="icon"] [data-slot="chip"] { white-space: nowrap; visibility: visible; max-width: 100%; transition: opacity var(--sidebar-duration) var(--sidebar-ease), max-width var(--sidebar-duration) var(--sidebar-ease), margin var(--sidebar-duration) var(--sidebar-ease), visibility 0s linear; overflow: hidden; } .sidebar[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="label"], .sidebar[data-collapsible="icon"][data-state="collapsed"] [data-slot="chip"] { opacity: 0; pointer-events: none; visibility: hidden; max-width: 0; transition-delay: 0s, 0s, 0s, var(--sidebar-duration); margin: 0; } .sidebar[data-collapsible="icon"] [data-slot="list-box-item"] { width: 100%; } .sidebar[data-collapsible="icon"][data-state="collapsed"] [data-slot="list-box-item"] { justify-content: center; gap: calc(var(--spacing, .25rem) * 0); padding: calc(var(--spacing, .25rem) * 2.5); } .sidebar__offcanvas-wrapper { --sidebar-width: 240px; --sidebar-duration: .2s; --sidebar-ease: ease; width: var(--sidebar-width); transition: width var(--sidebar-duration) var(--sidebar-ease); flex-shrink: 0; position: relative; } @media (prefers-reduced-motion: reduce) { .sidebar__offcanvas-wrapper { transition: none; } } .sidebar__offcanvas-wrapper[data-side="right"] { order: 1; } .sidebar__offcanvas-wrapper:has(.sidebar--floating) { width: calc(var(--sidebar-width) + var(--spacing) * 4); } .sidebar__offcanvas-wrapper[data-state="collapsed"] { width: 0; } .sidebar[data-collapsible="offcanvas"] { z-index: 20; transition: translate var(--sidebar-duration) var(--sidebar-ease), visibility var(--sidebar-duration); } @media (prefers-reduced-motion: reduce) { .sidebar[data-collapsible="offcanvas"] { transition: none; } } .sidebar[data-collapsible="offcanvas"][data-side="right"] { left: auto; right: 0; } .sidebar[data-state="collapsed"][data-collapsible="offcanvas"] { width: var(--sidebar-width); visibility: hidden; translate: -100%; } .sidebar[data-state="collapsed"][data-collapsible="offcanvas"][data-side="right"] { translate: 100%; } @media (max-width: 768px) { .sidebar, .sidebar__offcanvas-wrapper { display: none; } } .sidebar--default { box-shadow: inset -1px 0 0 var(--sidebar-edge-outline); } .sidebar--default.sidebar--right { box-shadow: inset 1px 0 0 var(--sidebar-edge-outline); } @media (hover: hover) { .sidebar--default:has(.sidebar__rail:hover) { box-shadow: inset -1px 0 0 var(--color-default-hover); } .sidebar--default.sidebar--right:has(.sidebar__rail:hover) { box-shadow: inset 1px 0 0 var(--color-default-hover); } } .sidebar--default:has(.sidebar__rail:focus-visible) { box-shadow: inset -1px 0 0 var(--color-default-hover); } .sidebar--default.sidebar--right:has(.sidebar__rail:focus-visible) { box-shadow: inset 1px 0 0 var(--color-default-hover); } .sidebar--floating { margin: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); background-color: var(--surface); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-width: 1px; height: calc(100svh - 1rem); } .sidebar--inset { --tw-border-style: none; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; border-style: none; } .sidebar--right { order: 1; } .sidebar__header { gap: calc(var(--spacing, .25rem) * 2); padding-inline: calc(var(--spacing, .25rem) * 4); padding-top: calc(var(--spacing, .25rem) * 4); padding-bottom: calc(var(--spacing, .25rem) * 2); flex-direction: column; display: flex; } .sidebar__content { min-height: calc(var(--spacing, .25rem) * 0); gap: calc(var(--spacing, .25rem) * 1); padding-inline: calc(var(--spacing, .25rem) * 3); flex-direction: column; flex: 1; display: flex; overflow-y: auto; } .sidebar[data-state="collapsed"] .sidebar__content { gap: calc(var(--spacing, .25rem) * .5); } .sidebar__footer { gap: calc(var(--spacing, .25rem) * 1); padding-inline: calc(var(--spacing, .25rem) * 3); padding-top: calc(var(--spacing, .25rem) * 2); padding-bottom: calc(var(--spacing, .25rem) * 4); flex-direction: column; display: flex; } .sidebar__group { gap: calc(var(--spacing, .25rem) * 1); flex-direction: column; display: flex; } .sidebar__group + .sidebar__group { margin-top: calc(var(--spacing, .25rem) * 2); } .sidebar__group-label { text-overflow: ellipsis; white-space: nowrap; padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); --tw-tracking: var(--tracking-normal, 0em); letter-spacing: var(--tracking-normal, 0em); color: var(--muted); -webkit-user-select: none; user-select: none; transition: opacity var(--sidebar-duration) var(--sidebar-ease), width var(--sidebar-duration) var(--sidebar-ease); overflow: hidden; } @media (prefers-reduced-motion: reduce) { .sidebar__group-label { transition: none; } } .sidebar[data-state="collapsed"] .sidebar__group-label { display: none; } .sidebar[data-state="collapsed"] .sidebar__group + .sidebar__group { margin-top: calc(var(--spacing, .25rem) * 0); } .sidebar__menu { gap: calc(var(--spacing, .25rem) * .5); --tw-outline-style: none; forced-color-adjust: none; --sidebar-menu-indent: calc(var(--spacing) * 4); --sidebar-menu-guide-color: currentColor; outline-style: none; flex-direction: column; display: flex; } @supports (color: color-mix(in lab, red, red)) { .sidebar__menu { --sidebar-menu-guide-color: color-mix(in srgb, currentColor 10%, transparent); } } .sidebar__menu { --sidebar-menu-row-gap: calc(var(--spacing) * .5); } .sidebar__menu[data-focus-visible] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .sidebar__menu-section { gap: calc(var(--spacing, .25rem) * .5); flex-direction: column; display: flex; } .sidebar__menu-section:not(:first-child) { margin-top: calc(var(--spacing, .25rem) * 3); } .sidebar[data-state="collapsed"] .sidebar__menu-section:not(:first-child) { margin-top: calc(var(--spacing, .25rem) * 0); } .sidebar__menu-header { padding-inline: calc(var(--spacing, .25rem) * 2); padding-block: calc(var(--spacing, .25rem) * 1.5); font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); --tw-tracking: var(--tracking-wider, .05em); letter-spacing: var(--tracking-wider, .05em); color: var(--muted); text-transform: uppercase; -webkit-user-select: none; user-select: none; } .sidebar[data-state="collapsed"] .sidebar__menu-header { display: none; } .sidebar__menu-item { width: 100%; color: var(--foreground); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s var(--ease-out); outline-style: none; justify-content: flex-start; align-items: center; display: flex; position: relative; } .sidebar__menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .sidebar__menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .sidebar__menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .sidebar__menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .sidebar__menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .sidebar__menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .sidebar__menu-item { cursor: var(--cursor-interactive); --sidebar-menu-item-offset: 0px; --sidebar-menu-guide-count: 0; } .sidebar__menu-item:disabled, .sidebar__menu-item[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .sidebar__menu:is([data-guide-lines="always"], [data-guide-lines="hover"]) .sidebar__menu-item:before { content: ""; top: calc(var(--sidebar-menu-row-gap) * -.5); bottom: calc(var(--sidebar-menu-row-gap) * -.5); left: calc(var(--sidebar-menu-indent) / 2); width: calc(var(--sidebar-menu-guide-count) * var(--sidebar-menu-indent)); pointer-events: none; background-image: repeating-linear-gradient(to right, var(--sidebar-menu-guide-color) 0 1px, transparent 1px var(--sidebar-menu-indent)); opacity: 1; position: absolute; } .sidebar__menu[data-guide-lines="hover"] .sidebar__menu-item:before { opacity: 0; transition: opacity .15s; } .sidebar__menu[data-guide-lines="hover"]:hover .sidebar__menu-item:before { opacity: 1; } .sidebar__menu-item-content { min-height: calc(var(--spacing, .25rem) * 9); width: 100%; min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: calc(var(--radius) * 2); padding-block: calc(var(--spacing, .25rem) * 1.5); width: calc(100% - var(--sidebar-menu-item-offset)); margin-inline-start: var(--sidebar-menu-item-offset); padding-inline: .5rem; display: flex; overflow: hidden; } @media (hover: hover) { .sidebar__menu-item:hover .sidebar__menu-item-content, .sidebar__menu-item[data-hovered="true"] .sidebar__menu-item-content { background-color: var(--default); } } .sidebar__menu-item:focus-visible:not(:focus) .sidebar__menu-item-content, .sidebar__menu-item[data-focus-visible="true"] .sidebar__menu-item-content { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .sidebar__menu-item[aria-level="2"] { --sidebar-menu-item-offset: var(--sidebar-menu-indent); --sidebar-menu-guide-count: 1; } .sidebar__menu-item[aria-level="3"] { --sidebar-menu-item-offset: calc(var(--sidebar-menu-indent) * 2); --sidebar-menu-guide-count: 2; } .sidebar__menu-item[aria-level="4"] { --sidebar-menu-item-offset: calc(var(--sidebar-menu-indent) * 3); --sidebar-menu-guide-count: 3; } .sidebar__menu-item[aria-level="5"] { --sidebar-menu-item-offset: calc(var(--sidebar-menu-indent) * 4); --sidebar-menu-guide-count: 4; } .sidebar__menu-item[data-current="true"] .sidebar__menu-item-content, .sidebar__menu-item:is(:has(.sidebar__menu-actions:hover), :has(.sidebar__menu-action:active), :has(.sidebar__menu-action[data-pressed="true"]), :has(.sidebar__menu-actions [aria-expanded="true"])) .sidebar__menu-item-content { background-color: var(--default); } .sidebar__menu-item[data-current="true"] .sidebar__menu-label { --tw-font-weight: var(--font-weight-medium, 500); font-weight: var(--font-weight-medium, 500); } .sidebar__menu-trigger { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .sidebar__menu-item:not([data-has-child-items]) .sidebar__menu-trigger { display: none; } .sidebar__menu-indicator { width: calc(var(--spacing, .25rem) * 3.5); height: calc(var(--spacing, .25rem) * 3.5); color: var(--muted); cursor: inherit; flex-shrink: 0; transition: rotate .15s; rotate: 0deg; } .sidebar__menu-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .sidebar__menu-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .sidebar__menu-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .sidebar__menu-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .sidebar__menu-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .sidebar__menu-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .sidebar__menu-indicator:dir(rtl) { rotate: 180deg; } .sidebar__menu-item[data-expanded] .sidebar__menu-indicator { rotate: 90deg; } .sidebar__menu-icon { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); color: var(--muted); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .sidebar__menu-icon svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } .sidebar__menu-item[data-current="true"] .sidebar__menu-icon, .sidebar__menu-item[data-current="true"] .sidebar__menu-chip { color: var(--foreground); } .sidebar__menu-label { pointer-events: none; min-width: calc(var(--spacing, .25rem) * 0); align-items: center; gap: calc(var(--spacing, .25rem) * 2); font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875))); color: var(--foreground); -webkit-user-select: none; user-select: none; flex: 1; display: flex; } .sidebar__menu-label-text { min-width: calc(var(--spacing, .25rem) * 0); text-overflow: ellipsis; white-space: nowrap; flex: 1; overflow: hidden; } .sidebar__menu-actions { align-items: center; gap: calc(var(--spacing, .25rem) * 1); flex-shrink: 0; display: none; } .sidebar__menu-item:is(:hover, [data-current="true"], [data-hovered="true"], :has(.sidebar__menu-action:focus-visible), :has(.sidebar__menu-action[data-focus-visible="true"]), :has(.sidebar__menu-actions [aria-expanded="true"])) .sidebar__menu-actions, .sidebar__mobile .sidebar__menu-actions { display: flex; } .sidebar__menu-chip { pointer-events: none; font-size: var(--text-xs, .75rem); line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75))); color: var(--muted); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .sidebar__menu-action { isolation: isolate; transform-origin: 50%; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); border-radius: calc(var(--radius) * 1); padding: calc(var(--spacing, .25rem) * 1); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out); outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; display: flex; position: relative; } .sidebar__menu-action:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .sidebar__menu-action:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .sidebar__menu-action:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .sidebar__menu-action:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .sidebar__menu-action:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .sidebar__menu-action:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .sidebar__menu-action { cursor: var(--cursor-interactive); --button-bg: transparent; --button-bg-hover: var(--color-default-hover); --button-bg-pressed: var(--color-default-hover); --button-fg: var(--color-default-foreground); background-color: var(--button-bg); color: var(--button-fg); } @media (hover: hover) { .sidebar__menu-action:hover, .sidebar__menu-action[data-hovered="true"] { background-color: var(--button-bg-hover); } } .sidebar__menu-action:active, .sidebar__menu-action[data-pressed="true"] { background-color: var(--button-bg-pressed); transform: scale(.98); } .sidebar__menu-action:focus-visible, .sidebar__menu-action[data-focus-visible="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: var(--ring-offset-width); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color: var(--background); --tw-outline-style: none; outline-style: none; } .sidebar__menu-action svg { pointer-events: none; width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); flex-shrink: 0; align-self: center; } .sidebar__menu-actions [aria-expanded="true"] .sidebar__menu-action { background-color: var(--button-bg-hover); } .sidebar[data-collapsible="icon"] .sidebar__menu-item { width: 100%; } .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-item-content { padding-inline: calc(var(--spacing, .25rem) * 0); justify-content: center; padding-inline-start: 0; } .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-trigger, .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-actions, .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-label, .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-chip, .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-action { display: none; } .sidebar[data-collapsible="icon"][data-state="collapsed"] .sidebar__menu-item:before { content: none; } .sidebar__separator { margin-block: calc(var(--spacing, .25rem) * 2); width: auto; } .sidebar__rail { inset-block: calc(var(--spacing, .25rem) * 0); z-index: 10; width: calc(var(--spacing, .25rem) * 4); appearance: none; border-style: var(--tw-border-style); padding: calc(var(--spacing, .25rem) * 0); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; background-color: #0000; border-width: 0; outline-style: none; position: absolute; } .sidebar--left[data-state="collapsed"] .sidebar__rail { cursor: e-resize; } .sidebar--left[data-state="expanded"] .sidebar__rail, .sidebar--right[data-state="collapsed"] .sidebar__rail { cursor: w-resize; } .sidebar--right[data-state="expanded"] .sidebar__rail { cursor: e-resize; } .sidebar--left .sidebar__rail { right: -2px; } .sidebar--right .sidebar__rail { left: -2px; } .sidebar__main { min-height: 100svh; min-width: calc(var(--spacing, .25rem) * 0); flex-direction: column; flex: 1; display: flex; position: relative; } .sidebar__provider:has(.sidebar--inset) .sidebar__main { margin: calc(var(--spacing, .25rem) * 2); border-radius: calc(var(--radius) * 2); border-style: var(--tw-border-style); background-color: var(--surface); --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); min-height: calc(100svh - 1rem); transition: margin var(--sidebar-duration, .2s) var(--sidebar-ease, ease); border-width: 1px; margin-inline-start: calc(var(--spacing, .25rem) * 0); } .sidebar__provider[data-state="collapsed"]:has(.sidebar--inset) .sidebar__main { margin-inline-start: calc(var(--spacing, .25rem) * 2); } .sidebar__mobile-sheet[data-sheet-drawer-direction="left"], .sidebar__mobile-sheet[data-sheet-drawer-direction="right"] { border-radius: 0; width: 80vw; max-width: 500px; } .sidebar__mobile-dialog { border-radius: 0; } .sidebar__mobile-overlay-container { display: contents; } .sidebar__mobile { height: 100%; min-height: calc(var(--spacing, .25rem) * 0); flex-direction: column; display: flex; } .sidebar__mobile > .sidebar__header { padding-top: calc(var(--spacing, .25rem) * 4); } .sidebar__mobile > .sidebar__content { min-height: calc(var(--spacing, .25rem) * 0); flex: 1; } .sidebar__mobile > .sidebar__footer { padding-bottom: calc(var(--spacing, .25rem) * 4); } .sidebar__mobile-sheet[data-sheet-drawer-direction="left"] .sidebar__mobile-dialog, .sidebar__mobile-sheet[data-sheet-drawer-direction="right"] .sidebar__mobile-dialog { width: 100%; max-width: none; } .sidebar__mobile-sheet[data-sheet-drawer-direction="left"]:after, .sidebar__mobile-sheet[data-sheet-drawer-direction="right"]:after { border-radius: 0; } .sidebar__mobile-sheet[data-sheet-drawer-direction="left"] .sidebar__mobile-dialog, .sidebar__mobile-sheet[data-sheet-drawer-direction="right"] .sidebar__mobile-dialog { overflow: hidden; } .sidebar__pages { flex-direction: column; width: 100%; display: flex; position: relative; overflow: clip; } .sidebar__page { gap: calc(var(--spacing, .25rem) * 1); will-change: transform; flex-direction: column; width: 100%; display: flex; inset-block-start: 0; inset-inline-start: 0; } .sidebar__page[data-active="true"] { position: relative; } .sidebar__page[data-active="false"] { pointer-events: none; position: absolute; } .switch__content, .checkbox__content { position: relative; } .switch__content > span:has( > input), .checkbox__content > span:has( > input) { clip: auto !important; clip-path: none !important; white-space: normal !important; width: 100% !important; height: 100% !important; margin: 0 !important; position: absolute !important; inset: 0 !important; overflow: visible !important; } .switch__content > span > input, .checkbox__content > span > input { opacity: 0; width: 100%; height: 100%; cursor: var(--cursor-interactive, pointer); margin: 0; } .switch { --switch-control-bg: var(--foreground); } @supports (color: color-mix(in lab, red, red)) { .switch { --switch-control-bg: color-mix(in oklab, var(--foreground) 22%, var(--surface)); } } .action-bar { z-index: 0; } .segment { isolation: isolate; } } @layer utilities { .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .start-2 { inset-inline-start: calc(var(--spacing) * 2); } .start-3 { inset-inline-start: calc(var(--spacing) * 3); } .-end-2 { inset-inline-end: calc(var(--spacing) * -2); } .end-1\/2 { inset-inline-end: 50%; } .end-2 { inset-inline-end: calc(var(--spacing) * 2); } .end-6 { inset-inline-end: calc(var(--spacing) * 6); } .-top-2 { top: calc(var(--spacing) * -2); } .top-1\/2 { top: 50%; } .top-3\.5 { top: calc(var(--spacing) * 3.5); } .top-6 { top: calc(var(--spacing) * 6); } .-right-1 { right: calc(var(--spacing) * -1); } .right-3 { right: calc(var(--spacing) * 3); } .-bottom-1 { bottom: calc(var(--spacing) * -1); } .bottom-3 { bottom: calc(var(--spacing) * 3); } .bottom-20\! { bottom: calc(var(--spacing) * 20) !important; } .isolate { isolation: isolate; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .-ms-2 { margin-inline-start: calc(var(--spacing) * -2); } .ms-1 { margin-inline-start: calc(var(--spacing) * 1); } .ms-auto { margin-inline-start: auto; } .-me-1 { margin-inline-end: calc(var(--spacing) * -1); } .-mt-1 { margin-top: calc(var(--spacing) * -1); } .-mt-2 { margin-top: calc(var(--spacing) * -2); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-\[22px\] { margin-top: 22px; } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .ml-auto { margin-left: auto; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .field-sizing-content { field-sizing: content; } .aspect-\[2\/1\] { aspect-ratio: 2; } .aspect-\[5\/3\] { aspect-ratio: 5 / 3; } .size-1\.5 { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); } .size-1\/3 { width: 33.3333%; height: 33.3333%; } .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-7 { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .size-10 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .size-14 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); } .size-20 { width: calc(var(--spacing) * 20); height: calc(var(--spacing) * 20); } .size-full { width: 100%; height: 100%; } .h-0\.5 { height: calc(var(--spacing) * .5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-12 { height: calc(var(--spacing) * 12); } .h-24 { height: calc(var(--spacing) * 24); } .h-28 { height: calc(var(--spacing) * 28); } .h-48 { height: calc(var(--spacing) * 48); } .h-64 { height: calc(var(--spacing) * 64); } .h-72 { height: calc(var(--spacing) * 72); } .h-\[52px\] { height: 52px; } .h-\[calc\(100\%-1rem\)\] { height: calc(100% - 1rem); } .h-\[calc\(100dvh-1rem\)\] { height: calc(100dvh - 1rem); } .h-full { height: 100%; } .h-svh { height: 100svh; } .max-h-44 { max-height: calc(var(--spacing) * 44); } .max-h-56 { max-height: calc(var(--spacing) * 56); } .max-h-60 { max-height: calc(var(--spacing) * 60); } .max-h-64 { max-height: calc(var(--spacing) * 64); } .max-h-72 { max-height: calc(var(--spacing) * 72); } .max-h-\[50vh\] { max-height: 50vh; } .max-h-\[60vh\] { max-height: 60vh; } .max-h-\[400px\] { max-height: 400px; } .max-h-\[min\(80vh\,640px\)\] { max-height: min(80vh, 640px); } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-16 { min-height: calc(var(--spacing) * 16); } .min-h-48 { min-height: calc(var(--spacing) * 48); } .min-h-64 { min-height: calc(var(--spacing) * 64); } .min-h-\[38px\] { min-height: 38px; } .min-h-screen { min-height: 100vh; } .w-1\/2 { width: 50%; } .w-2\/3 { width: 66.6667%; } .w-3 { width: calc(var(--spacing) * 3); } .w-4 { width: calc(var(--spacing) * 4); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-32 { width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-80 { width: calc(var(--spacing) * 80); } .w-\[360px\] { width: 360px; } .w-auto { width: auto; } .w-fit { width: fit-content; } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-36 { max-width: calc(var(--spacing) * 36); } .max-w-40 { max-width: calc(var(--spacing) * 40); } .max-w-100 { max-width: calc(var(--spacing) * 100); } .max-w-\[100px\] { max-width: 100px; } .max-w-\[115px\] { max-width: 115px; } .max-w-\[140px\] { max-width: 140px; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .max-w-md { max-width: var(--container-md); } .max-w-none { max-width: none; } .max-w-xl { max-width: var(--container-xl); } .max-w-xs { max-width: var(--container-xs); } .min-w-\(--table-min\) { min-width: var(--table-min); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-24 { min-width: calc(var(--spacing) * 24); } .min-w-64 { min-width: calc(var(--spacing) * 64); } .flex-1 { flex: 1; } .flex-none { flex: none; } .shrink-0 { flex-shrink: 0; } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .rotate-180 { rotate: 180deg; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .animate-spin { animation: var(--animate-spin); } .cursor-\(--cursor-interactive\) { cursor: var(--cursor-interactive); } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; } .cursor-help { cursor: help; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .resize-none { resize: none; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-\[28px_28px_152px_minmax\(0\,1fr\)_150px_88px\] { grid-template-columns: 28px 28px 152px minmax(0, 1fr) 150px 88px; } .flex-col { flex-direction: column; } .flex-row\! { flex-direction: row !important; } .flex-wrap { flex-wrap: wrap; } .place-items-center { place-items: center; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-7 { gap: calc(var(--spacing) * 7); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-6 { column-gap: calc(var(--spacing) * 6); } .gap-x-8 { column-gap: calc(var(--spacing) * 8); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .gap-y-3 { row-gap: calc(var(--spacing) * 3); } .gap-y-4 { row-gap: calc(var(--spacing) * 4); } .gap-y-5 { row-gap: calc(var(--spacing) * 5); } :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } :where(.divide-separator > :not(:last-child)) { border-color: var(--separator); } .self-start { align-self: flex-start; } .justify-self-end { justify-self: flex-end; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: .25rem; } .rounded-2xl { border-radius: calc(var(--radius) * 2); } .rounded-\[inherit\] { border-radius: inherit; } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: calc(var(--radius) * 1); } .rounded-md { border-radius: calc(var(--radius) * .75); } .rounded-sm { border-radius: calc(var(--radius) * .5); } .rounded-xl { border-radius: calc(var(--radius) * 1.5); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-\(--accent\) { border-color: var(--accent); } .border-\(--border\) { border-color: var(--border); } .border-\(--danger\) { border-color: var(--danger); } .border-accent { border-color: var(--accent); } .border-border { border-color: var(--border); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-separator { border-color: var(--separator); } .border-transparent { border-color: #0000; } .bg-\(--accent\) { background-color: var(--accent); } .bg-\(--background\) { background-color: var(--background); } .bg-\(--danger\) { background-color: var(--danger); } .bg-\(--default\) { background-color: var(--default); } .bg-\(--foreground\) { background-color: var(--foreground); } .bg-\[color-mix\(in_oklab\,var\(--danger\)_15\%\,transparent\)\] { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .bg-\[color-mix\(in_oklab\,var\(--danger\)_15\%\,transparent\)\] { background-color: color-mix(in oklab,var(--danger) 15%,transparent); } } .bg-\[color-mix\(in_oklab\,var\(--success\)_15\%\,transparent\)\] { background-color: var(--success); } @supports (color: color-mix(in lab, red, red)) { .bg-\[color-mix\(in_oklab\,var\(--success\)_15\%\,transparent\)\] { background-color: color-mix(in oklab,var(--success) 15%,transparent); } } .bg-\[color-mix\(in_oklab\,var\(--warning\)_18\%\,transparent\)\] { background-color: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .bg-\[color-mix\(in_oklab\,var\(--warning\)_18\%\,transparent\)\] { background-color: color-mix(in oklab,var(--warning) 18%,transparent); } } .bg-accent, .bg-accent\/10 { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .bg-accent\/10 { background-color: color-mix(in oklab, var(--accent) 10%, transparent); } } .bg-accent\/15 { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .bg-accent\/15 { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .bg-accent\/30 { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .bg-accent\/30 { background-color: color-mix(in oklab, var(--accent) 30%, transparent); } } .bg-background { background-color: var(--background); } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-blue-100 { background-color: var(--color-blue-100); } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-danger\/10 { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .bg-danger\/10 { background-color: color-mix(in oklab, var(--danger) 10%, transparent); } } .bg-foreground { background-color: var(--foreground); } .bg-overlay { background-color: var(--overlay); } .bg-separator { background-color: var(--separator); } .bg-surface { background-color: var(--surface); } .bg-surface-secondary { background-color: var(--surface-secondary); } .bg-surface\/70 { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .bg-surface\/70 { background-color: color-mix(in oklab, var(--surface) 70%, transparent); } } .bg-surface\/80 { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .bg-surface\/80 { background-color: color-mix(in oklab, var(--surface) 80%, transparent); } } .bg-transparent\! { background-color: #0000 !important; } .bg-white { background-color: var(--color-white); } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .p-0 { padding: calc(var(--spacing) * 0); } .p-0\.5 { padding: calc(var(--spacing) * .5); } .p-1 { padding: calc(var(--spacing) * 1); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .py-0\.5 { padding-block: calc(var(--spacing) * .5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-16 { padding-block: calc(var(--spacing) * 16); } .py-24 { padding-block: calc(var(--spacing) * 24); } .ps-12 { padding-inline-start: calc(var(--spacing) * 12); } .pe-12 { padding-inline-end: calc(var(--spacing) * 12); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .text-center { text-align: center; } .text-end { text-align: end; } .text-left { text-align: left; } .text-right { text-align: right; } .text-start { text-align: start; } .font-mono { font-family: var(--font-mono); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[10px\] { font-size: 10px; } .leading-4 { --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .break-all { word-break: break-all; } .whitespace-nowrap { white-space: nowrap; } .text-\(--accent-foreground\) { color: var(--accent-foreground); } .text-\(--background\) { color: var(--background); } .text-\(--danger\) { color: var(--danger); } .text-\(--foreground\) { color: var(--foreground); } .text-\(--success\) { color: var(--success); } .text-\(--warning\) { color: var(--warning); } .text-accent { color: var(--accent); } .text-accent-foreground { color: var(--accent-foreground); } .text-background { color: var(--background); } .text-blue-800 { color: var(--color-blue-800); } .text-danger { color: var(--danger); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-900 { color: var(--color-gray-900); } .text-muted { color: var(--muted); } .text-warning { color: var(--warning); } .text-white { color: var(--color-white); } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .line-through { text-decoration-line: line-through; } .underline { text-decoration-line: underline; } .decoration-separator { -webkit-text-decoration-color: var(--separator); -webkit-text-decoration-color: var(--separator); text-decoration-color: var(--separator); } .decoration-dotted { text-decoration-style: dotted; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-60 { opacity: .6; } .opacity-75 { opacity: .75; } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-none\! { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .shadow-overlay { --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-surface { --tw-shadow: var(--surface-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .outline-2 { outline-style: var(--tw-outline-style); outline-width: 2px; } .outline-\(--accent\) { outline-color: var(--accent); } .outline-transparent { outline-color: #0000; } .blur { --tw-blur: blur(8px); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .filter { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-all { -webkit-user-select: all; user-select: all; } @media (hover: hover) { .group-hover\:opacity-100:is(:where(.group):hover *) { opacity: 1; } } .first-letter\:uppercase:first-letter { text-transform: uppercase; } .first\:border-t-0:first-child { border-top-style: var(--tw-border-style); border-top-width: 0; } .first\:pt-0:first-child { padding-top: calc(var(--spacing) * 0); } .first\:pt-2:first-child { padding-top: calc(var(--spacing) * 2); } .last\:border-b-0:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .focus-within\:bg-surface-secondary\!:focus-within { background-color: var(--surface-secondary) !important; } @media (hover: hover) { .hover\:border-indigo-500:hover { border-color: var(--color-indigo-500); } .hover\:bg-\(--default\):hover { background-color: var(--default); } .hover\:bg-blue-200:hover { background-color: var(--color-blue-200); } .hover\:bg-gray-100:hover { background-color: var(--color-gray-100); } .hover\:bg-surface-secondary:hover { background-color: var(--surface-secondary); } .hover\:bg-surface-secondary\!:hover { background-color: var(--surface-secondary) !important; } .hover\:bg-surface-secondary\/60:hover { background-color: var(--surface-secondary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface-secondary\/60:hover { background-color: color-mix(in oklab, var(--surface-secondary) 60%, transparent); } } .hover\:text-\(--foreground\):hover, .hover\:text-foreground:hover { color: var(--foreground); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:decoration-current:hover { text-decoration-color: currentColor; } .hover\:opacity-100:hover { opacity: 1; } } .focus\:border-transparent:focus { border-color: #0000; } .focus\:ring-2:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-indigo-500:focus { --tw-ring-color: var(--color-indigo-500); } .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .focus-visible\:opacity-100:focus-visible { opacity: 1; } .focus-visible\:ring-2:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-\(--focus\):focus-visible { --tw-ring-color: var(--focus); } .disabled\:cursor-default:disabled { cursor: default; } @media (min-width: 40rem) { .sm\:inline { display: inline; } .sm\:inline-flex { display: inline-flex; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 48rem) { .md\:hidden { display: none; } .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .md\:px-8 { padding-inline: calc(var(--spacing) * 8); } .md\:pt-8 { padding-top: calc(var(--spacing) * 8); } } @media (min-width: 64rem) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-\[1fr_360px\] { grid-template-columns: 1fr 360px; } .lg\:grid-cols-\[minmax\(0\,1fr\)_360px\] { grid-template-columns: minmax(0, 1fr) 360px; } } @media (min-width: 80rem) { .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 96rem) { .\32 xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .\32 xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .dark\:border-gray-600:is(.dark *) { border-color: var(--color-gray-600); } .dark\:bg-blue-900:is(.dark *) { background-color: var(--color-blue-900); } .dark\:bg-blue-900\/20:is(.dark *) { background-color: #1c398e33; } @supports (color: color-mix(in lab, red, red)) { .dark\:bg-blue-900\/20:is(.dark *) { background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent); } } .dark\:bg-gray-700:is(.dark *) { background-color: var(--color-gray-700); } .dark\:text-blue-200:is(.dark *) { color: var(--color-blue-200); } .dark\:text-gray-100:is(.dark *) { color: var(--color-gray-100); } .dark\:text-gray-300:is(.dark *) { color: var(--color-gray-300); } .dark\:text-gray-400:is(.dark *) { color: var(--color-gray-400); } @media (hover: hover) { .dark\:hover\:border-indigo-400:is(.dark *):hover { border-color: var(--color-indigo-400); } .dark\:hover\:bg-blue-800:is(.dark *):hover { background-color: var(--color-blue-800); } .dark\:hover\:bg-gray-600:is(.dark *):hover { background-color: var(--color-gray-600); } } .\[\&_\[data-slot\=label\]\]\:sr-only [data-slot="label"] { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .\[\&_td\]\:px-3 td { padding-inline: calc(var(--spacing) * 3); } .\[\&_td\]\:py-2 td { padding-block: calc(var(--spacing) * 2); } .\[\&_th\]\:bg-transparent th { background-color: #0000; } .\[\&_th\]\:px-3 th { padding-inline: calc(var(--spacing) * 3); } .\[\&_th\]\:after\:hidden th:after { content: var(--tw-content); display: none; } .\[\&_thead\]\:sticky thead { position: sticky; } .\[\&_thead\]\:top-0 thead { top: calc(var(--spacing) * 0); } .\[\&_thead\]\:z-10 thead { z-index: 10; } .\[\&_thead\]\:border-b thead { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .\[\&_thead\]\:border-separator thead { border-color: var(--separator); } .\[\&_thead\]\:bg-surface thead { background-color: var(--surface); } } @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } @property --tw-animation-duration { syntax: "*"; inherits: false } @property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } @property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); } } :root { --table-row-height: 56px; --table-row-height-compact: 44px; --table-header-height: 44px; --table-border-radius: 12px; --table-cell-padding-x: 16px; --table-cell-padding-y: 12px; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .5; } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } @keyframes skeleton { 100% { transform: translateX(200%); } }