/* [project]/styles/globals.css [app-client] (css) */ @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 { --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: rgba(0, 0, 0, 0); --tw-gradient-via: rgba(0, 0, 0, 0); --tw-gradient-to: rgba(0, 0, 0, 0); --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-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 rgba(0, 0, 0, 0); --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0); --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0); --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0); --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); --tw-outline-style: solid; --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-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-content: ""; --tw-duration: initial; --tw-ease: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-space-x-reverse: 0; } ::backdrop { --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: rgba(0, 0, 0, 0); --tw-gradient-via: rgba(0, 0, 0, 0); --tw-gradient-to: rgba(0, 0, 0, 0); --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-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 rgba(0, 0, 0, 0); --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0); --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0); --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0); --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); --tw-outline-style: solid; --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-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-content: ""; --tw-duration: initial; --tw-ease: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-space-x-reverse: 0; } } } @layer theme { :root, :host { --font-sans: "font", sans-serif; --font-mono: "monospace", monospace; --color-amber-100: #fef3c6; --color-amber-200: #fee685; --color-amber-300: #ffd236; --color-amber-400: #fcbb00; --color-amber-500: #f99c00; --color-amber-600: #dd7400; --color-amber-800: #953d00; --color-emerald-50: #ecfdf5; --color-emerald-200: #a4f4cf; --color-emerald-700: #007956; --color-sky-200: #b8e6fe; --color-sky-300: #77d4ff; --color-sky-400: #00bcfe; --color-rose-200: #ffccd3; --color-rose-300: #ffa2ae; --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cad5e2; --color-slate-400: #90a1b9; --color-slate-500: #62748e; --color-slate-600: #45556c; --color-slate-700: #314158; --color-slate-900: #0f172b; --color-slate-950: #020618; --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-3xl: 48rem; --container-6xl: 72rem; --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); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --font-weight-medium: 500; --font-weight-semibold: 600; --tracking-tight: -.025em; --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-md: 12px; --blur-xl: 24px; --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-background: var(--background); --color-foreground: var(--foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-focus: var(--focus); --color-default: var(--default); --color-default-foreground: var(--default-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-danger: var(--danger); --color-danger-foreground: var(--danger-foreground); --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); } @supports (color: color(display-p3 0 0 0)) { :root, :host { --color-amber-100: color(display-p3 .989391 .954583 .796328); --color-amber-200: color(display-p3 .979824 .904554 .57325); --color-amber-300: color(display-p3 .974327 .83063 .33298); --color-amber-400: color(display-p3 .959186 .738519 .118268); --color-amber-500: color(display-p3 .93994 .620584 .0585367); --color-amber-600: color(display-p3 .827144 .467166 .0336006); --color-amber-800: color(display-p3 .547533 .256058 .0728326); --color-emerald-50: color(display-p3 .936818 .989882 .961937); --color-emerald-200: color(display-p3 .713164 .947563 .822283); --color-emerald-700: color(display-p3 .164041 .470229 .343508); --color-sky-200: color(display-p3 .758153 .897447 .986665); --color-sky-300: color(display-p3 .546356 .822561 .990576); --color-sky-400: color(display-p3 .305975 .725011 .980173); --color-rose-200: color(display-p3 .96875 .808776 .827317); --color-rose-300: color(display-p3 .96017 .647703 .683715); --color-slate-50: color(display-p3 .974377 .979815 .986207); --color-slate-100: color(display-p3 .947345 .959969 .97483); --color-slate-200: color(display-p3 .890322 .909405 .939294); --color-slate-300: color(display-p3 .800294 .834432 .882803); --color-slate-400: color(display-p3 .577446 .629622 .716602); --color-slate-500: color(display-p3 .397645 .452653 .547642); --color-slate-600: color(display-p3 .283418 .332214 .416355); --color-slate-700: color(display-p3 .205992 .253487 .336039); --color-slate-900: color(display-p3 .0639692 .0891152 .163036); --color-slate-950: color(display-p3 .0102437 .0227555 .0878731); } } @supports (color: lab(0% 0 0)) { :root, :host { --color-amber-100: lab(95.916% -1.21653 23.111); --color-amber-200: lab(91.7203% -.505269 49.9084); --color-amber-300: lab(86.4156% 6.13147 78.3961); --color-amber-400: lab(80.1641% 16.6016 99.2089); --color-amber-500: lab(72.7183% 31.8672 97.9407); --color-amber-600: lab(60.3514% 40.5624 87.1228); --color-amber-800: lab(37.8822% 37.1699 52.2718); --color-emerald-50: lab(97.8462% -6.94966 1.85487); --color-emerald-200: lab(90.2247% -31.039 9.47084); --color-emerald-700: lab(44.4871% -41.0396 11.0361); --color-sky-200: lab(88.6983% -11.3978 -16.8488); --color-sky-300: lab(80.3307% -20.2945 -31.385); --color-sky-400: lab(70.687% -23.6078 -45.9483); --color-rose-200: lab(86.806% 19.1909 4.07754); --color-rose-300: lab(76.6339% 38.3549 9.68835); --color-slate-50: lab(98.1434% -.369519 -1.05966); --color-slate-100: lab(96.286% -.852436 -2.46847); --color-slate-200: lab(91.7353% -.998765 -4.76968); --color-slate-300: lab(84.7652% -1.94535 -7.93337); --color-slate-400: lab(65.5349% -2.25151 -14.5072); --color-slate-500: lab(48.0876% -2.03595 -16.5814); --color-slate-600: lab(35.5623% -1.74978 -15.4316); --color-slate-700: lab(26.9569% -1.47016 -15.6993); --color-slate-900: lab(7.78673% 1.82345 -15.0537); --color-slate-950: lab(1.76974% 1.32743 -9.28855); } } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } :root, :host { --color-accent-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } :root, :host { --color-danger-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); } } :root, :host { --color-field-focus: var(--field-background, var(--default)); --color-field-border-hover: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } :root, :host { --color-field-border-focus: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%); } } :root, :host { --color-accent-soft: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); } } :root, :host { --color-accent-soft-foreground: var(--accent); --color-accent-soft-hover: var(--accent); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); } } :root, :host { --color-danger-soft: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); } } :root, :host { --color-danger-soft-foreground: var(--danger); --color-danger-soft-hover: var(--danger); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); } } :root, :host { --color-warning-soft: var(--warning); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); } } :root, :host { --color-warning-soft-foreground: var(--warning); --color-success-soft: var(--success); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-success-soft: color-mix(in oklab, var(--success) 15%, transparent); } } :root, :host { --color-success-soft-foreground: var(--success); --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, .light, .default, [data-theme="light"], [data-theme="default"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; --white: #fff; --black: #000; --snow: #fcfcfc; --eclipse: #18181b; --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); --background: #f5f5f5; --foreground: var(--eclipse); --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: #efeff0; --surface-secondary-foreground: var(--foreground); --surface-tertiary: #eaeaeb; --surface-tertiary-foreground: var(--foreground); --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: #71717a; --scrollbar: #d4d4d8; --default: #ebebec; --default-foreground: var(--eclipse); --accent: #0485f7; --accent-foreground: var(--snow); --field-background: var(--white); --field-foreground: #18181b; --field-placeholder: var(--muted); --field-border: transparent; --success: #17c964; --success-foreground: var(--eclipse); --warning: #f5a524; --warning-foreground: var(--eclipse); --danger: #ff383c; --danger-foreground: var(--snow); --segment: var(--white); --segment-foreground: var(--eclipse); --border: #dedee0; --separator: #e4e4e7; --focus: var(--accent); --link: var(--foreground); --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04), 0 1px 2px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .06); --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, .06), 0 -6px 12px 0 rgba(0, 0, 0, .03), 0 14px 28px 0 rgba(0, 0, 0, .08); --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04), 0 1px 2px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .06); --skeleton-animation: shimmer; } @supports (color: color(display-p3 0 0 0)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --white: color(display-p3 1 1 1); --black: color(display-p3 0 0 0); --snow: color(display-p3 .988276 .988276 .988276); --eclipse: color(display-p3 .0940831 .0940815 .104915); --background: color(display-p3 .960849 .960849 .960849); --surface-secondary: color(display-p3 .937246 .937247 .940735); --surface-tertiary: color(display-p3 .917615 .917615 .92109); --muted: color(display-p3 .44318 .44318 .475431); --scrollbar: color(display-p3 .831087 .831083 .846819); --default: color(display-p3 .921202 .921203 .923877); --accent: color(display-p3 .228527 .513567 .937521); --field-foreground: color(display-p3 .0940831 .0940815 .104915); --success: color(display-p3 .366628 .776587 .434496); --warning: color(display-p3 .915251 .660732 .269004); --danger: color(display-p3 .920914 .296365 .274185); --border: color(display-p3 .868722 .868722 .879301); --separator: color(display-p3 .894477 .894477 .905114); } } @supports (color: lab(0% 0 0)) { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --white: lab(100% 0 0); --black: lab(0% 0 0); --snow: lab(98.9676% -.0000298023 -.0000119209); --eclipse: lab(8.34178% .607349 -2.12998); --background: lab(96.5432% -.0000596046 0); --surface-secondary: lab(94.4672% .129223 -.473213); --surface-tertiary: lab(92.7156% .129253 -.473213); --muted: lab(47.8738% 1.41454 -4.98644); --scrollbar: lab(84.9837% .601262 -2.17986); --default: lab(93.0314% .0993609 -.364041); --accent: lab(54.5335% 3.31545 -66.5298); --field-foreground: lab(8.34178% .607349 -2.12998); --success: lab(71.4376% -59.4106 38.0321); --warning: lab(74.4448% 23.7172 71.6451); --danger: lab(57.4234% 73.5589 48.0136); --border: lab(88.3653% .399351 -1.45447); --separator: lab(90.6853% .399232 -1.45452); } } .dark, [data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; --background: #060607; --foreground: var(--snow); --surface: #18181b; --surface-foreground: var(--foreground); --surface-secondary: #232325; --surface-tertiary: #262728; --overlay: #18181b; --overlay-foreground: var(--foreground); --muted: #9f9fa9; --scrollbar: #9f9fa9; --default: #27272a; --default-foreground: var(--snow); --field-background: #18181b; --field-foreground: var(--foreground); --warning: #f7b750; --warning-foreground: var(--eclipse); --danger: #db3b3e; --danger-foreground: var(--snow); --segment: #46464c; --segment-foreground: var(--foreground); --border: #28282c; --separator: #212124; --focus: var(--accent); --link: var(--foreground); --surface-shadow: 0 0 0 0 transparent inset; --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, .3) inset; --field-shadow: 0 0 0 0 transparent inset; } @supports (color: color(display-p3 0 0 0)) { .dark, [data-theme="dark"] { --background: color(display-p3 .0217169 .0216955 .0277708); --surface: color(display-p3 .0940831 .0940815 .104915); --surface-secondary: color(display-p3 .137299 .137298 .144446); --surface-tertiary: color(display-p3 .149676 .152827 .156538); --overlay: color(display-p3 .0940831 .0940815 .104915); --muted: color(display-p3 .622604 .622563 .659842); --scrollbar: color(display-p3 .622604 .622563 .659842); --default: color(display-p3 .152895 .152887 .16466); --field-background: color(display-p3 .0940831 .0940815 .104915); --warning: color(display-p3 .930377 .72781 .385984); --danger: color(display-p3 .792061 .284549 .269743); --segment: color(display-p3 .274531 .274533 .296049); --border: color(display-p3 .158628 .158622 .17046); --separator: color(display-p3 .130283 .130267 .141772); } } @supports (color: lab(0% 0 0)) { .dark, [data-theme="dark"] { --background: lab(1.54547% .178337 -.64671); --surface: lab(8.34178% .607349 -2.12998); --surface-secondary: lab(13.7794% .374213 -1.34113); --surface-tertiary: lab(15.5629% -.291005 -.84582); --overlay: lab(8.34178% .607349 -2.12998); --muted: lab(65.6464% 1.53497 -5.42429); --scrollbar: lab(65.6464% 1.53497 -5.42429); --default: lab(15.7305% .613764 -2.16959); --field-background: lab(8.34178% .607349 -2.12998); --warning: lab(79.1095% 16.747 59.9157); --danger: lab(50.9109% 62.2712 37.59); --segment: lab(29.8929% 1.02498 -3.61326); --border: lab(16.4266% .613093 -2.16998); --separator: lab(12.9463% .616677 -2.16783); } } } } @layer components; } @layer base { ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::-webkit-file-upload-button { 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; } ::-webkit-file-upload-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); border-radius: 0; } :where(select:-webkit-any([multiple], [size])) optgroup option:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { padding-left: 20px; } :where(select:-moz-any([multiple], [size])) optgroup option:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { padding-left: 20px; } :where(select:is([multiple], [size])) optgroup option:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { padding-left: 20px; } :where(select:-webkit-any([multiple], [size])) optgroup option:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { padding-right: 20px; } :where(select:-moz-any([multiple], [size])) optgroup option:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { padding-right: 20px; } :where(select:is([multiple], [size])) optgroup option:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { padding-right: 20px; } :not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::-webkit-file-upload-button { margin-right: 4px; } :not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button { margin-right: 4px; } :not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button { margin-right: 4px; } :-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::-webkit-file-upload-button { margin-left: 4px; } :-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button { margin-left: 4px; } :is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button { margin-left: 4px; } @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); } } } ::-webkit-datetime-edit { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-year-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-month-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-day-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-hour-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-minute-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-second-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-millisecond-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } input:where([type="button"], [type="reset"], [type="submit"]) { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::-webkit-file-upload-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } *, :after, :before { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::-webkit-file-upload-button { 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%; -moz-tab-size: 4; 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; 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: rgba(0, 0, 0, 0); border-radius: 0; } ::-webkit-file-upload-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); border-radius: 0; } :where(select:-webkit-any([multiple], [size])) optgroup { font-weight: bolder; } :where(select:-moz-any([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:-webkit-any([multiple], [size])) optgroup option:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { padding-left: 20px; } :where(select:-moz-any([multiple], [size])) optgroup option:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { padding-left: 20px; } :where(select:is([multiple], [size])) optgroup option:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { padding-left: 20px; } :where(select:-webkit-any([multiple], [size])) optgroup option:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { padding-right: 20px; } :where(select:-moz-any([multiple], [size])) optgroup option:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { padding-right: 20px; } :where(select:is([multiple], [size])) optgroup option:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { padding-right: 20px; } :not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::-webkit-file-upload-button { margin-right: 4px; } :not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button { margin-right: 4px; } :not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button { margin-right: 4px; } :-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::-webkit-file-upload-button { margin-left: 4px; } :-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button { margin-left: 4px; } :is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button { margin-left: 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-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-year-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-month-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-day-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-hour-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-minute-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-second-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-millisecond-field { padding-top: 0; padding-bottom: 0; } ::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } :-moz-ui-invalid { box-shadow: none; } button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } input:where([type="button"], [type="reset"], [type="submit"]) { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::-webkit-file-upload-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } *, :after, :before { border-color: var(--border, currentColor); } ::backdrop { border-color: var(--border, currentColor); } ::-webkit-file-upload-button { border-color: var(--border, currentColor); } ::file-selector-button { border-color: var(--border, currentColor); } :root { view-transition-name: none; } ::view-transition { pointer-events: none; } } @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; -moz-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"] *) { transition-property: none; } .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .close-button:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .close-button--default:hover { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } .close-button--default[data-hovered="true"] { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .close-button--default[data-hovered="true"] { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } .close-button--default:active { transform: scale(.93); } .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"] *) { transition-property: none; } .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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="true"] { height: auto; } .field-error[data-visible="true"] { opacity: 1; } .field-error { transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth); } .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: 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); margin-left: calc(var(--spacing) * .5); } :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); color: var(--danger); } :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); --tw-content: "*"; content: var(--tw-content); } .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, -webkit-text-decoration-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, visibility, 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-left: auto; transition-duration: .25s; } .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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: ""; bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--separator); border-radius: 3.40282e38px; 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: left; 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"] *) { transition-property: none; } .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(--color-foreground); } @supports (color: color-mix(in lab, red, red)) { .accordion__trigger:hover:not([aria-expanded="true"]) { background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent 90%); } } .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) { background-color: var(--color-foreground); } @supports (color: color-mix(in lab, red, red)) { .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) { background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent 90%); } } } .accordion__trigger:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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"] *) { transition-property: none; } .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { border-radius: calc(var(--radius) * 3); background-color: var(--surface); } @media (hover: hover) { .accordion--surface .accordion__trigger:hover:not([aria-expanded="true"]) { background-color: var(--default); } .accordion--surface .accordion__trigger[data-hovered="true"]: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%; left: 3%; } .accordion--surface .accordion__item:first-child [data-slot="accordion-trigger"] { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .accordion--surface .accordion__item:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"])) [data-slot="accordion-trigger"] { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .breadcrumbs { align-items: center; display: flex; } .breadcrumbs .breadcrumbs__link { padding-inline: calc(var(--spacing) * .5); 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; -webkit-text-decoration-line: none; text-decoration-line: none; position: relative; } .breadcrumbs .breadcrumbs__link:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .breadcrumbs .breadcrumbs__link[data-hovered="true"] { -webkit-text-decoration-line: underline; 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) * .5); padding-inline: calc(var(--spacing) * .5); 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(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .breadcrumbs .breadcrumbs__separator:where(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } .breadcrumbs .breadcrumbs__separator:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [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; } .disclosure__trigger:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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, -webkit-text-decoration-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, visibility, 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-left: auto; transition-duration: .25s; } .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] *) { transition-property: none; } .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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); width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: 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); color: var(--link); -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-color: var(--surface); text-decoration-color: var(--surface); align-items: center; display: inline-flex; position: relative; } @supports (color: color-mix(in lab, red, red)) { .link { -webkit-text-decoration-color: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); text-decoration-color: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } .link { text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; transition: color .1s var(--ease-smooth), text-decoration-color .1s var(--ease-out), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .1s var(--ease-out); text-decoration-thickness: 1.5px; } .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { -webkit-text-decoration-color: var(--muted); text-decoration-color: var(--muted); } .link:hover .link__icon { opacity: 1; } .link[data-hovered="true"] { -webkit-text-decoration-color: var(--muted); text-decoration-color: var(--muted); } .link[data-hovered="true"] .link__icon { opacity: 1; } } .link:focus-visible:not(: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-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; } .link:focus-visible:not(:focus) .link__icon { opacity: 1; } .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; } .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; width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); color: currentColor; opacity: .6; 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"] *) { transition-property: none; } .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] { margin-left: calc(var(--spacing) * 1); padding-bottom: calc(var(--spacing) * 1.5); } .link.button { gap: calc(var(--spacing) * 0); -webkit-text-decoration-line: none; 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; -moz-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"] *) { transition-property: none; } .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(--color-default-hover); --pagination-link-bg-pressed: var(--color-default-hover); --pagination-link-fg: var(--color-default-foreground); background-color: var(--pagination-link-bg); color: var(--pagination-link-fg); } .pagination__link: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; } .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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .pagination__link[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .pagination__link:hover { background-color: var(--pagination-link-bg-hover); } .pagination__link[data-hovered="true"] { background-color: var(--pagination-link-bg-hover); } } .pagination__link:active { background-color: var(--pagination-link-bg-pressed); transform: scale(.97); } .pagination__link[data-pressed="true"] { background-color: var(--pagination-link-bg-pressed); transform: scale(.97); } .pagination__link[data-active="true"] { --pagination-link-bg: var(--color-default); --pagination-link-bg-hover: var(--color-default-hover); --pagination-link-bg-pressed: var(--color-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; -moz-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); } .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 { transform: scale(.98); } .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 { transform: scale(.96); } .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 { position: relative; } .tabs__list { background-color: var(--default); padding: calc(var(--spacing) * 1); border-radius: calc(var(--radius-2xl) + .25rem); display: inline-flex; } .tabs__list[data-orientation="horizontal"] { flex-direction: row; 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 { z-index: 1; cursor: var(--cursor-interactive); 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; 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"] *) { transition-property: none; } .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { opacity: 0; } .tabs__tab[data-selected="true"] + .tabs__tab .tabs__separator { opacity: 0; } .tabs__tab:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tabs__tab[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 { opacity: .7; } .tabs__tab[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) { opacity: .7; } } .tabs__tab:focus-visible:not(: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-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__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__separator { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .tabs__separator { background-color: color-mix(in oklab, var(--muted) 25%, transparent); } } .tabs__separator { pointer-events: none; transition: opacity .15s var(--ease-smooth); border-radius: 4px; position: absolute; } .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs__list[data-orientation="horizontal"] .tabs__separator { width: 1px; height: 50%; top: 25%; left: 0; } .tabs__list[data-orientation="vertical"] .tabs__separator { width: 90%; height: 1px; top: 0; left: 5%; } .tabs__panel { width: 100%; padding: calc(var(--spacing) * 2); --tw-outline-style: none; outline-style: none; } .tabs__panel[data-exiting="true"] { top: calc(var(--spacing) * 0); left: 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-left: calc(var(--spacing) * 4); } .tabs__indicator { box-shadow: var(--shadow-surface); z-index: -1; border-radius: var(--radius-3xl); background-color: var(--segment); width: 100%; height: 100%; transition-property: translate, width, height; transition-duration: .25s; transition-timing-function: var(--ease-out-fluid); position: absolute; top: 0; left: 0; } .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tabs--secondary .tabs__list { padding: calc(var(--spacing) * 0); background-color: rgba(0, 0, 0, 0); border-radius: 0; } .tabs--secondary .tabs__list[data-orientation="horizontal"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--border); scrollbar-width: none; max-width: 100%; overflow-x: auto; overflow-y: clip; } .tabs--secondary .tabs__list[data-orientation="horizontal"]::-webkit-scrollbar { display: none; } .tabs--secondary .tabs__list[data-orientation="vertical"] { border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--border); } .tabs--secondary .tabs__tab { border-radius: 0; } .tabs--secondary .tabs__tab[data-selected="true"] { color: var(--foreground); } .tabs--secondary .tabs__separator { display: none; } .tabs--secondary .tabs__indicator { background-color: var(--accent); box-shadow: none; border-radius: 0; } .tabs--secondary[data-orientation="horizontal"] .tabs__indicator { height: 2px; top: auto; bottom: 0; } .tabs--secondary[data-orientation="vertical"] .tabs__indicator { width: 2px; height: 100%; top: 0; left: 0; } .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: -moz-fit-content; 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; -moz-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"] *) { transition-property: none; } .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .button[data-pending="true"] { pointer-events: none; } .button:active { background-color: var(--button-bg-pressed); transform: scale(.97); } .button[data-pressed="true"] { background-color: var(--button-bg-pressed); transform: scale(.97); } @media (hover: hover) { .button:hover { background-color: var(--button-bg-hover); } .button[data-hovered="true"] { background-color: var(--button-bg-hover); } } .button svg:not(:-webkit-any([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(:-webkit-any([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { margin-block: calc(var(--spacing) * 1); } .button svg:not(:-webkit-any([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .button svg:not(:-moz-any([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(:-moz-any([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { margin-block: calc(var(--spacing) * 1); } .button svg:not(:-moz-any([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .button svg:not(:is([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(:is([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { margin-block: calc(var(--spacing) * 1); } .button svg:not(:is([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { 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(:-webkit-any([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .button--sm svg:not(:-moz-any([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .button--sm svg:not(:is([data-slot="spinner"] svg, [data-slot="link-icon"] svg)) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .button--sm:active { transform: scale(.98); } .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 { transform: scale(.96); } .button--lg[data-pressed="true"] { transform: scale(.96); } .button--primary { --button-bg: var(--color-accent); --button-bg-hover: var(--color-accent-hover); --button-bg-pressed: var(--color-accent-hover); --button-fg: var(--color-accent-foreground); } .button--secondary { --button-bg: var(--color-default); --button-bg-hover: var(--color-default-hover); --button-bg-pressed: var(--color-default-hover); --button-fg: var(--color-accent-soft-foreground); } .button--tertiary { --button-bg: var(--color-default); --button-bg-hover: var(--color-default-hover); --button-bg-pressed: var(--color-default-hover); } .button--ghost, .button--outline { --button-bg: transparent; --button-bg-hover: var(--color-default); --button-bg-pressed: var(--color-default); --button-fg: var(--color-default-foreground); } .button--outline { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); --button-bg-hover: var(--color-default); } @supports (color: color-mix(in lab, red, red)) { .button--outline { --button-bg-hover: color-mix(in srgb, var(--color-default) 60%, transparent); } } .button--danger { --button-bg: var(--color-danger); --button-bg-hover: var(--color-danger-hover); --button-bg-pressed: var(--color-danger-hover); --button-fg: var(--color-danger-foreground); } .button--danger-soft { --button-bg: var(--color-danger-soft); --button-bg-hover: var(--color-danger-soft-hover); --button-bg-pressed: var(--color-danger-soft-hover); --button-fg: var(--color-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:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-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[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .button-group .button:focus-visible:not(:focus) { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .button-group__separator { opacity: .15; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; border-radius: 4px; position: absolute; } .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .button-group--horizontal .button-group__separator { width: 1px; height: 50%; top: 25%; left: -1px; } .button-group--vertical .button-group__separator { width: 50%; height: 1px; top: -1px; left: 25%; } .button-group--horizontal .button--outline:first-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-right-style: var(--tw-border-style); border-right-width: 0; } .button-group--horizontal .button--outline:first-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-right-style: var(--tw-border-style); border-right-width: 0; } .button-group--horizontal .button--outline:first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-right-style: var(--tw-border-style); border-right-width: 0; } .button-group--horizontal .button--outline:first-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-left-style: var(--tw-border-style); border-left-width: 0; } .button-group--horizontal .button--outline:first-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-left-style: var(--tw-border-style); border-left-width: 0; } .button-group--horizontal .button--outline:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-left-style: var(--tw-border-style); border-left-width: 0; } .button-group--horizontal .button--outline:last-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-left-style: var(--tw-border-style); border-left-width: 0; } .button-group--horizontal .button--outline:last-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-left-style: var(--tw-border-style); border-left-width: 0; } .button-group--horizontal .button--outline:last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-left-style: var(--tw-border-style); border-left-width: 0; } .button-group--horizontal .button--outline:last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-right-style: var(--tw-border-style); border-right-width: 0; } .button-group--horizontal .button--outline:last-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-right-style: var(--tw-border-style); border-right-width: 0; } .button-group--horizontal .button--outline:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-right-style: var(--tw-border-style); border-right-width: 0; } .button-group--horizontal .button--outline:not(:first-child):not(:last-child) { border-inline-style: var(--tw-border-style); border-left-width: 0; border-right-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-top-width: 0; border-bottom-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: -moz-fit-content; 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; -moz-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"] *) { transition-property: none; } .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(--color-default); --toggle-button-bg-hover: var(--color-default-hover); --toggle-button-bg-pressed: var(--color-default-hover); --toggle-button-fg: currentColor; --toggle-button-bg-selected: var(--color-accent-soft); --toggle-button-bg-selected-hover: var(--color-accent-soft-hover); --toggle-button-bg-selected-pressed: var(--color-accent-soft-hover); --toggle-button-fg-selected: var(--color-accent-soft-foreground); background-color: var(--toggle-button-bg); color: var(--toggle-button-fg); } .toggle-button:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .toggle-button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { .toggle-button:hover { background-color: var(--toggle-button-bg-hover); } .toggle-button[data-hovered="true"] { background-color: var(--toggle-button-bg-hover); } } .toggle-button:active { background-color: var(--toggle-button-bg-pressed); transform: scale(.97); } .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 { background-color: var(--toggle-button-bg-selected-hover); } .toggle-button[data-selected="true"][data-hovered="true"] { background-color: var(--toggle-button-bg-selected-hover); } } .toggle-button[data-selected="true"]:active { background-color: var(--toggle-button-bg-selected-pressed); } .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); } .toggle-button svg { 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 { transform: scale(.98); } .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 { transform: scale(.96); } .toggle-button--lg[data-pressed="true"] { transform: scale(.96); } .toggle-button--default { --toggle-button-bg: var(--color-default); --toggle-button-bg-hover: var(--color-default-hover); --toggle-button-bg-pressed: var(--color-default-hover); } .toggle-button--ghost { --toggle-button-bg: transparent; --toggle-button-bg-hover: var(--color-default); --toggle-button-bg-pressed: var(--color-default); --toggle-button-fg: var(--color-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: -moz-fit-content; 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:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 3); border-bottom-right-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 3); border-bottom-left-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[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .toggle-button-group .toggle-button:focus-visible:not(:focus) { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .toggle-button-group--full-width .toggle-button { flex: 1; } .toggle-button-group__separator { opacity: .15; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; border-radius: 4px; position: absolute; } .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { width: 1px; height: 50%; top: 25%; left: -1px; } .toggle-button-group--vertical .toggle-button-group__separator { width: 50%; height: 1px; top: -1px; left: 25%; } .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: -moz-fit-content; 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 { 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); border-radius: 3.40282e38px; } .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; } .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 { transform: scale(.97); } .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); overscroll-behavior: contain; border-radius: calc(var(--radius) * 3); 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 { box-shadow: var(--shadow-overlay); } .dropdown__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: ease; } .dropdown__popover[data-exiting="true"] { will-change: opacity, transform; } .dropdown__popover[data-entering="true"] { 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-left: 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"] *) { transition-property: none; } .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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; -moz-user-select: none; user-select: none; width: -moz-fit-content; width: fit-content; } .list-box-item [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .list-box-item:has(.list-box-item__indicator) { padding-right: calc(var(--spacing) * 7); } .list-box-item:focus-visible:not(: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-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[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 { transform: scale(.98); } .list-box-item[data-pressed="true"] { transform: scale(.98); } @media (hover: hover) { .list-box-item:hover { background-color: var(--default); } .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 { top: 50%; right: calc(var(--spacing) * 2); 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, -webkit-text-decoration-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, visibility, 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; justify-content: center; align-items: center; transition-duration: .25s; display: flex; position: absolute; } .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] *) { transition-property: none; } .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] { transition: stroke-dashoffset .25s linear; } .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .list-box-item__indicator .list-box-item[aria-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) { .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .list-box-item__indicator .list-box-item[aria-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__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] { transition: stroke-dashoffset .25s linear; } .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"] *) { transition-property: none; } .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 { transition-property: none; } .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) { .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"] *)) { transition-property: none; } .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 { transition-property: none; } .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 { color: var(--danger); } .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 { gap: calc(var(--spacing) * 1); width: 100%; padding: calc(var(--spacing) * 1); flex-direction: column; display: flex; position: relative; overflow: clip; } .list-box [data-slot="separator"][data-orientation="horizontal"] { width: 94%; margin-left: 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"] *) { transition-property: none; } .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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; -moz-user-select: none; user-select: none; width: -moz-fit-content; width: fit-content; } .menu-item [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; -moz-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-left: calc(var(--spacing) * 7); } .menu-item[data-has-submenu="true"]:has(.menu-item__indicator) { padding-right: calc(var(--spacing) * 7); padding-left: calc(var(--spacing) * 2); } .menu-item:focus-visible:not(: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-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[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 { transform: scale(.98); } .menu-item[data-pressed="true"] { transform: scale(.98); } @media (hover: hover) { .menu-item:hover { background-color: var(--default); } .menu-item[data-hovered="true"] { background-color: var(--default); } } .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"] { transition: stroke-dashoffset .1s linear; } .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .menu-item[aria-checked="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) { .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item[aria-checked="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[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"] { transition: stroke-dashoffset .1s linear; } .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .menu-item[aria-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) { .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .menu-item[aria-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-selected="true"] [data-slot="menu-item-indicator--checkmark"] { transition: stroke-dashoffset .1s linear; } .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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) { .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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; } } .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 { top: 50%; left: calc(var(--spacing) * 2); 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, -webkit-text-decoration-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, visibility, 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; justify-content: center; align-items: center; transition-duration: .25s; display: flex; position: absolute; } .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { right: calc(var(--spacing) * 2); left: auto; } .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"] *) { transition-property: none; } .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 { transition-property: none; } .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"] *)) { transition-property: none; } .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 { transition-property: none; } .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"] *) { transition-property: none; } .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 { transition-property: none; } .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"] *)) { transition-property: none; } .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 { transition-property: none; } .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 { color: var(--danger); } .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-left: 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); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; 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, ); border-radius: 3.40282e38px; display: inline-flex; position: relative; } .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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:-webkit-any([data-disabled="true"], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tag:-moz-any([data-disabled="true"], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tag:is([data-disabled="true"], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tag:-webkit-any(: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:-moz-any(: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(: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:-webkit-any([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .tag:-webkit-any([data-selected="true"], [aria-selected="true"]) { color: var(--accent); } @media (hover: hover) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]):-webkit-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]):-webkit-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } .tag:-moz-any([data-selected="true"], [aria-selected="true"]):-moz-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-moz-any([data-selected="true"], [aria-selected="true"]):-moz-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } } .tag:-moz-any([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-moz-any([data-selected="true"], [aria-selected="true"]) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .tag:-moz-any([data-selected="true"], [aria-selected="true"]) { color: var(--accent); } @media (hover: hover) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]):-webkit-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]):-webkit-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } .tag:-moz-any([data-selected="true"], [aria-selected="true"]):-moz-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-moz-any([data-selected="true"], [aria-selected="true"]):-moz-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } } .tag:is([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:is([data-selected="true"], [aria-selected="true"]) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .tag:is([data-selected="true"], [aria-selected="true"]) { color: var(--accent); } @media (hover: hover) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]):-webkit-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-webkit-any([data-selected="true"], [aria-selected="true"]):-webkit-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } .tag:-moz-any([data-selected="true"], [aria-selected="true"]):-moz-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:-moz-any([data-selected="true"], [aria-selected="true"]):-moz-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } } .tag--sm { padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * .5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .tag--md { padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .tag--lg { 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:-webkit-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .tag--default:-webkit-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } .tag--default:-moz-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .tag--default:-moz-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } .tag--default:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .tag--default:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } .tag--surface { background-color: var(--surface); color: var(--surface-foreground); } @media (hover: hover) { .tag--surface:-webkit-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .tag--surface:-webkit-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } .tag--surface:-moz-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .tag--surface:-moz-any(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } .tag--surface:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .tag--surface:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { background-color: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); } } } .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 rgba(0, 0, 0, .1); } .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, rgba(255, 255, 255, .2) 1px, rgba(0, 0, 0, 0) 1px); background-size: 8px 8px; position: absolute; } .color-area__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); 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; border-radius: 3.40282e38px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .1); } .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] *) { transition-property: none; } .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-picker__trigger[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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); 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(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); gap: calc(var(--spacing) * 3); flex-direction: column; display: flex; overflow-x: hidden; overflow-y: auto; } .color-picker__popover::-webkit-scrollbar { display: none; } .color-picker__popover { -ms-overflow-style: none; scrollbar-width: none; } .color-picker__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: ease; } .color-picker__popover[data-exiting="true"] { will-change: opacity, transform; } .color-picker__popover[data-entering="true"] { 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: -moz-fit-content; 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: 3.40282e38px; grid-area: track; position: relative; } .color-slider .color-slider__track:before { content: ""; z-index: 0; pointer-events: none; position: absolute; } .color-slider .color-slider__track:after { content: ""; z-index: 0; pointer-events: none; position: absolute; } .color-slider .color-slider__thumb { cursor: grab; -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); border-radius: 3.40282e38px; justify-content: center; align-items: center; display: flex; position: absolute; } .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-slider:disabled [data-slot="label"] { opacity: 1; } .color-slider[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-slider[data-disabled="true"] [data-slot="label"] { opacity: 1; } .color-slider[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 rgba(0, 0, 0, .1), inset 0 -1px rgba(0, 0, 0, .1); } .color-slider[data-orientation="horizontal"] .color-slider__track:before { top: calc(var(--spacing) * 0); width: .625rem; height: 100%; } .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-top-left-radius: 999px; border-bottom-left-radius: 999px; left: -.625rem; box-shadow: inset 1px 0 rgba(0, 0, 0, .1), inset 0 1px rgba(0, 0, 0, .1), inset 0 -1px rgba(0, 0, 0, .1); } .color-slider[data-orientation="horizontal"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-top-right-radius: 999px; border-bottom-right-radius: 999px; right: -.625rem; box-shadow: inset -1px 0 rgba(0, 0, 0, .1), inset 0 1px rgba(0, 0, 0, .1), inset 0 -1px rgba(0, 0, 0, .1); } .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 { text-align: center; } .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 rgba(0, 0, 0, .1), inset -1px 0 rgba(0, 0, 0, .1); } .color-slider[data-orientation="vertical"] .color-slider__track:before { left: calc(var(--spacing) * 0); width: 100%; height: .625rem; } .color-slider[data-orientation="vertical"] .color-slider__track:after { left: calc(var(--spacing) * 0); width: 100%; height: .625rem; } .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-bottom-right-radius: 999px; border-bottom-left-radius: 999px; bottom: -.625rem; box-shadow: inset 1px 0 rgba(0, 0, 0, .1), inset -1px 0 rgba(0, 0, 0, .1), inset 0 -1px rgba(0, 0, 0, .1); } .color-slider[data-orientation="vertical"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-top-left-radius: 999px; border-top-right-radius: 999px; top: -.625rem; box-shadow: inset 1px 0 rgba(0, 0, 0, .1), inset -1px 0 rgba(0, 0, 0, .1), inset 0 1px rgba(0, 0, 0, .1); } .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 rgba(0, 0, 0, .1); } .color-swatch--circle { border-radius: 3.40282e38px; } .color-swatch--square { border-radius: calc(var(--radius) * .75); } .color-swatch--xs { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .color-swatch--sm { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .color-swatch--lg { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .color-swatch--xl { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .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-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: rgba(0, 0, 0, 0); border-radius: 3.40282e38px; 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"] *) { transition-property: none; } .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .color-swatch-picker__item: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; } .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"] *) { transition-property: none; } .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] *) { transition-property: none; } .color-swatch-picker__indicator > *:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-swatch-picker__indicator > *:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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-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-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-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-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 { border-radius: calc(var(--radius) * 1); } .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 { border-radius: calc(var(--radius) * .75); } .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item .color-swatch-picker__swatch { border-radius: calc(var(--radius) * .75); } .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 { border-radius: calc(var(--radius) * 1); } .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 { border-radius: calc(var(--radius) * 1); } .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 { border-radius: calc(var(--radius) * 1); } .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(--color-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"] *) { transition-property: none; } .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .color-input-group:hover:not(:focus-within) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .color-input-group:hover:not(:focus-within) { border-color: var(--color-field-border-hover); } .color-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .color-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .color-input-group[data-hovered="true"]:not([data-focus-within="true"]) { border-color: var(--color-field-border-hover); } } .color-input-group[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(--focus); --tw-ring-offset-width: 0px; --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; outline-style: none; } .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-width: 0px; --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; 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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group[data-invalid="true"] { background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .color-input-group[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); 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 { padding-left: calc(var(--spacing) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .color-input-group:has([data-slot="color-input-group-suffix"]) .color-input-group__input { padding-right: calc(var(--spacing) * 2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .color-input-group__input:focus { --tw-outline-style: none; outline-style: none; } .color-input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .color-input-group__prefix { color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .color-input-group__suffix { color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .color-input-group--secondary { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --color-input-group-bg-hover: var(--color-default-hover); --color-input-group-bg-focus: var(--color-default); } @media (hover: hover) { .color-input-group--secondary:hover:not(:focus-within) { background-color: var(--color-input-group-bg-hover); } .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 { background-color: var(--color-input-group-bg-focus); } .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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group--secondary[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .color-input-group--secondary[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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: rgba(0, 0, 0, 0); } .color-input-group--full-width { width: 100%; } .color-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .color-field[data-invalid="true"] [data-slot="description"] { display: none; } .color-field[aria-invalid="true"] [data-slot="description"] { display: none; } .color-field [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .color-field [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .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: -moz-fit-content; 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 { background-color: var(--default); border-radius: 3.40282e38px; grid-area: track; position: relative; } .slider .slider__fill { pointer-events: none; background-color: var(--accent); position: absolute; } .slider .slider__thumb { cursor: grab; 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); border-radius: 3.40282e38px; justify-content: center; align-items: center; display: flex; position: absolute; } .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .slider .slider__thumb:after { z-index: 10; 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)); border-radius: 3.40282e38px; position: relative; } .slider .slider__thumb:after:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .slider .slider__thumb:after:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .slider .slider__thumb:after:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .slider .slider__thumb:after:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .slider .slider__thumb:after:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .slider .slider__thumb:after:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { 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([data-reduce-motion="true"], [data-reduce-motion="true"] *) { --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-dragging="true"]:after:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { --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-dragging="true"]:after:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { --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([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { --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-dragging="true"]:after:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { --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-dragging="true"]:after:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { --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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .slider:disabled [data-slot="label"] { opacity: 1; } .slider[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .slider[data-disabled="true"] [data-slot="label"] { opacity: 1; } .slider[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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-left-width: .75rem; border-right-width: .75rem; border-left-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); width: 100%; } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-left-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-left-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-left-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-right-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-right-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-right-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-right-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-right-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-right-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-left-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-left-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-left-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__fill { height: 100%; } .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 { text-align: center; } .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-top-width: .75rem; border-top-color: rgba(0, 0, 0, 0); border-bottom-width: .75rem; border-bottom-color: rgba(0, 0, 0, 0); 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 { width: 100%; } .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: center; gap: calc(var(--spacing) * 3); -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); --switch-control-bg: var(--color-default); --switch-control-bg-hover: var(--switch-control-bg); display: inline-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(--color-accent); --switch-control-bg-checked-hover: var(--color-accent-hover); } .switch:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .switch:disabled .switch__thumb { background-color: var(--default-foreground); } @supports (color: color-mix(in lab, red, red)) { .switch:disabled .switch__thumb { background-color: color-mix(in oklab, var(--default-foreground) 20%, transparent); } } .switch[data-disabled="true"] { 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[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .switch[aria-disabled="true"] .switch__thumb { background-color: var(--default-foreground); } @supports (color: color-mix(in lab, red, red)) { .switch[aria-disabled="true"] .switch__thumb { background-color: color-mix(in oklab, var(--default-foreground) 20%, transparent); } } .switch:disabled[aria-checked="true"] .switch__thumb { opacity: .4; } .switch:disabled[data-selected="true"] .switch__thumb { opacity: .4; } .switch[data-disabled="true"][aria-checked="true"] .switch__thumb { opacity: .4; } .switch[data-disabled="true"][data-selected="true"] .switch__thumb { opacity: .4; } .switch[aria-disabled="true"][aria-checked="true"] .switch__thumb { opacity: .4; } .switch[aria-disabled="true"][data-selected="true"] .switch__thumb { opacity: .4; } .switch__control { 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); border-radius: 3.40282e38px; flex-shrink: 0; align-items: center; display: flex; position: relative; overflow: hidden; } .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .switch:focus-visible .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[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 { background-color: var(--switch-control-bg-hover); } .switch[data-hovered="true"] .switch__control { background-color: var(--switch-control-bg-hover); } .switch:active .switch__control { background-color: var(--switch-control-bg-pressed); } .switch:active .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transform: none; } .switch:active .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transform: none; } .switch:active .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transform: none; } @media (prefers-reduced-motion: reduce) { .switch:active .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transform: none; } .switch:active .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transform: none; } .switch:active .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transform: none; } } .switch[data-pressed="true"] .switch__control { background-color: var(--switch-control-bg-pressed); } .switch[data-pressed="true"] .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transform: none; } .switch[data-pressed="true"] .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transform: none; } .switch[data-pressed="true"] .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transform: none; } @media (prefers-reduced-motion: reduce) { .switch[data-pressed="true"] .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transform: none; } .switch[data-pressed="true"] .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transform: none; } .switch[data-pressed="true"] .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transform: none; } } .switch[aria-checked="true"] .switch__control { background-color: var(--switch-control-bg-checked); } .switch[data-selected="true"] .switch__control { background-color: var(--switch-control-bg-checked); } .switch[aria-checked="true"]:hover .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[data-selected="true"]:hover .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[aria-checked="true"][data-hovered="true"] .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[data-selected="true"][data-hovered="true"] .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[aria-checked="true"]:active .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[data-selected="true"]:active .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[aria-checked="true"][data-pressed="true"] .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch[data-selected="true"][data-pressed="true"] .switch__control { background-color: var(--switch-control-bg-checked-hover); } .switch--sm .switch__control { width: 2rem; height: 1rem; } .switch--lg .switch__control { width: 3rem; height: 1.5rem; } .switch__thumb { transform-origin: center; 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); border-radius: 3.40282e38px; display: flex; } .switch__thumb:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(var(--spacing) * .5); } .switch__thumb:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(var(--spacing) * .5); } .switch__thumb:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(var(--spacing) * .5); } .switch__thumb:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(var(--spacing) * .5); } .switch__thumb:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(var(--spacing) * .5); } .switch__thumb:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(var(--spacing) * .5); } .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .switch[aria-checked="true"] .switch__thumb { background-color: var(--accent-foreground); color: var(--accent); box-shadow: 0 0 5px rgba(0, 0, 0, .02), 0 2px 10px rgba(0, 0, 0, .06), 0 0 1px rgba(0, 0, 0, .3); } .switch[aria-checked="true"] .switch__thumb:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.5rem); } .switch[aria-checked="true"] .switch__thumb:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.5rem); } .switch[aria-checked="true"] .switch__thumb:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.5rem); } .switch[aria-checked="true"] .switch__thumb:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.5rem); } .switch[aria-checked="true"] .switch__thumb:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.5rem); } .switch[aria-checked="true"] .switch__thumb:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.5rem); } .switch[data-selected="true"] .switch__thumb { background-color: var(--accent-foreground); color: var(--accent); box-shadow: 0 0 5px rgba(0, 0, 0, .02), 0 2px 10px rgba(0, 0, 0, .06), 0 0 1px rgba(0, 0, 0, .3); } .switch[data-selected="true"] .switch__thumb:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.5rem); } .switch[data-selected="true"] .switch__thumb:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.5rem); } .switch[data-selected="true"] .switch__thumb:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.5rem); } .switch[data-selected="true"] .switch__thumb:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.5rem); } .switch[data-selected="true"] .switch__thumb:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.5rem); } .switch[data-selected="true"] .switch__thumb:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.5rem); } .switch--sm .switch__thumb { width: 1.03125rem; height: .75rem; } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.15625rem); } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.15625rem); } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.15625rem); } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.15625rem); } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.15625rem); } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.15625rem); } .switch--lg .switch__thumb { width: 1.71875rem; height: 1.25rem; } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.84375rem); } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.84375rem); } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.84375rem); } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.84375rem); } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.84375rem); } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(100% - 1.84375rem); } .switch__thumb > * { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; } .switch__label { 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); } .switch__content { gap: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .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(--color-default); --badge-fg: var(--color-default-foreground); --badge-border: var(--color-background); background-color: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-border); 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(--color-accent); } .badge--default { --badge-fg: var(--color-default-foreground); } .badge--success { --badge-fg: var(--color-success); } .badge--warning { --badge-fg: var(--color-warning); } .badge--danger { --badge-fg: var(--color-danger); } .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(--color-accent); --badge-fg: var(--color-accent-foreground); } .badge--primary.badge--default { --badge-bg: var(--color-default); --badge-fg: var(--color-default-foreground); } .badge--primary.badge--success { --badge-bg: var(--color-success); --badge-fg: var(--color-success-foreground); } .badge--primary.badge--warning { --badge-bg: var(--color-warning); --badge-fg: var(--color-warning-foreground); } .badge--primary.badge--danger { --badge-bg: var(--color-danger); --badge-fg: var(--color-danger-foreground); } .badge--soft.badge--accent { --badge-bg: var(--color-accent-soft); --badge-fg: var(--color-accent-soft-foreground); } .badge--soft.badge--default { --badge-bg: var(--color-default); --badge-fg: var(--color-default-foreground); } .badge--soft.badge--success { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-soft-foreground); } .badge--soft.badge--warning { --badge-bg: var(--color-warning-soft); --badge-fg: var(--color-warning-soft-foreground); } .badge--soft.badge--danger { --badge-bg: var(--color-danger-soft); --badge-fg: var(--color-danger-soft-foreground); } .chip { align-items: center; gap: calc(var(--spacing) * .5); border-radius: calc(var(--radius) * 2); 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(--color-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(--color-accent); } .chip--danger { --chip-fg: var(--color-danger); } .chip--default { --chip-fg: var(--color-default-foreground); } .chip--success { --chip-fg: var(--color-success); } .chip--warning { --chip-fg: var(--color-warning); } .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(--color-accent); --chip-fg: var(--color-accent-foreground); } .chip--primary.chip--success { --chip-bg: var(--color-success); --chip-fg: var(--color-success-foreground); } .chip--primary.chip--warning { --chip-bg: var(--color-warning); --chip-fg: var(--color-warning-foreground); } .chip--primary.chip--danger { --chip-bg: var(--color-danger); --chip-fg: var(--color-danger-foreground); } .chip--accent.chip--soft { --chip-bg: var(--color-accent-soft); --chip-fg: var(--color-accent-soft-foreground); } .chip--success.chip--soft { --chip-bg: var(--color-success-soft); --chip-fg: var(--color-success-soft-foreground); } .chip--warning.chip--soft { --chip-bg: var(--color-warning-soft); --chip-fg: var(--color-warning-soft-foreground); } .chip--danger.chip--soft { --chip-bg: var(--color-danger-soft); --chip-fg: var(--color-danger-soft-foreground); } .table-root { grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; overflow: clip; } .table__scroll-container { scrollbar-width: thin; scrollbar-color: oklch(0% 0 0 / .15) transparent; overflow-x: auto; } .table__scroll-container::-webkit-scrollbar { width: 6px; } .table__scroll-container::-webkit-scrollbar-track { background: none; } .table__scroll-container::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); background: color(display-p3 0 0 0 / .15); background: lab(0% 0 0 / .15); border-radius: 3px; } .table__scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .25); background: color(display-p3 0 0 0 / .25); background: lab(0% 0 0 / .25); } :-webkit-any([data-theme="dark"], .dark) .table__scroll-container { scrollbar-color: oklch(100% 0 0 / .15) transparent; } :-webkit-any([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background: color(display-p3 1 1 1 / .15); background: lab(100% 0 0 / .15); } :-webkit-any([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); background: color(display-p3 1 1 1 / .25); background: lab(100% 0 0 / .25); } :-moz-any([data-theme="dark"], .dark) .table__scroll-container { scrollbar-color: oklch(100% 0 0 / .15) transparent; } :-moz-any([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background: color(display-p3 1 1 1 / .15); background: lab(100% 0 0 / .15); } :-moz-any([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); background: color(display-p3 1 1 1 / .25); background: lab(100% 0 0 / .25); } :is([data-theme="dark"], .dark) .table__scroll-container { scrollbar-color: oklch(100% 0 0 / .15) transparent; } :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background: color(display-p3 1 1 1 / .15); background: lab(100% 0 0 / .15); } :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); background: color(display-p3 1 1 1 / .25); background: lab(100% 0 0 / .25); } .table-root--primary { background-color: var(--surface-secondary); padding-inline: calc(var(--spacing) * 1); padding-bottom: calc(var(--spacing) * 1); border-radius: calc(var(--radius) * 2.5); } .table-root--secondary .table__header { border-bottom-style: var(--tw-border-style); background-color: rgba(0, 0, 0, 0); border-bottom-width: 0; } .table-root--secondary .table__column { background-color: var(--surface-secondary); } .table-root--secondary .table__column:first-child { border-top-left-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); } .table-root--secondary .table__column:last-child { border-top-right-radius: calc(var(--radius) * 2); border-bottom-right-radius: calc(var(--radius) * 2); } .table-root--secondary .table__body { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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 { border-radius: 0; } .table-root--secondary .table__body tr:first-child td:last-child { border-radius: 0; } .table-root--secondary .table__body tr:last-child td:first-child { border-radius: 0; } .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(--surface); } @supports (color: color-mix(in lab, red, red)) { .table-root--secondary .table__row .table__cell { border-color: color-mix(in oklab, color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%) 50%, transparent); } } .table-root--secondary .table__row .table__cell { background-color: rgba(0, 0, 0, 0); } @media (hover: hover) { .table-root--secondary .table__row:hover .table__cell { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .table-root--secondary .table__row:hover .table__cell { background-color: color-mix(in oklab, var(--default) 50%, transparent); } } .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[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: left; 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; top: 50%; right: calc(var(--spacing) * 0); 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); position: absolute; } .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 { color: var(--foreground); } .table__column[data-allows-sorting="true"][data-hovered="true"] { color: var(--foreground); } } .table__column:focus-visible { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .table__column[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .table__body tr:first-child td:first-child { border-top-left-radius: calc(var(--radius) * 2); } .table__body tr:first-child td:last-child { border-top-right-radius: calc(var(--radius) * 2); } .table__body tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) * 2); } .table__body tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) * 2); } .table__body:not(tbody) { border-radius: calc(var(--radius) * 2); 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 { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .table__row:hover .table__cell { background-color: color-mix(in oklab, var(--surface) 40%, transparent); } } .table__row[data-hovered="true"] .table__cell { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .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"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .table__row[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .table__row:focus-visible { --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .table__row[data-focus-visible="true"] { --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .table__row[data-dragging="true"] { opacity: .5; } .table__row[data-drop-target="true"] .table__cell { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .table__row[data-drop-target="true"] .table__cell { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .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(--surface); } @supports (color: color-mix(in lab, red, red)) { .table__cell { border-color: color-mix(in oklab, color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%) 50%, transparent); } } .table__cell:focus-visible { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .table__cell[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); outline-style: none; } .table__footer { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); align-items: center; display: flex; } .table__resizable-container { position: relative; overflow: auto; } .table__column-resizer { top: 50%; right: calc(var(--spacing) * 0); 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); box-sizing: content-box; --tw-translate-x: calc(1 / 2 * 100%); 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; background-clip: content-box; border-style: none; outline-style: none; position: absolute; } .table__column-resizer[data-hovered="true"] { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--accent); } .table__column-resizer:hover { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--accent); } .table__column-resizer[data-resizing="true"] { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--accent); } .table__column-resizer[data-focus-visible="true"] { height: 100%; width: calc(var(--spacing) * .5); background-color: var(--focus); } .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 { padding-block: calc(var(--spacing) * 3); text-align: center; } .table__load-more td > * { margin-left: auto; margin-right: auto; } .table__load-more [role="rowheader"] { padding-block: calc(var(--spacing) * 3); text-align: center; } .table__load-more [role="rowheader"] > * { margin-left: auto; margin-right: 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); border-radius: calc(var(--radius) * 3); 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); 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; -moz-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); } .alert--success .alert__indicator, .alert--success .alert__title { color: var(--success); } .alert--warning .alert__indicator, .alert--warning .alert__title { color: var(--warning); } .alert--danger .alert__indicator, .alert--danger .alert__title { color: var(--danger); } .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-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-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-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, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, 0) 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(--color-accent); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .meter [data-slot="label"] { width: -moz-fit-content; 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 { background-color: var(--default); height: calc(var(--spacing) * 2); border-radius: 3.40282e38px; grid-area: track; position: relative; overflow: hidden; } .meter .meter__fill { top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--meter-fill); height: 100%; transition: width .3s var(--ease-out); border-radius: 3.40282e38px; position: absolute; } .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .meter:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .meter:disabled [data-slot="label"] { opacity: 1; } .meter[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .meter[data-disabled="true"] [data-slot="label"] { opacity: 1; } .meter[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .meter[aria-disabled="true"] [data-slot="label"] { opacity: 1; } .meter--sm .meter__track { height: calc(var(--spacing) * 1); } .meter--lg .meter__track { height: calc(var(--spacing) * 3); } .meter--default { --meter-fill: var(--color-default-foreground); } .meter--accent { --meter-fill: var(--color-accent); } .meter--success { --meter-fill: var(--color-success); } .meter--warning { --meter-fill: var(--color-warning); } .meter--danger { --meter-fill: var(--color-danger); } .progress-bar { gap: calc(var(--spacing) * 1); --progress-bar-fill: var(--color-accent); grid-template-columns: 1fr auto; grid-template-areas: "label output" "track track"; width: 100%; display: grid; } .progress-bar [data-slot="label"] { width: -moz-fit-content; 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 { background-color: var(--default); height: calc(var(--spacing) * 2); border-radius: 3.40282e38px; grid-area: track; position: relative; overflow: hidden; } .progress-bar .progress-bar__fill { top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--progress-bar-fill); height: 100%; transition: width .3s var(--ease-out); border-radius: 3.40282e38px; position: absolute; } .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] *) { animation: none; } .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .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"] *)) { animation: none; } .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .progress-bar:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .progress-bar:disabled [data-slot="label"] { opacity: 1; } .progress-bar[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .progress-bar[data-disabled="true"] [data-slot="label"] { opacity: 1; } .progress-bar[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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); } .progress-bar--lg .progress-bar__track { height: calc(var(--spacing) * 3); } .progress-bar--default { --progress-bar-fill: var(--color-default-foreground); } .progress-bar--accent { --progress-bar-fill: var(--color-accent); } .progress-bar--success { --progress-bar-fill: var(--color-success); } .progress-bar--warning { --progress-bar-fill: var(--color-warning); } .progress-bar--danger { --progress-bar-fill: var(--color-danger); } .progress-circle { --progress-circle-stroke: var(--color-accent); --progress-circle-track-stroke: var(--color-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"] *) { transition-property: none; } .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] *) { animation: none; } .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .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"] *)) { animation: none; } .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .progress-circle:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .progress-circle[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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(--color-default-foreground); } .progress-circle--accent { --progress-circle-stroke: var(--color-accent); } .progress-circle--success { --progress-circle-stroke: var(--color-success); } .progress-circle--warning { --progress-circle-stroke: var(--color-warning); } .progress-circle--danger { --progress-circle-stroke: var(--color-danger); } .spinner { pointer-events: none; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); transform-origin: center; animation: .75s linear infinite spin; position: relative; } .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: 50; --tw-outline-style: none; outline-style: none; width: calc(100vw - 2rem); position: fixed; } @media (min-width: 40rem) { .toast-region { width: auto; } .toast-region { 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 { bottom: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4); } .toast-region--bottom-end { right: 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 { top: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4); } .toast-region--top-end { top: calc(var(--spacing) * 4); right: 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 { pointer-events: auto; justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 1.5); border-radius: calc(var(--radius) * 3); 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); flex-direction: row; display: flex; position: absolute; left: 0; right: 0; } .toast--bottom, .toast--bottom-start, .toast--bottom-end { bottom: 0; } .toast--top, .toast--top-start, .toast--top-end { top: 0; } .toast:not([data-frontmost="true"]) { pointer-events: none; height: var(--front-height); overflow: hidden; } .toast:not([data-frontmost="true"]) .toast__close-button { pointer-events: none; opacity: 0; outline: none; } .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--bottom, .toast--bottom-start, .toast--bottom-end { view-transition-class: toast-bottom; } .toast--top, .toast--top-start, .toast--top-end { view-transition-class: toast-top; } .toast__content { flex-direction: column; flex-grow: 1; align-self: center; align-items: flex-start; height: 100%; display: flex; } .toast__indicator { padding: calc(var(--spacing) * 1); color: var(--overlay-foreground); -webkit-user-select: none; -moz-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"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .toast__indicator [data-slot="spinner-icon"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .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 { top: calc(var(--spacing) * 2.5); right: calc(var(--spacing) * 2.5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); border-color: var(--border); background-color: var(--default); opacity: 1; position: absolute; } @media (min-width: 40rem) { .toast__close-button { pointer-events: none; } .toast__close-button { top: calc(var(--spacing) * -1); } .toast__close-button { right: calc(var(--spacing) * -1); } .toast__close-button { border-style: var(--tw-border-style); border-width: 1px; } .toast__close-button { background-color: var(--overlay); } .toast__close-button { opacity: 0; } } .toast__close-button { transition: opacity .15s var(--ease-smooth); } .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { background-color: var(--default); } .toast__close-button[data-hovered="true"] { background-color: var(--default); } } .toast[data-frontmost="true"]:hover .toast__close-button { pointer-events: auto; opacity: 1; } .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); } .toast--success .toast__title, .toast--success .toast__indicator { color: var(--success); } .toast--warning .toast__title, .toast--warning .toast__indicator { color: var(--warning); } .toast--danger .toast__title, .toast--danger .toast__indicator { color: var(--danger); } ::view-transition-old(*) { will-change: translate, opacity; } ::view-transition-new(*) { will-change: translate, opacity; } ::view-transition-new(.toast-bottom):only-child { animation: .35s toast-slide-bottom-in; } ::view-transition-old(.toast-bottom):only-child { animation: .35s forwards toast-slide-bottom-out; } ::view-transition-new(.toast-top):only-child { animation: .35s toast-slide-top-in; } ::view-transition-old(.toast-top):only-child { animation: .35s forwards toast-slide-top-out; } @keyframes toast-slide-bottom-in { from { opacity: 0; translate: 0 100%; } } @keyframes toast-slide-bottom-out { to { opacity: 0; translate: 0 100%; } } @keyframes toast-slide-top-in { from { opacity: 0; translate: 0 -100%; } } @keyframes toast-slide-top-out { to { opacity: 0; translate: 0 -100%; } } .checkbox-group { flex-direction: column; display: flex; } .checkbox-group [data-slot="checkbox"] { margin-top: calc(var(--spacing) * 4); } .checkbox { gap: calc(var(--spacing) * 3); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; display: flex; } .checkbox:not(:has([data-slot="description"])) { align-items: center; } .checkbox:has([data-slot="description"]) { align-items: flex-start; } .checkbox [data-slot="label"] { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .checkbox [data-slot="description"] { text-wrap: wrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .checkbox:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox[data-selected="true"] .checkbox__indicator { border-color: var(--accent-foreground); background: var(--accent-hover); } .checkbox[data-indeterminate="true"] .checkbox__indicator { border-color: var(--accent-foreground); background: var(--accent-hover); } .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"] *) { transition-property: none; } .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] { color: var(--danger-foreground); } .checkbox[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] { color: var(--danger-foreground); } .checkbox[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] { color: var(--danger-foreground); } .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"] { color: var(--danger-foreground); } .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); 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), 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"] *) { transition-property: none; } .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox__control { cursor: var(--cursor-interactive); } .checkbox:has([data-slot="description"]) .checkbox__control { margin-top: calc(var(--spacing) * .5); } .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([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .checkbox__control:before:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .checkbox__control:before:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .checkbox__control:before:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .checkbox__control:before:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .checkbox__control:before:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .checkbox:focus-visible .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[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 { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .checkbox:hover .checkbox__control { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .checkbox:hover .checkbox__control:before { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .checkbox:hover .checkbox__control:before { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .checkbox[data-hovered="true"] .checkbox__control { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .checkbox[data-hovered="true"] .checkbox__control { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .checkbox[data-hovered="true"] .checkbox__control:before { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .checkbox[data-hovered="true"] .checkbox__control:before { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .checkbox[aria-checked="true"] .checkbox__control { color: var(--accent-foreground); border-color: rgba(0, 0, 0, 0); } .checkbox[aria-checked="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-selected="true"] .checkbox__control { color: var(--accent-foreground); border-color: rgba(0, 0, 0, 0); } .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 { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .checkbox:active[data-indeterminate="true"] .checkbox__control { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .checkbox[data-pressed="true"][data-indeterminate="true"] .checkbox__control { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .checkbox[data-pressed="true"][data-indeterminate="true"] .checkbox__control { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .checkbox[data-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; } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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; } .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: rgba(0, 0, 0, 0); } .checkbox[data-invalid="true"][aria-checked="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-invalid="true"][data-selected="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: rgba(0, 0, 0, 0); } .checkbox[data-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[aria-invalid="true"][aria-checked="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: rgba(0, 0, 0, 0); } .checkbox[aria-invalid="true"][aria-checked="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[aria-invalid="true"][data-selected="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: rgba(0, 0, 0, 0); } .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 { background-color: var(--danger); color: var(--danger-foreground); } .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 { transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .checkbox__content { gap: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .checkbox--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox--secondary .checkbox__control { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); } .checkbox:hover :is(.checkbox--secondary .checkbox__control) { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .checkbox:hover :is(.checkbox--secondary .checkbox__control) { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .checkbox[data-hovered="true"] :is(.checkbox--secondary .checkbox__control) { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .checkbox[data-hovered="true"] :is(.checkbox--secondary .checkbox__control) { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .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 { background-color: var(--accent); } .checkbox--secondary[data-indeterminate="true"] .checkbox__control { background-color: var(--accent); } .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-top: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-bottom: 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); display: flex; position: relative; } .input-otp[data-disabled="true"] { cursor: not-allowed; opacity: .5; } .input-otp__group { align-items: center; gap: calc(var(--spacing) * 2); display: flex; } .input-otp__slot { height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 9.5); 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(--color-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"] *) { transition-property: none; } .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } @media (hover: hover) { .input-otp__slot:hover { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .input-otp__slot:hover { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .input-otp__slot:hover { border-color: var(--color-field-border-hover); } .input-otp__slot[data-hovered="true"] { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .input-otp__slot[data-hovered="true"] { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .input-otp__slot[data-hovered="true"] { border-color: var(--color-field-border-hover); } } .input-otp__slot[data-active="true"] { z-index: 10; background-color: var(--field-background, var(--default)); --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: 0px; --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; outline-style: none; } .input-otp__slot[data-filled="true"] { background-color: var(--field-background, var(--default)); } .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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-otp__slot[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-otp__slot[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-otp__slot[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-otp__slot[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-otp__slot[data-invalid="true"] { background-color: var(--color-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"] *) { animation: none; } .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .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"] *)) { animation: none; } .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .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); background-color: var(--field-placeholder, var(--muted)); border-radius: 4px; width: 2px; animation: 1.2s ease-out infinite caret-blink; position: absolute; } .input-otp__separator { background-color: var(--separator); border-radius: 4px; flex-shrink: 0; width: 6px; height: 2px; } .input-otp--secondary .input-otp__slot { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --input-otp-slot-bg-hover: var(--color-default-hover); --input-otp-slot-bg-focus: var(--color-default); } @media (hover: hover) { .input-otp--secondary .input-otp__slot:hover { background-color: var(--input-otp-slot-bg-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"] { background-color: var(--input-otp-slot-bg-focus); } .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(--color-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"] *) { transition-property: none; } .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .input:hover:not(:focus):not(:focus-visible) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .input:hover:not(:focus):not(:focus-visible) { border-color: var(--color-field-border-hover); } .input[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .input[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .input[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { border-color: var(--color-field-border-hover); } } .input: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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input[data-invalid="true"] { background-color: var(--color-field-focus); } .input[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input--secondary { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --input-bg-hover: var(--color-default-hover); --input-bg-focus: var(--color-default); } @media (hover: hover) { .input--secondary:hover:not(:focus):not(:focus-visible) { background-color: var(--input-bg-hover); } .input--secondary[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) { background-color: var(--input-bg-hover); } } .input--secondary:focus { background-color: var(--input-bg-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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input--secondary[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input--secondary[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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(--color-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"] *) { transition-property: none; } .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .input-group:hover:not(:focus-within) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .input-group:hover:not(:focus-within) { border-color: var(--color-field-border-hover); } .input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .input-group[data-hovered="true"]:not([data-focus-within="true"]) { border-color: var(--color-field-border-hover); } } .input-group:has([data-slot="input-group-input"]: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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group[data-invalid="true"] { background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .input-group[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .input-group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); 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 { padding-left: calc(var(--spacing) * 0); border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group:has([data-slot="input-group-suffix"]) .input-group__input { padding-right: calc(var(--spacing) * 0); border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group__input:focus { --tw-outline-style: none; outline-style: none; } .input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .input-group__input[data-slot="input-group-textarea"] { resize: vertical; min-height: 38px; } .input-group__prefix { border-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); height: 100%; padding-inline: calc(var(--spacing) * 3); color: var(--field-placeholder, var(--muted)); border-width: var(--border-width-field); border-color: var(--color-field-border); border-style: solid; border-right-color: var(--color-field-border); background-color: rgba(0, 0, 0, 0); border-top: none; border-bottom: none; border-left: none; border-top-right-radius: 0; border-bottom-right-radius: 0; 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"] *) { transition-property: none; } .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .input-group__suffix { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); height: 100%; padding-inline: calc(var(--spacing) * 3); color: var(--field-placeholder, var(--muted)); border-width: var(--border-width-field); border-color: var(--color-field-border); border-style: solid; border-left-color: var(--color-field-border); background-color: rgba(0, 0, 0, 0); border-top: none; border-bottom: none; border-right: none; 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"] *) { transition-property: none; } .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .input-group--secondary { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --input-group-bg-hover: var(--color-default-hover); --input-group-bg-focus: var(--color-default); } @media (hover: hover) { .input-group--secondary:hover:not(:focus-within) { background-color: var(--input-group-bg-hover); } .input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--input-group-bg-hover); } } .input-group--secondary:focus-within { background-color: var(--input-group-bg-focus); } .input-group--secondary[data-focus-within="true"] { 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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group--secondary[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .input-group--secondary[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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"] { background-color: rgba(0, 0, 0, 0); } .input-group--secondary [data-slot="input-group-textarea"] { background-color: rgba(0, 0, 0, 0); } .input-group--full-width { width: 100%; } .number-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .number-field[data-invalid="true"] [data-slot="description"] { display: none; } .number-field[aria-invalid="true"] [data-slot="description"] { display: none; } .number-field [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .number-field [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .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(--color-field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); outline-style: none; grid-template-columns: 40px 1fr 40px; align-items: center; display: grid; overflow: hidden; } .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .number-field__group:hover:not(:focus-within) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .number-field__group:hover:not(:focus-within) { border-color: var(--color-field-border-hover); } .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) { border-color: var(--color-field-border-hover); } } .number-field__group[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(--focus); --tw-ring-offset-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field__group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field__group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field__group[data-invalid="true"] { background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .number-field__group[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .number-field__group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); 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-top-left-radius: 0; border-bottom-left-radius: 0; } .number-field__group:has([slot="increment"]) .number-field__input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .number-field__input:focus { --tw-outline-style: none; outline-style: none; } .number-field__input:focus-visible { --tw-outline-style: none; outline-style: none; } .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(--color-field-border); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); background-color: rgba(0, 0, 0, 0); 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"] *) { transition-property: none; } :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } :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"] *)) { transition-property: none; } :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } :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 { 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 { background-color: color-mix(in oklab, var(--field-foreground, var(--foreground)) 10%, transparent); } } :is(.number-field__increment-button, .number-field__decrement-button):active { transform: scale(.97); } :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)[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)[data-pressed="true"] { transform: scale(.97); } :is(.number-field__increment-button, .number-field__decrement-button):disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :is(.number-field__increment-button, .number-field__decrement-button)[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } :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"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } :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-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-right-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--field-placeholder, var(--muted)); } @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-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-right-style: var(--tw-border-style); border-right-width: 1px; border-color: var(--field-placeholder, var(--muted)); border-top-right-radius: 0; border-bottom-right-radius: 0; } @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 rgba(0, 0, 0, 0); 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(--color-default); --number-field-group-bg-hover: var(--color-default-hover); --number-field-group-bg-focus: var(--color-default); } @media (hover: hover) { .number-field--secondary .number-field__group:hover:not(:focus-within) { background-color: var(--number-field-group-bg-hover); } .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 { background-color: var(--number-field-group-bg-focus); } .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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field--secondary .number-field__group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field--secondary .number-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field--secondary .number-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .number-field--secondary .number-field__group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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: rgba(0, 0, 0, 0); } .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 rgba(0, 0, 0, 0); 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(--color-default); --radio-control-bg-hover: var(--color-default-hover); } .radio:hover :is(.radio-group--secondary .radio__control) { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .radio:hover :is(.radio-group--secondary .radio__control) { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .radio[data-hovered="true"] :is(.radio-group--secondary .radio__control) { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .radio[data-hovered="true"] :is(.radio-group--secondary .radio__control) { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .radio:not([aria-checked="true"]):not([data-selected="true"]) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before { background-color: var(--radio-control-bg); } .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before { background-color: var(--radio-control-bg-hover); } .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) :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) * 3); --tw-outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); outline-style: none; display: flex; position: relative; } .radio [data-slot="label"] { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .radio [data-slot="description"] { text-wrap: wrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .radio:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .radio[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .radio[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .radio__control { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-style: var(--tw-border-style); border-width: 1px; border-width: var(--border-width-field); 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); border-radius: 3.40282e38px; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; margin-top: 3px; display: inline-flex; position: relative; } .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .radio__control { cursor: var(--cursor-interactive); } .radio:focus-visible .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[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:hover .radio__control { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .radio:hover .radio__control { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .radio[data-hovered="true"] .radio__control { border-color: var(--field-border, var(--border)); } @supports (color: color-mix(in lab, red, red)) { .radio[data-hovered="true"] .radio__control { border-color: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%); } } .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) .radio__control .radio__indicator:empty:before { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) .radio__control .radio__indicator:empty:before { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) .radio__control .radio__indicator:empty:before { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) .radio__control .radio__indicator:empty:before { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .radio:active .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-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[aria-checked="true"] .radio__control { background-color: var(--accent); border-color: rgba(0, 0, 0, 0); } .radio[data-selected="true"] .radio__control { background-color: var(--accent); border-color: rgba(0, 0, 0, 0); } .radio:active[data-selected="true"] .radio__control { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .radio:active[data-selected="true"] .radio__control { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .radio[data-pressed="true"][data-selected="true"] .radio__control { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .radio[data-pressed="true"][data-selected="true"] .radio__control { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .radio[data-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; } .radio[data-invalid="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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; } .radio[aria-invalid="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][aria-checked="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; } .radio[data-invalid="true"][aria-checked="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][aria-checked="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][aria-checked="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][aria-checked="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][aria-checked="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][aria-checked="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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected="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; } .radio[data-invalid="true"][data-selected="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[data-invalid="true"][data-selected="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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][aria-checked="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; } .radio[aria-invalid="true"][aria-checked="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][aria-checked="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][aria-checked="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][aria-checked="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][aria-checked="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][aria-checked="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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][data-selected="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; } .radio[aria-invalid="true"][data-selected="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][data-selected="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][data-selected="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][data-selected="true"] .radio__control[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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][data-selected="true"] .radio__control: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .radio[aria-invalid="true"][data-selected="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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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: ""; background-color: var(--field-background, var(--default)); width: 100%; height: 100%; transition: scale .2s var(--ease-out), background-color .2s var(--ease-out); border-radius: 3.40282e38px; scale: 1; } .radio__indicator:empty:before:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .radio__indicator:empty:before:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .radio__indicator:empty:before:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .radio__indicator:empty:before:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .radio__indicator:empty:before:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .radio__indicator:empty:before:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .radio[aria-checked="true"] .radio__indicator:empty:before, .radio[data-selected="true"] .radio__indicator:empty:before { background-color: var(--accent-foreground); scale: .4286; } .radio[data-selected="true"][data-pressed="true"] .radio__indicator:empty:before { scale: .5714; } .radio__content { gap: calc(var(--spacing) * 0); flex-direction: column; display: flex; } .radio--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textfield { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .textfield[data-invalid="true"] [data-slot="description"] { display: none; } .textfield[aria-invalid="true"] [data-slot="description"] { display: none; } .textfield [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .textfield--full-width { width: 100%; } .textfield--full-width [data-slot="input"] { width: 100%; } .textfield--full-width [data-slot="textarea"] { width: 100%; } .search-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .search-field[data-invalid="true"] [data-slot="description"] { display: none; } .search-field[aria-invalid="true"] [data-slot="description"] { display: none; } .search-field [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .search-field [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .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(--color-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"] *) { transition-property: none; } .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .search-field__group:hover:not(:focus-within) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .search-field__group:hover:not(:focus-within) { border-color: var(--color-field-border-hover); } .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) { border-color: var(--color-field-border-hover); } } .search-field__group[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(--focus); --tw-ring-offset-width: 0px; --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; outline-style: none; } .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-width: 0px; --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; 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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field__group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field__group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field__group[data-invalid="true"] { background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .search-field__group[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .search-field__group[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); 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 { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .search-field__input::-webkit-search-decoration { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .search-field__group:has([data-slot="search-field-search-icon"]) .search-field__input { padding-left: calc(var(--spacing) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .search-field__group:has([slot="clear"]) .search-field__input { padding-right: calc(var(--spacing) * 2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .search-field__input:focus { --tw-outline-style: none; outline-style: none; } .search-field__input:focus-visible { --tw-outline-style: none; outline-style: none; } .search-field__search-icon { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 3); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; } .search-field__clear-button { margin-right: calc(var(--spacing) * 2); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; } .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 rgba(0, 0, 0, 0); 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(--color-default); --search-field-group-bg-hover: var(--color-default-hover); --search-field-group-bg-focus: var(--color-default); } @media (hover: hover) { .search-field--secondary .search-field__group:hover:not(:focus-within) { background-color: var(--search-field-group-bg-hover); } .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 { background-color: var(--search-field-group-bg-focus); } .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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field--secondary .search-field__group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field--secondary .search-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field--secondary .search-field__group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .search-field--secondary .search-field__group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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: rgba(0, 0, 0, 0); } .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(--color-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"] *) { transition-property: none; } .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .textarea:hover:not(:focus):not(:focus-visible) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .textarea:hover:not(:focus):not(:focus-visible) { border-color: var(--color-field-border-hover); } .textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { border-color: var(--color-field-border-hover); } } .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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea[data-invalid="true"] { background-color: var(--color-field-focus); } .textarea[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textarea[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textarea--secondary { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --textarea-bg-hover: var(--color-default-hover); --textarea-bg-focus: var(--color-default); } @media (hover: hover) { .textarea--secondary:hover:not(:focus):not(:focus-visible) { background-color: var(--textarea-bg-hover); } .textarea--secondary[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--textarea-bg-hover); } } .textarea--secondary:focus { background-color: var(--textarea-bg-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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea--secondary[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea--secondary[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .textarea--secondary[data-invalid="true"] { background-color: var(--textarea-bg-focus); } .textarea--full-width { width: 100%; } .calendar { width: calc(var(--spacing) * 63); max-width: 100%; container-type: inline-size; } .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); color: var(--accent); 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, ); border-radius: 3.40282e38px; justify-content: center; align-items: center; display: flex; } .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { background-color: var(--default); color: var(--accent); } .calendar__nav-button[data-hovered="true"] { background-color: var(--default); color: var(--accent); } } .calendar__nav-button:active { transform: scale(.95); } .calendar__nav-button[data-pressed="true"] { transform: scale(.95); } .calendar__nav-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; } .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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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__grid { grid-template-columns: repeat(7, 1fr); width: 100%; display: grid; } .calendar__grid[aria-readonly="true"] .calendar__cell { pointer-events: none; } .calendar__grid-header { display: contents; } .calendar__grid-header > tr { display: contents; } .calendar__grid-body { display: contents; } .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"] *) { transition-property: none; } .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(: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-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-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"] { color: var(--accent); } .calendar__cell[data-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } .calendar__cell:active { background-color: var(--default); transform: scale(.95); } .calendar__cell:active[data-selected="true"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar__cell:active[data-selected="true"] { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .calendar__cell[data-pressed="true"] { background-color: var(--default); transform: scale(.95); } .calendar__cell[data-pressed="true"][data-selected="true"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar__cell[data-pressed="true"][data-selected="true"] { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } @media (hover: hover) { .calendar__cell:hover:not([data-selected="true"]) { background-color: var(--default); } .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"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } .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); background-color: var(--muted); border-radius: 3.40282e38px; position: absolute; left: 50%; } [data-selected="true"] > .calendar__cell-indicator { background-color: var(--accent-foreground); } .range-calendar { width: calc(var(--spacing) * 63); max-width: 100%; container-type: inline-size; } .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); color: var(--accent); 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, ); border-radius: 3.40282e38px; justify-content: center; align-items: center; display: flex; } .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { background-color: var(--default); color: var(--accent); } .range-calendar__nav-button[data-hovered="true"] { background-color: var(--default); color: var(--accent); } } .range-calendar__nav-button:active { transform: scale(.95); } .range-calendar__nav-button[data-pressed="true"] { transform: scale(.95); } .range-calendar__nav-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; } .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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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__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 { display: contents; } .range-calendar__grid-header > tr { display: contents; } .range-calendar__grid-body { display: contents; } .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); 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, ); border-radius: 3.40282e38px; outline-style: none; margin-top: 2px; margin-bottom: 2px; position: relative; } .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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; 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, ); border-radius: 3.40282e38px; justify-content: center; align-items: center; display: flex; } .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(:focus) { z-index: 2; } .range-calendar__cell:focus-visible:not(:focus) .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-focus-visible="true"] { z-index: 2; } .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 { color: var(--accent); } .range-calendar__cell[data-selected="true"]:not([data-outside-month="true"]) { background-color: var(--accent); border-radius: 0; } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell[data-selected="true"]:not([data-outside-month="true"]) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .range-calendar__cell[data-selected="true"]:-webkit-any(td:first-child > *, [aria-disabled] + td > *):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-moz-any(td:first-child > *, [aria-disabled] + td > *):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-webkit-any(td:first-child > *, [aria-disabled] + td > *):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-moz-any(td:first-child > *, [aria-disabled] + td > *):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-webkit-any(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-moz-any(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-webkit-any(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-moz-any(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-webkit-any(td:last-child > *, td:has( + [aria-disabled]) > *):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-moz-any(td:last-child > *, td:has( + [aria-disabled]) > *):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-webkit-any(td:last-child > *, td:has( + [aria-disabled]) > *):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-moz-any(td:last-child > *, td:has( + [aria-disabled]) > *):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-radius: calc(var(--radius) * 1); } .range-calendar__cell[data-selected="true"]:-webkit-any(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-moz-any(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-webkit-any(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:-moz-any(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]) { z-index: 2; } .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]) .range-calendar__cell-button { background-color: var(--accent); color: var(--accent-foreground); } .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) { z-index: 2; } .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-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__cell:active .range-calendar__cell-button { scale: .9; } .range-calendar__cell:active[data-selection-start="true"] .range-calendar__cell-button { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell:active[data-selection-start="true"] .range-calendar__cell-button { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .range-calendar__cell:active[data-selection-end="true"] .range-calendar__cell-button { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell:active[data-selection-end="true"] .range-calendar__cell-button { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .range-calendar__cell[data-pressed="true"] .range-calendar__cell-button { scale: .9; } .range-calendar__cell[data-pressed="true"][data-selection-start="true"] .range-calendar__cell-button { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell[data-pressed="true"][data-selection-start="true"] .range-calendar__cell-button { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .range-calendar__cell[data-pressed="true"][data-selection-end="true"] .range-calendar__cell-button { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .range-calendar__cell[data-pressed="true"][data-selection-end="true"] .range-calendar__cell-button { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } @media (hover: hover) { .range-calendar__cell:hover:not([data-selected="true"]) .range-calendar__cell-button { background-color: var(--default); } .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(:-webkit-any([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(:-webkit-any([data-selection-start="true"], [data-selection-end="true"])) { background-color: color-mix(in oklab, var(--default) 20%, transparent); } } .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not(:-moz-any([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(:-moz-any([data-selection-start="true"], [data-selection-end="true"])) { background-color: color-mix(in oklab, var(--default) 20%, transparent); } } .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not(:is([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(:is([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"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } .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"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-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"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-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"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-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"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-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"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-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"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-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"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-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"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-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"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: calc(var(--radius) * 1); border-bottom-right-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"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-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"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-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"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: calc(var(--radius) * 1); border-bottom-left-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"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .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"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .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"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .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"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; } .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"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .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"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .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"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } .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); background-color: var(--muted); border-radius: 3.40282e38px; position: absolute; left: 50%; } [data-selected="true"] > .range-calendar__cell-indicator { background-color: var(--accent-foreground); } .calendar:has(.calendar-year-picker__year-grid) { position: relative; } .range-calendar:has(.calendar-year-picker__year-grid) { position: relative; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"] { will-change: opacity; transition: opacity .15s var(--ease-out), visibility 0s linear; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .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; } .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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) { .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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"] { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s var(--ease-out), visibility 0s linear .15s; } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { transition-property: none; } @media (prefers-reduced-motion: reduce) { .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .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; } .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"] *) { transition-property: none; } .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 { transition-property: none; } .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) { .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"] *)) { transition-property: none; } .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 { transition-property: none; } .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"] *) { transition-property: none; } .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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); transition: transform .15s var(--ease-out); } .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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); } .calendar-year-picker__year-grid { pointer-events: none; right: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); align-content: flex-start; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 1); opacity: 0; will-change: opacity; scrollbar-width: thin; scrollbar-color: oklch(0% 0 0 / .15) transparent; grid-template-columns: repeat(3, 1fr); display: grid; position: absolute; overflow-y: auto; } .calendar-year-picker__year-grid::-webkit-scrollbar { width: 6px; } .calendar-year-picker__year-grid::-webkit-scrollbar-track { background: none; } .calendar-year-picker__year-grid::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); background: color(display-p3 0 0 0 / .15); background: lab(0% 0 0 / .15); border-radius: 3px; } .calendar-year-picker__year-grid::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .25); background: color(display-p3 0 0 0 / .25); background: lab(0% 0 0 / .25); } :-webkit-any([data-theme="dark"], .dark) .calendar-year-picker__year-grid { scrollbar-color: oklch(100% 0 0 / .15) transparent; } :-webkit-any([data-theme="dark"], .dark) .calendar-year-picker__year-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background: color(display-p3 1 1 1 / .15); background: lab(100% 0 0 / .15); } :-webkit-any([data-theme="dark"], .dark) .calendar-year-picker__year-grid::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); background: color(display-p3 1 1 1 / .25); background: lab(100% 0 0 / .25); } :-moz-any([data-theme="dark"], .dark) .calendar-year-picker__year-grid { scrollbar-color: oklch(100% 0 0 / .15) transparent; } :-moz-any([data-theme="dark"], .dark) .calendar-year-picker__year-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background: color(display-p3 1 1 1 / .15); background: lab(100% 0 0 / .15); } :-moz-any([data-theme="dark"], .dark) .calendar-year-picker__year-grid::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); background: color(display-p3 1 1 1 / .25); background: lab(100% 0 0 / .25); } :is([data-theme="dark"], .dark) .calendar-year-picker__year-grid { scrollbar-color: oklch(100% 0 0 / .15) transparent; } :is([data-theme="dark"], .dark) .calendar-year-picker__year-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); background: color(display-p3 1 1 1 / .15); background: lab(100% 0 0 / .15); } :is([data-theme="dark"], .dark) .calendar-year-picker__year-grid::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); background: color(display-p3 1 1 1 / .25); background: lab(100% 0 0 / .25); } .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"] *) { transition-property: none; } .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { 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)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-outline-style: none; -webkit-user-select: none; -moz-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, ); border-radius: 3.40282e38px; 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"] *) { transition-property: none; } .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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:-webkit-any(:hover, [data-hovered="true"]):not([data-selected="true"]) { background-color: var(--default); color: var(--default-foreground); } .calendar-year-picker__year-cell:-moz-any(:hover, [data-hovered="true"]):not([data-selected="true"]) { background-color: var(--default); color: var(--default-foreground); } .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"] { background-color: var(--accent); color: var(--accent-foreground); } @media (hover: hover) and (pointer: fine) { .calendar-year-picker__year-cell[data-selected="true"]:-webkit-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar-year-picker__year-cell[data-selected="true"]:-webkit-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .calendar-year-picker__year-cell[data-selected="true"]:-moz-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar-year-picker__year-cell[data-selected="true"]:-moz-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .calendar-year-picker__year-cell[data-selected="true"]:is(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar-year-picker__year-cell[data-selected="true"]:is(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } } .calendar-year-picker__year-cell[aria-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } @media (hover: hover) and (pointer: fine) { .calendar-year-picker__year-cell[aria-selected="true"]:-webkit-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar-year-picker__year-cell[aria-selected="true"]:-webkit-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .calendar-year-picker__year-cell[aria-selected="true"]:-moz-any(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar-year-picker__year-cell[aria-selected="true"]:-moz-any(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .calendar-year-picker__year-cell[aria-selected="true"]:is(:hover, [data-hovered="true"]) { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .calendar-year-picker__year-cell[aria-selected="true"]:is(:hover, [data-hovered="true"]) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } } .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; } .date-field[data-invalid="true"] [data-slot="description"] { display: none; } .date-field[aria-invalid="true"] [data-slot="description"] { display: none; } .date-field [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .date-field [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .date-field--full-width { width: 100%; } .time-field { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } .time-field[data-invalid="true"] [data-slot="description"] { display: none; } .time-field[aria-invalid="true"] [data-slot="description"] { display: none; } .time-field [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .time-field [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .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(--color-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"] *) { transition-property: none; } .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .date-input-group:hover:not(:focus-within) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .date-input-group:hover:not(:focus-within) { border-color: var(--color-field-border-hover); } .date-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .date-input-group[data-hovered="true"]:not([data-focus-within="true"]) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .date-input-group[data-hovered="true"]:not([data-focus-within="true"]) { border-color: var(--color-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"])) { --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: 0px; --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; outline-style: none; } .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-width: 0px; --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; 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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group[data-invalid="true"] { background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .date-input-group[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); 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 { padding-left: calc(var(--spacing) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .date-input-group:has([data-slot="date-input-group-suffix"]) .date-input-group__input { padding-right: calc(var(--spacing) * 2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="start"] { padding-right: calc(var(--spacing) * 0); flex: none; } .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="end"] { padding-left: calc(var(--spacing) * 0); } .date-input-group__input:focus { --tw-outline-style: none; outline-style: none; } .date-input-group__input:focus-visible { --tw-outline-style: none; outline-style: none; } .date-input-group__input-container { scrollbar-width: none; flex: 1; align-items: center; width: -moz-fit-content; width: fit-content; display: flex; overflow-x: auto; overflow-y: clip; } .date-input-group__input-container::-webkit-scrollbar { display: none; } .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 { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .date-input-group__segment:focus { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .date-input-group__segment:focus { color: var(--accent); } .date-input-group__segment[data-focused="true"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .date-input-group__segment[data-focused="true"] { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .date-input-group__segment[data-focused="true"] { color: var(--accent); } .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 { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .date-input-group__segment[data-invalid="true"]:focus { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } } .date-input-group__segment[data-invalid="true"]:focus { color: var(--danger); } .date-input-group__segment[data-invalid="true"][data-focused="true"] { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .date-input-group__segment[data-invalid="true"][data-focused="true"] { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } } .date-input-group__segment[data-invalid="true"][data-focused="true"] { color: var(--danger); } .date-input-group__prefix { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .date-input-group__suffix { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); flex-shrink: 0; align-items: center; display: flex; } .date-input-group--secondary { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --date-input-group-bg-hover: var(--color-default-hover); --date-input-group-bg-focus: var(--color-default); } @media (hover: hover) { .date-input-group--secondary:hover:not(:focus-within) { background-color: var(--date-input-group-bg-hover); } .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 { background-color: var(--date-input-group-bg-focus); } .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 { --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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group--secondary[data-invalid="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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group--secondary[data-invalid="true"][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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .date-input-group--secondary[data-invalid="true"]: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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: rgba(0, 0, 0, 0); } .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 { pointer-events: auto; } .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"] *) { transition-property: none; } .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-picker__trigger:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-picker__trigger[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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 { max-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); overflow-x: hidden; overflow-y: auto; } .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .date-picker__popover { box-shadow: var(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); } .date-picker__popover::-webkit-scrollbar { display: none; } .date-picker__popover { -ms-overflow-style: none; scrollbar-width: none; } .date-picker__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: ease; } .date-picker__popover[data-exiting="true"] { will-change: opacity, transform; } .date-picker__popover[data-entering="true"] { will-change: opacity, transform; } .date-range-picker { gap: calc(var(--spacing) * 1); flex-direction: column; display: inline-flex; } .date-range-picker .date-input-group__suffix { pointer-events: auto; } .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"] *) { transition-property: none; } .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .date-range-picker__trigger[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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; -moz-user-select: none; user-select: none; } .date-range-picker__popover { max-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); overflow-x: hidden; overflow-y: auto; } .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); } .date-range-picker__popover::-webkit-scrollbar { display: none; } .date-range-picker__popover { -ms-overflow-style: none; scrollbar-width: none; } .date-range-picker__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: ease; } .date-range-picker__popover[data-exiting="true"] { will-change: opacity, transform; } .date-range-picker__popover[data-entering="true"] { will-change: opacity, transform; } .card { gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 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); flex-direction: column; display: flex; position: relative; overflow: hidden; } .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 rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0); 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: left; 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-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; border-radius: 4px; 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(--surface); } @supports (color: color-mix(in lab, red, red)) { .separator--secondary { background-color: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); } } .separator--tertiary { background-color: var(--surface); } @supports (color: color-mix(in lab, red, red)) { .separator--tertiary { background-color: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } .separator__container { align-items: center; gap: calc(var(--spacing) * 3); display: flex; } .separator__container--horizontal { flex-direction: row; width: 100%; } .separator__container--vertical { flex-direction: column; justify-content: center; height: 100%; } .separator__line { flex-grow: 1; flex-shrink: 0; } .separator__content { text-align: center; white-space: nowrap; color: var(--muted); justify-content: center; align-items: center; display: inline-flex; } .separator__content--horizontal, .separator__content--vertical { text-align: center; } .surface { color: var(--foreground); position: relative; } .surface--transparent { background-color: rgba(0, 0, 0, 0); } .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); background-color: var(--default); border-radius: 3.40282e38px; 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"] *) { transition-property: none; } .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .avatar--sm { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .avatar--lg { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .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); } .avatar__fallback--default { color: var(--default-foreground); } .avatar__fallback--success { color: var(--success); } .avatar__fallback--warning { color: var(--warning); } .avatar__fallback--danger { color: var(--danger); } .avatar--soft { background-color: rgba(0, 0, 0, 0); } .avatar--soft .avatar__fallback--accent { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .avatar--soft .avatar__fallback--accent { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .avatar--soft .avatar__fallback--accent { color: var(--accent); } .avatar--soft .avatar__fallback--success { background-color: var(--success); } @supports (color: color-mix(in lab, red, red)) { .avatar--soft .avatar__fallback--success { background-color: color-mix(in oklab, var(--success) 15%, transparent); } } .avatar--soft .avatar__fallback--success { color: var(--success); } .avatar--soft .avatar__fallback--warning { background-color: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .avatar--soft .avatar__fallback--warning { background-color: color-mix(in oklab, var(--warning) 15%, transparent); } } .avatar--soft .avatar__fallback--warning { color: var(--warning); } .avatar--soft .avatar__fallback--danger { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .avatar--soft .avatar__fallback--danger { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } } .avatar--soft .avatar__fallback--danger { color: var(--danger); } .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); } .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .alert-dialog__trigger:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .alert-dialog__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .alert-dialog__trigger:active { transform: scale(.97); } .alert-dialog__trigger[data-pressed="true"] { transform: scale(.97); } .alert-dialog__backdrop { inset: calc(var(--spacing) * 0); z-index: 50; 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"] { will-change: opacity; } .alert-dialog__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .alert-dialog__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .alert-dialog__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .alert-dialog__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .alert-dialog__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .alert-dialog__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__backdrop[data-entering="true"] { will-change: opacity; } .alert-dialog__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .alert-dialog__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .alert-dialog__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .alert-dialog__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .alert-dialog__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .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: rgba(0, 0, 0, 0); } .alert-dialog__backdrop--opaque { background-color: rgba(0, 0, 0, .5); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__backdrop--opaque { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .alert-dialog__backdrop--opaque:is(.dark *) { background-color: rgba(0, 0, 0, .6); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__backdrop--opaque:is(.dark *) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .alert-dialog__backdrop--blur { background-color: rgba(0, 0, 0, .5); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__backdrop--blur { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .alert-dialog__backdrop--blur { --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__backdrop--blur:is(.dark *) { background-color: rgba(0, 0, 0, .6); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__backdrop--blur:is(.dark *) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .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: -moz-fit-content; width: fit-content; } .alert-dialog__container { 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"] { will-change: opacity, transform; } .alert-dialog__container[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .alert-dialog__container[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .alert-dialog__container[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .alert-dialog__container[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .alert-dialog__container[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .alert-dialog__container[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__container[data-entering="true"] { will-change: opacity, transform; } .alert-dialog__container[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .alert-dialog__container[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .alert-dialog__container[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .alert-dialog__container[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .alert-dialog__container[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .alert-dialog__container[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .alert-dialog__dialog { border-radius: calc(var(--radius) * 3); 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; padding: calc(var(--spacing) * 6); pointer-events: auto; outline-style: none; flex-direction: column; display: flex; position: relative; overflow: hidden; } .alert-dialog__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .alert-dialog__dialog[data-placement="auto"] { margin-top: auto; margin-bottom: auto; } } .alert-dialog__dialog[data-placement="center"] { margin-top: auto; margin-bottom: 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); -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 3.40282e38px; 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); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__icon--accent { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } .alert-dialog__icon--accent { color: var(--accent); } .alert-dialog__icon--success { background-color: var(--success); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__icon--success { background-color: color-mix(in oklab, var(--success) 15%, transparent); } } .alert-dialog__icon--success { color: var(--success); } .alert-dialog__icon--warning { background-color: var(--warning); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__icon--warning { background-color: color-mix(in oklab, var(--warning) 15%, transparent); } } .alert-dialog__icon--warning { color: var(--warning); } .alert-dialog__icon--danger { background-color: var(--danger); } @supports (color: color-mix(in lab, red, red)) { .alert-dialog__icon--danger { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } } .alert-dialog__icon--danger { color: var(--danger); } .alert-dialog__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-block: calc(var(--spacing) * 0); -webkit-overflow-scrolling: touch; flex: 1; 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 { top: calc(var(--spacing) * 4); right: 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); } .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .drawer__trigger:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .drawer__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .drawer__trigger:active { transform: scale(.97); } .drawer__trigger[data-pressed="true"] { transform: scale(.97); } .drawer__backdrop { inset: calc(var(--spacing) * 0); z-index: 50; height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; display: flex; position: fixed; } .drawer__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: .2s; --tw-ease: var(--ease-out); transition-duration: .2s; transition-timing-function: var(--ease-out); --tw-enter-opacity: 0; } .drawer__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: .2s; --tw-ease: var(--ease-out); transition-duration: .2s; transition-timing-function: var(--ease-out); --tw-exit-opacity: 0; } .drawer__backdrop[data-exiting="true"] { will-change: opacity; } .drawer__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .drawer__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .drawer__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .drawer__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .drawer__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .drawer__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .drawer__backdrop[data-entering="true"] { will-change: opacity; } .drawer__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .drawer__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .drawer__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .drawer__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .drawer__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .drawer__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .drawer__backdrop--transparent { background-color: rgba(0, 0, 0, 0); } .drawer__backdrop--opaque { background-color: rgba(0, 0, 0, .5); } @supports (color: color-mix(in lab, red, red)) { .drawer__backdrop--opaque { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .drawer__backdrop--opaque:is(.dark *) { background-color: rgba(0, 0, 0, .6); } @supports (color: color-mix(in lab, red, red)) { .drawer__backdrop--opaque:is(.dark *) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .drawer__backdrop--blur { background-color: rgba(0, 0, 0, .5); } @supports (color: color-mix(in lab, red, red)) { .drawer__backdrop--blur { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .drawer__backdrop--blur { --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__backdrop--blur:is(.dark *) { background-color: rgba(0, 0, 0, .6); } @supports (color: color-mix(in lab, red, red)) { .drawer__backdrop--blur:is(.dark *) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .drawer__content { pointer-events: none; height: var(--visual-viewport-height); width: 100%; min-width: calc(var(--spacing) * 0); } .drawer__content--bottom { inset-inline: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); flex-direction: column; justify-content: flex-end; display: flex; position: fixed; } .drawer__content--bottom[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: .3s; --tw-ease: var(--ease-out); transition-duration: .3s; transition-timing-function: var(--ease-out); --tw-enter-translate-y: calc(1 * 100%); } .drawer__content--bottom[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: .2s; --tw-ease: var(--ease-in); transition-duration: .2s; transition-timing-function: var(--ease-in); --tw-exit-translate-y: calc(1 * 100%); } .drawer__content--top { inset-inline: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); flex-direction: column; justify-content: flex-start; display: flex; position: fixed; } .drawer__content--top[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: .3s; --tw-ease: var(--ease-out); transition-duration: .3s; transition-timing-function: var(--ease-out); --tw-enter-translate-y: calc(1 * -100%); } .drawer__content--top[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: .2s; --tw-ease: var(--ease-in); transition-duration: .2s; transition-timing-function: var(--ease-in); --tw-exit-translate-y: calc(1 * -100%); } .drawer__content--left { inset-block: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); flex-direction: row; justify-content: flex-start; display: flex; position: fixed; } .drawer__content--left[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: .3s; --tw-ease: var(--ease-out); transition-duration: .3s; transition-timing-function: var(--ease-out); --tw-enter-translate-x: calc(1 * -100%); } .drawer__content--left[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: .2s; --tw-ease: var(--ease-in); transition-duration: .2s; transition-timing-function: var(--ease-in); --tw-exit-translate-x: calc(1 * -100%); } .drawer__content--right { inset-block: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0); flex-direction: row; justify-content: flex-end; display: flex; position: fixed; } .drawer__content--right[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: .3s; --tw-ease: var(--ease-out); transition-duration: .3s; transition-timing-function: var(--ease-out); --tw-enter-translate-x: calc(1 * 100%); } .drawer__content--right[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: .2s; --tw-ease: var(--ease-in); transition-duration: .2s; transition-timing-function: var(--ease-in); --tw-exit-translate-x: calc(1 * 100%); } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"] { will-change: transform; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"] { will-change: transform; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } :is(.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right)[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .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; outline-style: none; flex-direction: column; display: flex; position: relative; } .drawer__dialog[data-placement="bottom"] { border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); width: 100%; max-height: 85vh; } .drawer__dialog[data-placement="top"] { border-bottom-right-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); width: 100%; max-height: 85vh; } .drawer__dialog[data-placement="left"] { border-top-right-radius: calc(var(--radius) * 2); border-bottom-right-radius: calc(var(--radius) * 2); height: 100%; width: calc(var(--spacing) * 80); max-width: 85vw; } @media (min-width: 40rem) { .drawer__dialog[data-placement="left"] { width: calc(var(--spacing) * 96); } } .drawer__dialog[data-placement="right"] { border-top-left-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); height: 100%; width: calc(var(--spacing) * 80); max-width: 85vw; } @media (min-width: 40rem) { .drawer__dialog[data-placement="right"] { width: calc(var(--spacing) * 96); } } .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); 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); background-color: var(--separator); border-radius: 3.40282e38px; } .drawer__close-trigger { top: calc(var(--spacing) * 4); right: 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); } .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .modal__trigger:focus-visible:not(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .modal__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .modal__trigger:active { transform: scale(.97); } .modal__trigger[data-pressed="true"] { transform: scale(.97); } .modal__backdrop { inset: calc(var(--spacing) * 0); z-index: 50; 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"] { will-change: opacity; } .modal__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .modal__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .modal__backdrop[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .modal__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .modal__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .modal__backdrop[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__backdrop[data-entering="true"] { will-change: opacity; } .modal__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .modal__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .modal__backdrop[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .modal__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .modal__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .modal__backdrop[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__backdrop--transparent { background-color: rgba(0, 0, 0, 0); } .modal__backdrop--opaque { background-color: rgba(0, 0, 0, .5); } @supports (color: color-mix(in lab, red, red)) { .modal__backdrop--opaque { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .modal__backdrop--opaque:is(.dark *) { background-color: rgba(0, 0, 0, .6); } @supports (color: color-mix(in lab, red, red)) { .modal__backdrop--opaque:is(.dark *) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .modal__backdrop--blur { background-color: rgba(0, 0, 0, .5); } @supports (color: color-mix(in lab, red, red)) { .modal__backdrop--blur { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .modal__backdrop--blur { --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__backdrop--blur:is(.dark *) { background-color: rgba(0, 0, 0, .6); } @supports (color: color-mix(in lab, red, red)) { .modal__backdrop--blur:is(.dark *) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .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: -moz-fit-content; width: fit-content; } .modal__container { 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"] { will-change: opacity, transform; } .modal__container[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .modal__container[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .modal__container[data-exiting="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .modal__container[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .modal__container[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .modal__container[data-exiting="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__container[data-entering="true"] { will-change: opacity, transform; } .modal__container[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; } .modal__container[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { animation: none; } .modal__container[data-entering="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after { animation: none; } @media (prefers-reduced-motion: reduce) { .modal__container[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; } .modal__container[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { animation: none; } .modal__container[data-entering="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { animation: none; } } .modal__container--scroll-outside { pointer-events: auto; -webkit-overflow-scrolling: touch; 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 { border-radius: calc(var(--radius) * 3); 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; 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-top: auto; margin-bottom: auto; } } .modal__dialog[data-placement="center"] { margin-top: auto; margin-bottom: auto; } .modal__dialog[data-placement="bottom"] { margin-top: auto; } .modal__dialog[data-placement="top"] { margin-top: calc(var(--spacing) * 0); } .modal__dialog--scroll-inside { overflow: hidden; } .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 rgba(0, 0, 0, 0); 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); -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 3.40282e38px; 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-block: calc(var(--spacing) * 0); flex: 1; line-height: 1.43; } .modal__body--scroll-inside { -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 { top: calc(var(--spacing) * 4); right: 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); border-radius: calc(var(--radius) * 3); background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); box-shadow: var(--shadow-overlay); } .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; transition-duration: .1s; transition-timing-function: ease; } .popover[data-exiting="true"] { will-change: opacity, transform; } .popover[data-entering="true"] { 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); } .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(: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-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[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 { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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); border-radius: calc(var(--radius) * 1.5); background-color: var(--overlay); 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)); word-break: break-all; box-shadow: var(--shadow-overlay); } .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; transition-duration: .1s; transition-timing-function: ease; } .tooltip[data-exiting="true"] { will-change: opacity, transform; } .tooltip[data-entering="true"] { 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); } .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; } .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after { transition-property: none; } } .tooltip__trigger:focus-visible:not(: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-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; } .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; } .combo-box[data-invalid="true"] [data-slot="description"] { display: none; } .combo-box[aria-invalid="true"] [data-slot="description"] { display: none; } .combo-box [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .combo-box [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .combo-box [data-slot="input"] { min-width: calc(var(--spacing) * 0); flex: 1; } .combo-box [data-slot="input"]:has( + .combo-box__trigger) { padding-right: calc(var(--spacing) * 7); } .combo-box [data-slot="input"]: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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .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-width: 0px; --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; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .combo-box [data-slot="input"]:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .combo-box [data-slot="input"][data-disabled] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .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__trigger { top: 50%; right: calc(var(--spacing) * 0); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); height: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); cursor: pointer; padding-right: calc(var(--spacing) * 2); color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-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, visibility, 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; background-color: rgba(0, 0, 0, 0); border-style: none; outline-style: none; flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .15s; display: flex; position: absolute; } @media (hover: hover) { .combo-box__trigger:hover { color: var(--field-foreground, var(--foreground)); } .combo-box__trigger[data-hovered="true"] { color: var(--field-foreground, var(--foreground)); } } .combo-box__trigger:focus-visible:not(: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-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-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 { cursor: not-allowed; opacity: .5; } .combo-box__trigger[data-disabled] { cursor: not-allowed; opacity: .5; } .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"] *) { transition-property: none; } .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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); overscroll-behavior: contain; border-radius: calc(var(--radius) * 3); background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); box-shadow: var(--shadow-overlay); overflow-y: auto; } .combo-box__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: ease; } .combo-box__popover[data-exiting="true"] { will-change: opacity, transform; } .combo-box__popover[data-entering="true"] { 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; } .select[data-invalid="true"] [data-slot="description"] { display: none; } .select[aria-invalid="true"] [data-slot="description"] { display: none; } .select [data-slot="label"] { width: -moz-fit-content; width: fit-content; } .select [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } .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; -moz-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"] *) { transition-property: none; } .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(--color-field-border); } .select__trigger:has(.select__indicator) { padding-right: calc(var(--spacing) * 7); } @media (hover: hover) { .select__trigger:hover { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .select__trigger:hover { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .select__trigger:hover { border-color: var(--color-field-border-hover); } .select__trigger[data-hovered="true"] { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .select__trigger[data-hovered="true"] { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .select__trigger[data-hovered="true"] { border-color: var(--color-field-border-hover); } } .select__trigger:focus-visible:not(: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-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; } .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; } .select[data-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; } .select[data-invalid="true"] .select__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-invalid="true"] .select__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-invalid="true"] .select__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-invalid="true"] .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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-invalid="true"] .select__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[data-invalid="true"] .select__trigger { background-color: var(--color-field-focus); } .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; } .select[aria-invalid="true"] .select__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[aria-invalid="true"] .select__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[aria-invalid="true"] .select__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[aria-invalid="true"] .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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[aria-invalid="true"] .select__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .select[aria-invalid="true"] .select__trigger { background-color: var(--color-field-focus); } .select__trigger:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .select__trigger[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .select__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .select--secondary .select__trigger { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --select-trigger-bg-hover: var(--color-default-hover); --select-trigger-bg-focus: var(--color-default); } @media (hover: hover) { .select--secondary .select__trigger:hover { background-color: var(--select-trigger-bg-hover); } .select--secondary .select__trigger[data-hovered="true"] { background-color: var(--select-trigger-bg-hover); } } .select--secondary .select__trigger:focus-visible:not(:focus) { background-color: var(--select-trigger-bg-focus); } .select--secondary .select__trigger[data-focus-visible="true"] { background-color: var(--select-trigger-bg-focus); } .select__value { text-align: left; 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__indicator { inset-block: calc(var(--spacing) * 0); right: calc(var(--spacing) * 2); color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-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, visibility, 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-top: auto; margin-bottom: auto; transition-duration: .15s; display: flex; position: absolute; } .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); overscroll-behavior: contain; border-radius: calc(var(--radius) * 3); background-color: var(--overlay); padding: calc(var(--spacing) * 0); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); box-shadow: var(--shadow-overlay); overflow-y: auto; } .select__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: ease; } .select__popover[data-exiting="true"] { will-change: opacity, transform; } .select__popover[data-entering="true"] { 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"] { transition-property: none; } .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; -moz-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"] *) { transition-property: none; } .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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(--color-field-border); } .autocomplete__trigger:has(.autocomplete__indicator) { padding-right: calc(var(--spacing) * 7); } @media (hover: hover) { .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)) { border-color: var(--color-field-border-hover); } .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--field-background, var(--default)); } @supports (color: color-mix(in lab, red, red)) { .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%); } } .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { border-color: var(--color-field-border-hover); } } .autocomplete__trigger:focus-visible:not(: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-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; } .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(--color-field-border-focus); background-color: var(--color-field-focus); outline-style: none; } .autocomplete[data-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; } .autocomplete[data-invalid="true"] .autocomplete__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-invalid="true"] .autocomplete__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-invalid="true"] .autocomplete__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-invalid="true"] .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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-invalid="true"] .autocomplete__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[data-invalid="true"] .autocomplete__trigger { background-color: var(--color-field-focus); } .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; } .autocomplete[aria-invalid="true"] .autocomplete__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[aria-invalid="true"] .autocomplete__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[aria-invalid="true"] .autocomplete__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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[aria-invalid="true"] .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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[aria-invalid="true"] .autocomplete__trigger: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(--danger); --tw-ring-offset-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .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-width: 0px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .autocomplete[aria-invalid="true"] .autocomplete__trigger { background-color: var(--color-field-focus); } .autocomplete__trigger:disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .autocomplete__trigger[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .autocomplete__trigger[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .autocomplete--secondary .autocomplete__trigger { --tw-shadow: 0 0 rgba(0, 0, 0, 0); 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(--color-default); --autocomplete-trigger-bg-hover: var(--color-default-hover); --autocomplete-trigger-bg-focus: var(--color-default); } @media (hover: hover) { .autocomplete--secondary .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--autocomplete-trigger-bg-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(:focus) { background-color: var(--autocomplete-trigger-bg-focus); } .autocomplete--secondary .autocomplete__trigger[data-focus-visible="true"] { background-color: var(--autocomplete-trigger-bg-focus); } .autocomplete__value { text-align: left; 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); right: calc(var(--spacing) * 2); color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-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, visibility, 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-top: auto; margin-bottom: auto; transition-duration: .15s; display: flex; position: absolute; } .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 { min-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); scroll-padding-block: calc(var(--spacing) * 1); overscroll-behavior: contain; border-radius: calc(var(--radius) * 3); 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)); box-shadow: var(--shadow-overlay); overflow-y: auto; } .autocomplete__popover:focus-visible:not(:focus) { --tw-outline-style: none; outline-style: none; } .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; transition-duration: .1s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); } .autocomplete__popover[data-exiting="true"] { will-change: opacity, transform; } .autocomplete__popover[data-entering="true"] { 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"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } .autocomplete__popover [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] { transition-property: none; } .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; } .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; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; margin-right: calc(var(--spacing) * 0); 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: rgba(0, 0, 0, 0); flex-shrink: 0; justify-content: center; align-self: center; align-items: center; 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"] *) { transition-property: none; } .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before { transition-property: none; } .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"] *)) { transition-property: none; } .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before { transition-property: none; } .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 { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .autocomplete__clear-button:hover { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } .autocomplete__clear-button[data-hovered="true"] { background-color: var(--default); } @supports (color: color-mix(in lab, red, red)) { .autocomplete__clear-button[data-hovered="true"] { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } .autocomplete__clear-button:active { transform: scale(.93); } .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; } :where(.kbd > :not(:last-child)):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-right: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } :where(.kbd > :not(:last-child)):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-right: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } :where(.kbd > :not(:last-child)):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) { margin-left: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-right: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } :where(.kbd > :not(:last-child)):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-left: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } :where(.kbd > :not(:last-child)):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-left: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } :where(.kbd > :not(:last-child)):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { margin-right: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-left: 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(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) { --tw-space-x-reverse: 1; } :where(.kbd:where(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) { --tw-space-x-reverse: 1; } :where(.kbd:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [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: rgba(0, 0, 0, 0); } .scroll-shadow { --scroll-shadow-size: 40px; position: relative; } .scroll-shadow--vertical { overflow-y: auto; } .scroll-shadow--horizontal { overflow-x: auto; } .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] { --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); mask-image: linear-gradient(var(--scroll-linear-gradient)); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); } .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] { --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); mask-image: linear-gradient(var(--scroll-linear-gradient)); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); } .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; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); mask-image: linear-gradient(var(--scroll-linear-gradient)); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); } .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] { --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); mask-image: linear-gradient(var(--scroll-linear-gradient)); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); } .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] { --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); mask-image: linear-gradient(var(--scroll-linear-gradient)); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); } .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; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); mask-image: linear-gradient(var(--scroll-linear-gradient)); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)); } .scroll-shadow--hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .scroll-shadow--hide-scrollbar::-webkit-scrollbar { display: none; } } @layer utilities { .pointer-events-auto { pointer-events: auto; } .pointer-events-none { pointer-events: none; } .sr-only { clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .fixed { position: fixed; } .relative { position: relative; } .sticky { position: -webkit-sticky; position: sticky; } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .top-0 { top: calc(var(--spacing) * 0); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .z-20 { z-index: 20; } .z-40 { z-index: 40; } .mx-auto { margin-left: auto; margin-right: auto; } .my-2 { margin-block: calc(var(--spacing) * 2); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .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; } .h-6 { height: calc(var(--spacing) * 6); } .h-16 { height: calc(var(--spacing) * 16); } .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-56 { min-height: calc(var(--spacing) * 56); } .min-h-\[20vh\] { min-height: 20vh; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .\!w-full { width: 100% !important; } .w-6 { width: calc(var(--spacing) * 6); } .w-40 { width: calc(var(--spacing) * 40); } .w-auto { width: auto; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .max-w-3xl { max-width: var(--container-3xl); } .max-w-6xl { max-width: var(--container-6xl); } .max-w-\[1440px\] { max-width: 1440px; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .min-w-\[1100px\] { min-width: 1100px; } .flex-1 { flex: 1; } .cursor-pointer { cursor: pointer; } .resize { resize: both; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-8 { gap: calc(var(--spacing) * 8); } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-top: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-bottom: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-top: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-bottom: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-top: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-bottom: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .rounded-2xl { border-radius: calc(var(--radius) * 2); } .rounded-3xl { border-radius: calc(var(--radius) * 3); } .rounded-\[2rem\] { border-radius: 2rem; } .rounded-\[24px\] { border-radius: 24px; } .rounded-\[28px\] { border-radius: 28px; } .rounded-\[32px\] { border-radius: 32px; } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: calc(var(--radius) * 1); } .rounded-xl { border-radius: calc(var(--radius) * 1.5); } .border { border-style: var(--tw-border-style); border-width: 1px; } .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-dashed { --tw-border-style: dashed; border-style: dashed; } .border-amber-200\/70 { border-color: rgba(254, 230, 133, .7); } @supports (color: color-mix(in lab, red, red)) { .border-amber-200\/70 { border-color: color-mix(in oklab, var(--color-amber-200) 70%, transparent); } } .border-emerald-200 { border-color: var(--color-emerald-200); } .border-rose-300\/30 { border-color: rgba(255, 162, 174, .3); } @supports (color: color-mix(in lab, red, red)) { .border-rose-300\/30 { border-color: color-mix(in oklab, var(--color-rose-300) 30%, transparent); } } .border-sky-300 { border-color: var(--color-sky-300); } .border-sky-300\/30 { border-color: rgba(119, 212, 255, .3); } @supports (color: color-mix(in lab, red, red)) { .border-sky-300\/30 { border-color: color-mix(in oklab, var(--color-sky-300) 30%, transparent); } } .border-sky-300\/40 { border-color: rgba(119, 212, 255, .4); } @supports (color: color-mix(in lab, red, red)) { .border-sky-300\/40 { border-color: color-mix(in oklab, var(--color-sky-300) 40%, transparent); } } .border-slate-200 { border-color: var(--color-slate-200); } .border-slate-200\/80 { border-color: rgba(226, 232, 240, .8); } @supports (color: color-mix(in lab, red, red)) { .border-slate-200\/80 { border-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent); } } .border-slate-300 { border-color: var(--color-slate-300); } .border-transparent { border-color: rgba(0, 0, 0, 0); } .border-white\/8 { border-color: rgba(255, 255, 255, .08); } @supports (color: color-mix(in lab, red, red)) { .border-white\/8 { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .border-white\/10 { border-color: rgba(255, 255, 255, .1); } @supports (color: color-mix(in lab, red, red)) { .border-white\/10 { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/12 { border-color: rgba(255, 255, 255, .12); } @supports (color: color-mix(in lab, red, red)) { .border-white\/12 { border-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .border-white\/15 { border-color: rgba(255, 255, 255, .15); } @supports (color: color-mix(in lab, red, red)) { .border-white\/15 { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .bg-amber-100 { background-color: var(--color-amber-100); } .bg-amber-400\/15 { background-color: rgba(252, 187, 0, .15); } @supports (color: color-mix(in lab, red, red)) { .bg-amber-400\/15 { background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent); } } .bg-amber-500 { background-color: var(--color-amber-500); } .bg-background { background-color: var(--background); } .bg-emerald-50 { background-color: var(--color-emerald-50); } .bg-rose-300\/10 { background-color: rgba(255, 162, 174, .1); } @supports (color: color-mix(in lab, red, red)) { .bg-rose-300\/10 { background-color: color-mix(in oklab, var(--color-rose-300) 10%, transparent); } } .bg-sky-300\/10 { background-color: rgba(119, 212, 255, .1); } @supports (color: color-mix(in lab, red, red)) { .bg-sky-300\/10 { background-color: color-mix(in oklab, var(--color-sky-300) 10%, transparent); } } .bg-sky-300\/12 { background-color: rgba(119, 212, 255, .12); } @supports (color: color-mix(in lab, red, red)) { .bg-sky-300\/12 { background-color: color-mix(in oklab, var(--color-sky-300) 12%, transparent); } } .bg-sky-300\/15 { background-color: rgba(119, 212, 255, .15); } @supports (color: color-mix(in lab, red, red)) { .bg-sky-300\/15 { background-color: color-mix(in oklab, var(--color-sky-300) 15%, transparent); } } .bg-sky-400\/15 { background-color: rgba(0, 188, 254, .15); } @supports (color: color-mix(in lab, red, red)) { .bg-sky-400\/15 { background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent); } } .bg-slate-950 { background-color: var(--color-slate-950); } .bg-slate-950\/35 { background-color: rgba(2, 6, 24, .35); } @supports (color: color-mix(in lab, red, red)) { .bg-slate-950\/35 { background-color: color-mix(in oklab, var(--color-slate-950) 35%, transparent); } } .bg-slate-950\/70 { background-color: rgba(2, 6, 24, .7); } @supports (color: color-mix(in lab, red, red)) { .bg-slate-950\/70 { background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent); } } .bg-slate-950\/90 { background-color: rgba(2, 6, 24, .9); } @supports (color: color-mix(in lab, red, red)) { .bg-slate-950\/90 { background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent); } } .bg-transparent { background-color: rgba(0, 0, 0, 0); } .bg-white { background-color: var(--color-white); } .bg-white\/3 { background-color: rgba(255, 255, 255, .03); } @supports (color: color-mix(in lab, red, red)) { .bg-white\/3 { background-color: color-mix(in oklab, var(--color-white) 3%, transparent); } } .bg-white\/5 { background-color: rgba(255, 255, 255, .05); } @supports (color: color-mix(in lab, red, red)) { .bg-white\/5 { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/6 { background-color: rgba(255, 255, 255, .06); } @supports (color: color-mix(in lab, red, red)) { .bg-white\/6 { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .bg-white\/80 { background-color: rgba(255, 255, 255, .8); } @supports (color: color-mix(in lab, red, red)) { .bg-white\/80 { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .bg-white\/90 { background-color: rgba(255, 255, 255, .9); } @supports (color: color-mix(in lab, red, red)) { .bg-white\/90 { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-\[radial-gradient\(circle_at_top\,_\#fef3c7\,_\#fff7ed_42\%\,_\#fff_72\%\)\] { background-image: radial-gradient(circle at top, #fef3c7, #fff7ed 42%, #fff 72%); } .from-\[\#00b7fa\] { --tw-gradient-from: #00b7fa; --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)); } .from-\[\#5EA2EF\] { --tw-gradient-from: #5ea2ef; --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)); } .from-\[\#6FEE8D\] { --tw-gradient-from: #6fee8d; --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)); } .from-\[\#FF1CF7\] { --tw-gradient-from: #ff1cf7; --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)); } .from-\[\#FF72E1\] { --tw-gradient-from: #ff72e1; --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)); } .from-\[\#FF705B\] { --tw-gradient-from: #ff705b; --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)); } .to-\[\#01cfea\] { --tw-gradient-to: #01cfea; --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)); } .to-\[\#17c964\] { --tw-gradient-to: #17c964; --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)); } .to-\[\#0072F5\] { --tw-gradient-to: #0072f5; --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)); } .to-\[\#F54C7A\] { --tw-gradient-to: #f54c7a; --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)); } .to-\[\#FFB457\] { --tw-gradient-to: #ffb457; --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)); } .to-\[\#b249f8\] { --tw-gradient-to: #b249f8; --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)); } .bg-clip-text { -webkit-background-clip: text; background-clip: text; } .p-2 { padding: calc(var(--spacing) * 2); } .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-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-px { padding-left: 1px; padding-right: 1px; } .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-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-24 { padding-block: calc(var(--spacing) * 24); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .text-center { text-align: center; } .text-left { text-align: left; } .font-sans { font-family: var(--font-sans); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--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-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[2\.3rem\] { font-size: 2.3rem; } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[0\.2em\] { --tw-tracking: .2em; letter-spacing: .2em; } .tracking-\[0\.18em\] { --tw-tracking: .18em; letter-spacing: .18em; } .tracking-\[0\.24em\] { --tw-tracking: .24em; letter-spacing: .24em; } .tracking-\[0\.26em\] { --tw-tracking: .26em; letter-spacing: .26em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .text-amber-300 { color: var(--color-amber-300); } .text-amber-800 { color: var(--color-amber-800); } .text-emerald-700 { color: var(--color-emerald-700); } .text-foreground { color: var(--foreground); } .text-muted { color: var(--muted); } .text-rose-200 { color: var(--color-rose-200); } .text-sky-200 { color: var(--color-sky-200); } .text-sky-300 { color: var(--color-sky-300); } .text-slate-100 { color: var(--color-slate-100); } .text-slate-200 { color: var(--color-slate-200); } .text-slate-300 { color: var(--color-slate-300); } .text-slate-400 { color: var(--color-slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-700 { color: var(--color-slate-700); } .text-slate-900 { color: var(--color-slate-900); } .text-slate-950 { color: var(--color-slate-950); } .text-transparent { color: rgba(0, 0, 0, 0); } .text-white { color: var(--color-white); } .uppercase { text-transform: uppercase; } .no-underline { -webkit-text-decoration-line: none; text-decoration-line: none; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .shadow-\[0_10px_30px_rgba\(245\,158\,11\,0\.35\)\] { --tw-shadow: 0 10px 30px var(--tw-shadow-color, rgba(245, 158, 11, .35)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_36px_rgba\(15\,23\,42\,0\.08\)\] { --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(15, 23, 42, .08)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_60px_rgba\(15\,23\,42\,0\.45\)\] { --tw-shadow: 0 18px 60px var(--tw-shadow-color, rgba(15, 23, 42, .45)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_20px_80px_rgba\(15\,23\,42\,0\.35\)\] { --tw-shadow: 0 20px 80px var(--tw-shadow-color, rgba(15, 23, 42, .35)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_80px_rgba\(15\,23\,42\,0\.22\)\] { --tw-shadow: 0 24px 80px var(--tw-shadow-color, rgba(15, 23, 42, .22)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_80px_rgba\(146\,64\,14\,0\.12\)\] { --tw-shadow: 0 24px 80px var(--tw-shadow-color, rgba(146, 64, 14, .12)); 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; } .backdrop-blur { --tw-backdrop-blur: blur(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, ); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); -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, -webkit-text-decoration-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, visibility, 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, -webkit-text-decoration-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)); } .outline-none { --tw-outline-style: none; outline-style: none; } .placeholder\:text-slate-500::placeholder { color: var(--color-slate-500); } @media (hover: hover) { .hover\:border-sky-300\/50:hover { border-color: rgba(119, 212, 255, .5); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-sky-300\/50:hover { border-color: color-mix(in oklab, var(--color-sky-300) 50%, transparent); } } } @media (hover: hover) { .hover\:border-slate-400:hover { border-color: var(--color-slate-400); } } @media (hover: hover) { .hover\:border-white\/10:hover { border-color: rgba(255, 255, 255, .1); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-white\/10:hover { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } @media (hover: hover) { .hover\:bg-amber-600:hover { background-color: var(--color-amber-600); } } @media (hover: hover) { .hover\:bg-sky-300\/5:hover { background-color: rgba(119, 212, 255, .05); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-sky-300\/5:hover { background-color: color-mix(in oklab, var(--color-sky-300) 5%, transparent); } } } @media (hover: hover) { .hover\:bg-slate-50:hover { background-color: var(--color-slate-50); } } @media (hover: hover) { .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, .05); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/5:hover { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } } @media (hover: hover) { .hover\:bg-white\/6:hover { background-color: rgba(255, 255, 255, .06); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/6:hover { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } @media (hover: hover) { .hover\:text-slate-100:hover { color: var(--color-slate-100); } } @media (hover: hover) { .hover\:text-white:hover { color: var(--color-white); } } @media (hover: hover) { .hover\:opacity-80:hover { opacity: .8; } } @media (min-width: 48rem) { .md\:w-1\/2 { width: 50%; } } @media (min-width: 48rem) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 48rem) { .md\:p-6 { padding: calc(var(--spacing) * 6); } } @media (min-width: 48rem) { .md\:px-6 { padding-inline: calc(var(--spacing) * 6); } } @media (min-width: 48rem) { .md\:py-10 { padding-block: calc(var(--spacing) * 10); } } @media (min-width: 64rem) { .lg\:sticky { position: -webkit-sticky; position: sticky; } } @media (min-width: 64rem) { .lg\:top-0 { top: calc(var(--spacing) * 0); } } @media (min-width: 64rem) { .lg\:flex { display: flex; } } @media (min-width: 64rem) { .lg\:hidden { display: none; } } @media (min-width: 64rem) { .lg\:max-w-\[192px\] { max-width: 192px; } } @media (min-width: 64rem) { .lg\:flex-shrink-0 { flex-shrink: 0; } } @media (min-width: 64rem) { .lg\:flex-row { flex-direction: row; } } @media (min-width: 64rem) { .lg\:items-end { align-items: flex-end; } } @media (min-width: 64rem) { .lg\:justify-between { justify-content: space-between; } } @media (min-width: 64rem) { .lg\:self-start { align-self: flex-start; } } @media (min-width: 64rem) { .lg\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } @media (min-width: 64rem) { .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } @media (min-width: 64rem) { .lg\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } } @media (min-width: 64rem) { .lg\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } @media (min-width: 80rem) { .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dark\:from-\[\#FFFFFF\]:is(.dark *) { --tw-gradient-from: #fff; --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)); } .dark\:to-\[\#4B4B4B\]:is(.dark *) { --tw-gradient-to: #4b4b4b; --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)); } } @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; } html, body { min-height: 100%; } body { background: radial-gradient(circle at 0 0, rgba(56, 189, 248, .18), rgba(0, 0, 0, 0) 28%), radial-gradient(circle at 100% 0, rgba(251, 191, 36, .12), rgba(0, 0, 0, 0) 22%), linear-gradient(#020617 0%, #0f172a 42%, #111827 100%); } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: rgba(0, 0, 0, 0); } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: rgba(0, 0, 0, 0); } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: rgba(0, 0, 0, 0); } @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-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @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 rgba(0, 0, 0, 0); } @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 rgba(0, 0, 0, 0); } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @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 rgba(0, 0, 0, 0); } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @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-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-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-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-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } @property --tw-border-spacing-y { 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 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)); } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } @keyframes skeleton { 100% { transform: translateX(200%); } } /*# sourceMappingURL=styles_globals_9fb35f7d.css.map*/