/* src/styles/global.css */ /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-600: oklch(68.1% .162 75.834); --color-green-100: oklch(96.2% .044 156.743); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-900: oklch(39.3% .095 152.535); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-sky-400: oklch(74.6% .16 232.661); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-purple-400: oklch(71.4% .203 305.504); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-2xl: 42rem; --container-4xl: 56rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-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); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-wide: .025em; --tracking-wider: .05em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --ease-out: cubic-bezier(0, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-sm: 8px; --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-surface: #222; --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-border: #2e2e2e; --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); --color-accent-hover: var(--accent); --color-danger-hover: var(--danger); --color-field-focus: var(--field-background, var(--default)); --color-field-border-hover: var(--field-border, var(--border)); --color-field-border-focus: var(--field-border, var(--border)); --color-accent-soft: var(--accent); --color-accent-soft-foreground: var(--accent); --color-accent-soft-hover: var(--accent); --color-danger-soft: var(--danger); --color-danger-soft-foreground: var(--danger); --color-danger-soft-hover: var(--danger); --color-warning-soft: var(--warning); --color-warning-soft-foreground: var(--warning); --color-success-soft: var(--success); --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; --color-base: #1b1b1b; --color-surface-light: #2a2a2a; --color-surface-lighter: #333; --color-border-light: #3a3a3a; } @supports (color: color-mix(in lab, red, red)) { :is(:root, :host) { --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } @layer base { *, :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%; 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 { color: inherit; border-top-width: 1px; height: 0; } 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; 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 { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } 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 { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::-webkit-file-upload-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:-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 { padding-inline-start: 20px; } :where(select:-moz-any([multiple], [size])) optgroup option { padding-inline-start: 20px; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::-webkit-file-upload-button { margin-inline-end: 4px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports ( not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { text-align: inherit; min-height: 1lh; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-year-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-month-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-day-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-hour-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-minute-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-second-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button { appearance: button; } input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::-webkit-file-upload-button { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .pointer-events-none { pointer-events: none; } .collapse { visibility: collapse; } .invisible { visibility: hidden; } .visible { visibility: visible; } .sr-only { position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; } .not-sr-only { position: static; overflow: visible; clip-path: none; white-space: normal; width: auto; height: auto; margin: 0; padding: 0; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .-inset-1 { inset: calc(var(--spacing) * -1); } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .-top-0\.5 { top: calc(var(--spacing) * -.5); } .-top-1\.5 { top: calc(var(--spacing) * -1.5); } .top-0 { top: calc(var(--spacing) * 0); } .top-0\.5 { top: calc(var(--spacing) * .5); } .top-1 { top: calc(var(--spacing) * 1); } .top-1\/2 { top: 50%; } .top-3 { top: calc(var(--spacing) * 3); } .top-7 { top: calc(var(--spacing) * 7); } .top-12 { top: calc(var(--spacing) * 12); } .top-full { top: 100%; } .-right-0\.5 { right: calc(var(--spacing) * -.5); } .-right-1\.5 { right: calc(var(--spacing) * -1.5); } .right-0 { right: calc(var(--spacing) * 0); } .right-1 { right: calc(var(--spacing) * 1); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-4 { right: calc(var(--spacing) * 4); } .right-6 { right: calc(var(--spacing) * 6); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-3 { bottom: calc(var(--spacing) * 3); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .bottom-6 { bottom: calc(var(--spacing) * 6); } .bottom-24 { bottom: calc(var(--spacing) * 24); } .bottom-full { bottom: 100%; } .-left-1\.5 { left: calc(var(--spacing) * -1.5); } .left-0 { left: calc(var(--spacing) * 0); } .left-0\.5 { left: calc(var(--spacing) * .5); } .left-1\/2 { left: 50%; } .left-2 { left: calc(var(--spacing) * 2); } .left-3 { left: calc(var(--spacing) * 3); } .isolate { isolation: isolate; } .isolation-auto { isolation: auto; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[55\] { z-index: 55; } .z-\[60\] { z-index: 60; } .z-\[100\] { z-index: 100; } .z-\[2000\] { z-index: 2000; } .z-\[9999\] { z-index: 9999; } .col-span-6 { grid-column: span 6 / span 6; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .m-0 { margin: calc(var(--spacing) * 0); } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .-mx-2 { margin-inline: calc(var(--spacing) * -2); } .-mx-3 { margin-inline: calc(var(--spacing) * -3); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-3 { margin-inline: calc(var(--spacing) * 3); } .mx-4 { margin-inline: calc(var(--spacing) * 4); } .mx-auto { margin-inline-start: auto; margin-inline-end: auto; } .my-0\.5 { margin-block: calc(var(--spacing) * .5); } .my-1 { margin-block: calc(var(--spacing) * 1); } .my-1\.5 { margin-block: calc(var(--spacing) * 1.5); } .my-2 { margin-block: calc(var(--spacing) * 2); } .my-3 { margin-block: calc(var(--spacing) * 3); } .mt-0\.5 { margin-top: calc(var(--spacing) * .5); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-\[3px\] { margin-top: 3px; } .mt-px { margin-top: 1px; } .-mr-1 { margin-right: calc(var(--spacing) * -1); } .mr-1 { margin-right: calc(var(--spacing) * 1); } .mr-1\.5 { margin-right: calc(var(--spacing) * 1.5); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-3 { margin-right: calc(var(--spacing) * 3); } .mb-0\.5 { margin-bottom: calc(var(--spacing) * .5); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .ml-0\.5 { margin-left: calc(var(--spacing) * .5); } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-3 { margin-left: calc(var(--spacing) * 3); } .ml-4 { margin-left: calc(var(--spacing) * 4); } .ml-5 { margin-left: calc(var(--spacing) * 5); } .ml-auto { margin-left: auto; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .flow-root { display: flow-root; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .inline-grid { display: inline-grid; } .inline-table { display: inline-table; } .list-item { display: list-item; } .table { display: table; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-column { display: table-column; } .table-column-group { display: table-column-group; } .table-footer-group { display: table-footer-group; } .table-header-group { display: table-header-group; } .table-row { display: table-row; } .table-row-group { display: table-row-group; } .aspect-square { aspect-ratio: 1; } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-16 { height: calc(var(--spacing) * 16); } .h-24 { height: calc(var(--spacing) * 24); } .h-\[3px\] { height: 3px; } .h-\[16px\] { height: 16px; } .h-\[18px\] { height: 18px; } .h-\[22px\] { height: 22px; } .h-\[26px\] { height: 26px; } .h-\[28px\] { height: 28px; } .h-\[30px\] { height: 30px; } .h-\[52px\] { height: 52px; } .h-\[100dvh\] { height: 100dvh; } .h-auto { height: auto; } .h-full { height: 100%; } .h-px { height: 1px; } .h-screen { height: 100vh; } .max-h-24 { max-height: calc(var(--spacing) * 24); } .max-h-32 { max-height: calc(var(--spacing) * 32); } .max-h-40 { max-height: calc(var(--spacing) * 40); } .max-h-44 { max-height: calc(var(--spacing) * 44); } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-52 { max-height: calc(var(--spacing) * 52); } .max-h-56 { max-height: calc(var(--spacing) * 56); } .max-h-60 { max-height: calc(var(--spacing) * 60); } .max-h-64 { max-height: calc(var(--spacing) * 64); } .max-h-72 { max-height: calc(var(--spacing) * 72); } .max-h-80 { max-height: calc(var(--spacing) * 80); } .max-h-\[28vh\] { max-height: 28vh; } .max-h-\[60vh\] { max-height: 60vh; } .max-h-\[400px\] { max-height: 400px; } .max-h-full { max-height: 100%; } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-0\! { min-height: calc(var(--spacing) * 0) !important; } .min-h-9 { min-height: calc(var(--spacing) * 9); } .min-h-10 { min-height: calc(var(--spacing) * 10); } .min-h-11 { min-height: calc(var(--spacing) * 11); } .min-h-12 { min-height: calc(var(--spacing) * 12); } .min-h-\[32px\] { min-height: 32px; } .min-h-\[100dvh\] { min-height: 100dvh; } .min-h-\[120px\] { min-height: 120px; } .w-0 { width: calc(var(--spacing) * 0); } .w-1 { width: calc(var(--spacing) * 1); } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-1\/3 { width: 33.3333%; } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .w-6 { width: calc(var(--spacing) * 6); } .w-7 { width: calc(var(--spacing) * 7); } .w-8 { width: calc(var(--spacing) * 8); } .w-9 { width: calc(var(--spacing) * 9); } .w-10 { width: calc(var(--spacing) * 10); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-28 { width: calc(var(--spacing) * 28); } .w-32 { width: calc(var(--spacing) * 32); } .w-36 { width: calc(var(--spacing) * 36); } .w-44 { width: calc(var(--spacing) * 44); } .w-48 { width: calc(var(--spacing) * 48); } .w-52 { width: calc(var(--spacing) * 52); } .w-56 { width: calc(var(--spacing) * 56); } .w-60 { width: calc(var(--spacing) * 60); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-80 { width: calc(var(--spacing) * 80); } .w-\[18px\] { width: 18px; } .w-\[22px\] { width: 22px; } .w-\[52px\] { width: 52px; } .w-\[260px\] { width: 260px; } .w-\[280px\] { width: 280px; } .w-\[320px\] { width: 320px; } .w-\[480px\] { width: 480px; } .w-auto { width: auto; } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-\[12rem\] { max-width: 12rem; } .max-w-\[40\%\] { max-width: 40%; } .max-w-\[45\%\] { max-width: 45%; } .max-w-\[50\%\] { max-width: 50%; } .max-w-\[70vw\] { max-width: 70vw; } .max-w-\[75\%\] { max-width: 75%; } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[140px\] { max-width: 140px; } .max-w-\[160px\] { max-width: 160px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[360px\] { max-width: 360px; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .max-w-md { max-width: var(--container-md); } .max-w-sm { max-width: var(--container-sm); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-4 { min-width: calc(var(--spacing) * 4); } .min-w-8 { min-width: calc(var(--spacing) * 8); } .min-w-\[16px\] { min-width: 16px; } .min-w-\[140px\] { min-width: 140px; } .min-w-\[180px\] { min-width: 180px; } .min-w-\[200px\] { min-width: 200px; } .flex-1 { flex: 1; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .shrink-0\! { flex-shrink: 0 !important; } .grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-0 { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-4 { --tw-translate-x: calc(var(--spacing) * 4); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-none { translate: none; } .scale-110 { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-3d { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .animate-ping { animation: var(--animate-ping); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-col-resize { cursor: col-resize; } .cursor-default { cursor: default; } .cursor-ew-resize { cursor: ew-resize; } .cursor-grab { cursor: grab; } .cursor-pointer { cursor: pointer; } .cursor-zoom-in { cursor: zoom-in; } .touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } .touch-none { touch-action: none; } .resize { resize: both; } .resize-none { resize: none; } .list-inside { list-style-position: inside; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-around { justify-content: space-around; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .justify-start\! { justify-content: flex-start !important; } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-12 { gap: calc(var(--spacing) * 12); } :where(.space-y-0 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-0\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-1\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-3 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-reverse > :not(:last-child)) { --tw-space-y-reverse: 1; } .gap-x-8 { column-gap: calc(var(--spacing) * 8); } :where(.space-x-reverse > :not(:last-child)) { --tw-space-x-reverse: 1; } .gap-y-1\.5 { row-gap: calc(var(--spacing) * 1.5); } :where(.divide-x > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } :where(.divide-y-reverse > :not(:last-child)) { --tw-divide-y-reverse: 1; } :where(.divide-border > :not(:last-child)) { border-color: var(--color-border); } :where(.divide-white\/5 > :not(:last-child)) { border-color: #ffffff0d; } @supports (color: color-mix(in lab, red, red)) { :where(.divide-white\/5 > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .\!overflow-visible { overflow: visible !important; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .overscroll-contain { overscroll-behavior: contain; } .overscroll-none { overscroll-behavior: none; } .rounded { border-radius: .25rem; } .rounded-2xl { border-radius: calc(var(--radius) * 2); } .rounded-3xl { border-radius: calc(var(--radius) * 3); } .rounded-\[1\.625rem\] { border-radius: 1.625rem; } .rounded-\[5px\] { border-radius: 5px; } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: calc(var(--radius) * 1); } .rounded-md { border-radius: calc(var(--radius) * .75); } .rounded-none, .rounded-none\! { border-radius: 0 !important; } .rounded-sm { border-radius: calc(var(--radius) * .5); } .rounded-xl { border-radius: calc(var(--radius) * 1.5); } .rounded-s: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: .25rem; border-bottom-left-radius: .25rem; } .rounded-s: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: .25rem; border-bottom-left-radius: .25rem; } .rounded-s: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: .25rem; border-bottom-left-radius: .25rem; } .rounded-s:-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: .25rem; border-bottom-right-radius: .25rem; } .rounded-s:-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: .25rem; border-bottom-right-radius: .25rem; } .rounded-s: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: .25rem; border-bottom-right-radius: .25rem; } .rounded-ss: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: .25rem; } .rounded-ss: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: .25rem; } .rounded-ss: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: .25rem; } .rounded-ss:-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: .25rem; } .rounded-ss:-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: .25rem; } .rounded-ss: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: .25rem; } .rounded-e: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: .25rem; border-bottom-right-radius: .25rem; } .rounded-e: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: .25rem; border-bottom-right-radius: .25rem; } .rounded-e: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: .25rem; border-bottom-right-radius: .25rem; } .rounded-e:-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: .25rem; border-bottom-left-radius: .25rem; } .rounded-e:-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: .25rem; border-bottom-left-radius: .25rem; } .rounded-e: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: .25rem; border-bottom-left-radius: .25rem; } .rounded-se: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: .25rem; } .rounded-se: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: .25rem; } .rounded-se: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: .25rem; } .rounded-se:-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: .25rem; } .rounded-se:-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: .25rem; } .rounded-se: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: .25rem; } .rounded-ee: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-bottom-right-radius: .25rem; } .rounded-ee: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-bottom-right-radius: .25rem; } .rounded-ee: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-bottom-right-radius: .25rem; } .rounded-ee:-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-bottom-left-radius: .25rem; } .rounded-ee:-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-bottom-left-radius: .25rem; } .rounded-ee: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-bottom-left-radius: .25rem; } .rounded-es: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-bottom-left-radius: .25rem; } .rounded-es: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-bottom-left-radius: .25rem; } .rounded-es: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-bottom-left-radius: .25rem; } .rounded-es:-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-bottom-right-radius: .25rem; } .rounded-es:-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-bottom-right-radius: .25rem; } .rounded-es: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-bottom-right-radius: .25rem; } .rounded-t { border-top-left-radius: .25rem; border-top-right-radius: .25rem; } .rounded-t-2xl { border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); } .rounded-t-3xl { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .rounded-l { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; } .rounded-tl { border-top-left-radius: .25rem; } .rounded-r { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; } .rounded-tr { border-top-right-radius: .25rem; } .rounded-b { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem; } .rounded-br { border-bottom-right-radius: .25rem; } .rounded-br-sm { border-bottom-right-radius: calc(var(--radius) * .5); } .rounded-bl { border-bottom-left-radius: .25rem; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0; } .border-0\! { border-style: var(--tw-border-style) !important; border-width: 0 !important; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-\[1\.5px\] { border-style: var(--tw-border-style); border-width: 1.5px; } .border-x { border-inline-style: var(--tw-border-style); border-left-width: 1px; border-right-width: 1px; } .border-y { border-block-style: var(--tw-border-style); border-block-start-width: 1px; border-block-end-width: 1px; } .border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } .border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-r-0 { border-right-style: var(--tw-border-style); border-right-width: 0; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-0 { border-left-style: var(--tw-border-style); border-left-width: 0; } .border-l-2 { border-left-style: var(--tw-border-style); border-left-width: 2px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-none { --tw-border-style: none; border-style: none; } .border-\[\#161616\] { border-color: #161616; } .border-amber-400\/25 { border-color: #fcbb0040; } @supports (color: color-mix(in lab, red, red)) { .border-amber-400\/25 { border-color: color-mix(in oklab, var(--color-amber-400) 25%, transparent); } } .border-amber-500\/20 { border-color: #f99c0033; } @supports (color: color-mix(in lab, red, red)) { .border-amber-500\/20 { border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent); } } .border-amber-500\/30 { border-color: #f99c004d; } @supports (color: color-mix(in lab, red, red)) { .border-amber-500\/30 { border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent); } } .border-amber-500\/40 { border-color: #f99c0066; } @supports (color: color-mix(in lab, red, red)) { .border-amber-500\/40 { border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent); } } .border-amber-500\/50 { border-color: #f99c0080; } @supports (color: color-mix(in lab, red, red)) { .border-amber-500\/50 { border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent); } } .border-blue-400\/25 { border-color: #54a2ff40; } @supports (color: color-mix(in lab, red, red)) { .border-blue-400\/25 { border-color: color-mix(in oklab, var(--color-blue-400) 25%, transparent); } } .border-blue-500 { border-color: var(--color-blue-500); } .border-blue-500\/30 { border-color: #3080ff4d; } @supports (color: color-mix(in lab, red, red)) { .border-blue-500\/30 { border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent); } } .border-blue-500\/40 { border-color: #3080ff66; } @supports (color: color-mix(in lab, red, red)) { .border-blue-500\/40 { border-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent); } } .border-blue-500\/60 { border-color: #3080ff99; } @supports (color: color-mix(in lab, red, red)) { .border-blue-500\/60 { border-color: color-mix(in oklab, var(--color-blue-500) 60%, transparent); } } .border-blue-900\/30 { border-color: #1c398e4d; } @supports (color: color-mix(in lab, red, red)) { .border-blue-900\/30 { border-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); } } .border-border { border-color: var(--color-border); } .border-border-light { border-color: var(--color-border-light); } .border-border\/30 { border-color: #2e2e2e4d; } @supports (color: color-mix(in lab, red, red)) { .border-border\/30 { border-color: color-mix(in oklab, var(--color-border) 30%, transparent); } } .border-border\/50 { border-color: #2e2e2e80; } @supports (color: color-mix(in lab, red, red)) { .border-border\/50 { border-color: color-mix(in oklab, var(--color-border) 50%, transparent); } } .border-border\/60 { border-color: #2e2e2e99; } @supports (color: color-mix(in lab, red, red)) { .border-border\/60 { border-color: color-mix(in oklab, var(--color-border) 60%, transparent); } } .border-cyan-500\/10 { border-color: #00b7d71a; } @supports (color: color-mix(in lab, red, red)) { .border-cyan-500\/10 { border-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent); } } .border-cyan-500\/20 { border-color: #00b7d733; } @supports (color: color-mix(in lab, red, red)) { .border-cyan-500\/20 { border-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent); } } .border-cyan-500\/40 { border-color: #00b7d766; } @supports (color: color-mix(in lab, red, red)) { .border-cyan-500\/40 { border-color: color-mix(in oklab, var(--color-cyan-500) 40%, transparent); } } .border-emerald-500\/20 { border-color: #00bb7f33; } @supports (color: color-mix(in lab, red, red)) { .border-emerald-500\/20 { border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent); } } .border-green-400\/25 { border-color: #05df7240; } @supports (color: color-mix(in lab, red, red)) { .border-green-400\/25 { border-color: color-mix(in oklab, var(--color-green-400) 25%, transparent); } } .border-green-500\/25 { border-color: #00c75840; } @supports (color: color-mix(in lab, red, red)) { .border-green-500\/25 { border-color: color-mix(in oklab, var(--color-green-500) 25%, transparent); } } .border-green-500\/40 { border-color: #00c75866; } @supports (color: color-mix(in lab, red, red)) { .border-green-500\/40 { border-color: color-mix(in oklab, var(--color-green-500) 40%, transparent); } } .border-green-500\/60 { border-color: #00c75899; } @supports (color: color-mix(in lab, red, red)) { .border-green-500\/60 { border-color: color-mix(in oklab, var(--color-green-500) 60%, transparent); } } .border-green-900\/50 { border-color: #0d542b80; } @supports (color: color-mix(in lab, red, red)) { .border-green-900\/50 { border-color: color-mix(in oklab, var(--color-green-900) 50%, transparent); } } .border-green-900\/60 { border-color: #0d542b99; } @supports (color: color-mix(in lab, red, red)) { .border-green-900\/60 { border-color: color-mix(in oklab, var(--color-green-900) 60%, transparent); } } .border-indigo-500 { border-color: var(--color-indigo-500); } .border-indigo-500\/30 { border-color: #625fff4d; } @supports (color: color-mix(in lab, red, red)) { .border-indigo-500\/30 { border-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent); } } .border-indigo-500\/40 { border-color: #625fff66; } @supports (color: color-mix(in lab, red, red)) { .border-indigo-500\/40 { border-color: color-mix(in oklab, var(--color-indigo-500) 40%, transparent); } } .border-pink-400\/25 { border-color: #fb64b640; } @supports (color: color-mix(in lab, red, red)) { .border-pink-400\/25 { border-color: color-mix(in oklab, var(--color-pink-400) 25%, transparent); } } .border-red-400\/25 { border-color: #ff656840; } @supports (color: color-mix(in lab, red, red)) { .border-red-400\/25 { border-color: color-mix(in oklab, var(--color-red-400) 25%, transparent); } } .border-red-500 { border-color: var(--color-red-500); } .border-red-500\/20 { border-color: #fb2c3633; } @supports (color: color-mix(in lab, red, red)) { .border-red-500\/20 { border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } .border-red-500\/30 { border-color: #fb2c364d; } @supports (color: color-mix(in lab, red, red)) { .border-red-500\/30 { border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent); } } .border-red-500\/40 { border-color: #fb2c3666; } @supports (color: color-mix(in lab, red, red)) { .border-red-500\/40 { border-color: color-mix(in oklab, var(--color-red-500) 40%, transparent); } } .border-red-500\/60 { border-color: #fb2c3699; } @supports (color: color-mix(in lab, red, red)) { .border-red-500\/60 { border-color: color-mix(in oklab, var(--color-red-500) 60%, transparent); } } .border-red-900\/50 { border-color: #82181a80; } @supports (color: color-mix(in lab, red, red)) { .border-red-900\/50 { border-color: color-mix(in oklab, var(--color-red-900) 50%, transparent); } } .border-surface { border-color: var(--color-surface); } .border-transparent { border-color: #0000; } .border-violet-400 { border-color: var(--color-violet-400); } .border-violet-400\/25 { border-color: #a685ff40; } @supports (color: color-mix(in lab, red, red)) { .border-violet-400\/25 { border-color: color-mix(in oklab, var(--color-violet-400) 25%, transparent); } } .border-violet-400\/40 { border-color: #a685ff66; } @supports (color: color-mix(in lab, red, red)) { .border-violet-400\/40 { border-color: color-mix(in oklab, var(--color-violet-400) 40%, transparent); } } .border-violet-400\/50 { border-color: #a685ff80; } @supports (color: color-mix(in lab, red, red)) { .border-violet-400\/50 { border-color: color-mix(in oklab, var(--color-violet-400) 50%, transparent); } } .border-violet-400\/60 { border-color: #a685ff99; } @supports (color: color-mix(in lab, red, red)) { .border-violet-400\/60 { border-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent); } } .border-violet-500\/10 { border-color: #8d54ff1a; } @supports (color: color-mix(in lab, red, red)) { .border-violet-500\/10 { border-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent); } } .border-violet-500\/20 { border-color: #8d54ff33; } @supports (color: color-mix(in lab, red, red)) { .border-violet-500\/20 { border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent); } } .border-violet-500\/30 { border-color: #8d54ff4d; } @supports (color: color-mix(in lab, red, red)) { .border-violet-500\/30 { border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent); } } .border-violet-500\/40 { border-color: #8d54ff66; } @supports (color: color-mix(in lab, red, red)) { .border-violet-500\/40 { border-color: color-mix(in oklab, var(--color-violet-500) 40%, transparent); } } .border-violet-500\/50 { border-color: #8d54ff80; } @supports (color: color-mix(in lab, red, red)) { .border-violet-500\/50 { border-color: color-mix(in oklab, var(--color-violet-500) 50%, transparent); } } .border-white\/5 { border-color: #ffffff0d; } @supports (color: color-mix(in lab, red, red)) { .border-white\/5 { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .border-white\/10 { border-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .border-white\/10 { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/15 { border-color: #ffffff26; } @supports (color: color-mix(in lab, red, red)) { .border-white\/15 { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-white\/20 { border-color: #fff3; } @supports (color: color-mix(in lab, red, red)) { .border-white\/20 { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .border-white\/\[0\.03\] { border-color: #ffffff08; } @supports (color: color-mix(in lab, red, red)) { .border-white\/\[0\.03\] { border-color: color-mix(in oklab, var(--color-white) 3%, transparent); } } .border-zinc-600 { border-color: var(--color-zinc-600); } .border-zinc-700 { border-color: var(--color-zinc-700); } .border-zinc-800 { border-color: var(--color-zinc-800); } .border-zinc-800\/80 { border-color: #27272acc; } @supports (color: color-mix(in lab, red, red)) { .border-zinc-800\/80 { border-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent); } } .border-t-cyan-300 { border-top-color: var(--color-cyan-300); } .border-t-zinc-300 { border-top-color: var(--color-zinc-300); } .border-l-blue-400 { border-left-color: var(--color-blue-400); } .\!bg-zinc-950\/95 { background-color: #09090bf2 !important; } @supports (color: color-mix(in lab, red, red)) { .\!bg-zinc-950\/95 { background-color: color-mix(in oklab, var(--color-zinc-950) 95%, transparent) !important; } } .bg-\[\#0d0d0d\] { background-color: #0d0d0d; } .bg-\[\#1a1a1a\] { background-color: #1a1a1a; } .bg-\[\#1e1e1e\] { background-color: #1e1e1e; } .bg-\[\#1f1f1f\] { background-color: #1f1f1f; } .bg-\[\#1f1f1f\]\/85 { background-color: #1f1f1fd9; background-color: color(display-p3 .121569 .121569 .121569 / .85); background-color: lab(11.7579% 0 .00000298023 / .85); } .bg-\[\#1f1f1f\]\/95 { background-color: #1f1f1ff2; background-color: color(display-p3 .121569 .121569 .121569 / .95); background-color: lab(11.7579% 0 .00000298023 / .95); } .bg-\[\#2a2a2a\] { background-color: #2a2a2a; } .bg-\[\#141414\] { background-color: #141414; } .bg-\[\#141414\]\/60 { background-color: #14141499; background-color: color(display-p3 .0784314 .0784314 .0784314 / .6); background-color: lab(6.31893% 0 0 / .6); } .bg-\[\#161616\] { background-color: #161616; } .bg-\[\#181818\] { background-color: #181818; } .bg-amber-400 { background-color: var(--color-amber-400); } .bg-amber-400\/10 { background-color: #fcbb001a; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-400\/10 { background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent); } } .bg-amber-400\/60 { background-color: #fcbb0099; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-400\/60 { background-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent); } } .bg-amber-500 { background-color: var(--color-amber-500); } .bg-amber-500\/5 { background-color: #f99c000d; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-500\/5 { background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent); } } .bg-amber-500\/8 { background-color: #f99c0014; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-500\/8 { background-color: color-mix(in oklab, var(--color-amber-500) 8%, transparent); } } .bg-amber-500\/10 { background-color: #f99c001a; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-500\/10 { background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent); } } .bg-amber-500\/20 { background-color: #f99c0033; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-500\/20 { background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent); } } .bg-amber-500\/70 { background-color: #f99c00b3; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-500\/70 { background-color: color-mix(in oklab, var(--color-amber-500) 70%, transparent); } } .bg-base { background-color: var(--color-base); } .bg-base\/40 { background-color: #1b1b1b66; } @supports (color: color-mix(in lab, red, red)) { .bg-base\/40 { background-color: color-mix(in oklab, var(--color-base) 40%, transparent); } } .bg-base\/60 { background-color: #1b1b1b99; } @supports (color: color-mix(in lab, red, red)) { .bg-base\/60 { background-color: color-mix(in oklab, var(--color-base) 60%, transparent); } } .bg-black\/30 { background-color: #0000004d; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/30 { background-color: color-mix(in oklab, var(--color-black) 30%, transparent); } } .bg-black\/40 { background-color: #0006; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/40 { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-black\/50 { background-color: #00000080; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/50 { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-black\/60 { background-color: #0009; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/60 { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .bg-black\/70 { background-color: #000000b3; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/70 { background-color: color-mix(in oklab, var(--color-black) 70%, transparent); } } .bg-black\/95 { background-color: #000000f2; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/95 { background-color: color-mix(in oklab, var(--color-black) 95%, transparent); } } .bg-blue-400 { background-color: var(--color-blue-400); } .bg-blue-400\/10 { background-color: #54a2ff1a; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-400\/10 { background-color: color-mix(in oklab, var(--color-blue-400) 10%, transparent); } } .bg-blue-400\/60 { background-color: #54a2ff99; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-400\/60 { background-color: color-mix(in oklab, var(--color-blue-400) 60%, transparent); } } .bg-blue-500\/8 { background-color: #3080ff14; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-500\/8 { background-color: color-mix(in oklab, var(--color-blue-500) 8%, transparent); } } .bg-blue-500\/15 { background-color: #3080ff26; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-500\/15 { background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent); } } .bg-blue-500\/20 { background-color: #3080ff33; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-500\/20 { background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent); } } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-blue-600\/15 { background-color: #155dfc26; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-600\/15 { background-color: color-mix(in oklab, var(--color-blue-600) 15%, transparent); } } .bg-blue-950\/40 { background-color: #16245666; } @supports (color: color-mix(in lab, red, red)) { .bg-blue-950\/40 { background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent); } } .bg-border { background-color: var(--color-border); } .bg-cyan-500\/\[0\.03\] { background-color: #00b7d708; } @supports (color: color-mix(in lab, red, red)) { .bg-cyan-500\/\[0\.03\] { background-color: color-mix(in oklab, var(--color-cyan-500) 3%, transparent); } } .bg-emerald-500\/10 { background-color: #00bb7f1a; } @supports (color: color-mix(in lab, red, red)) { .bg-emerald-500\/10 { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); } } .bg-green-400 { background-color: var(--color-green-400); } .bg-green-400\/5 { background-color: #05df720d; } @supports (color: color-mix(in lab, red, red)) { .bg-green-400\/5 { background-color: color-mix(in oklab, var(--color-green-400) 5%, transparent); } } .bg-green-400\/10 { background-color: #05df721a; } @supports (color: color-mix(in lab, red, red)) { .bg-green-400\/10 { background-color: color-mix(in oklab, var(--color-green-400) 10%, transparent); } } .bg-green-500 { background-color: var(--color-green-500); } .bg-green-500\/8 { background-color: #00c75814; } @supports (color: color-mix(in lab, red, red)) { .bg-green-500\/8 { background-color: color-mix(in oklab, var(--color-green-500) 8%, transparent); } } .bg-green-500\/10 { background-color: #00c7581a; } @supports (color: color-mix(in lab, red, red)) { .bg-green-500\/10 { background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent); } } .bg-green-500\/15 { background-color: #00c75826; } @supports (color: color-mix(in lab, red, red)) { .bg-green-500\/15 { background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent); } } .bg-green-600 { background-color: var(--color-green-600); } .bg-green-600\/15 { background-color: #00a54426; } @supports (color: color-mix(in lab, red, red)) { .bg-green-600\/15 { background-color: color-mix(in oklab, var(--color-green-600) 15%, transparent); } } .bg-indigo-400 { background-color: var(--color-indigo-400); } .bg-indigo-400\/60 { background-color: #7d87ff99; } @supports (color: color-mix(in lab, red, red)) { .bg-indigo-400\/60 { background-color: color-mix(in oklab, var(--color-indigo-400) 60%, transparent); } } .bg-indigo-500 { background-color: var(--color-indigo-500); } .bg-indigo-500\/10 { background-color: #625fff1a; } @supports (color: color-mix(in lab, red, red)) { .bg-indigo-500\/10 { background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent); } } .bg-indigo-500\/15 { background-color: #625fff26; } @supports (color: color-mix(in lab, red, red)) { .bg-indigo-500\/15 { background-color: color-mix(in oklab, var(--color-indigo-500) 15%, transparent); } } .bg-indigo-500\/20 { background-color: #625fff33; } @supports (color: color-mix(in lab, red, red)) { .bg-indigo-500\/20 { background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent); } } .bg-pink-400 { background-color: var(--color-pink-400); } .bg-pink-500\/8 { background-color: #f6339a14; } @supports (color: color-mix(in lab, red, red)) { .bg-pink-500\/8 { background-color: color-mix(in oklab, var(--color-pink-500) 8%, transparent); } } .bg-red-400 { background-color: var(--color-red-400); } .bg-red-400\/10 { background-color: #ff65681a; } @supports (color: color-mix(in lab, red, red)) { .bg-red-400\/10 { background-color: color-mix(in oklab, var(--color-red-400) 10%, transparent); } } .bg-red-500 { background-color: var(--color-red-500); } .bg-red-500\/5 { background-color: #fb2c360d; } @supports (color: color-mix(in lab, red, red)) { .bg-red-500\/5 { background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent); } } .bg-red-500\/8 { background-color: #fb2c3614; } @supports (color: color-mix(in lab, red, red)) { .bg-red-500\/8 { background-color: color-mix(in oklab, var(--color-red-500) 8%, transparent); } } .bg-red-500\/10 { background-color: #fb2c361a; } @supports (color: color-mix(in lab, red, red)) { .bg-red-500\/10 { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } .bg-red-500\/15 { background-color: #fb2c3626; } @supports (color: color-mix(in lab, red, red)) { .bg-red-500\/15 { background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent); } } .bg-red-600 { background-color: var(--color-red-600); } .bg-red-600\/15 { background-color: #e4001426; } @supports (color: color-mix(in lab, red, red)) { .bg-red-600\/15 { background-color: color-mix(in oklab, var(--color-red-600) 15%, transparent); } } .bg-red-950\/10 { background-color: #4608091a; } @supports (color: color-mix(in lab, red, red)) { .bg-red-950\/10 { background-color: color-mix(in oklab, var(--color-red-950) 10%, transparent); } } .bg-surface { background-color: var(--color-surface); } .bg-surface-light { background-color: var(--color-surface-light); } .bg-surface\/40 { background-color: #2226; } @supports (color: color-mix(in lab, red, red)) { .bg-surface\/40 { background-color: color-mix(in oklab, var(--color-surface) 40%, transparent); } } .bg-transparent { background-color: #0000; } .bg-transparent\! { background-color: #0000 !important; } .bg-violet-400 { background-color: var(--color-violet-400); } .bg-violet-400\/10 { background-color: #a685ff1a; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-400\/10 { background-color: color-mix(in oklab, var(--color-violet-400) 10%, transparent); } } .bg-violet-500 { background-color: var(--color-violet-500); } .bg-violet-500\/5 { background-color: #8d54ff0d; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/5 { background-color: color-mix(in oklab, var(--color-violet-500) 5%, transparent); } } .bg-violet-500\/8 { background-color: #8d54ff14; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/8 { background-color: color-mix(in oklab, var(--color-violet-500) 8%, transparent); } } .bg-violet-500\/10 { background-color: #8d54ff1a; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/10 { background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent); } } .bg-violet-500\/15 { background-color: #8d54ff26; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/15 { background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent); } } .bg-violet-500\/20 { background-color: #8d54ff33; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/20 { background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent); } } .bg-violet-500\/30 { background-color: #8d54ff4d; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/30 { background-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent); } } .bg-violet-500\/40 { background-color: #8d54ff66; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/40 { background-color: color-mix(in oklab, var(--color-violet-500) 40%, transparent); } } .bg-violet-500\/\[0\.03\] { background-color: #8d54ff08; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/\[0\.03\] { background-color: color-mix(in oklab, var(--color-violet-500) 3%, transparent); } } .bg-violet-500\/\[0\.06\] { background-color: #8d54ff0f; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-500\/\[0\.06\] { background-color: color-mix(in oklab, var(--color-violet-500) 6%, transparent); } } .bg-violet-600 { background-color: var(--color-violet-600); } .bg-violet-600\/15 { background-color: #7f22fe26; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-600\/15 { background-color: color-mix(in oklab, var(--color-violet-600) 15%, transparent); } } .bg-violet-600\/20 { background-color: #7f22fe33; } @supports (color: color-mix(in lab, red, red)) { .bg-violet-600\/20 { background-color: color-mix(in oklab, var(--color-violet-600) 20%, transparent); } } .bg-white { background-color: var(--color-white); } .bg-white\/5 { background-color: #ffffff0d; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/5 { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/10 { background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/10 { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/20 { background-color: #fff3; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/20 { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .bg-white\/\[0\.02\] { background-color: #ffffff05; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/\[0\.02\] { background-color: color-mix(in oklab, var(--color-white) 2%, transparent); } } .bg-white\/\[0\.03\] { background-color: #ffffff08; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/\[0\.03\] { background-color: color-mix(in oklab, var(--color-white) 3%, transparent); } } .bg-zinc-100 { background-color: var(--color-zinc-100); } .bg-zinc-400 { background-color: var(--color-zinc-400); } .bg-zinc-500 { background-color: var(--color-zinc-500); } .bg-zinc-500\/60 { background-color: #71717b99; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-500\/60 { background-color: color-mix(in oklab, var(--color-zinc-500) 60%, transparent); } } .bg-zinc-500\/70 { background-color: #71717bb3; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-500\/70 { background-color: color-mix(in oklab, var(--color-zinc-500) 70%, transparent); } } .bg-zinc-600 { background-color: var(--color-zinc-600); } .bg-zinc-700 { background-color: var(--color-zinc-700); } .bg-zinc-800 { background-color: var(--color-zinc-800); } .bg-zinc-800\/40 { background-color: #27272a66; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-800\/40 { background-color: color-mix(in oklab, var(--color-zinc-800) 40%, transparent); } } .bg-zinc-800\/80 { background-color: #27272acc; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-800\/80 { background-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent); } } .bg-zinc-800\/90 { background-color: #27272ae6; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-800\/90 { background-color: color-mix(in oklab, var(--color-zinc-800) 90%, transparent); } } .bg-zinc-900 { background-color: var(--color-zinc-900); } .bg-zinc-900\/50 { background-color: #18181b80; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-900\/50 { background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent); } } .bg-zinc-900\/55 { background-color: #18181b8c; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-900\/55 { background-color: color-mix(in oklab, var(--color-zinc-900) 55%, transparent); } } .bg-zinc-900\/60 { background-color: #18181b99; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-900\/60 { background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent); } } .bg-zinc-900\/70 { background-color: #18181bb3; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-900\/70 { background-color: color-mix(in oklab, var(--color-zinc-900) 70%, transparent); } } .bg-zinc-900\/85 { background-color: #18181bd9; } @supports (color: color-mix(in lab, red, red)) { .bg-zinc-900\/85 { background-color: color-mix(in oklab, var(--color-zinc-900) 85%, transparent); } } .bg-zinc-950 { background-color: var(--color-zinc-950); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-amber-400\/0 { --tw-gradient-from: #0000; --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)); } @supports (color: color-mix(in lab, red, red)) { .from-amber-400\/0 { --tw-gradient-from: color-mix(in oklab, var(--color-amber-400) 0%, transparent); } } .from-indigo-400\/0 { --tw-gradient-from: #0000; --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)); } @supports (color: color-mix(in lab, red, red)) { .from-indigo-400\/0 { --tw-gradient-from: color-mix(in oklab, var(--color-indigo-400) 0%, transparent); } } .from-red-400\/0 { --tw-gradient-from: #0000; --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)); } @supports (color: color-mix(in lab, red, red)) { .from-red-400\/0 { --tw-gradient-from: color-mix(in oklab, var(--color-red-400) 0%, transparent); } } .via-amber-400 { --tw-gradient-via: var(--color-amber-400); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-indigo-400 { --tw-gradient-via: var(--color-indigo-400); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-red-400 { --tw-gradient-via: var(--color-red-400); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .to-amber-400\/0 { --tw-gradient-to: #0000; --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)); } @supports (color: color-mix(in lab, red, red)) { .to-amber-400\/0 { --tw-gradient-to: color-mix(in oklab, var(--color-amber-400) 0%, transparent); } } .to-indigo-400\/0 { --tw-gradient-to: #0000; --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)); } @supports (color: color-mix(in lab, red, red)) { .to-indigo-400\/0 { --tw-gradient-to: color-mix(in oklab, var(--color-indigo-400) 0%, transparent); } } .to-red-400\/0 { --tw-gradient-to: #0000; --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)); } @supports (color: color-mix(in lab, red, red)) { .to-red-400\/0 { --tw-gradient-to: color-mix(in oklab, var(--color-red-400) 0%, transparent); } } .bg-repeat { background-repeat: repeat; } .mask-no-clip { mask-clip: no-clip; } .mask-repeat { mask-repeat: repeat; } .fill-current { fill: currentcolor; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .\!p-4 { padding: calc(var(--spacing) * 4) !important; } .p-0 { padding: calc(var(--spacing) * 0); } .p-0\! { padding: calc(var(--spacing) * 0) !important; } .p-0\.5 { padding: calc(var(--spacing) * .5); } .p-1 { padding: calc(var(--spacing) * 1); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-2 { padding: calc(var(--spacing) * 2); } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-0\.5 { padding-inline: calc(var(--spacing) * .5); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-1\! { padding-inline: calc(var(--spacing) * 1) !important; } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); } .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-10 { padding-inline: calc(var(--spacing) * 10); } .py-0 { padding-block: calc(var(--spacing) * 0); } .py-0\.5 { padding-block: calc(var(--spacing) * .5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-14 { padding-block: calc(var(--spacing) * 14); } .py-\[1px\] { padding-block-start: 1px; padding-block-end: 1px; } .py-\[2px\] { padding-block-start: 2px; padding-block-end: 2px; } .py-\[3px\] { padding-block-start: 3px; padding-block-end: 3px; } .pt-0\.5 { padding-top: calc(var(--spacing) * .5); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-2\.5 { padding-top: calc(var(--spacing) * 2.5); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-\[15vh\] { padding-top: 15vh; } .pt-\[28px\] { padding-top: 28px; } .pr-1 { padding-right: calc(var(--spacing) * 1); } .pr-1\.5 { padding-right: calc(var(--spacing) * 1.5); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-14 { padding-right: calc(var(--spacing) * 14); } .pb-0\.5 { padding-bottom: calc(var(--spacing) * .5); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-1\.5 { padding-bottom: calc(var(--spacing) * 1.5); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-24 { padding-bottom: calc(var(--spacing) * 24); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-2\.5 { padding-left: calc(var(--spacing) * 2.5); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-6 { padding-left: calc(var(--spacing) * 6); } .pl-7 { padding-left: calc(var(--spacing) * 7); } .text-center { text-align: center; } .text-left { text-align: left; } .text-left\! { text-align: left !important; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .align-text-bottom { vertical-align: text-bottom; } .font-mono { font-family: var(--font-mono); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[11px\] { font-size: 11px; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[12px\] { font-size: 12px; } .text-\[13px\] { font-size: 13px; } .text-\[14px\] { font-size: 14px; } .text-\[15px\] { font-size: 15px; } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .text-wrap { text-wrap: wrap; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .text-clip { text-overflow: clip; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-wrap { white-space: pre-wrap; } .text-amber-100\/90 { color: #fef3c6e6; } @supports (color: color-mix(in lab, red, red)) { .text-amber-100\/90 { color: color-mix(in oklab, var(--color-amber-100) 90%, transparent); } } .text-amber-200 { color: var(--color-amber-200); } .text-amber-300 { color: var(--color-amber-300); } .text-amber-400 { color: var(--color-amber-400); } .text-amber-400\/60 { color: #fcbb0099; } @supports (color: color-mix(in lab, red, red)) { .text-amber-400\/60 { color: color-mix(in oklab, var(--color-amber-400) 60%, transparent); } } .text-amber-400\/70 { color: #fcbb00b3; } @supports (color: color-mix(in lab, red, red)) { .text-amber-400\/70 { color: color-mix(in oklab, var(--color-amber-400) 70%, transparent); } } .text-amber-400\/80 { color: #fcbb00cc; } @supports (color: color-mix(in lab, red, red)) { .text-amber-400\/80 { color: color-mix(in oklab, var(--color-amber-400) 80%, transparent); } } .text-base { color: var(--color-base); } .text-black { color: var(--color-black); } .text-blue-300 { color: var(--color-blue-300); } .text-blue-300\/70 { color: #90c5ffb3; } @supports (color: color-mix(in lab, red, red)) { .text-blue-300\/70 { color: color-mix(in oklab, var(--color-blue-300) 70%, transparent); } } .text-blue-300\/80 { color: #90c5ffcc; } @supports (color: color-mix(in lab, red, red)) { .text-blue-300\/80 { color: color-mix(in oklab, var(--color-blue-300) 80%, transparent); } } .text-blue-400 { color: var(--color-blue-400); } .text-cyan-400 { color: var(--color-cyan-400); } .text-emerald-300 { color: var(--color-emerald-300); } .text-emerald-400 { color: var(--color-emerald-400); } .text-emerald-400\/80 { color: #00d294cc; } @supports (color: color-mix(in lab, red, red)) { .text-emerald-400\/80 { color: color-mix(in oklab, var(--color-emerald-400) 80%, transparent); } } .text-green-100 { color: var(--color-green-100); } .text-green-300 { color: var(--color-green-300); } .text-green-400 { color: var(--color-green-400); } .text-green-400\/60 { color: #05df7299; } @supports (color: color-mix(in lab, red, red)) { .text-green-400\/60 { color: color-mix(in oklab, var(--color-green-400) 60%, transparent); } } .text-green-400\/70 { color: #05df72b3; } @supports (color: color-mix(in lab, red, red)) { .text-green-400\/70 { color: color-mix(in oklab, var(--color-green-400) 70%, transparent); } } .text-green-400\/80 { color: #05df72cc; } @supports (color: color-mix(in lab, red, red)) { .text-green-400\/80 { color: color-mix(in oklab, var(--color-green-400) 80%, transparent); } } .text-green-500 { color: var(--color-green-500); } .text-indigo-100 { color: var(--color-indigo-100); } .text-indigo-200 { color: var(--color-indigo-200); } .text-indigo-200\/80 { color: #c7d2ffcc; } @supports (color: color-mix(in lab, red, red)) { .text-indigo-200\/80 { color: color-mix(in oklab, var(--color-indigo-200) 80%, transparent); } } .text-indigo-300 { color: var(--color-indigo-300); } .text-orange-400 { color: var(--color-orange-400); } .text-orange-500 { color: var(--color-orange-500); } .text-pink-400 { color: var(--color-pink-400); } .text-purple-400 { color: var(--color-purple-400); } .text-red-100 { color: var(--color-red-100); } .text-red-200 { color: var(--color-red-200); } .text-red-300 { color: var(--color-red-300); } .text-red-400 { color: var(--color-red-400); } .text-red-400\/80 { color: #ff6568cc; } @supports (color: color-mix(in lab, red, red)) { .text-red-400\/80 { color: color-mix(in oklab, var(--color-red-400) 80%, transparent); } } .text-sky-400\/80 { color: #00bcfecc; } @supports (color: color-mix(in lab, red, red)) { .text-sky-400\/80 { color: color-mix(in oklab, var(--color-sky-400) 80%, transparent); } } .text-violet-100 { color: var(--color-violet-100); } .text-violet-200 { color: var(--color-violet-200); } .text-violet-300 { color: var(--color-violet-300); } .text-violet-300\/70 { color: #c4b4ffb3; } @supports (color: color-mix(in lab, red, red)) { .text-violet-300\/70 { color: color-mix(in oklab, var(--color-violet-300) 70%, transparent); } } .text-violet-400 { color: var(--color-violet-400); } .text-white { color: var(--color-white); } .text-yellow-400 { color: var(--color-yellow-400); } .text-yellow-600 { color: var(--color-yellow-600); } .text-zinc-100 { color: var(--color-zinc-100); } .text-zinc-200 { color: var(--color-zinc-200); } .text-zinc-300 { color: var(--color-zinc-300); } .text-zinc-400 { color: var(--color-zinc-400); } .text-zinc-500 { color: var(--color-zinc-500); } .text-zinc-500\/80 { color: #71717bcc; } @supports (color: color-mix(in lab, red, red)) { .text-zinc-500\/80 { color: color-mix(in oklab, var(--color-zinc-500) 80%, transparent); } } .text-zinc-600 { color: var(--color-zinc-600); } .text-zinc-700 { color: var(--color-zinc-700); } .text-zinc-900 { color: var(--color-zinc-900); } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .not-italic { font-style: normal; } .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .lining-nums { --tw-numeric-figure: lining-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .oldstyle-nums { --tw-numeric-figure: oldstyle-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .ordinal { --tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .proportional-nums { --tw-numeric-spacing: proportional-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .slashed-zero { --tw-slashed-zero: slashed-zero; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .stacked-fractions { --tw-numeric-fraction: stacked-fractions; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .normal-nums { font-variant-numeric: normal; } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .overline { text-decoration-line: overline; } .underline { text-decoration-line: underline; } .underline\! { text-decoration-line: underline !important; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .accent-red-500 { accent-color: var(--color-red-500); } .opacity-0 { opacity: 0; } .opacity-50 { opacity: .5; } .opacity-60 { opacity: .6; } .opacity-70 { opacity: .7; } .opacity-75 { opacity: .75; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-none\! { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-0\! { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .ring-1 { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .inset-ring { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-black\/30 { --tw-shadow-color: #0000004d; } @supports (color: color-mix(in lab, red, red)) { .shadow-black\/30 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-violet-500\/40 { --tw-shadow-color: #8d54ff66; } @supports (color: color-mix(in lab, red, red)) { .shadow-violet-500\/40 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-amber-400\/40 { --tw-ring-color: #fcbb0066; } @supports (color: color-mix(in lab, red, red)) { .ring-amber-400\/40 { --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent); } } .ring-blue-400\/40 { --tw-ring-color: #54a2ff66; } @supports (color: color-mix(in lab, red, red)) { .ring-blue-400\/40 { --tw-ring-color: color-mix(in oklab, var(--color-blue-400) 40%, transparent); } } .ring-green-400\/40 { --tw-ring-color: #05df7266; } @supports (color: color-mix(in lab, red, red)) { .ring-green-400\/40 { --tw-ring-color: color-mix(in oklab, var(--color-green-400) 40%, transparent); } } .ring-pink-400\/40 { --tw-ring-color: #fb64b666; } @supports (color: color-mix(in lab, red, red)) { .ring-pink-400\/40 { --tw-ring-color: color-mix(in oklab, var(--color-pink-400) 40%, transparent); } } .ring-red-400\/40 { --tw-ring-color: #ff656866; } @supports (color: color-mix(in lab, red, red)) { .ring-red-400\/40 { --tw-ring-color: color-mix(in oklab, var(--color-red-400) 40%, transparent); } } .ring-violet-400\/20 { --tw-ring-color: #a685ff33; } @supports (color: color-mix(in lab, red, red)) { .ring-violet-400\/20 { --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 20%, transparent); } } .ring-violet-400\/30 { --tw-ring-color: #a685ff4d; } @supports (color: color-mix(in lab, red, red)) { .ring-violet-400\/30 { --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent); } } .ring-violet-400\/40 { --tw-ring-color: #a685ff66; } @supports (color: color-mix(in lab, red, red)) { .ring-violet-400\/40 { --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 40%, transparent); } } .ring-white\/20 { --tw-ring-color: #fff3; } @supports (color: color-mix(in lab, red, red)) { .ring-white\/20 { --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .ring-white\/40 { --tw-ring-color: #fff6; } @supports (color: color-mix(in lab, red, red)) { .ring-white\/40 { --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .ring-zinc-900 { --tw-ring-color: var(--color-zinc-900); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur { --tw-blur: blur(8px); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f)); --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .sepia { --tw-sepia: sepia(100%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .filter { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .backdrop-blur { --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-md { --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, ); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .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, ); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); -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-invert { --tw-backdrop-invert: invert(100%); -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-sepia { --tw-backdrop-sepia: sepia(100%); -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-filter { -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[bottom\] { transition-property: bottom; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[height\,opacity\] { transition-property: height, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[padding\] { transition-property: padding; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[transform\,opacity\] { transition-property: transform, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-200 { --tw-duration: .2s; transition-duration: .2s; } .duration-300 { --tw-duration: .3s; transition-duration: .3s; } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } :where(.divide-x-reverse > :not(:last-child)) { --tw-divide-x-reverse: 1; } .paused { animation-play-state: paused; } .ring-inset { --tw-ring-inset: inset; } .running { animation-play-state: running; } .running\! { animation-play-state: running !important; } .zoom-in { --tw-enter-scale: 0; } .zoom-out { --tw-exit-scale: 0; } @media (hover: hover) { .group-hover\:flex:is(:where(.group):hover *) { display: flex; } } @media (hover: hover) { .group-hover\:hidden:is(:where(.group):hover *) { display: none; } } @media (hover: hover) { .group-hover\:text-violet-400:is(:where(.group):hover *) { color: var(--color-violet-400); } } @media (hover: hover) { .group-hover\:text-zinc-100:is(:where(.group):hover *) { color: var(--color-zinc-100); } } @media (hover: hover) { .group-hover\:opacity-100:is(:where(.group):hover *) { opacity: 1; } } @media (hover: hover) { .group-hover\/arch\:flex:is(:where(.group\/arch):hover *) { display: flex; } } @media (hover: hover) { .group-hover\/arch\:hidden:is(:where(.group\/arch):hover *) { display: none; } } @media (hover: hover) { .group-hover\/file\:opacity-100:is(:where(.group\/file):hover *) { opacity: 1; } } .placeholder\:text-zinc-500::placeholder { color: var(--color-zinc-500); } .placeholder\:text-zinc-600::placeholder { color: var(--color-zinc-600); } .last\:border-0:last-child { border-style: var(--tw-border-style); border-width: 0; } .focus-within\:border-green-700\/60:focus-within { border-color: #00813899; } @supports (color: color-mix(in lab, red, red)) { .focus-within\:border-green-700\/60:focus-within { border-color: color-mix(in oklab, var(--color-green-700) 60%, transparent); } } .focus-within\:border-zinc-500\/60:focus-within { border-color: #71717b99; } @supports (color: color-mix(in lab, red, red)) { .focus-within\:border-zinc-500\/60:focus-within { border-color: color-mix(in oklab, var(--color-zinc-500) 60%, transparent); } } .focus-within\:opacity-100:focus-within { opacity: 1; } @media (hover: hover) { .hover\:scale-110:hover { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (hover: hover) { .hover\:scale-\[1\.04\]:hover { scale: 1.04; } } @media (hover: hover) { .hover\:border-border-light:hover { border-color: var(--color-border-light); } } @media (hover: hover) { .hover\:border-red-900\/60:hover { border-color: #82181a99; } @supports (color: color-mix(in lab, red, red)) { .hover\:border-red-900\/60:hover { border-color: color-mix(in oklab, var(--color-red-900) 60%, transparent); } } } @media (hover: hover) { .hover\:border-violet-500\/30:hover { border-color: #8d54ff4d; } @supports (color: color-mix(in lab, red, red)) { .hover\:border-violet-500\/30:hover { border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent); } } } @media (hover: hover) { .hover\:border-zinc-600:hover { border-color: var(--color-zinc-600); } } @media (hover: hover) { .hover\:bg-amber-400:hover { background-color: var(--color-amber-400); } } @media (hover: hover) { .hover\:bg-blue-500:hover { background-color: var(--color-blue-500); } } @media (hover: hover) { .hover\:bg-blue-500\/40:hover { background-color: #3080ff66; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-blue-500\/40:hover { background-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent); } } } @media (hover: hover) { .hover\:bg-green-500:hover { background-color: var(--color-green-500); } } @media (hover: hover) { .hover\:bg-green-500\/20:hover { background-color: #00c75833; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-green-500\/20:hover { background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent); } } } @media (hover: hover) { .hover\:bg-green-500\/25:hover { background-color: #00c75840; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-green-500\/25:hover { background-color: color-mix(in oklab, var(--color-green-500) 25%, transparent); } } } @media (hover: hover) { .hover\:bg-green-600\/25:hover { background-color: #00a54440; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-green-600\/25:hover { background-color: color-mix(in oklab, var(--color-green-600) 25%, transparent); } } } @media (hover: hover) { .hover\:bg-indigo-400\/40:hover { background-color: #7d87ff66; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-indigo-400\/40:hover { background-color: color-mix(in oklab, var(--color-indigo-400) 40%, transparent); } } } @media (hover: hover) { .hover\:bg-red-400\/10:hover { background-color: #ff65681a; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-red-400\/10:hover { background-color: color-mix(in oklab, var(--color-red-400) 10%, transparent); } } } @media (hover: hover) { .hover\:bg-red-500\/10:hover { background-color: #fb2c361a; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-red-500\/10:hover { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } } @media (hover: hover) { .hover\:bg-red-500\/15:hover { background-color: #fb2c3626; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-red-500\/15:hover { background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent); } } } @media (hover: hover) { .hover\:bg-red-500\/20:hover { background-color: #fb2c3633; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-red-500\/20:hover { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } } @media (hover: hover) { .hover\:bg-red-500\/25:hover { background-color: #fb2c3640; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-red-500\/25:hover { background-color: color-mix(in oklab, var(--color-red-500) 25%, transparent); } } } @media (hover: hover) { .hover\:bg-red-600:hover { background-color: var(--color-red-600); } } @media (hover: hover) { .hover\:bg-red-600\/25:hover { background-color: #e4001440; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-red-600\/25:hover { background-color: color-mix(in oklab, var(--color-red-600) 25%, transparent); } } } @media (hover: hover) { .hover\:bg-surface:hover { background-color: var(--color-surface); } } @media (hover: hover) { .hover\:bg-surface-light:hover { background-color: var(--color-surface-light); } } @media (hover: hover) { .hover\:bg-surface-light\/30:hover { background-color: #2a2a2a4d; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface-light\/30:hover { background-color: color-mix(in oklab, var(--color-surface-light) 30%, transparent); } } } @media (hover: hover) { .hover\:bg-surface-light\/50:hover { background-color: #2a2a2a80; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface-light\/50:hover { background-color: color-mix(in oklab, var(--color-surface-light) 50%, transparent); } } } @media (hover: hover) { .hover\:bg-surface-light\/60:hover { background-color: #2a2a2a99; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface-light\/60:hover { background-color: color-mix(in oklab, var(--color-surface-light) 60%, transparent); } } } @media (hover: hover) { .hover\:bg-surface-light\/70:hover { background-color: #2a2a2ab3; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface-light\/70:hover { background-color: color-mix(in oklab, var(--color-surface-light) 70%, transparent); } } } @media (hover: hover) { .hover\:bg-surface-lighter:hover { background-color: var(--color-surface-lighter); } } @media (hover: hover) { .hover\:bg-surface\/50:hover { background-color: #22222280; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface\/50:hover { background-color: color-mix(in oklab, var(--color-surface) 50%, transparent); } } } @media (hover: hover) { .hover\:bg-surface\/60:hover { background-color: #2229; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface\/60:hover { background-color: color-mix(in oklab, var(--color-surface) 60%, transparent); } } } @media (hover: hover) { .hover\:bg-violet-500:hover { background-color: var(--color-violet-500); } } @media (hover: hover) { .hover\:bg-violet-500\/15:hover { background-color: #8d54ff26; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-violet-500\/15:hover { background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent); } } } @media (hover: hover) { .hover\:bg-violet-500\/20:hover { background-color: #8d54ff33; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-violet-500\/20:hover { background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent); } } } @media (hover: hover) { .hover\:bg-violet-500\/25:hover { background-color: #8d54ff40; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-violet-500\/25:hover { background-color: color-mix(in oklab, var(--color-violet-500) 25%, transparent); } } } @media (hover: hover) { .hover\:bg-violet-500\/30:hover { background-color: #8d54ff4d; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-violet-500\/30:hover { background-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent); } } } @media (hover: hover) { .hover\:bg-violet-600\/25:hover { background-color: #7f22fe40; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-violet-600\/25:hover { background-color: color-mix(in oklab, var(--color-violet-600) 25%, transparent); } } } @media (hover: hover) { .hover\:bg-violet-600\/30:hover { background-color: #7f22fe4d; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-violet-600\/30:hover { background-color: color-mix(in oklab, var(--color-violet-600) 30%, transparent); } } } @media (hover: hover) { .hover\:bg-white:hover { background-color: var(--color-white); } } @media (hover: hover) { .hover\:bg-white\/10:hover { background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/10:hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } @media (hover: hover) { .hover\:bg-zinc-700:hover { background-color: var(--color-zinc-700); } } @media (hover: hover) { .hover\:bg-zinc-800:hover { background-color: var(--color-zinc-800); } } @media (hover: hover) { .hover\:bg-zinc-800\/50:hover { background-color: #27272a80; } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-zinc-800\/50:hover { background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent); } } } @media (hover: hover) { .hover\:bg-zinc-900:hover { background-color: var(--color-zinc-900); } } @media (hover: hover) { .hover\:text-amber-300:hover { color: var(--color-amber-300); } } @media (hover: hover) { .hover\:text-blue-100:hover { color: var(--color-blue-100); } } @media (hover: hover) { .hover\:text-green-300:hover { color: var(--color-green-300); } } @media (hover: hover) { .hover\:text-green-400:hover { color: var(--color-green-400); } } @media (hover: hover) { .hover\:text-red-300:hover { color: var(--color-red-300); } } @media (hover: hover) { .hover\:text-red-400:hover { color: var(--color-red-400); } } @media (hover: hover) { .hover\:text-violet-200:hover { color: var(--color-violet-200); } } @media (hover: hover) { .hover\:text-violet-300:hover { color: var(--color-violet-300); } } @media (hover: hover) { .hover\:text-white:hover { color: var(--color-white); } } @media (hover: hover) { .hover\:text-zinc-100:hover { color: var(--color-zinc-100); } } @media (hover: hover) { .hover\:text-zinc-200:hover { color: var(--color-zinc-200); } } @media (hover: hover) { .hover\:text-zinc-300:hover { color: var(--color-zinc-300); } } @media (hover: hover) { .hover\:text-zinc-400:hover { color: var(--color-zinc-400); } } @media (hover: hover) { .hover\:underline:hover { text-decoration-line: underline; } } @media (hover: hover) { .hover\:opacity-100:hover { opacity: 1; } } @media (hover: hover) { .hover\:brightness-125:hover { --tw-brightness: brightness(125%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } } .focus\:border-indigo-500\/50:focus { border-color: #625fff80; } @supports (color: color-mix(in lab, red, red)) { .focus\:border-indigo-500\/50:focus { border-color: color-mix(in oklab, var(--color-indigo-500) 50%, transparent); } } .focus\:border-zinc-500:focus { border-color: var(--color-zinc-500); } .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .active\:scale-\[0\.99\]:active { scale: .99; } .active\:border-zinc-500:active { border-color: var(--color-zinc-500); } .active\:bg-blue-500\/60:active { background-color: #3080ff99; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-blue-500\/60:active { background-color: color-mix(in oklab, var(--color-blue-500) 60%, transparent); } } .active\:bg-emerald-500\/10:active { background-color: #00bb7f1a; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-emerald-500\/10:active { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); } } .active\:bg-indigo-500\/25:active { background-color: #625fff40; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-indigo-500\/25:active { background-color: color-mix(in oklab, var(--color-indigo-500) 25%, transparent); } } .active\:bg-indigo-500\/30:active { background-color: #625fff4d; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-indigo-500\/30:active { background-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent); } } .active\:bg-indigo-600:active { background-color: var(--color-indigo-600); } .active\:bg-red-500\/10:active { background-color: #fb2c361a; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-red-500\/10:active { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } .active\:bg-red-500\/20:active { background-color: #fb2c3633; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-red-500\/20:active { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } .active\:bg-red-500\/25:active { background-color: #fb2c3640; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-red-500\/25:active { background-color: color-mix(in oklab, var(--color-red-500) 25%, transparent); } } .active\:bg-surface:active { background-color: var(--color-surface); } .active\:bg-surface\/60:active { background-color: #2229; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-surface\/60:active { background-color: color-mix(in oklab, var(--color-surface) 60%, transparent); } } .active\:bg-violet-500:active { background-color: var(--color-violet-500); } .active\:bg-violet-500\/30:active { background-color: #8d54ff4d; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-violet-500\/30:active { background-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent); } } .active\:bg-white\/5:active { background-color: #ffffff0d; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-white\/5:active { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .active\:bg-white\/10:active { background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-white\/10:active { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .active\:bg-white\/15:active { background-color: #ffffff26; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-white\/15:active { background-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .active\:bg-zinc-800:active { background-color: var(--color-zinc-800); } .active\:bg-zinc-800\/70:active { background-color: #27272ab3; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-zinc-800\/70:active { background-color: color-mix(in oklab, var(--color-zinc-800) 70%, transparent); } } .active\:bg-zinc-900:active { background-color: var(--color-zinc-900); } .active\:bg-zinc-900\/85:active { background-color: #18181bd9; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-zinc-900\/85:active { background-color: color-mix(in oklab, var(--color-zinc-900) 85%, transparent); } } .active\:bg-zinc-900\/90:active { background-color: #18181be6; } @supports (color: color-mix(in lab, red, red)) { .active\:bg-zinc-900\/90:active { background-color: color-mix(in oklab, var(--color-zinc-900) 90%, transparent); } } .active\:text-blue-100:active { color: var(--color-blue-100); } .active\:text-indigo-200:active { color: var(--color-indigo-200); } .active\:text-red-300:active { color: var(--color-red-300); } .active\:text-white:active { color: var(--color-white); } .active\:text-zinc-100:active { color: var(--color-zinc-100); } .active\:text-zinc-200:active { color: var(--color-zinc-200); } .active\:text-zinc-300:active { color: var(--color-zinc-300); } .active\:opacity-70:active { opacity: .7; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:bg-surface-light:disabled { background-color: var(--color-surface-light); } .disabled\:bg-white\/10:disabled { background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .disabled\:bg-white\/10:disabled { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .disabled\:text-zinc-600:disabled { color: var(--color-zinc-600); } .disabled\:opacity-30:disabled { opacity: .3; } .disabled\:opacity-40:disabled { opacity: .4; } .disabled\:opacity-50:disabled { opacity: .5; } @media (hover: hover) { .disabled\:hover\:bg-transparent:disabled:hover { background-color: #0000; } } .data-\[current\=false\]\:bg-zinc-600[data-current="false"] { background-color: var(--color-zinc-600); } .data-\[hovered\]\:bg-surface-light[data-hovered] { background-color: var(--color-surface-light); } @media (min-width: 48rem) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .\[\&_details\]\:my-2 details { margin-block: calc(var(--spacing) * 2); } .\[\&_details\]\:overflow-hidden details { overflow: hidden; } .\[\&_details\]\:rounded-lg details { border-radius: calc(var(--radius) * 1); } .\[\&_details\]\:border details { border-style: var(--tw-border-style); border-width: 1px; } .\[\&_details\]\:border-border details { border-color: var(--color-border); } .\[\&_details\>\:not\(summary\)\]\:px-3 details > :not(summary) { padding-inline: calc(var(--spacing) * 3); } .\[\&_details\>\:not\(summary\)\]\:py-2 details > :not(summary) { padding-block: calc(var(--spacing) * 2); } .\[\&_p\]\:my-1 p { margin-block: calc(var(--spacing) * 1); } .\[\&_pre\]\:my-2 pre { margin-block: calc(var(--spacing) * 2); } .\[\&_summary\]\:cursor-pointer summary { cursor: pointer; } .\[\&_summary\]\:bg-surface-light summary { background-color: var(--color-surface-light); } .\[\&_summary\]\:px-3 summary { padding-inline: calc(var(--spacing) * 3); } .\[\&_summary\]\:py-1\.5 summary { padding-block: calc(var(--spacing) * 1.5); } .\[\&_summary\]\:text-\[12px\] summary { font-size: 12px; } .\[\&_summary\]\:font-medium summary { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .\[\&_summary\]\:text-zinc-300 summary { color: var(--color-zinc-300); } } @layer theme, base, components, utilities; @layer theme, base, components, utilities; @layer theme; @layer base { *, :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%; 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 { color: inherit; border-top-width: 1px; height: 0; } 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; 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 { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } 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 { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::-webkit-file-upload-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:-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 { padding-inline-start: 20px; } :where(select:-moz-any([multiple], [size])) optgroup option { padding-inline-start: 20px; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::-webkit-file-upload-button { margin-inline-end: 4px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports ( not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { text-align: inherit; min-height: 1lh; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-year-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-month-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-day-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-hour-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-minute-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-second-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block-start: 0; padding-block-end: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button { appearance: button; } input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::-webkit-file-upload-button { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities; @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; } @layer base { *, :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 { position: relative; isolation: isolate; display: inline-flex; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); transform-origin: center; border-radius: calc(var(--radius) * 1.5); padding: calc(var(--spacing) * 1); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: transform .25s var(--ease-out-quart), color .15s var(--ease-out), background-color .1s var(--ease-out), box-shadow .15s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); flex-shrink: 0; justify-content: center; align-items: center; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { 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); height: auto; } .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; transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth); } .field-error[data-visible="true"] { height: auto; } .field-error[data-visible="true"] { opacity: 1; } .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 { --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__heading { display: flex; } .accordion__indicator { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; margin-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 { position: relative; --tw-border-style: none; border-style: none; } .accordion__item:after { content: ""; position: absolute; bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--separator); border-radius: 3.40282e38px; width: 100%; height: 1px; } .accordion__item:last-child:after { content: none; } .accordion__item[data-hide-separator="true"]:after { display: none; } .accordion__trigger { cursor: var(--cursor-interactive); display: flex; 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; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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); overflow: clip; transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out); } .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(--color-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 { display: flex; align-items: center; } .breadcrumbs .breadcrumbs__link { position: relative; 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); text-decoration-line: none; opacity: 1; } .breadcrumbs .breadcrumbs__link:hover { text-decoration-line: underline; } .breadcrumbs .breadcrumbs__link[data-hovered="true"] { text-decoration-line: underline; } .breadcrumbs .breadcrumbs__link[data-current="true"] { color: var(--link); opacity: 1; } .breadcrumbs .breadcrumbs__item { display: flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * .5); padding-inline: calc(var(--spacing) * .5); flex-shrink: 0; } .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); display: inline-block; -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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; margin-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); overflow: clip; transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out); } .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 { position: relative; display: inline-flex; border-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-medium); font-weight: var(--font-weight-medium); color: var(--link); text-decoration-line: underline; text-decoration-color: var(--surface); text-decoration-thickness: 1.5px; 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); cursor: var(--cursor-interactive); align-items: center; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } @supports (color: color-mix(in lab, red, red)) { .link { text-decoration-color: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); } } .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; } } @media (hover: hover) { .link:hover { text-decoration-color: var(--muted); } .link:hover .link__icon { opacity: 1; } .link[data-hovered="true"] { 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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; display: inline-flex; 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; } .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); text-decoration-line: none; } .pagination { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--spacing) * 4); flex-direction: column; width: 100%; } @media (min-width: 40rem) { .pagination { flex-direction: row; } } .pagination__summary { display: flex; 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; } @media (min-width: 40rem) { .pagination__summary { align-self: center; } } .pagination__content { display: flex; align-items: center; gap: calc(var(--spacing) * 1); align-self: flex-start; } @media (min-width: 40rem) { .pagination__content { align-self: center; } } .pagination__item { display: inline-flex; } .pagination__link { position: relative; isolation: isolate; display: inline-flex; 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; outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; 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-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); justify-content: center; align-items: center; } @media (min-width: 48rem) { .pagination__link { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: inline-flex; width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; } @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); padding-inline: calc(var(--spacing) * 2.5); width: auto; } .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 { padding-inline: calc(var(--spacing) * 2); width: auto; } .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); color: var(--color-base); } @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 { padding-inline: calc(var(--spacing) * 3); width: auto; } .pagination--lg .pagination__ellipsis { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); color: var(--color-base); } @media (min-width: 48rem) { .pagination--lg .pagination__ellipsis { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } } .pagination--lg .pagination__summary { color: var(--color-base); } .tabs { display: flex; gap: calc(var(--spacing) * 2); } .tabs[data-orientation="horizontal"] { flex-direction: column; } .tabs[data-orientation="vertical"] { flex-direction: row; } .tabs__list-container { position: relative; } .tabs__list { display: inline-flex; background-color: var(--default); padding: calc(var(--spacing) * 1); border-radius: calc(var(--radius-2xl) + .25rem); } .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 { position: relative; z-index: 1; cursor: var(--cursor-interactive); display: flex; height: calc(var(--spacing) * 8); border-radius: calc(var(--radius) * 3); 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; 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); justify-content: center; align-items: center; width: 100%; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .tabs__separator { background-color: var(--muted); position: absolute; pointer-events: none; transition: opacity .15s var(--ease-smooth); border-radius: 4px; } @supports (color: color-mix(in lab, red, red)) { .tabs__separator { background-color: color-mix(in oklab, var(--muted) 25%, transparent); } } .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 { padding: calc(var(--spacing) * 2); --tw-outline-style: none; outline-style: none; width: 100%; } .tabs__panel[data-exiting="true"] { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); width: 100%; } .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); position: absolute; z-index: -1; border-radius: var(--radius-3xl); background-color: var(--segment); transition-property: translate, width, height; transition-duration: .25s; transition-timing-function: var(--ease-out-fluid); width: 100%; height: 100%; 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-container > .tabs__list { padding: calc(var(--spacing) * 0); background-color: #0000; border-radius: 0; } .tabs--secondary > .tabs__list-container > .tabs__list[data-orientation="horizontal"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-border); overflow-x: auto; overflow-y: clip; scrollbar-width: none; max-width: 100%; } .tabs--secondary > .tabs__list-container > .tabs__list[data-orientation="horizontal"]::-webkit-scrollbar { display: none; } .tabs--secondary > .tabs__list-container > .tabs__list[data-orientation="vertical"] { border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--color-border); } .tabs--secondary > .tabs__list-container .tabs__tab { border-radius: 0; } .tabs--secondary > .tabs__list-container .tabs__tab[data-selected="true"] { color: var(--foreground); } .tabs--secondary > .tabs__list-container .tabs__separator { display: none; } .tabs--secondary > .tabs__list-container .tabs__indicator { background-color: var(--accent); box-shadow: none; border-radius: 0; } .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator { height: 2px; top: auto; bottom: 0; } .tabs--secondary[data-orientation="vertical"] > .tabs__list-container .tabs__indicator { width: 2px; height: 100%; top: 0; left: 0; } .button { position: relative; isolation: isolate; display: inline-flex; 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); 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; outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; 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, ); 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); width: -moz-fit-content; width: fit-content; } @media (min-width: 48rem) { .button { height: calc(var(--spacing) * 9); } } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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); color: var(--color-base); } @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(--color-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 { display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 0); height: auto; } .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; position: absolute; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; border-radius: 4px; } .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 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0; } .button-group--horizontal .button--outline:last-child { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0; } .button-group--horizontal .button--outline:not(:first-child):not(:last-child) { border-inline-style: var(--tw-border-style); border-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-block-start-width: 0; border-block-end-width: 0; } .button-group--full-width { width: 100%; } .toggle-button { position: relative; isolation: isolate; display: inline-flex; 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); 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; outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; 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, ); 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); width: -moz-fit-content; width: fit-content; } @media (min-width: 48rem) { .toggle-button { height: calc(var(--spacing) * 9); } } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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); color: var(--color-base); } @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 { display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 0); width: -moz-fit-content; width: fit-content; height: auto; } .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; position: absolute; pointer-events: none; transition: opacity .15s var(--ease-smooth); background-color: currentColor; border-radius: 4px; } .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 { display: grid; grid-auto-flow: column; align-items: center; gap: calc(var(--spacing) * 2); width: -moz-fit-content; width: fit-content; } .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(--color-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 { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .dropdown__trigger { display: inline-block; --tw-outline-style: none; 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, ); cursor: var(--cursor-interactive); } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { transform-origin: var(--trigger-anchor-point); scroll-padding-block: calc(var(--spacing) * 1); overflow-y: auto; 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); max-width: 48svw; } @media (min-width: 48rem) { .dropdown__popover { min-width: calc(var(--spacing) * 55); } } .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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(90 * 1%); --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: calc(95 * 1%); --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 { position: relative; display: flex; gap: calc(var(--spacing) * .5); overflow: clip; padding: calc(var(--spacing) * 1); flex-direction: column; width: 100%; } .dropdown__menu [data-slot="separator"] { width: 94%; margin-left: 3%; } .list-box-item { position: relative; display: flex; min-height: calc(var(--spacing) * 9); justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out); cursor: var(--cursor-interactive); width: 100%; } .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 [data-slot="label"] { pointer-events: none; -webkit-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; 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: absolute; top: 50%; right: calc(var(--spacing) * 2); display: flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--default-foreground); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .25s; } .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 { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 0); flex-direction: column; } .list-box { position: relative; display: flex; gap: calc(var(--spacing) * 1); overflow: clip; padding: calc(var(--spacing) * 1); flex-direction: column; width: 100%; } .list-box [data-slot="separator"][data-orientation="horizontal"] { width: 94%; margin-left: 3%; } .menu-item { position: relative; display: flex; min-height: calc(var(--spacing) * 9); justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 3); border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out); cursor: var(--cursor-interactive); width: 100%; } .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 [data-slot="label"] { pointer-events: none; -webkit-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; 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: absolute; top: 50%; left: calc(var(--spacing) * 2); display: flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--muted); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .25s; flex-shrink: 0; justify-content: center; align-items: center; transition-duration: .25s; } .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); --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[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--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 { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 0); flex-direction: column; } .menu { position: relative; display: flex; gap: calc(var(--spacing) * 1); overflow: clip; padding: calc(var(--spacing) * 1); flex-direction: column; width: 100%; } .menu [data-slot="separator"] { width: 94%; margin-left: 3%; } .tag-group { position: relative; display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .tag-group__list { position: relative; display: flex; gap: calc(var(--spacing) * 1.5); flex-wrap: wrap; } .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; position: relative; display: inline-flex; 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; 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, ); cursor: var(--cursor-interactive); border-radius: 3.40282e38px; } .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 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .tag:-webkit-any([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent); 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); } } @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); 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); } } @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); 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); } } @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) * 2); 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) * 2); 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(--color-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 { position: relative; 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; width: 100%; box-shadow: inset 0 0 0 1px #0000001a; } .color-area[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .color-area--show-dots:after { content: ""; pointer-events: none; position: absolute; inset: calc(var(--spacing) * 0); border-radius: inherit; background-image: radial-gradient(circle, #fff3 1px, #0000 1px); background-size: 8px 8px; } .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 #0000001a, inset 0 0 0 1px #0000001a; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: inline-flex; 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); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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); overflow-x: hidden; overflow-y: auto; 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); display: flex; gap: calc(var(--spacing) * 3); -ms-overflow-style: none; scrollbar-width: none; flex-direction: column; } .color-picker__popover::-webkit-scrollbar { display: 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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95 * 1%); --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: calc(95 * 1%); --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 { display: grid; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; grid-template-rows: auto auto; width: 100%; } .color-slider:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-areas: "track"; grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; } .color-slider:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-areas: "label" "track"; grid-template-columns: 1fr; } .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-areas: "output" "track"; grid-template-columns: 1fr; } .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) .color-slider__output { justify-self: end; } .color-slider [data-slot="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); grid-area: label; width: -moz-fit-content; width: fit-content; } .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 { position: relative; grid-area: track; border-radius: 3.40282e38px; } .color-slider .color-slider__track:before { content: ""; position: absolute; z-index: 0; pointer-events: none; } .color-slider .color-slider__track:after { content: ""; position: absolute; z-index: 0; pointer-events: none; } .color-slider .color-slider__thumb { position: absolute; display: flex; 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; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 #0000001a, inset 0 -1px #0000001a; } .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 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-top-right-radius: 999px; border-bottom-right-radius: 999px; right: -.625rem; box-shadow: inset -1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="horizontal"] .color-slider__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); top: 50%; } .color-slider[data-orientation="vertical"] { gap: calc(var(--spacing) * 2); grid-template-areas: "output" "track" "label"; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; flex-direction: row; place-items: center; height: 100%; } .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-areas: "track"; grid-template-rows: 1fr; gap: 0; } .color-slider[data-orientation="vertical"]:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-areas: "track" "label"; grid-template-rows: 1fr auto; } .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-areas: "output" "track"; grid-template-rows: auto 1fr; } .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 #0000001a, inset -1px 0 #0000001a; } .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 #0000001a, inset -1px 0 #0000001a, inset 0 -1px #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__track:after { background-color: var(--track-end-color, transparent); border-top-left-radius: 999px; border-top-right-radius: 999px; top: -.625rem; box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 1px #0000001a; } .color-slider[data-orientation="vertical"] .color-slider__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); left: 50%; } .color-swatch { position: relative; 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; box-shadow: inset 0 0 0 1px #0000001a; } .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 { display: flex; align-items: center; gap: calc(var(--spacing) * 2); flex-wrap: wrap; } .color-swatch-picker__item { position: relative; display: flex; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-style: var(--tw-border-style); --tw-outline-style: none; outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: border-color .1s var(--ease-out), box-shadow .1s var(--ease-out); transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); border-width: 2px; border-color: #0000; border-radius: 3.40282e38px; justify-content: center; align-items: center; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: block; border-radius: inherit; 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, ); width: 100%; height: 100%; } .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; position: absolute; inset: calc(var(--spacing) * 0); z-index: 10; display: flex; justify-content: center; align-items: center; } .color-swatch-picker__indicator > * { color: var(--color-white); transition: transform .15s var(--ease-out); width: 33.3333%; height: 33.3333%; 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 { display: inline-flex; height: calc(var(--spacing) * 9); overflow: hidden; 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; 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); align-items: center; } .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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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-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-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; --tw-ring-offset-width: 0px; } .color-input-group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group[data-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 { display: flex; cursor: text; border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); color: var(--color-base); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; flex: 1; align-items: center; height: 100%; } @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); display: flex; flex-shrink: 0; align-items: center; } .color-input-group__suffix { color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); display: flex; flex-shrink: 0; align-items: center; } .color-input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-input-group-bg); --color-input-group-bg: var(--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; outline-style: solid; --tw-ring-offset-width: 3px; border-color: var(--color-field-border-invalid); background-color: var(--color-input-group-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .color-input-group--secondary [data-slot="color-input-group-input"] { background-color: #0000; } .color-input-group--full-width { width: 100%; } .color-field { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { display: grid; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; width: 100%; } .slider [data-slot="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); grid-area: label; width: -moz-fit-content; width: fit-content; } .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 { position: relative; background-color: var(--default); grid-area: track; border-radius: 3.40282e38px; } .slider .slider__fill { pointer-events: none; position: absolute; background-color: var(--accent); } .slider .slider__thumb { position: absolute; display: flex; 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; } .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 { position: relative; 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; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: #0000; border-right-color: #0000; width: 100%; } .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"] { border-inline-start-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"] { border-inline-end-color: var(--accent); } .slider[data-orientation="horizontal"] .slider__fill { 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); grid-template-areas: "output" "track" "label"; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; flex-direction: row; 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 { width: calc(var(--spacing) * 5); border-block-style: var(--tw-border-style); border-block-start-width: .75rem; border-block-start-color: #0000; border-block-end-width: .75rem; border-block-end-color: #0000; justify-self: center; height: 100%; } .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 { display: inline-flex; 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); --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); } @supports (color: color-mix(in lab, red, red)) { .switch { --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%); } } .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 { position: relative; display: flex; overflow: hidden; background-color: var(--switch-control-bg); transition: background-color .25s var(--ease-smooth), box-shadow .15s var(--ease-out); border-radius: 3.40282e38px; flex-shrink: 0; align-items: center; width: 2.5rem; height: 1.25rem; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: flex; 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); transition: margin .3s var(--ease-out-fluid), background-color .2s var(--ease-out); border-radius: 3.40282e38px; width: 1.375rem; height: 1rem; margin-inline-start: 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); margin-inline-start: calc(100% - 1.5rem); box-shadow: 0 0 5px #00000005, 0 2px 10px #0000000f, 0 0 1px #0000004d; } .switch[data-selected="true"] .switch__thumb { background-color: var(--accent-foreground); color: var(--accent); margin-inline-start: calc(100% - 1.5rem); box-shadow: 0 0 5px #00000005, 0 2px 10px #0000000f, 0 0 1px #0000004d; } .switch--sm .switch__thumb { width: 1.03125rem; height: .75rem; } .switch[aria-checked="true"] :is(.switch--sm .switch__thumb) { margin-inline-start: calc(100% - 1.15625rem); } .switch[data-selected="true"] :is(.switch--sm .switch__thumb) { margin-inline-start: calc(100% - 1.15625rem); } .switch--lg .switch__thumb { width: 1.71875rem; height: 1.25rem; } .switch[aria-checked="true"] :is(.switch--lg .switch__thumb) { margin-inline-start: calc(100% - 1.84375rem); } .switch[data-selected="true"] :is(.switch--lg .switch__thumb) { margin-inline-start: calc(100% - 1.84375rem); } .switch__thumb > * { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .switch__label { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .switch__content { display: flex; gap: calc(var(--spacing) * 0); flex-direction: column; } .switch-group { display: flex; gap: calc(var(--spacing) * 6); flex-direction: column; } .switch-group__items { display: flex; gap: calc(var(--spacing) * 4); } .switch-group--horizontal .switch-group__items { flex-direction: row; } .switch-group--vertical .switch-group__items { flex-direction: column; } .badge { display: inline-flex; 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; } .badge__label { padding-inline: calc(var(--spacing) * .5); } .badge-anchor { position: relative; display: inline-flex; flex-shrink: 0; } .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 { position: absolute; top: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0); transform: translate(25%, -25%); } .badge--top-left { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); transform: translate(-25%, -25%); } .badge--bottom-right { position: absolute; right: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); transform: translate(25%, 25%); } .badge--bottom-left { position: absolute; bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); 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 { display: inline-flex; 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; } .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 { position: relative; display: grid; overflow: clip; grid-template-columns: minmax(0, 1fr); width: 100%; } .table__scroll-container { overflow-x: auto; scrollbar-width: thin; scrollbar-color: oklch(0% 0 0 / .15) transparent; } .table__scroll-container::-webkit-scrollbar { width: 6px; } .table__scroll-container::-webkit-scrollbar-track { background: none; } .table__scroll-container::-webkit-scrollbar-thumb { background: #00000026; 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: #00000040; 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: #ffffff26; 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: #ffffff40; 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: #ffffff26; 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: #ffffff40; 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: #ffffff26; 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: #ffffff40; 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: #0000; 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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .table-root--secondary .table__body tr:first-child td:first-child { 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) { overflow: visible; border-radius: 0; } .table-root--secondary .table__row .table__cell { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--surface); background-color: #0000; } @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); } } @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); 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)); width: 100%; } .table-root--primary .table__content { overflow: clip; } .table__header { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); background-color: var(--surface-secondary); } @supports (color: color-mix(in lab, red, red)) { .table__header { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } } .table__column { position: relative; 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); } .table__column:after { content: ""; pointer-events: none; position: absolute; top: 50%; right: calc(var(--spacing) * 0); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * .5); background-color: var(--separator); width: 1px; } .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; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } .table__column[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } .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) { position: relative; overflow: clip; border-radius: calc(var(--radius) * 2); height: 100%; } .table__row { position: relative; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); height: 100%; } @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: #2226; } @supports (color: color-mix(in lab, red, red)) { .table__row:hover .table__cell { background-color: color-mix(in oklab, var(--color-surface) 40%, transparent); } } .table__row[data-hovered="true"] .table__cell { background-color: #2226; } @supports (color: color-mix(in lab, red, red)) { .table__row[data-hovered="true"] .table__cell { background-color: color-mix(in oklab, var(--color-surface) 40%, transparent); } } } .table__row[data-selected="true"] .table__cell { background-color: #2222221a; } @supports (color: color-mix(in lab, red, red)) { .table__row[data-selected="true"] .table__cell { background-color: color-mix(in oklab, var(--color-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; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } .table__row[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } .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(--color-surface); 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); height: 100%; } @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; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } .table__cell[data-focus-visible="true"] { border-radius: calc(var(--radius) * 1); --tw-outline-style: none; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } .table__cell[data-tree-column] { padding-inline-start: calc(1rem * var(--table-row-level, 1)); } .table__footer { display: flex; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); align-items: center; } .table__resizable-container { position: relative; overflow: auto; } .table__column-resizer { position: absolute; top: 50%; right: calc(var(--spacing) * 0); height: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); border-radius: calc(var(--radius) * .5); background-color: var(--separator); box-sizing: content-box; --tw-translate-x: calc(1 / 2 * 100%); 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; outline-style: none; background-clip: content-box; border-style: none; width: 1px; } .table__column-resizer[data-hovered="true"] { width: calc(var(--spacing) * .5); background-color: var(--accent); height: 100%; } .table__column-resizer:hover { width: calc(var(--spacing) * .5); background-color: var(--accent); height: 100%; } .table__column-resizer[data-resizing="true"] { width: calc(var(--spacing) * .5); background-color: var(--accent); height: 100%; } .table__column-resizer[data-focus-visible="true"] { width: calc(var(--spacing) * .5); background-color: var(--focus); height: 100%; } .table__column-resizer:focus-visible { width: calc(var(--spacing) * .5); background-color: var(--focus); height: 100%; } .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-inline-start: auto; margin-inline-end: auto; } .table__load-more [role="rowheader"] { padding-block: calc(var(--spacing) * 3); text-align: center; } .table__load-more [role="rowheader"] > * { margin-inline-start: auto; margin-inline-end: auto; } .table__load-more-content { display: flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2); } .alert { display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 3); background-color: var(--color-surface); 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; width: 100%; } .alert__content { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; height: 100%; } .alert__indicator { display: flex; padding: calc(var(--spacing) * 1); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; } .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; position: relative; overflow: hidden; border-radius: calc(var(--radius) * .5); background-color: var(--surface-tertiary); } @supports (color: color-mix(in lab, red, red)) { .skeleton { background-color: color-mix(in oklab, var(--surface-tertiary) 70%, transparent); } } .skeleton--shimmer:after { position: absolute; inset: calc(var(--spacing) * 0); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); animation: skeleton 2s linear infinite; --tw-gradient-position: to right; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: transparent; --tw-gradient-via: var(--surface-tertiary); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-content: ""; content: var(--tw-content); } @supports (background-image: linear-gradient(in lab, red, red)) { .skeleton--shimmer:after { --tw-gradient-position: to right in oklab; } } .skeleton--shimmer:has(.skeleton):after { content: none; } .skeleton--shimmer:has(.skeleton):before { position: absolute; inset: calc(var(--spacing) * 0); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); animation: skeleton 2s linear infinite; --tw-content: ""; content: var(--tw-content); z-index: 10; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(90deg, #0000 0%, #ffffff80 50%, #0000 100%); } .skeleton--shimmer:has(.skeleton) .skeleton:after { content: none; } .skeleton--pulse { animation: var(--animate-pulse); } .meter { display: grid; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; --meter-fill: var(--color-accent); width: 100%; } .meter [data-slot="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); grid-area: label; width: -moz-fit-content; width: fit-content; } .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 { position: relative; overflow: hidden; background-color: var(--default); grid-area: track; height: calc(var(--spacing) * 2); border-radius: 3.40282e38px; } .meter .meter__fill { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--meter-fill); transition: width .3s var(--ease-out); border-radius: 3.40282e38px; height: 100%; } .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 { display: grid; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; --progress-bar-fill: var(--color-accent); width: 100%; } .progress-bar [data-slot="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); grid-area: label; width: -moz-fit-content; width: fit-content; } .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 { position: relative; overflow: hidden; background-color: var(--default); grid-area: track; height: calc(var(--spacing) * 2); border-radius: 3.40282e38px; } .progress-bar .progress-bar__fill { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--progress-bar-fill); transition: width .3s var(--ease-out); border-radius: 3.40282e38px; height: 100%; } .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 { animation: progress-bar-indeterminate 1.5s cubic-bezier(.65, 0, .35, 1) infinite; width: 40%; } .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 { display: inline-flex; --progress-circle-stroke: var(--color-accent); --progress-circle-track-stroke: var(--color-default); justify-content: center; align-items: center; } .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: progress-circle-spin 1s linear infinite; } .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; position: relative; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); transform-origin: center; animation: spin .75s linear infinite; } .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; position: fixed; z-index: 50; --tw-outline-style: none; outline-style: none; display: block; width: calc(100vw - 2rem); } @media (min-width: 40rem) { .toast-region { width: auto; } .toast-region { min-width: var(--toast-width); } } .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-width: 2px; outline-offset: 2px; outline-color: var(--focus); } .toast { position: absolute; pointer-events: auto; display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--spacing) * 1.5); border-radius: calc(var(--radius) * 3); background-color: var(--color-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; 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; display: flex; opacity: 0; } .toast:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; outline-offset: 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 { display: flex; flex-direction: column; flex-grow: 1; align-self: center; align-items: flex-start; height: 100%; } .toast__indicator { display: flex; padding: calc(var(--spacing) * 1); color: var(--overlay-foreground); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; } .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 { position: absolute; 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(--color-border); background-color: var(--default); opacity: 1; transition: opacity .15s var(--ease-smooth); } @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: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: toast-slide-bottom-in .35s; } ::view-transition-old(.toast-bottom):only-child { animation: toast-slide-bottom-out .35s; animation-fill-mode: forwards; } ::view-transition-new(.toast-top):only-child { animation: toast-slide-top-in .35s; } ::view-transition-old(.toast-top):only-child { animation: toast-slide-top-out .35s; animation-fill-mode: forwards; } @keyframes toast-slide-bottom-in { from { translate: 0 100%; opacity: 0; } } @keyframes toast-slide-bottom-out { to { translate: 0 100%; opacity: 0; } } @keyframes toast-slide-top-in { from { translate: 0 -100%; opacity: 0; } } @keyframes toast-slide-top-out { to { translate: 0 -100%; opacity: 0; } } .checkbox-group { display: flex; flex-direction: column; } .checkbox-group [data-slot="checkbox"] { margin-top: calc(var(--spacing) * 4); } .checkbox { display: flex; gap: calc(var(--spacing) * 3); --tw-outline-style: none; outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); } .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; user-select: none; } .checkbox [data-slot="description"] { text-wrap: wrap; -webkit-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 { position: relative; display: inline-flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); overflow: hidden; 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; outline-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease-out), transform .1s var(--ease-out); cursor: var(--cursor-interactive); flex-shrink: 0; justify-content: center; align-items: center; } .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:has([data-slot="description"]) .checkbox__control { margin-top: calc(var(--spacing) * .5); } .checkbox__control:before { pointer-events: none; position: absolute; 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); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: #0000; } .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: #0000; } .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; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[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; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control { background-color: var(--danger); color: var(--danger-foreground); border-color: #0000; } .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: #0000; } .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: #0000; } .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: #0000; } .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 { position: relative; z-index: 10; display: flex; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); justify-content: center; align-items: center; } .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 { display: flex; gap: calc(var(--spacing) * 0); flex-direction: column; } .checkbox--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .checkbox--secondary .checkbox__control { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--checkbox-control-bg); --checkbox-control-bg: var(--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 { display: flex; gap: calc(var(--spacing) * 6); flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: calc(var(--spacing) * 0); } .fieldset__legend { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .fieldset__field_group { width: 100%; } :where(.fieldset__field_group > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } .fieldset__actions { display: flex; align-items: center; gap: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1); } .input-otp { position: relative; display: flex; align-items: center; gap: calc(var(--spacing) * 2); } .input-otp[data-disabled="true"] { cursor: not-allowed; opacity: .5; } .input-otp__group { display: flex; align-items: center; gap: calc(var(--spacing) * 2); } .input-otp__slot { position: relative; display: flex; 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; 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); flex: 1; justify-content: center; align-items: center; } .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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"] { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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-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-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; --tw-ring-offset-width: 0px; } .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; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-otp__slot-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 center; } .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 { position: absolute; height: calc(var(--spacing) * 4); animation: caret-blink 1.2s ease-out infinite; background-color: var(--field-placeholder, var(--muted)); border-radius: 4px; width: 2px; } .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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-otp-slot-bg); --input-otp-slot-bg: var(--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); 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; 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); } .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: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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .input[data-focused="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .input[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input[data-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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-bg); --input-bg: var(--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; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--input-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input--full-width { width: 100%; } .input-group { display: inline-flex; 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; 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); align-items: center; } .input-group:has([data-slot="input-group-textarea"]) { align-items: flex-start; height: auto; } .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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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: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-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; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .input-group:has([data-slot="input-group-textarea"]:focus) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group[data-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); color: var(--color-base); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; 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 { display: flex; border-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5)); 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); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); background-color: #0000; 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; height: 100%; } .input-group:has([data-slot="input-group-textarea"]) .input-group__prefix { align-items: flex-start; padding-top: .5rem; } .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 { display: flex; 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)); 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); transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth); background-color: #0000; border-top: none; border-bottom: none; border-right: none; justify-content: center; align-items: center; height: 100%; } .input-group:has([data-slot="input-group-textarea"]) .input-group__suffix { align-items: flex-start; padding-top: .5rem; } .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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--input-group-bg); --input-group-bg: var(--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:has([data-slot="input-group-input"]:focus) { background-color: var(--input-group-bg-focus); } .input-group--secondary:has([data-slot="input-group-textarea"]:focus) { background-color: var(--input-group-bg-focus); } .input-group--secondary[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; border-color: var(--color-field-border-invalid); background-color: var(--input-group-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .input-group--secondary [data-slot="input-group-input"] { background-color: #0000; } .input-group--secondary [data-slot="input-group-textarea"] { background-color: #0000; } .input-group--full-width { width: 100%; } .number-field { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { display: grid; height: calc(var(--spacing) * 9); overflow: hidden; 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; outline-style: none; border-width: 1px; border-width: var(--border-width-field); border-color: var(--color-field-border); grid-template-columns: 40px 1fr 40px; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); align-items: center; } .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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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-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-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; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .number-field__group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .number-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field__group[data-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); color: var(--color-base); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; } @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 { display: flex; width: calc(var(--spacing) * 10); color: var(--field-foreground, var(--foreground)); --tw-outline-style: none; 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); cursor: var(--cursor-interactive); background-color: #0000; border-style: solid; border-radius: 0; justify-content: center; align-items: center; height: 100%; } :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; } } :is(.number-field__increment-button, .number-field__decrement-button):active { background-color: var(--field-foreground, var(--foreground)); transform: scale(.97); } @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)[data-pressed="true"] { background-color: var(--field-foreground, var(--foreground)); transform: scale(.97); } @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):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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--number-field-group-bg); --number-field-group-bg: var(--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; outline-style: solid; --tw-ring-offset-width: 3px; border-color: var(--color-field-border-invalid); background-color: var(--number-field-group-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .number-field--secondary .number-field__group [data-slot="number-field-input"] { background-color: #0000; } .number-field--full-width, .number-field__group--full-width { width: 100%; } .radio-group { display: flex; flex-direction: column; } .radio-group[data-orientation="vertical"] [data-slot="radio"] { margin-top: calc(var(--spacing) * 4); } .radio-group[data-orientation="horizontal"] { gap: calc(var(--spacing) * 4); flex-flow: wrap; } .radio-group--secondary .radio__control { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--radio-control-bg); --radio-control-bg: var(--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 { position: relative; display: flex; align-items: flex-start; gap: calc(var(--spacing) * 3); --tw-outline-style: none; outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); } .radio [data-slot="label"] { -webkit-user-select: none; user-select: none; } .radio [data-slot="description"] { text-wrap: wrap; -webkit-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 { position: relative; display: inline-flex; 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; 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); cursor: var(--cursor-interactive); border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; margin-top: 3px; } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: #0000; } .radio[data-selected="true"] .radio__control { background-color: var(--accent); border-color: #0000; } .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; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"] .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"] .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"] .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"] .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"] .radio__control[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[aria-invalid="true"] .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[aria-invalid="true"] .radio__control[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][aria-checked="true"] .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected="true"] .radio__control { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected="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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected="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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected="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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected="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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[data-invalid="true"][data-selected="true"] .radio__control[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio[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; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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; outline-style: solid; --tw-ring-offset-width: 3px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .radio__indicator { position: absolute; inset: calc(var(--spacing) * 0); display: flex; pointer-events: none; justify-content: center; align-items: center; } .radio__indicator:empty:before { content: ""; background-color: var(--field-background, var(--default)); transition: scale .2s var(--ease-out), background-color .2s var(--ease-out); border-radius: 3.40282e38px; width: 100%; height: 100%; 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 { display: flex; gap: calc(var(--spacing) * 0); flex-direction: column; } .radio--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textfield { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { position: relative; display: inline-flex; height: calc(var(--spacing) * 9); overflow: hidden; 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; 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); align-items: center; } .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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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-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-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; --tw-ring-offset-width: 0px; } .search-field__group:focus-within { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field__group[data-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); color: var(--color-base); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; 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; appearance: none; } .search-field__input::-webkit-search-decoration { -webkit-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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--search-field-group-bg); --search-field-group-bg: var(--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; outline-style: solid; --tw-ring-offset-width: 3px; border-color: var(--color-field-border-invalid); background-color: var(--search-field-group-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .search-field--secondary .search-field__group [data-slot="search-field-input"] { background-color: #0000; } .search-field--full-width, .search-field__group--full-width { width: 100%; } .textarea { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); 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; 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); min-height: 38px; } .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: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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .textarea[data-focused="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .textarea[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea[data-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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--textarea-bg); --textarea-bg: var(--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; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--textarea-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .textarea--full-width { width: 100%; } .calendar { width: calc(var(--spacing) * 63); container-type: inline-size; max-width: 100%; } .calendar__header { display: flex; padding-inline: calc(var(--spacing) * .5); padding-bottom: calc(var(--spacing) * 4); justify-content: space-between; align-items: center; } .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 { display: flex; 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, ); cursor: var(--cursor-interactive); border-radius: 3.40282e38px; justify-content: center; align-items: center; } .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; } } @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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; } .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 { display: flex; 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; } .calendar__cell { position: relative; display: flex; aspect-ratio: 1; border-radius: calc(var(--radius) * 3); 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); --tw-outline-style: none; 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, ); cursor: var(--cursor-interactive); justify-content: center; align-items: center; width: 100%; height: 100%; } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: absolute; bottom: calc(var(--spacing) * 1); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); background-color: var(--muted); border-radius: 3.40282e38px; width: 3px; height: 3px; left: 50%; } [data-selected="true"] > .calendar__cell-indicator { background-color: var(--accent-foreground); } .range-calendar { width: calc(var(--spacing) * 63); container-type: inline-size; max-width: 100%; } .range-calendar__header { display: flex; padding-inline: calc(var(--spacing) * .5); padding-bottom: calc(var(--spacing) * 4); justify-content: space-between; align-items: center; } .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 { display: flex; 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, ); cursor: var(--cursor-interactive); border-radius: 3.40282e38px; justify-content: center; align-items: center; } .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; } } @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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; } .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 { display: flex; 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; } .range-calendar__cell { position: relative; z-index: 1; margin-inline: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); --tw-outline-style: none; 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; margin-block-start: 2px; margin-block-end: 2px; } .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 { display: flex; aspect-ratio: 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); 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; width: 100%; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: absolute; bottom: calc(var(--spacing) * 1); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); background-color: var(--muted); border-radius: 3.40282e38px; width: 3px; height: 3px; 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 { display: flex; justify-content: flex-start; align-items: center; gap: calc(var(--spacing) * 1); border-radius: calc(var(--radius) * 1); --tw-outline-style: none; outline-style: none; cursor: var(--cursor-interactive); touch-action: manipulation; flex: 1; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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; position: absolute; right: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); display: grid; align-content: flex-start; gap: calc(var(--spacing) * 1); overflow-y: auto; padding: calc(var(--spacing) * 1); opacity: 0; grid-template-columns: repeat(3, 1fr); will-change: opacity; scrollbar-width: thin; scrollbar-color: oklch(0% 0 0 / .15) transparent; } .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: #00000026; 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: #00000040; 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: #ffffff26; 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: #ffffff40; 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: #ffffff26; 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: #ffffff40; 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: #ffffff26; 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: #ffffff40; 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 { position: relative; display: inline-flex; 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; outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out); transform-origin: center; transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); cursor: var(--cursor-interactive); border-radius: 3.40282e38px; justify-content: center; align-items: center; } .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; } } @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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .date-field { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { display: inline-flex; height: calc(var(--spacing) * 9); overflow: hidden; 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; 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); align-items: center; } .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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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-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-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; --tw-ring-offset-width: 0px; } .date-input-group:focus-within:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"] { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group[data-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 { display: flex; cursor: text; border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); color: var(--color-base); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; background-color: #0000; border-width: 0; border-radius: 0; flex: 1; align-items: center; gap: 1px; } @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 { display: flex; overflow-x: auto; overflow-y: clip; scrollbar-width: none; flex: 1; align-items: center; width: -moz-fit-content; width: fit-content; } .date-input-group__input-container::-webkit-scrollbar { display: none; } .date-input-group__segment { display: inline-block; 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; } .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); 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[data-focused="true"] { background-color: var(--accent); 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-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); 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"][data-focused="true"] { background-color: var(--danger); 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__prefix { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 3); display: flex; flex-shrink: 0; align-items: center; } .date-input-group__suffix { pointer-events: none; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); display: flex; flex-shrink: 0; align-items: center; } .date-input-group--secondary { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--date-input-group-bg); --date-input-group-bg: var(--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; outline-style: solid; --tw-ring-offset-width: 3px; border-color: var(--color-field-border-invalid); background-color: var(--date-input-group-bg-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary[data-invalid="true"][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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary[data-invalid="true"]: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary[data-invalid="true"][data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .date-input-group--secondary [data-slot="date-input-group-input"] { background-color: #0000; } .date-input-group--full-width { width: 100%; } .date-picker { display: inline-flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .date-picker .date-input-group__suffix { pointer-events: auto; } .date-picker .date-input-group__prefix { pointer-events: auto; } .date-picker__trigger { display: inline-flex; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); 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; width: 100%; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: inline-flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--field-placeholder, var(--muted)); justify-content: center; align-items: center; } .date-picker__popover { max-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); box-shadow: var(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); -ms-overflow-style: none; scrollbar-width: none; } .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::-webkit-scrollbar { display: 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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95 * 1%); --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: calc(95 * 1%); --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 { display: inline-flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .date-range-picker .date-input-group__suffix { pointer-events: auto; } .date-range-picker .date-input-group__prefix { pointer-events: auto; } .date-range-picker__trigger { display: inline-flex; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); 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; width: 100%; } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { display: inline-flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); color: var(--field-placeholder, var(--muted)); justify-content: center; align-items: center; } .date-range-picker__range-separator { padding-inline: calc(var(--spacing) * 1); color: var(--field-placeholder, var(--muted)); -webkit-user-select: none; user-select: none; } .date-range-picker__popover { max-width: var(--trigger-width); transform-origin: var(--trigger-anchor-point); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background-color: var(--overlay); padding: calc(var(--spacing) * 3); box-shadow: var(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); -ms-overflow-style: none; scrollbar-width: none; } .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::-webkit-scrollbar { display: 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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95 * 1%); --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: calc(95 * 1%); --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 { position: relative; display: flex; gap: calc(var(--spacing) * 3); overflow: hidden; 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; } .card__header { display: flex; flex-direction: column; } .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 { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; flex: 1; } .card__footer { display: flex; flex-direction: row; align-items: center; } .card--transparent { --tw-border-style: none; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: #0000; border-style: none; } .card--default { background-color: var(--color-surface); } .card--secondary { background-color: var(--surface-secondary); } .card--tertiary { background-color: var(--surface-tertiary); } .header { 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); width: 100%; } .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 { min-height: calc(var(--spacing) * 2); align-self: stretch; width: 1px; height: auto; } .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 { display: flex; align-items: center; gap: calc(var(--spacing) * 3); } .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 { display: inline-flex; text-align: center; white-space: nowrap; color: var(--muted); justify-content: center; align-items: center; } .separator__content--horizontal, .separator__content--vertical { text-align: center; } .surface { position: relative; color: var(--foreground); } .surface--transparent { background-color: #0000; } .surface--default { background-color: var(--color-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 { position: relative; display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); overflow: hidden; background-color: var(--default); border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; } .avatar__fallback { display: flex; background-color: var(--default); 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; width: 100%; height: 100%; } .avatar__image { position: absolute; inset: calc(var(--spacing) * 0); aspect-ratio: 1; 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; width: 100%; height: 100%; transition-duration: .25s; } .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 { color: var(--color-base); } .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: #0000; } .avatar--soft .avatar__fallback--accent { background-color: var(--accent); 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--success { background-color: var(--success); 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--warning { background-color: var(--warning); 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--danger { background-color: var(--danger); 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); } } .alert-dialog__trigger { display: inline-block; 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; display: flex; height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; } .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: calc(0 / 100); --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: calc(0 / 100); --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: #0000; } .alert-dialog__backdrop--opaque { background-color: var(--backdrop); } .alert-dialog__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .alert-dialog__container { display: flex; height: var(--visual-viewport-height); min-width: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 4); pointer-events: none; flex-direction: column; flex: 1; align-items: center; width: 100%; } @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[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: calc(0 / 100); --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 * var(--spacing)); --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 * var(--spacing) * -1); --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: calc(0 / 100); --tw-exit-opacity: 0; --tw-exit-scale: calc(95 * 1%); --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 { position: relative; display: flex; border-radius: calc(var(--radius) * 3); 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; outline-style: none; padding: calc(var(--spacing) * 6); overflow: hidden; pointer-events: auto; flex-direction: column; width: 100%; } .alert-dialog__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .alert-dialog__dialog[data-placement="auto"] { margin-block-start: auto; margin-block-end: auto; } } .alert-dialog__dialog[data-placement="center"] { margin-block-start: auto; margin-block-end: 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 { display: flex; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); flex-direction: column; } .alert-dialog__header > .modal__icon { margin-bottom: calc(var(--spacing) * 0); } .alert-dialog__heading { vertical-align: middle; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .alert-dialog__icon { display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); -webkit-user-select: none; user-select: none; border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; } .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); 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--success { background-color: var(--success); 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--warning { background-color: var(--warning); 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--danger { background-color: var(--danger); 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__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); overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; line-height: 1.43; } .alert-dialog__footer { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); flex-direction: row; } .alert-dialog__close-trigger { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); } .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 { display: inline-block; 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; height: var(--visual-viewport-height); opacity: 1; width: 100%; transition: opacity .25s cubic-bezier(.32,.72,0,1); } .drawer__backdrop[data-entering="true"] { opacity: 0; } .drawer__backdrop[data-exiting="true"] { opacity: 0; transition-duration: .2s; transition-timing-function: cubic-bezier(.32,.72,0,1); } .drawer__backdrop[data-exiting="true"] { will-change: opacity; } .drawer__backdrop[data-entering="true"] { will-change: opacity; } @media (prefers-reduced-motion: reduce) { .drawer__backdrop { transition: none; } } .drawer__backdrop--transparent { background-color: #0000; } .drawer__backdrop--opaque { background-color: var(--backdrop); } .drawer__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .drawer__content { pointer-events: none; position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; display: flex; height: var(--visual-viewport-height); min-width: calc(var(--spacing) * 0); width: 100%; } .drawer__content--bottom { align-items: flex-end; } .drawer__content--top { align-items: flex-start; } .drawer__content--left { justify-content: flex-start; } .drawer__content--right { justify-content: flex-end; } .drawer__dialog { position: relative; display: flex; 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; outline-style: none; padding: calc(var(--spacing) * 6); pointer-events: auto; --drawer-enter-duration: .25s; --drawer-exit-duration: .2s; --drawer-enter-ease: cubic-bezier(.32, .72, 0, 1); --drawer-exit-ease: cubic-bezier(.32, .72, 0, 1); will-change: translate; transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease); flex-direction: column; } @media (prefers-reduced-motion: reduce) { .drawer__dialog { transition: none; } } .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"] { width: calc(var(--spacing) * 80); border-radius: 0; max-width: 85vw; height: 100%; } @media (min-width: 40rem) { .drawer__dialog[data-placement="left"] { width: calc(var(--spacing) * 96); } } .drawer__dialog[data-placement="right"] { width: calc(var(--spacing) * 80); border-radius: 0; max-width: 85vw; height: 100%; } @media (min-width: 40rem) { .drawer__dialog[data-placement="right"] { width: calc(var(--spacing) * 96); } } [data-exiting="true"] .drawer__dialog { transition-duration: var(--drawer-exit-duration); transition-timing-function: var(--drawer-exit-ease); } .drawer__content--left .drawer__dialog, .drawer__content--right .drawer__dialog, .drawer__content--top .drawer__dialog, .drawer__content--bottom .drawer__dialog { translate: 0; } .drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog { translate: -100%; } .drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog { translate: 100%; } .drawer__content--top[data-entering="true"] .drawer__dialog, .drawer__content--top[data-exiting="true"] .drawer__dialog { translate: 0 -100%; } .drawer__content--bottom[data-entering="true"] .drawer__dialog, .drawer__content--bottom[data-exiting="true"] .drawer__dialog { translate: 0 100%; } .drawer__dialog--top { padding-bottom: calc(var(--spacing) * 2); } .drawer__dialog--top .drawer__handle { padding-bottom: calc(var(--spacing) * 0); } .drawer__header { display: flex; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); flex-direction: column; } .drawer__heading { vertical-align: middle; --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); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1; padding: 3px; line-height: 1.43; } .drawer__footer { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); flex-direction: row; } .drawer__handle { display: flex; padding-bottom: calc(var(--spacing) * 2); justify-content: center; align-items: center; } .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 { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); } .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 { display: inline-block; 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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 { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; display: flex; height: var(--visual-viewport-height); flex-direction: row; justify-content: center; align-items: center; width: 100%; } .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: calc(0 / 100); --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: calc(0 / 100); --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: #0000; } .modal__backdrop--opaque { background-color: var(--backdrop); } .modal__backdrop--blur { background-color: var(--backdrop); --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .modal__container { display: flex; height: var(--visual-viewport-height); min-width: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 4); pointer-events: none; flex-direction: column; flex: 1; align-items: center; width: 100%; } @media (min-width: 40rem) { .modal__container { width: -moz-fit-content; width: fit-content; } .modal__container { padding: calc(var(--spacing) * 10); } } .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: calc(0 / 100); --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 * var(--spacing)); --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 * var(--spacing) * -1); --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: calc(0 / 100); --tw-exit-opacity: 0; --tw-exit-scale: calc(95 * 1%); --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 { overflow-y: auto; pointer-events: auto; -webkit-overflow-scrolling: touch; } .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 * var(--spacing)); --tw-enter-translate-y: calc(0 * 100%); --tw-enter-scale: calc(100 * 1%); --tw-enter-scale: 1; } @media (min-width: 40rem) { .modal__container--full[data-entering="true"] { --tw-enter-translate-y: calc(0 * var(--spacing)); --tw-enter-translate-y: calc(0 * 100%); } } .modal__container--full[data-exiting="true"] { --tw-exit-scale: calc(100 * 1%); --tw-exit-scale: 1; } .modal__dialog { position: relative; display: flex; border-radius: calc(var(--radius) * 3); 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; outline-style: none; padding: calc(var(--spacing) * 6); pointer-events: auto; flex-direction: column; width: 100%; } .modal__dialog[data-placement="auto"] { margin-top: auto; } @media (min-width: 40rem) { .modal__dialog[data-placement="auto"] { margin-block-start: auto; margin-block-end: auto; } } .modal__dialog[data-placement="center"] { margin-block-start: auto; margin-block-end: 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 { min-height: calc(var(--spacing) * 0); flex-shrink: 0; height: auto; } .modal__dialog--xs { max-width: var(--container-xs); } .modal__dialog--sm { max-width: var(--container-sm); } .modal__dialog--md { max-width: var(--container-md); } .modal__dialog--lg { max-width: var(--container-lg); } .modal__dialog--cover { width: 100%; height: 100%; min-height: 100%; } .modal__dialog--full { --tw-shadow: 0 0 #0000; 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; width: 100%; height: 100%; min-height: 100%; } .modal__header { display: flex; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); flex-direction: column; } .modal__header > .modal__icon { margin-bottom: calc(var(--spacing) * 0); } .modal__heading { vertical-align: middle; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .modal__icon { display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); -webkit-user-select: none; user-select: none; border-radius: 3.40282e38px; flex-shrink: 0; justify-content: center; align-items: center; } .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 { overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal__body--scroll-outside { overflow-y: visible; } .modal__footer { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); flex-direction: row; } .modal__close-trigger { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); } .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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(90 * 1%); --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: calc(95 * 1%); --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 { display: inline-block; transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); cursor: var(--cursor-interactive); } .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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(90 * 1%); --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: calc(95 * 1%); --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: #2e2e2e66; fill: var(--overlay); } @supports (color: color-mix(in lab, red, red)) { .tooltip [data-slot="overlay-arrow"] { stroke: color-mix(in oklab, var(--color-border) 40%, transparent); } } .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 { display: inline-block; 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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); } .combo-box { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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-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; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .combo-box [data-slot="input"][data-focus] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-outline-style: none; outline-style: none; --tw-ring-offset-width: 0px; border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .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 { position: relative; isolation: isolate; display: inline-flex; align-items: center; } .combo-box__trigger { position: absolute; top: 50%; right: calc(var(--spacing) * 0); display: flex; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); 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, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; -webkit-tap-highlight-color: transparent; --tw-border-style: none; --tw-outline-style: none; outline-style: none; background-color: #0000; border-style: none; flex-shrink: 0; justify-content: center; align-items: center; height: 100%; transition-duration: .15s; } @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; outline-style: none; border-radius: .25rem; } .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; outline-style: none; border-radius: .25rem; } .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); overflow-y: auto; 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); } .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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95 * 1%); --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: calc(95 * 1%); --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 { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .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 { position: relative; isolation: isolate; display: inline-flex; 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; outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); cursor: var(--cursor-interactive); border-width: 1px; border-width: var(--border-width-field); border-color: var(--color-field-border); } .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:has(.select__indicator) { padding-right: calc(var(--spacing) * 7); } @media (hover: hover) { .select__trigger:hover { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"] { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .select[data-invalid="true"] .select__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[data-invalid="true"] .select__trigger: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[data-invalid="true"] .select__trigger[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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[data-invalid="true"] .select__trigger[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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[data-invalid="true"] .select__trigger: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[data-invalid="true"] .select__trigger[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[aria-invalid="true"] .select__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select[aria-invalid="true"] .select__trigger[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .select__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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--select-trigger-bg); --select-trigger-bg: var(--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; 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 { position: absolute; inset-block: calc(var(--spacing) * 0); right: calc(var(--spacing) * 2); display: flex; color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; flex-shrink: 0; justify-content: center; align-items: center; margin-block-start: auto; margin-block-end: auto; transition-duration: .15s; } .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); overflow-y: auto; 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); } .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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95 * 1%); --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: calc(95 * 1%); --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 { display: flex; gap: calc(var(--spacing) * 1); flex-direction: column; } .autocomplete__trigger { position: relative; isolation: isolate; display: inline-flex; 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; outline-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out); cursor: var(--cursor-interactive); border-width: 1px; border-width: var(--border-width-field); border-color: var(--color-field-border); } .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: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)); border-color: var(--color-field-border-hover); } @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[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--field-background, var(--default)); border-color: var(--color-field-border-hover); } @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: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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .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: 0px; --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; --tw-ring-offset-width: var(--ring-offset-width); border-color: var(--color-field-border-focus); background-color: var(--color-field-focus); } .autocomplete[data-invalid="true"] .autocomplete__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[data-invalid="true"] .autocomplete__trigger: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[data-invalid="true"] .autocomplete__trigger[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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[data-invalid="true"] .autocomplete__trigger[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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[data-invalid="true"] .autocomplete__trigger: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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[data-invalid="true"] .autocomplete__trigger[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[aria-invalid="true"] .autocomplete__trigger { outline-style: var(--tw-outline-style); outline-width: 1px; outline-color: var(--danger); --tw-outline-style: solid; outline-style: solid; --tw-ring-offset-width: 3px; background-color: var(--color-field-focus); } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .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-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete[aria-invalid="true"] .autocomplete__trigger[data-focus-within="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--danger); --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-width: 0px; } .autocomplete__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 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--autocomplete-trigger-bg); --autocomplete-trigger-bg: var(--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; 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 { position: absolute; inset-block: calc(var(--spacing) * 0); right: calc(var(--spacing) * 2); display: flex; color: var(--field-placeholder, var(--muted)); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; cursor: var(--cursor-interactive); flex-shrink: 0; justify-content: center; align-items: center; margin-block-start: auto; margin-block-end: auto; transition-duration: .15s; } .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); overflow-y: auto; 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); } .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: calc(0 / 100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95 * 1%); --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: calc(95 * 1%); --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 { position: relative; isolation: isolate; display: inline-flex; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); transform-origin: center; border-radius: calc(var(--radius) * 1.5); padding: calc(var(--spacing) * 1); color: var(--muted); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; 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: #0000; flex-shrink: 0; justify-content: center; align-self: center; align-items: center; } .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 { display: inline-flex; height: calc(var(--spacing) * 6); 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); word-spacing: -.25rem; align-items: center; } :where(.kbd > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse))); } :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__abbr { display: flex; text-decoration: none; justify-content: center; align-items: center; width: 100%; height: 100%; } .kbd__content { display: flex; justify-content: center; align-items: center; } .kbd--light { background-color: #0000; } .scroll-shadow { position: relative; --scroll-shadow-size: 40px; } .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; 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; 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; 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; 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; 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; 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 theme { @layer theme { @layer base { :root, .light, .default, [data-theme="light"], [data-theme="default"] { --buncss-light: initial; --buncss-dark: ; color-scheme: light; --white: oklch(100% 0 0); --black: oklch(0% 0 0); --snow: oklch(.9911 0 0); --eclipse: oklch(.2103 .0059 285.89); --spacing: .25rem; --border-width: 1px; --field-border-width: 0px; --disabled-opacity: .5; --ring-offset-width: 2px; --cursor-interactive: pointer; --cursor-disabled: not-allowed; --radius: .5rem; --field-radius: calc(var(--radius) * 1.5); --background: oklch(.9702 0 0); --foreground: var(--eclipse); --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: oklch(.9524 .0013 286.37); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(.9373 .0013 286.37); --surface-tertiary-foreground: var(--foreground); --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: oklch(.5517 .0138 285.94); --scrollbar: oklch(87.1% .006 286.286); --default: oklch(94% .001 286.375); --default-foreground: var(--eclipse); --accent: oklch(.6204 .195 253.83); --accent-foreground: var(--snow); --field-background: var(--white); --field-foreground: oklch(.2103 .0059 285.89); --field-placeholder: var(--muted); --field-border: transparent; --success: oklch(.7329 .1935 150.81); --success-foreground: var(--eclipse); --warning: oklch(.7819 .1585 72.33); --warning-foreground: var(--eclipse); --danger: oklch(.6532 .2328 25.74); --danger-foreground: var(--snow); --segment: var(--white); --segment-foreground: var(--eclipse); --border: oklch(90% .004 286.32); --separator: oklch(92% .004 286.32); --focus: var(--accent); --link: var(--foreground); --backdrop: #00000080; --surface-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f; --overlay-shadow: 0 2px 8px 0 #0000000f, 0 -6px 12px 0 #00000008, 0 14px 28px 0 #00000014; --field-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f, 0 0 1px 0 #0000000f; --skeleton-animation: shimmer; } .dark, [data-theme="dark"] { --buncss-light: ; --buncss-dark: initial; color-scheme: dark; --background: oklch(12% .005 285.823); --foreground: var(--snow); --surface: oklch(.2103 .0059 285.89); --surface-foreground: var(--foreground); --surface-secondary: oklch(.257 .0037 286.14); --surface-tertiary: oklch(.2721 .0024 247.91); --overlay: oklch(.2103 .0059 285.89); --overlay-foreground: var(--foreground); --muted: oklch(70.5% .015 286.067); --scrollbar: oklch(70.5% .015 286.067); --default: oklch(27.4% .006 286.033); --default-foreground: var(--snow); --field-background: oklch(.2103 .0059 285.89); --field-foreground: var(--foreground); --warning: oklch(.8203 .1388 76.34); --warning-foreground: var(--eclipse); --danger: oklch(.594 .1967 24.63); --danger-foreground: var(--snow); --segment: oklch(.3964 .01 285.93); --segment-foreground: var(--foreground); --border: oklch(28% .006 286.033); --separator: oklch(25% .006 286.033); --focus: var(--accent); --link: var(--foreground); --backdrop: #0009; --surface-shadow: 0 0 0 0 transparent inset; --overlay-shadow: 0 0 1px 0 #ffffff4d inset; --field-shadow: 0 0 0 0 transparent inset; } } } @layer components; } .xterm { cursor: text; position: relative; user-select: none; -ms-user-select: none; -webkit-user-select: none; } .xterm.focus, .xterm:focus { outline: none; } .xterm .xterm-helpers { position: absolute; z-index: 5; top: 0; } .xterm .xterm-helper-textarea { position: absolute; opacity: 0; z-index: -5; white-space: nowrap; overflow: hidden; resize: none; border: 0; width: 0; height: 0; margin: 0; padding: 0; top: 0; left: -9999em; } .xterm .composition-view { color: #fff; display: none; position: absolute; white-space: nowrap; z-index: 1; background: #000; } .xterm .composition-view.active { display: block; } .xterm .xterm-viewport { overflow-y: scroll; cursor: default; position: absolute; background-color: #000; inset: 0; } .xterm .xterm-screen { position: relative; } .xterm .xterm-screen canvas { position: absolute; top: 0; left: 0; } .xterm-char-measure-element { display: inline-block; visibility: hidden; position: absolute; line-height: normal; top: 0; left: -9999em; } .xterm.enable-mouse-events { cursor: default; } .xterm.xterm-cursor-pointer, .xterm .xterm-cursor-pointer { cursor: pointer; } .xterm.column-select.focus { cursor: crosshair; } .xterm .xterm-accessibility:not(.debug), .xterm .xterm-message { position: absolute; z-index: 10; color: #0000; pointer-events: none; inset: 0; } .xterm .xterm-accessibility-tree:not(.debug) *::selection { color: #0000; } .xterm .xterm-accessibility-tree { user-select: text; white-space: pre; font-family: monospace; } .xterm .xterm-accessibility-tree > div { transform-origin: left; width: -moz-fit-content; width: fit-content; } .xterm .live-region { position: absolute; overflow: hidden; width: 1px; height: 1px; left: -9999px; } .xterm-dim { opacity: 1 !important; } .xterm-underline-1 { text-decoration: underline; } .xterm-underline-2 { text-decoration: double underline; } .xterm-underline-3 { text-decoration: wavy underline; } .xterm-underline-4 { text-decoration: dotted underline; } .xterm-underline-5 { text-decoration: dashed underline; } .xterm-overline { text-decoration: overline; } .xterm-overline.xterm-underline-1 { text-decoration: overline underline; } .xterm-overline.xterm-underline-2 { text-decoration: overline double underline; } .xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; } .xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; } .xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; } .xterm-strikethrough { text-decoration: line-through; } .xterm-screen .xterm-decoration-container .xterm-decoration { z-index: 6; position: absolute; } .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { z-index: 7; } .xterm-decoration-overview-ruler { z-index: 8; position: absolute; pointer-events: none; top: 0; right: 0; } .xterm-decoration-top { z-index: 2; position: relative; } .xterm .xterm-scrollable-element > .scrollbar { cursor: default; } .xterm .xterm-scrollable-element > .scrollbar > .scra { cursor: pointer; font-size: 11px !important; } .xterm .xterm-scrollable-element > .visible { opacity: 1; z-index: 11; background: none; transition: opacity .1s linear; } .xterm .xterm-scrollable-element > .invisible { opacity: 0; pointer-events: none; } .xterm .xterm-scrollable-element > .invisible.fade { transition: opacity .8s linear; } .xterm .xterm-scrollable-element > .shadow { position: absolute; display: none; } .xterm .xterm-scrollable-element > .shadow.top { display: block; box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset; width: 100%; height: 3px; top: 0; left: 3px; } .xterm .xterm-scrollable-element > .shadow.left { display: block; box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; width: 3px; height: 100%; top: 3px; left: 0; } .xterm .xterm-scrollable-element > .shadow.top-left-corner { display: block; width: 3px; height: 3px; top: 0; left: 0; } .xterm .xterm-scrollable-element > .shadow.top.left { box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; } html { --buncss-light: ; --buncss-dark: initial; color-scheme: dark; } body { background: var(--color-base); min-height: 100vh; margin: 0; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: var(--color-surface-lighter); border-radius: 3px; } .tab-bar { border-bottom: 1px solid var(--color-border); } .tab-bar::-webkit-scrollbar { height: 0; } .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { display: none; } pre { overflow-x: auto; border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.5; background: var(--color-surface) !important; } code { font-family: SF Mono, Fira Code, Fira Mono, monospace; } .comment-glyph { background: #22c55e; border-radius: 50%; margin-top: 6px; margin-left: 4px; width: 8px !important; height: 8px !important; } .comment-line-highlight { background: #3b82f6b3 !important; border-left: 2px solid #3b82f699 !important; } .comment-selection-highlight { background: #3b82f626 !important; } .monaco-editor .margin-view-overlays .glyph-margin { cursor: pointer; } .debug-breakpoint { background: #e51400; border-radius: 50%; margin-top: 5px; margin-left: 4px; width: 10px !important; height: 10px !important; } .debug-current-line { background: #ffc8001f !important; } .debug-current-arrow { clip-path: polygon(20% 0%, 100% 50%, 20% 100%); background: #fc0; margin-top: 5px; margin-left: 4px; width: 10px !important; height: 10px !important; } @keyframes blob-drift { 0% { transform: translate(-40%, -50%); } 50% { transform: translate(40%, -50%); } 100% { transform: translate(-40%, -50%); } } @keyframes blob-hue { 0% { filter: hue-rotate(0deg) blur(30px); } 100% { filter: hue-rotate(360deg) blur(30px); } } .blob-single { animation: blob-drift 18s ease-in-out infinite, blob-hue 20s linear infinite; } @keyframes connection-bar-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } .connection-bar-slider { animation: connection-bar-slide 1.4s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes planBlockHighlight { 0% { background-color: #8b5cf647; box-shadow: inset 0 0 0 1px #8b5cf673; } 100% { background-color: #0000; box-shadow: inset 0 0 #0000; } } .plan-block-highlight { animation: planBlockHighlight 2.5s ease-out forwards; } @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-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-pan-x { syntax: "*"; inherits: false } @property --tw-pan-y { syntax: "*"; inherits: false } @property --tw-pinch-zoom { syntax: "*"; inherits: false } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @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%); } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } @layer properties { @supports ((-webkit-hyphens: none) and ( not (margin-trim: inline))) or ((-moz-orient: inline) and ( not (color:rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-x-reverse: 0; --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-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-border-spacing-x: 0; --tw-border-spacing-y: 0; } } } /* node_modules/@xterm/xterm/css/xterm.css */ .xterm { cursor: text; position: relative; user-select: none; -ms-user-select: none; -webkit-user-select: none; } .xterm.focus, .xterm:focus { outline: none; } .xterm .xterm-helpers { position: absolute; z-index: 5; top: 0; } .xterm .xterm-helper-textarea { position: absolute; opacity: 0; z-index: -5; white-space: nowrap; overflow: hidden; resize: none; border: 0; width: 0; height: 0; margin: 0; padding: 0; top: 0; left: -9999em; } .xterm .composition-view { color: #fff; display: none; position: absolute; white-space: nowrap; z-index: 1; background: #000; } .xterm .composition-view.active { display: block; } .xterm .xterm-viewport { overflow-y: scroll; cursor: default; position: absolute; background-color: #000; inset: 0; } .xterm .xterm-screen { position: relative; } .xterm .xterm-screen canvas { position: absolute; top: 0; left: 0; } .xterm-char-measure-element { display: inline-block; visibility: hidden; position: absolute; line-height: normal; top: 0; left: -9999em; } .xterm.enable-mouse-events { cursor: default; } .xterm.xterm-cursor-pointer, .xterm .xterm-cursor-pointer { cursor: pointer; } .xterm.column-select.focus { cursor: crosshair; } .xterm .xterm-accessibility:not(.debug), .xterm .xterm-message { position: absolute; z-index: 10; color: #0000; pointer-events: none; inset: 0; } .xterm .xterm-accessibility-tree:not(.debug) *::selection { color: #0000; } .xterm .xterm-accessibility-tree { user-select: text; white-space: pre; font-family: monospace; } .xterm .xterm-accessibility-tree > div { transform-origin: left; width: -moz-fit-content; width: fit-content; } .xterm .live-region { position: absolute; overflow: hidden; width: 1px; height: 1px; left: -9999px; } .xterm-dim { opacity: 1 !important; } .xterm-underline-1 { text-decoration: underline; } .xterm-underline-2 { text-decoration: double underline; } .xterm-underline-3 { text-decoration: wavy underline; } .xterm-underline-4 { text-decoration: dotted underline; } .xterm-underline-5 { text-decoration: dashed underline; } .xterm-overline { text-decoration: overline; } .xterm-overline.xterm-underline-1 { text-decoration: overline underline; } .xterm-overline.xterm-underline-2 { text-decoration: overline double underline; } .xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; } .xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; } .xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; } .xterm-strikethrough { text-decoration: line-through; } .xterm-screen .xterm-decoration-container .xterm-decoration { z-index: 6; position: absolute; } .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { z-index: 7; } .xterm-decoration-overview-ruler { z-index: 8; position: absolute; pointer-events: none; top: 0; right: 0; } .xterm-decoration-top { z-index: 2; position: relative; } .xterm .xterm-scrollable-element > .scrollbar { cursor: default; } .xterm .xterm-scrollable-element > .scrollbar > .scra { cursor: pointer; font-size: 11px !important; } .xterm .xterm-scrollable-element > .visible { opacity: 1; z-index: 11; background: none; transition: opacity .1s linear; } .xterm .xterm-scrollable-element > .invisible { opacity: 0; pointer-events: none; } .xterm .xterm-scrollable-element > .invisible.fade { transition: opacity .8s linear; } .xterm .xterm-scrollable-element > .shadow { position: absolute; display: none; } .xterm .xterm-scrollable-element > .shadow.top { display: block; box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset; width: 100%; height: 3px; top: 0; left: 3px; } .xterm .xterm-scrollable-element > .shadow.left { display: block; box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; width: 3px; height: 100%; top: 3px; left: 0; } .xterm .xterm-scrollable-element > .shadow.top-left-corner { display: block; width: 3px; height: 3px; top: 0; left: 0; } .xterm .xterm-scrollable-element > .shadow.top.left { box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; }