/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[3].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[3].use[2]!../../node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"src":[{"path":"../fonts/bricolage-grotesque-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../fonts/bricolage-grotesque-latin-600-normal.woff2","weight":"600","style":"normal"},{"path":"../fonts/bricolage-grotesque-latin-800-normal.woff2","weight":"800","style":"normal"}],"variable":"--font-display","display":"swap"}],"variableName":"bricolage"} ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @font-face { font-family: 'bricolage'; src: url(/_next/static/media/aa88aec4dd78aaca-s.p.woff2) format('woff2'); font-display: swap; font-weight: 400; font-style: normal; } @font-face { font-family: 'bricolage'; src: url(/_next/static/media/5e71f0cbcf4d3a75-s.p.woff2) format('woff2'); font-display: swap; font-weight: 600; font-style: normal; } @font-face { font-family: 'bricolage'; src: url(/_next/static/media/b0528978cef34ce0-s.p.woff2) format('woff2'); font-display: swap; font-weight: 800; font-style: normal; }@font-face {font-family: 'bricolage Fallback';src: local("Arial");ascent-override: 87.18%;descent-override: 25.31%;line-gap-override: 0.00%;size-adjust: 106.68% }.__className_50b1a0 {font-family: 'bricolage', 'bricolage Fallback' }.__variable_50b1a0 {--font-display: 'bricolage', 'bricolage Fallback' } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[3].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[3].use[2]!../../node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"src":[{"path":"../fonts/dm-sans-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../fonts/dm-sans-latin-500-normal.woff2","weight":"500","style":"normal"},{"path":"../fonts/dm-sans-latin-700-normal.woff2","weight":"700","style":"normal"}],"variable":"--font-sans","display":"swap"}],"variableName":"dmSans"} ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @font-face { font-family: 'dmSans'; src: url(/_next/static/media/7abd0811ecb9cc72-s.p.woff2) format('woff2'); font-display: swap; font-weight: 400; font-style: normal; } @font-face { font-family: 'dmSans'; src: url(/_next/static/media/210398b63ea2710a-s.p.woff2) format('woff2'); font-display: swap; font-weight: 500; font-style: normal; } @font-face { font-family: 'dmSans'; src: url(/_next/static/media/db6484ff081aa3d5-s.p.woff2) format('woff2'); font-display: swap; font-weight: 700; font-style: normal; }@font-face {font-family: 'dmSans Fallback';src: local("Arial");ascent-override: 94.36%;descent-override: 29.49%;line-gap-override: 0.00%;size-adjust: 105.13% }.__className_12c06d {font-family: 'dmSans', 'dmSans Fallback' }.__variable_12c06d {--font-sans: 'dmSans', 'dmSans Fallback' } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[3].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[3].use[2]!../../node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"src":[{"path":"../fonts/jetbrains-mono-latin-400-normal.woff2","weight":"400","style":"normal"},{"path":"../fonts/jetbrains-mono-latin-600-normal.woff2","weight":"600","style":"normal"}],"variable":"--font-mono","display":"swap"}],"variableName":"jetbrainsMono"} ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @font-face { font-family: 'jetbrainsMono'; src: url(/_next/static/media/db9d659a1acad1e2-s.p.woff2) format('woff2'); font-display: swap; font-weight: 400; font-style: normal; } @font-face { font-family: 'jetbrainsMono'; src: url(/_next/static/media/ebeb24f1e7287d3a-s.p.woff2) format('woff2'); font-display: swap; font-weight: 600; font-style: normal; }@font-face {font-family: 'jetbrainsMono Fallback';src: local("Arial");ascent-override: 77.57%;descent-override: 22.82%;line-gap-override: 0.00%;size-adjust: 131.49% }.__className_44adcb {font-family: 'jetbrainsMono', 'jetbrainsMono Fallback' }.__variable_44adcb {--font-mono: 'jetbrainsMono', 'jetbrainsMono Fallback' } /*!*************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************************/ /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: var(--font-sans); --font-mono: var(--font-mono); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-orange-500: oklch(70.5% 0.213 47.604); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-700: oklch(55.5% 0.163 48.998); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-500: oklch(70.4% 0.14 182.503); --color-sky-500: oklch(68.5% 0.169 237.323); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-950: oklch(28.3% 0.141 291.089); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-500: oklch(55.4% 0.046 257.417); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-relaxed: 1.625; --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --ease-out: cubic-bezier(0, 0, 0.2, 1); --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; --blur-md: 12px; --blur-3xl: 64px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-focus: var(--focus); --color-default: var(--default); --color-default-foreground: var(--default-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-danger: var(--danger); --color-danger-foreground: var(--danger-foreground); --shadow-surface: var(--surface-shadow); --shadow-overlay: var(--overlay-shadow); --color-field-border: var(--field-border, var(--border)); --border-width-field: var(--field-border-width, var(--border-width)); --color-default-hover: var(--default); @supports (color: color-mix(in lab, red, red)) { --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } --color-accent-hover: var(--accent); @supports (color: color-mix(in lab, red, red)) { --color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } --color-danger-hover: var(--danger); @supports (color: color-mix(in lab, red, red)) { --color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); } --color-field-focus: var(--field-background, var(--default)); --color-field-border-hover: var(--field-border, var(--border)); @supports (color: color-mix(in lab, red, red)) { --color-field-border-hover: color-mix( in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10% ); } --color-field-border-focus: var(--field-border, var(--border)); @supports (color: color-mix(in lab, red, red)) { --color-field-border-focus: color-mix( in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22% ); } --color-accent-soft: var(--accent); @supports (color: color-mix(in lab, red, red)) { --color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); } --color-accent-soft-foreground: var(--accent); --color-accent-soft-hover: var(--accent); @supports (color: color-mix(in lab, red, red)) { --color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); } --color-danger-soft: var(--danger); @supports (color: color-mix(in lab, red, red)) { --color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); } --color-danger-soft-foreground: var(--danger); --color-danger-soft-hover: var(--danger); @supports (color: color-mix(in lab, red, red)) { --color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); } --color-warning-soft: var(--warning); @supports (color: color-mix(in lab, red, red)) { --color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); } --color-warning-soft-foreground: var(--warning); --color-success-soft: var(--success); @supports (color: color-mix(in lab, red, red)) { --color-success-soft: color-mix(in oklab, var(--success) 15%, transparent); } --color-success-soft-foreground: var(--success); --ease-smooth: ease; --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1); --ease-linear: linear; --font-display: var(--font-display); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; 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 { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.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, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .pointer-events-none { pointer-events: none; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .-inset-12 { inset: calc(var(--spacing) * -12); } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .start { inset-inline-start: var(--spacing); } .-top-40 { top: calc(var(--spacing) * -40); } .top-0 { top: calc(var(--spacing) * 0); } .top-1\/2 { top: calc(1 / 2 * 100%); } .top-full { top: 100%; } .right-0 { right: calc(var(--spacing) * 0); } .-bottom-40 { bottom: calc(var(--spacing) * -40); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .left-0 { left: calc(var(--spacing) * 0); } .left-1\/2 { left: calc(1 / 2 * 100%); } .left-3 { left: calc(var(--spacing) * 3); } .isolate { isolation: isolate; } .-z-10 { z-index: calc(10 * -1); } .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; } .mx-auto { margin-inline: auto; } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.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-7 { margin-top: calc(var(--spacing) * 7); } .mt-9 { margin-top: calc(var(--spacing) * 9); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-auto { margin-left: auto; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .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-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-28 { height: calc(var(--spacing) * 28); } .h-44 { height: calc(var(--spacing) * 44); } .h-64 { height: calc(var(--spacing) * 64); } .h-\[560px\] { height: 560px; } .h-\[640px\] { height: 640px; } .h-full { height: 100%; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-2 { width: calc(var(--spacing) * 2); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .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-14 { width: calc(var(--spacing) * 14); } .w-56 { width: calc(var(--spacing) * 56); } .w-64 { width: calc(var(--spacing) * 64); } .w-\[560px\] { width: 560px; } .w-\[640px\] { width: 640px; } .w-auto { width: auto; } .w-full { width: 100%; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-5xl { max-width: var(--container-5xl); } .max-w-7xl { max-width: var(--container-7xl); } .max-w-lg { max-width: var(--container-lg); } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-full { --tw-translate-x: -100%; 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-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .cursor-pointer { cursor: pointer; } .list-none { list-style-type: none; } .grid-cols-\[1fr_1fr_auto\] { grid-template-columns: 1fr 1fr auto; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .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); } .space-y-0\.5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-1 { :where(& > :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))); } } .space-y-2 { :where(& > :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))); } } .space-y-3 { :where(& > :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))); } } .space-y-6 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } .divide-y { :where(& > :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))); } } .divide-zinc-100 { :where(& > :not(:last-child)) { border-color: var(--color-zinc-100); } } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: calc(var(--radius) * 2); } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: calc(var(--radius) * 1); } .rounded-md { border-radius: calc(var(--radius) * 0.75); } .rounded-xl { border-radius: calc(var(--radius) * 1.5); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-emerald-500\/30 { border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent); } } .border-emerald-500\/40 { border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent); } } .border-red-500\/30 { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent); } } .border-rose-500\/40 { border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-rose-500) 40%, transparent); } } .border-white\/10 { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/15 { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-zinc-100 { border-color: var(--color-zinc-100); } .border-zinc-200 { border-color: var(--color-zinc-200); } .border-zinc-300 { border-color: var(--color-zinc-300); } .border-zinc-800 { border-color: var(--color-zinc-800); } .bg-\[\#5865F2\] { background-color: #5865F2; } .bg-amber-300 { background-color: var(--color-amber-300); } .bg-amber-500 { background-color: var(--color-amber-500); } .bg-amber-500\/10 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent); } } .bg-amber-500\/15 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); } } .bg-background { background-color: var(--background); } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-brand { background-color: var(--brand); } .bg-emerald-50 { background-color: var(--color-emerald-50); } .bg-emerald-50\/50 { background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent); } } .bg-emerald-400 { background-color: var(--color-emerald-400); } .bg-emerald-500 { background-color: var(--color-emerald-500); } .bg-emerald-500\/10 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); } } .bg-emerald-500\/15 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); } } .bg-indigo-black\/70 { background-color: var(--indigo-black); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--indigo-black) 70%, transparent); } } .bg-indigo-black\/80 { background-color: var(--indigo-black); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--indigo-black) 80%, transparent); } } .bg-indigo-deep { background-color: var(--indigo-deep); } .bg-indigo-deep\/50 { background-color: var(--indigo-deep); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--indigo-deep) 50%, transparent); } } .bg-indigo-deep\/60 { background-color: var(--indigo-deep); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--indigo-deep) 60%, transparent); } } .bg-red-500\/10 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } .bg-rose-50 { background-color: var(--color-rose-50); } .bg-rose-500\/10 { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent); } } .bg-rose-500\/15 { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent); } } .bg-sky-500\/15 { background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent); } } .bg-spark { background-color: var(--spark); } .bg-spark\/60 { background-color: var(--spark); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--spark) 60%, transparent); } } .bg-teal-500\/15 { background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-teal-500) 15%, transparent); } } .bg-transparent { background-color: transparent; } .bg-violet-500\/10 { background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent); } } .bg-violet-500\/15 { background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent); } } .bg-white { background-color: var(--color-white); } .bg-white\/15 { background-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .bg-white\/80 { background-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .bg-white\/\[0\.04\] { background-color: color-mix(in srgb, #fff 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } .bg-zinc-50 { background-color: var(--color-zinc-50); } .bg-zinc-50\/60 { background-color: color-mix(in srgb, oklch(98.5% 0 0) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-50) 60%, transparent); } } .bg-zinc-100 { background-color: var(--color-zinc-100); } .bg-zinc-400 { background-color: var(--color-zinc-400); } .bg-zinc-800 { background-color: var(--color-zinc-800); } .bg-zinc-900 { background-color: var(--color-zinc-900); } .bg-zinc-900\/60 { background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent); } } .bg-zinc-950 { background-color: var(--color-zinc-950); } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .\[background-image\:linear-gradient\(to_right\,\#fff_1px\,transparent_1px\)\,linear-gradient\(to_bottom\,\#fff_1px\,transparent_1px\)\] { background-image: linear-gradient(to right,#fff 1px,transparent 1px),linear-gradient(to bottom,#fff 1px,transparent 1px); } .bg-\[radial-gradient\(circle_at_30\%_20\%\,rgba\(255\,255\,255\,0\.35\)\,transparent_50\%\)\] { background-image: radial-gradient(circle at 30% 20%,rgba(255,255,255,0.35),transparent 50%); } .bg-\[radial-gradient\(ellipse_at_top_right\,rgba\(255\,255\,255\,0\.25\)\,transparent_60\%\)\,radial-gradient\(ellipse_at_bottom_left\,rgba\(0\,0\,0\,0\.45\)\,transparent_55\%\)\] { background-image: radial-gradient(ellipse at top right,rgba(255,255,255,0.25),transparent 60%),radial-gradient(ellipse at bottom left,rgba(0,0,0,0.45),transparent 55%); } .from-black\/70 { --tw-gradient-from: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, 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)); } .from-fuchsia-600 { --tw-gradient-from: var(--color-fuchsia-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-orange-500 { --tw-gradient-from: var(--color-orange-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-spark { --tw-gradient-from: var(--spark); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-violet-600 { --tw-gradient-from: var(--color-violet-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-violet-700 { --tw-gradient-from: var(--color-violet-700); --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)); } .via-black\/10 { --tw-gradient-via: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-black) 10%, transparent); } --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-fuchsia-600 { --tw-gradient-via: var(--color-fuchsia-600); --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-rose-500 { --tw-gradient-via: var(--color-rose-500); --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-rose-600 { --tw-gradient-via: var(--color-rose-600); --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-spark { --tw-gradient-via: var(--spark); --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 { --tw-gradient-to: var(--color-amber-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-brand-hover { --tw-gradient-to: var(--brand-hover); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-fuchsia-600 { --tw-gradient-to: var(--color-fuchsia-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-indigo-700 { --tw-gradient-to: var(--color-indigo-700); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-rose-500 { --tw-gradient-to: var(--color-rose-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-transparent { --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)); } .\[mask-image\:radial-gradient\(ellipse_at_center\,black_30\%\,transparent_75\%\)\] { mask-image: radial-gradient(ellipse at center,black 30%,transparent 75%); } .\[mask-image\:radial-gradient\(ellipse_at_center\,black_30\%\,transparent_80\%\)\] { mask-image: radial-gradient(ellipse at center,black 30%,transparent 80%); } .\[background-size\:32px_32px\] { background-size: 32px 32px; } .bg-clip-text { background-clip: text; } .object-cover { object-fit: cover; } .p-1 { padding: calc(var(--spacing) * 1); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .px-1\.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); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.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-7 { padding-block: calc(var(--spacing) * 7); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-16 { padding-block: calc(var(--spacing) * 16); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-16 { padding-bottom: calc(var(--spacing) * 16); } .pl-1 { padding-left: calc(var(--spacing) * 1); } .pl-1\.5 { padding-left: calc(var(--spacing) * 1.5); } .pl-9 { padding-left: calc(var(--spacing) * 9); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .leading-\[0\.95\] { --tw-leading: 0.95; line-height: 0.95; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .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-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .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-\[-0\.035em\] { --tw-tracking: -0.035em; letter-spacing: -0.035em; } .tracking-\[0\.2em\] { --tw-tracking: 0.2em; letter-spacing: 0.2em; } .tracking-\[0\.18em\] { --tw-tracking: 0.18em; letter-spacing: 0.18em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .text-amber-500 { color: var(--color-amber-500); } .text-amber-700 { color: var(--color-amber-700); } .text-emerald-600 { color: var(--color-emerald-600); } .text-emerald-700 { color: var(--color-emerald-700); } .text-emerald-900 { color: var(--color-emerald-900); } .text-emerald-900\/80 { color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-900) 80%, transparent); } } .text-foreground { color: var(--foreground); } .text-red-200 { color: var(--color-red-200); } .text-red-300 { color: var(--color-red-300); } .text-red-600 { color: var(--color-red-600); } .text-rose-500 { color: var(--color-rose-500); } .text-rose-600 { color: var(--color-rose-600); } .text-rose-700 { color: var(--color-rose-700); } .text-sky-500 { color: var(--color-sky-500); } .text-slate-200 { color: var(--color-slate-200); } .text-slate-300 { color: var(--slate-300); } .text-slate-400 { color: var(--slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-spark { color: var(--spark); } .text-teal-500 { color: var(--color-teal-500); } .text-transparent { color: transparent; } .text-violet-500 { color: var(--color-violet-500); } .text-violet-600 { color: var(--color-violet-600); } .text-violet-700 { color: var(--color-violet-700); } .text-white { color: var(--color-white); } .text-white\/70 { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .text-white\/80 { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .text-zinc-100 { color: var(--color-zinc-100); } .text-zinc-200 { color: var(--color-zinc-200); } .text-zinc-400 { color: var(--color-zinc-400); } .text-zinc-500 { color: var(--color-zinc-500); } .text-zinc-600 { color: var(--color-zinc-600); } .text-zinc-700 { color: var(--color-zinc-700); } .text-zinc-800 { color: var(--color-zinc-800); } .text-zinc-900 { color: var(--color-zinc-900); } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .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,); } .underline { text-decoration-line: underline; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-15 { opacity: 15%; } .opacity-20 { opacity: 20%; } .opacity-25 { opacity: 25%; } .opacity-30 { opacity: 30%; } .opacity-40 { opacity: 40%; } .opacity-\[0\.07\] { opacity: 0.07; } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_8px_2px_rgba\(52\,211\,153\,0\.6\)\] { --tw-shadow: 0 0 8px 2px var(--tw-shadow-color, rgba(52,211,153,0.6)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_10px_2px_rgba\(52\,211\,153\,0\.6\)\] { --tw-shadow: 0 0 10px 2px var(--tw-shadow-color, rgba(52,211,153,0.6)); 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, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .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); } .shadow-black\/40 { --tw-shadow-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-brand\/30 { --tw-shadow-color: var(--brand); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--brand) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-amber-500\/20 { --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent); } } .ring-amber-500\/40 { --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent); } } .ring-emerald-500\/30 { --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent); } } .ring-emerald-500\/40 { --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent); } } .ring-rose-500\/20 { --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent); } } .ring-sky-500\/20 { --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent); } } .ring-teal-500\/20 { --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-teal-500) 20%, transparent); } } .ring-violet-500\/20 { --tw-ring-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent); } } .ring-violet-500\/30 { --tw-ring-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent); } } .ring-white\/20 { --tw-ring-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .blur-3xl { --tw-blur: blur(var(--blur-3xl)); 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,); } .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-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: 200ms; transition-duration: 200ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .select-none { -webkit-user-select: none; user-select: none; } .ring-inset { --tw-ring-inset: inset; } .running { animation-play-state: running; } .group-open\:p-0 { &:is(:where(.group):is([open], :popover-open, :open) *) { padding: calc(var(--spacing) * 0); } } .group-open\:pb-3 { &:is(:where(.group):is([open], :popover-open, :open) *) { padding-bottom: calc(var(--spacing) * 3); } } .placeholder\:text-slate-500 { &::placeholder { color: var(--color-slate-500); } } .placeholder\:text-zinc-400 { &::placeholder { color: var(--color-zinc-400); } } .last\:mb-0 { &:last-child { margin-bottom: calc(var(--spacing) * 0); } } .last\:border-0 { &:last-child { border-style: var(--tw-border-style); border-width: 0px; } } .open\:p-5 { &:is([open], :popover-open, :open) { padding: calc(var(--spacing) * 5); } } .focus-within\:border-spark\/60 { &:focus-within { border-color: var(--spark); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--spark) 60%, transparent); } } } .focus-within\:ring-2 { &: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); } } .focus-within\:ring-spark\/30 { &:focus-within { --tw-ring-color: var(--spark); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--spark) 30%, transparent); } } } .hover\:border-white\/20 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } } } .hover\:border-white\/30 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } } .hover\:bg-\[\#4752C4\] { &:hover { @media (hover: hover) { background-color: #4752C4; } } } .hover\:bg-brand-hover { &:hover { @media (hover: hover) { background-color: var(--brand-hover); } } } .hover\:bg-violet-50 { &:hover { @media (hover: hover) { background-color: var(--color-violet-50); } } } .hover\:bg-zinc-50 { &:hover { @media (hover: hover) { background-color: var(--color-zinc-50); } } } .hover\:bg-zinc-50\/60 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(98.5% 0 0) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-50) 60%, transparent); } } } } .hover\:bg-zinc-100 { &:hover { @media (hover: hover) { background-color: var(--color-zinc-100); } } } .hover\:bg-zinc-700 { &:hover { @media (hover: hover) { background-color: var(--color-zinc-700); } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .focus\:border-spark\/60 { &:focus { border-color: var(--spark); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--spark) 60%, transparent); } } } .focus\:border-zinc-400 { &:focus { border-color: var(--color-zinc-400); } } .focus\:bg-white { &:focus { background-color: var(--color-white); } } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-spark\/30 { &:focus { --tw-ring-color: var(--spark); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--spark) 30%, transparent); } } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .focus-visible\:ring-2 { &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus-visible\:ring-spark { &:focus-visible { --tw-ring-color: var(--spark); } } .focus-visible\:ring-offset-2 { &:focus-visible { --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); } } .focus-visible\:ring-offset-indigo-black { &:focus-visible { --tw-ring-offset-color: var(--indigo-black); } } .focus-visible\:outline-none { &:focus-visible { --tw-outline-style: none; outline-style: none; } } .disabled\:cursor-not-allowed { &:disabled { cursor: not-allowed; } } .disabled\:opacity-30 { &:disabled { opacity: 30%; } } .disabled\:opacity-60 { &:disabled { opacity: 60%; } } .sm\:block { @media (width >= 40rem) { display: block; } } .sm\:grid-cols-2 { @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:sticky { @media (width >= 48rem) { position: sticky; } } .md\:top-0 { @media (width >= 48rem) { top: calc(var(--spacing) * 0); } } .md\:flex { @media (width >= 48rem) { display: flex; } } .md\:hidden { @media (width >= 48rem) { display: none; } } .md\:inline-flex { @media (width >= 48rem) { display: inline-flex; } } .md\:h-36 { @media (width >= 48rem) { height: calc(var(--spacing) * 36); } } .md\:h-screen { @media (width >= 48rem) { height: 100vh; } } .md\:max-w-md { @media (width >= 48rem) { max-width: var(--container-md); } } .md\:translate-x-0 { @media (width >= 48rem) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:p-8 { @media (width >= 48rem) { padding: calc(var(--spacing) * 8); } } .md\:px-6 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 6); } } .md\:px-8 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 8); } } .md\:py-8 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 8); } } .md\:pt-8 { @media (width >= 48rem) { padding-top: calc(var(--spacing) * 8); } } .md\:text-4xl { @media (width >= 48rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .md\:text-8xl { @media (width >= 48rem) { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } } .md\:text-base { @media (width >= 48rem) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .md\:text-xl { @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .lg\:col-span-2 { @media (width >= 64rem) { grid-column: span 2 / span 2; } } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .xl\:grid-cols-4 { @media (width >= 80rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .dark\:block { &:where(.dark, .dark *) { display: block; } } .dark\:hidden { &:where(.dark, .dark *) { display: none; } } .dark\:divide-zinc-900 { &:where(.dark, .dark *) { :where(& > :not(:last-child)) { border-color: var(--color-zinc-900); } } } .dark\:border-emerald-500\/30 { &:where(.dark, .dark *) { border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent); } } } .dark\:border-zinc-700 { &:where(.dark, .dark *) { border-color: var(--color-zinc-700); } } .dark\:border-zinc-800 { &:where(.dark, .dark *) { border-color: var(--color-zinc-800); } } .dark\:border-zinc-900 { &:where(.dark, .dark *) { border-color: var(--color-zinc-900); } } .dark\:bg-emerald-950 { &:where(.dark, .dark *) { background-color: var(--color-emerald-950); } } .dark\:bg-emerald-950\/20 { &:where(.dark, .dark *) { background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-950) 20%, transparent); } } } .dark\:bg-rose-950 { &:where(.dark, .dark *) { background-color: var(--color-rose-950); } } .dark\:bg-zinc-100 { &:where(.dark, .dark *) { background-color: var(--color-zinc-100); } } .dark\:bg-zinc-900 { &:where(.dark, .dark *) { background-color: var(--color-zinc-900); } } .dark\:bg-zinc-900\/40 { &:where(.dark, .dark *) { background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-900) 40%, transparent); } } } .dark\:bg-zinc-900\/50 { &:where(.dark, .dark *) { background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent); } } } .dark\:bg-zinc-950 { &:where(.dark, .dark *) { background-color: var(--color-zinc-950); } } .dark\:bg-zinc-950\/80 { &:where(.dark, .dark *) { background-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-950) 80%, transparent); } } } .dark\:text-amber-400 { &:where(.dark, .dark *) { color: var(--color-amber-400); } } .dark\:text-emerald-200 { &:where(.dark, .dark *) { color: var(--color-emerald-200); } } .dark\:text-emerald-200\/80 { &:where(.dark, .dark *) { color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-200) 80%, transparent); } } } .dark\:text-emerald-300 { &:where(.dark, .dark *) { color: var(--color-emerald-300); } } .dark\:text-emerald-400 { &:where(.dark, .dark *) { color: var(--color-emerald-400); } } .dark\:text-rose-300 { &:where(.dark, .dark *) { color: var(--color-rose-300); } } .dark\:text-rose-400 { &:where(.dark, .dark *) { color: var(--color-rose-400); } } .dark\:text-violet-300 { &:where(.dark, .dark *) { color: var(--color-violet-300); } } .dark\:text-violet-400 { &:where(.dark, .dark *) { color: var(--color-violet-400); } } .dark\:text-zinc-100 { &:where(.dark, .dark *) { color: var(--color-zinc-100); } } .dark\:text-zinc-200 { &:where(.dark, .dark *) { color: var(--color-zinc-200); } } .dark\:text-zinc-300 { &:where(.dark, .dark *) { color: var(--color-zinc-300); } } .dark\:text-zinc-400 { &:where(.dark, .dark *) { color: var(--color-zinc-400); } } .dark\:text-zinc-600 { &:where(.dark, .dark *) { color: var(--color-zinc-600); } } .dark\:text-zinc-900 { &:where(.dark, .dark *) { color: var(--color-zinc-900); } } .dark\:hover\:bg-violet-950\/40 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-950) 40%, transparent); } } } } } .dark\:hover\:bg-zinc-800 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-zinc-800); } } } } .dark\:hover\:bg-zinc-900 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-zinc-900); } } } } .dark\:hover\:bg-zinc-900\/30 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-zinc-900) 30%, transparent); } } } } } .dark\:focus\:bg-zinc-950 { &:where(.dark, .dark *) { &:focus { background-color: var(--color-zinc-950); } } } .\[\&\>svg\]\:h-6 { &>svg { height: calc(var(--spacing) * 6); } } .\[\&\>svg\]\:w-6 { &>svg { width: calc(var(--spacing) * 6); } } } @layer theme, base, components, utilities; @layer theme, base, components, utilities; @layer theme; @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; 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 { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.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, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-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, ::backdrop, ::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); flex-shrink: 0; transform-origin: center; align-items: center; justify-content: 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 250ms var(--ease-out-quart), color 150ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 150ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &[data-pending="true"] { pointer-events: none; } & svg { pointer-events: none; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; align-self: center; margin-inline: calc(var(--spacing) * -0.5); margin-block: calc(var(--spacing) * 0.5); } } .close-button--default { background-color: var(--default); color: var(--muted); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } &:active, &[data-pressed="true"] { transform: scale(0.93); } } .description { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; overflow-wrap: break-word; color: var(--muted); } .error-message { height: auto; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); overflow-wrap: break-word; color: var(--danger); transition: opacity 150ms var(--ease-out), height 350ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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%; &[data-visible="true"] { height: auto; } &[data-visible="true"] { opacity: 100%; } transition: opacity 150ms var(--ease-out), height 350ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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); } .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) * 0.5); } &::after { content: var(--tw-content); color: var(--danger); } &::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 { width: 100%; contain: layout style; } .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 { margin-left: auto; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; 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: 250ms; transition-duration: 250ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[data-expanded="true"] { rotate: calc(180deg * -1); } } .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); height: 1px; width: 100%; border-radius: calc(infinity * 1px); background-color: var(--separator); } .accordion__item:last-child::after { content: none; } .accordion__item[data-hide-separator="true"]::after { display: none; } .accordion__trigger { cursor: var(--cursor-interactive); display: flex; flex: 1; align-items: center; justify-content: space-between; 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 150ms var(--ease-out), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not([aria-expanded="true"]), &[data-hovered="true"]:not([aria-expanded="true"]) { background-color: var(--color-foreground); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent 90%); } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[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 200ms var(--ease-out-quad), opacity 200ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[data-expanded="true"] { will-change: height, opacity; opacity: 1; } } .accordion--surface { border-radius: calc(var(--radius) * 3); background-color: var(--surface); .accordion__trigger { @media (hover: hover) { &:hover:not([aria-expanded="true"]), &[data-hovered="true"]:not([aria-expanded="true"]) { background-color: var(--default); } } } .accordion__item::after { background-color: var(--surface-foreground); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--surface-foreground) 6%, transparent); } } } .accordion--surface .accordion__item { &::after { left: 3%; width: 94%; } &:first-child [data-slot="accordion-trigger"] { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } &: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__link { position: relative; padding-inline: calc(var(--spacing) * 0.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: 100%; &:hover, &[data-hovered="true"] { text-decoration-line: underline; } &[data-current="true"] { color: var(--link); opacity: 100%; } } .breadcrumbs__item { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: calc(var(--spacing) * 0.5); padding-inline: calc(var(--spacing) * 0.5); } .breadcrumbs__separator { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); color: var(--muted); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 180deg; } } } .disclosure-group { width: 100%; contain: layout style; } .disclosure { position: relative; } .accordion__heading { display: flex; } .disclosure__trigger { cursor: var(--cursor-interactive); display: inline-block; -webkit-tap-highlight-color: transparent; &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .disclosure__indicator { margin-left: auto; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; 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: 250ms; transition-duration: 250ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[data-expanded="true"] { rotate: calc(180deg * -1); } } .disclosure__content { opacity: 0; height: var(--disclosure-panel-height); overflow: clip; transition: height 200ms var(--ease-out-quad), opacity 200ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[data-expanded="true"] { will-change: height, opacity; opacity: 1; } } .disclosure__body { padding: calc(var(--spacing) * 2); } .link { position: relative; display: inline-flex; height: fit-content; width: fit-content; align-items: center; 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); @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix( in oklab, var(--surface) 81%, var(--surface-foreground) 19% ); } text-decoration-thickness: 1.5px; text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; transition: color 100ms var(--ease-smooth), text-decoration-color 100ms var(--ease-out), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out), opacity 100ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); @media (hover: hover) { &:hover, &[data-hovered="true"] { text-decoration-color: var(--muted); .link__icon { opacity: 100%; } } } &:focus-visible:not(:focus), &[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__icon { opacity: 100%; } } &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .link__icon { pointer-events: none; display: inline-flex; width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); flex-shrink: 0; align-items: center; justify-content: center; color: currentcolor; opacity: 60%; transition: opacity 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } & 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__icon[data-default-icon="true"] { margin-left: calc(var(--spacing) * 1); padding-bottom: calc(var(--spacing) * 1.5); } &.button { gap: calc(var(--spacing) * 0); text-decoration-line: none; } } .pagination { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); @media (width >= 40rem) { flex-direction: row; } } .pagination__summary { display: flex; align-items: center; gap: calc(var(--spacing) * 2); align-self: flex-start; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--muted); @media (width >= 40rem) { align-self: center; } } .pagination__content { display: flex; align-items: center; gap: calc(var(--spacing) * 1); align-self: flex-start; @media (width >= 40rem) { 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; align-items: center; justify-content: 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; @media (width >= 48rem) { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } cursor: var(--cursor-interactive); transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } --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); &:focus-visible, &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--pagination-link-bg-hover); } } &:active, &[data-pressed="true"] { background-color: var(--pagination-link-bg-pressed); transform: scale(0.97); } &[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); align-items: center; justify-content: center; 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; @media (width >= 48rem) { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } .pagination__link--nav { width: auto; gap: calc(var(--spacing) * 1.5); padding-inline: calc(var(--spacing) * 2.5); } .pagination--sm { .pagination__link { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); @media (width >= 48rem) { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } &:active, &[data-pressed="true"] { transform: scale(0.98); } } .pagination__link--nav { width: auto; padding-inline: calc(var(--spacing) * 2); } .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 (width >= 48rem) { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } } .pagination__summary { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .pagination--lg { .pagination__link { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); @media (width >= 48rem) { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } &:active, &[data-pressed="true"] { transform: scale(0.96); } } .pagination__link--nav { width: auto; padding-inline: calc(var(--spacing) * 3); } .pagination__ellipsis { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); @media (width >= 48rem) { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } } .pagination__summary { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .tabs { display: flex; gap: calc(var(--spacing) * 2); &[data-orientation="horizontal"] { flex-direction: column; } &[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) + 0.25rem); &[data-orientation="horizontal"] { width: 100%; flex-direction: row; } &[data-orientation="vertical"] { flex-direction: column; gap: calc(var(--spacing) * 1); .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); width: 100%; align-items: center; justify-content: center; 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 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out), opacity 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[data-selected="true"] { color: var(--segment-foreground); } &[data-selected="true"] .tabs__separator { opacity: 0; } &[data-selected="true"] + .tabs__tab .tabs__separator { opacity: 0; } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { &:not([data-selected="true"]):not([data-disabled="true"]):hover, &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) { opacity: 70%; } } &:focus-visible:not(:focus), &[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); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--muted) 25%, transparent); } border-radius: 4px; position: absolute; pointer-events: none; transition: opacity 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .tabs__list[data-orientation="horizontal"] & { left: 0; top: 25%; width: 1px; height: 50%; } .tabs__list[data-orientation="vertical"] & { top: 0; left: 5%; width: 90%; height: 1px; } } .tabs__panel { width: 100%; padding: calc(var(--spacing) * 2); --tw-outline-style: none; outline-style: none; &[data-exiting="true"] { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); width: 100%; } &[data-orientation="horizontal"] { margin-top: calc(var(--spacing) * 4); } &[data-orientation="vertical"] { margin-left: calc(var(--spacing) * 4); } } .tabs__indicator { box-shadow: var(--shadow-surface); position: absolute; top: 0; left: 0; z-index: -1; border-radius: var(--radius-3xl); width: 100%; height: 100%; background-color: var(--segment); transition-duration: 250ms; transition-property: translate, width, height; transition-timing-function: var(--ease-out-fluid); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .tabs--secondary { > .tabs__list-container > .tabs__list { background-color: transparent; padding: calc(var(--spacing) * 0); border-radius: 0; &[data-orientation="horizontal"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--border); max-width: 100%; overflow-x: auto; overflow-y: clip; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } &[data-orientation="vertical"] { border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--border); } } > .tabs__list-container .tabs__tab { border-radius: 0; &[data-selected="true"] { color: var(--foreground); } } > .tabs__list-container .tabs__separator { display: none; } > .tabs__list-container .tabs__indicator { background-color: var(--accent); box-shadow: none; border-radius: 0; } &[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator { top: auto; bottom: 0; height: 2px; } &[data-orientation="vertical"] > .tabs__list-container .tabs__indicator { left: 0; top: 0; width: 2px; height: 100%; } } .button { position: relative; isolation: isolate; display: inline-flex; height: calc(var(--spacing) * 10); width: fit-content; transform-origin: center; align-items: center; justify-content: 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; @media (width >= 48rem) { height: calc(var(--spacing) * 9); } transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } 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); &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &[data-pending="true"] { pointer-events: none; } &:active, &[data-pressed="true"] { background-color: var(--button-bg-pressed); transform: scale(0.97); } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--button-bg-hover); } } & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { pointer-events: none; margin-inline: calc(var(--spacing) * -0.5); margin-block: calc(var(--spacing) * 0.5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; align-self: center; @media (width >= 40rem) { margin-block: calc(var(--spacing) * 1); } @media (width >= 40rem) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } } .button--sm { height: calc(var(--spacing) * 9); padding-inline: calc(var(--spacing) * 3); @media (width >= 48rem) { height: calc(var(--spacing) * 8); } & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } &:active, &[data-pressed="true"] { transform: scale(0.98); } } .button--lg { height: calc(var(--spacing) * 11); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); @media (width >= 48rem) { height: calc(var(--spacing) * 10); } &:active, &[data-pressed="true"] { transform: scale(0.96); } } .button--primary { --button-bg: var(--color-accent); --button-bg-hover: var(--color-accent-hover); --button-bg-pressed: var(--color-accent-hover); --button-fg: var(--color-accent-foreground); } .button--secondary { --button-bg: var(--color-default); --button-bg-hover: var(--color-default-hover); --button-bg-pressed: var(--color-default-hover); --button-fg: var(--color-accent-soft-foreground); } .button--tertiary { --button-bg: var(--color-default); --button-bg-hover: var(--color-default-hover); --button-bg-pressed: var(--color-default-hover); } .button--ghost, .button--outline { --button-bg: transparent; --button-bg-hover: var(--color-default); --button-bg-pressed: var(--color-default); --button-fg: var(--color-default-foreground); } .button--outline { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--border); --button-bg-hover: var(--color-default); @supports (color: color-mix(in lab, red, red)) { --button-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 (width >= 48rem) { width: calc(var(--spacing) * 9); } } .button--icon-only.button--sm { width: calc(var(--spacing) * 9); @media (width >= 48rem) { width: calc(var(--spacing) * 8); } } .button--icon-only.button--lg { width: calc(var(--spacing) * 11); @media (width >= 48rem) { width: calc(var(--spacing) * 10); } } .button--full-width { width: 100%; } .button-group { display: inline-flex; height: auto; align-items: center; justify-content: center; gap: calc(var(--spacing) * 0); } .button-group--horizontal { flex-direction: row; } .button-group--vertical { flex-direction: column; } .button-group .button { border-radius: 0; } .button-group--horizontal .button:first-child { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:last-child { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .button-group--horizontal .button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .button-group--vertical .button:first-child { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .button-group--vertical .button:last-child { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .button-group--vertical .button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .button-group .button:active, .button-group .button[data-pressed="true"] { transform: none; } .button-group .button:focus-visible:not(:focus), .button-group .button[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .button-group__separator { background-color: currentcolor; opacity: 15%; border-radius: 4px; position: absolute; pointer-events: none; transition: opacity 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .button-group--horizontal & { left: -1px; top: 25%; width: 1px; height: 50%; } .button-group--vertical & { left: 25%; top: -1px; width: 50%; height: 1px; } } .button-group--horizontal .button--outline:first-child { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0px; } .button-group--horizontal .button--outline:last-child { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0px; } .button-group--horizontal .button--outline:not(:first-child):not(:last-child) { border-inline-style: var(--tw-border-style); border-inline-width: 0px; } .button-group--vertical .button--outline:first-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .button-group--vertical .button--outline:last-child { border-top-style: var(--tw-border-style); border-top-width: 0px; } .button-group--vertical .button--outline:not(:first-child):not(:last-child) { border-block-style: var(--tw-border-style); border-block-width: 0px; } .button-group--full-width { width: 100%; } .toggle-button { position: relative; isolation: isolate; display: inline-flex; height: calc(var(--spacing) * 10); width: fit-content; transform-origin: center; align-items: center; justify-content: 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; @media (width >= 48rem) { height: calc(var(--spacing) * 9); } transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } 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); &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--toggle-button-bg-hover); } } &:active, &[data-pressed="true"] { background-color: var(--toggle-button-bg-pressed); transform: scale(0.97); } &[data-selected="true"] { background-color: var(--toggle-button-bg-selected); color: var(--toggle-button-fg-selected); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--toggle-button-bg-selected-hover); } } &:active, &[data-pressed="true"] { background-color: var(--toggle-button-bg-selected-pressed); } } & svg { pointer-events: none; margin-inline: calc(var(--spacing) * -0.5); margin-block: calc(var(--spacing) * 0.5); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; align-self: center; @media (width >= 40rem) { margin-block: calc(var(--spacing) * 1); } @media (width >= 40rem) { 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 (width >= 48rem) { height: calc(var(--spacing) * 8); } & svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } &:active, &[data-pressed="true"] { transform: scale(0.98); } } .toggle-button--lg { height: calc(var(--spacing) * 11); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); @media (width >= 48rem) { height: calc(var(--spacing) * 10); } &:active, &[data-pressed="true"] { transform: scale(0.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 (width >= 48rem) { width: calc(var(--spacing) * 9); } } .toggle-button--icon-only.toggle-button--sm { width: calc(var(--spacing) * 9); @media (width >= 48rem) { width: calc(var(--spacing) * 8); } } .toggle-button--icon-only.toggle-button--lg { width: calc(var(--spacing) * 11); @media (width >= 48rem) { width: calc(var(--spacing) * 10); } } .toggle-button-group { display: inline-flex; height: auto; width: fit-content; align-items: center; justify-content: center; gap: calc(var(--spacing) * 0); } .toggle-button-group--horizontal { flex-direction: row; } .toggle-button-group--vertical { flex-direction: column; } .toggle-button-group--full-width { width: 100%; } .toggle-button-group .toggle-button { border-radius: 0; } .toggle-button-group--horizontal .toggle-button:first-child { border-start-start-radius: calc(var(--radius) * 3); border-end-start-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:last-child { border-start-end-radius: calc(var(--radius) * 3); border-end-end-radius: calc(var(--radius) * 3); } .toggle-button-group--horizontal .toggle-button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:first-child { border-top-left-radius: calc(var(--radius) * 3); border-top-right-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:last-child { border-bottom-right-radius: calc(var(--radius) * 3); border-bottom-left-radius: calc(var(--radius) * 3); } .toggle-button-group--vertical .toggle-button:first-child:last-child { border-radius: calc(var(--radius) * 3); } .toggle-button-group .toggle-button:active, .toggle-button-group .toggle-button[data-pressed="true"] { transform: none; } .toggle-button-group .toggle-button:focus-visible:not(:focus), .toggle-button-group .toggle-button[data-focus-visible="true"] { --tw-ring-offset-width: 0px; --tw-ring-inset: inset; } .toggle-button-group--full-width .toggle-button { flex: 1; } .toggle-button-group__separator { background-color: currentcolor; opacity: 15%; border-radius: 4px; position: absolute; pointer-events: none; transition: opacity 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .toggle-button-group--horizontal & { left: -1px; top: 25%; width: 1px; height: 50%; } .toggle-button-group--vertical & { left: 25%; top: -1px; width: 50%; height: 1px; } } .toggle-button-group--detached { gap: calc(var(--spacing) * 1); } .toggle-button-group--detached .toggle-button { border-radius: calc(var(--radius) * 3); } .toggle-button-group--detached .toggle-button-group__separator { display: none; } .toolbar { display: grid; width: fit-content; grid-auto-flow: column; align-items: center; gap: calc(var(--spacing) * 2); .separator--vertical { height: calc(1 / 2 * 100%); align-self: center; } .separator--horizontal { width: calc(1 / 2 * 100%); justify-content: center; justify-self: center; } } .toolbar--vertical { grid-auto-flow: row; align-items: flex-start; justify-content: flex-start; .button-group { justify-content: flex-start; } } .toolbar--attached { border-radius: calc(infinity * 1px); background-color: var(--surface); padding: calc(var(--spacing) * 1); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dropdown { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); } .dropdown__trigger { display: inline-block; --tw-outline-style: none; outline-style: none; transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &[data-pending="true"] { pointer-events: none; } &:active, &[data-pressed="true"] { transform: scale(0.97); } } .dropdown__popover { max-width: 48svw; 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)); @media (width >= 48rem) { min-width: calc(var(--spacing) * 55); } box-shadow: var(--shadow-overlay); &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(90*1%); --tw-enter-scale: .9; &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } [data-slot="dropdown-menu"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } [data-slot="menu-item"] { padding-inline: calc(var(--spacing) * 2.5); } } .dropdown__menu { position: relative; display: flex; width: 100%; flex-direction: column; gap: calc(var(--spacing) * 0.5); overflow: clip; padding: calc(var(--spacing) * 1); [data-slot="separator"] { margin-left: 3%; width: 94%; } } .list-box-item { position: relative; display: flex; min-height: calc(var(--spacing) * 9); width: 100%; align-items: center; justify-content: flex-start; 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 250ms var(--ease-out-quart), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); [data-slot="label"] { pointer-events: none; width: fit-content; -webkit-user-select: none; user-select: none; } [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; user-select: none; } &:has(.list-box-item__indicator) { padding-right: calc(var(--spacing) * 7); } &:focus-visible:not(:focus), &[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); } &:active, &[data-pressed="true"] { transform: scale(0.98); } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); } } &[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .list-box-item__indicator { position: absolute; top: calc(1 / 2 * 100%); right: calc(var(--spacing) * 2); display: flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); align-items: center; justify-content: center; 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: 250ms; transition-duration: 250ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } [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: 300ms; transition-duration: 300ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] { transition: stroke-dashoffset 250ms linear; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } } .list-box-item--danger { .list-box-item__indicator { color: var(--danger); } [data-slot="label"] { color: var(--danger); } } .list-box-section { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--spacing) * 0); } .list-box { position: relative; display: flex; width: 100%; flex-direction: column; gap: calc(var(--spacing) * 1); overflow: clip; padding: calc(var(--spacing) * 1); [data-slot="separator"][data-orientation="horizontal"] { margin-left: 3%; width: 94%; } } .menu-item { position: relative; display: flex; min-height: calc(var(--spacing) * 9); width: 100%; align-items: center; justify-content: flex-start; 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 250ms var(--ease-out-quart), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); [data-slot="label"] { pointer-events: none; width: fit-content; -webkit-user-select: none; user-select: none; } [data-slot="description"] { pointer-events: none; text-wrap: wrap; -webkit-user-select: none; user-select: none; } [data-slot="submenu-indicator"] svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } &:has(.menu-item__indicator) { padding-left: calc(var(--spacing) * 7); } &[data-has-submenu="true"]:has(.menu-item__indicator) { padding-right: calc(var(--spacing) * 7); padding-left: calc(var(--spacing) * 2); } &:focus-visible:not(:focus), &[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); } &:active, &[data-pressed="true"] { transform: scale(0.98); } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); } } &[aria-checked="true"], &[aria-selected="true"], &[data-selected="true"] { [data-slot="menu-item-indicator--checkmark"] { transition: stroke-dashoffset 100ms linear; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } [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: 100%; } } &[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .menu-item__indicator { position: absolute; top: calc(1 / 2 * 100%); left: calc(var(--spacing) * 2); display: flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); align-items: center; justify-content: center; 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: 250ms; transition-duration: 250ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .menu-item[data-has-submenu="true"] & { right: calc(var(--spacing) * 2); left: auto; } [data-slot="menu-item-indicator--checkmark"] { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); .menu-item[data-selection-mode="multiple"] & { 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: 300ms; transition-duration: 300ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } } [data-slot="menu-item-indicator--dot"] { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); .menu-item[data-selection-mode="multiple"] & { 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: 250ms; transition-duration: 250ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } --tw-scale-x: 70%; --tw-scale-y: 70%; --tw-scale-z: 70%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0%; } } .menu-item__indicator--submenu { color: var(--muted); svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } .menu-item--danger { .menu-item__indicator { color: var(--danger); } [data-slot="label"] { color: var(--danger); } } .menu-section { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--spacing) * 0); } .menu { position: relative; display: flex; width: 100%; flex-direction: column; gap: calc(var(--spacing) * 1); overflow: clip; padding: calc(var(--spacing) * 1); [data-slot="separator"] { margin-left: 3%; width: 94%; } } .tag-group { position: relative; display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); } .tag-group__list { position: relative; display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 1.5); } .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: 0.031em; position: relative; display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); border-radius: calc(infinity * 1px); --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 100ms var(--ease-smooth), scale 100ms var(--ease-smooth), opacity 100ms var(--ease-smooth), background-color 100ms var(--ease-smooth), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); & svg { pointer-events: none; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); flex-shrink: 0; align-self: center; color: currentcolor; } } .tag:is([data-disabled="true"], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .tag:is(:focus-visible, [data-focus-visible]) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--focus); --tw-ring-offset-width: 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([data-selected="true"], [aria-selected="true"]) { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } color: var(--accent); @media (hover: hover) { &:is(:hover, [data-hovered="true"]) { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 20%, transparent); } } } } .tag--sm { padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 0.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) { &: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)) { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } } .tag--surface { background-color: var(--surface); color: var(--surface-foreground); @media (hover: hover) { &: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)) { 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; & svg { width: inherit; height: inherit; flex-shrink: 0; align-self: center; color: currentcolor; } } .color-area { position: relative; width: 100%; max-width: calc(var(--spacing) * 56); flex-shrink: 0; border-radius: calc(var(--radius) * 2); -webkit-tap-highlight-color: transparent; aspect-ratio: 1 / 1; background: var(--color-area-background); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); &[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, rgba(255, 255, 255, 0.2) 1px, transparent 1px); background-size: 8px 8px; } } .color-area__thumb { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); border-radius: calc(infinity * 1px); will-change: width,height; background-color: var(--color-area-thumb-color); border: 3px solid white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: width 150ms var(--ease-out), height 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[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); } &[data-dragging="true"] { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } &[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) * 0.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 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } [data-slot="label"] { cursor: var(--cursor-interactive); } &:focus-visible:not(:focus), &[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); } &:disabled, &[data-disabled="true"], &[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; flex-direction: column; gap: calc(var(--spacing) * 3); &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95*1%); --tw-enter-scale: .95; &[data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } } .color-slider { display: grid; width: 100%; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; grid-template-rows: auto auto; &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-areas: "track"; grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; } &:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-areas: "label" "track"; grid-template-columns: 1fr; } &:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-areas: "output" "track"; grid-template-columns: 1fr; .color-slider__output { justify-self: end; } } [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .color-slider__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__track { position: relative; border-radius: calc(infinity * 1px); grid-area: track; &::before, &::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } } .color-slider__thumb { position: absolute; display: flex; cursor: grab; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); -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 250ms var(--ease-out), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &[data-dragging="true"] { cursor: grabbing; } &[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); } &[data-disabled="true"] { cursor: default; background-color: var(--default); } } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; [data-slot="label"] { opacity: 100%; } } &[data-orientation="horizontal"] { flex-direction: column; .color-slider__track { height: calc(var(--spacing) * 5); justify-self: center; border-radius: 0; width: calc(100% - 1.25rem); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); &::before, &::after { top: calc(var(--spacing) * 0); height: 100%; width: 0.625rem; } &::before { left: -0.625rem; border-top-left-radius: 999px; border-bottom-left-radius: 999px; box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; } &::after { right: -0.625rem; border-top-right-radius: 999px; border-bottom-right-radius: 999px; box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); background-color: var(--track-end-color, transparent); } } .color-slider__thumb { top: calc(1 / 2 * 100%); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } &[data-orientation="vertical"] { height: 100%; gap: calc(var(--spacing) * 2); flex-direction: row; grid-template-areas: "output" "track" "label"; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; align-items: center; justify-items: center; &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-areas: "track"; grid-template-rows: 1fr; gap: 0; } &:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-areas: "track" "label"; grid-template-rows: 1fr auto; } &:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-areas: "output" "track"; grid-template-rows: auto 1fr; } .color-slider__output { text-align: center; } [data-slot="label"] { text-align: center; } .color-slider__track { width: calc(var(--spacing) * 5); justify-self: center; border-radius: 0; height: calc(100% - 1.25rem); box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 0 rgba(0, 0, 0, 0.1); &::before, &::after { left: calc(var(--spacing) * 0); width: 100%; height: 0.625rem; } &::before { bottom: -0.625rem; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; } &::after { top: -0.625rem; border-top-left-radius: 999px; border-top-right-radius: 999px; box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1); background-color: var(--track-end-color, transparent); } } .color-slider__thumb { left: calc(1 / 2 * 100%); width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } } .color-swatch { position: relative; box-sizing: border-box; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); flex-shrink: 0; background: linear-gradient(var(--color-swatch-current), var(--color-swatch-current)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } .color-swatch--circle { border-radius: calc(infinity * 1px); } .color-swatch--square { border-radius: calc(var(--radius) * 0.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; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2); } .color-swatch-picker__item { position: relative; display: flex; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 2px; border-color: transparent; --tw-outline-style: none; outline-style: none; -webkit-tap-highlight-color: transparent; cursor: var(--cursor-interactive); transition: border-color 100ms var(--ease-out), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible, &[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); } &[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &[data-selected="true"] { border-color: var(--color-swatch-current); box-shadow: var(--field-shadow); .color-swatch-picker__swatch { transform: scale(0.77); } } } .color-swatch-picker__swatch { display: block; width: 100%; height: 100%; border-radius: inherit; transition: transform 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover { transform: scale(1.1); } } } .color-swatch-picker__indicator { pointer-events: none; position: absolute; inset: calc(var(--spacing) * 0); z-index: 10; display: flex; align-items: center; justify-content: center; & > * { width: calc(1 / 3 * 100%); height: calc(1 / 3 * 100%); color: var(--color-white); transform: scale(0) translateZ(0); transition: transform 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &[data-light-color="true"] & > * { color: var(--color-black); } .color-swatch-picker__item[data-selected="true"] & > * { 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__swatch { border-radius: calc(var(--radius) * 1); } &[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) * 0.75); .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 0.75); } &[data-selected="true"] { .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 0.75); } } } } .color-swatch-picker--square.color-swatch-picker--sm { .color-swatch-picker__item { border-radius: calc(var(--radius) * 1); .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } &[data-selected="true"] { .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 0.75); } } } } .color-swatch-picker--square.color-swatch-picker--lg { .color-swatch-picker__item { border-radius: calc(var(--radius) * 1.5); .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } &[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__swatch { border-radius: calc(var(--radius) * 1); } &[data-selected="true"] { .color-swatch-picker__swatch { border-radius: calc(var(--radius) * 1); } } } } .color-input-group { display: inline-flex; height: calc(var(--spacing) * 9); align-items: center; overflow: hidden; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); border-width: 1px; 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: var(--border-width-field); border-color: var(--color-field-border); transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &[data-focus-within="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(--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; } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .color-input-group__input { display: flex; height: 100%; flex: 1; cursor: text; align-items: center; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &::placeholder { color: var(--field-placeholder, var(--muted)); } .color-input-group:has([data-slot="color-input-group-prefix"]) & { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: calc(var(--spacing) * 2); } .color-input-group:has([data-slot="color-input-group-suffix"]) & { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: calc(var(--spacing) * 2); } &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } } .color-input-group__prefix { flex-shrink: 0; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 3); display: flex; align-items: center; } .color-input-group__suffix { flex-shrink: 0; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); display: flex; 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) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--color-input-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--color-input-group-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } border-color: var(--color-field-border-invalid); background-color: var(--color-input-group-bg-focus); } [data-slot="color-input-group-input"] { background-color: transparent; } } .color-input-group--full-width { width: 100%; } .color-field { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } } .color-field--full-width { width: 100%; } .slider { display: grid; width: 100%; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .slider__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__track { position: relative; border-radius: calc(infinity * 1px); background-color: var(--default); grid-area: track; } .slider__fill { pointer-events: none; position: absolute; background-color: var(--accent); } .slider__thumb { position: absolute; display: flex; cursor: grab; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--accent); -webkit-tap-highlight-color: transparent; transition: background-color 250ms var(--ease-smooth), transform 250ms var(--ease-out), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &::after { position: relative; z-index: 10; border-radius: calc(infinity * 1px); 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)); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &[data-dragging="true"] { cursor: grabbing; &::after { scale: 0.9; &: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); &::before, &::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) { &: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); &::before, &::after { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } } } &[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); } &[data-disabled="true"] { cursor: default; } } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; [data-slot="label"] { opacity: 100%; } } &[data-orientation="horizontal"] { flex-direction: column; .slider__track { height: calc(var(--spacing) * 5); width: 100%; border-inline-style: var(--tw-border-style); border-inline-width: 0.75rem; border-inline-color: transparent; &[data-fill-start="true"] { border-inline-start-color: var(--accent); } &[data-fill-end="true"] { border-inline-end-color: var(--accent); } } .slider__fill, .slider__thumb { height: 100%; } .slider__thumb { top: calc(1 / 2 * 100%); width: calc(1.5rem + 0.25rem); &::after { width: 1.5rem; height: 1rem; } } } &[data-orientation="vertical"] { height: 100%; gap: calc(var(--spacing) * 2); flex-direction: row; grid-template-areas: "output" "track" "label"; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; .slider__output { text-align: center; } [data-slot="label"] { text-align: center; } .slider__track { height: 100%; width: calc(var(--spacing) * 5); border-block-style: var(--tw-border-style); border-block-width: 0.75rem; border-block-color: transparent; justify-self: center; &[data-fill-start="true"] { border-bottom-color: var(--accent); } &[data-fill-end="true"] { border-top-color: var(--accent); } } .slider__fill, .slider__thumb { width: 100%; } .slider__thumb { left: calc(1 / 2 * 100%); height: calc(1.5rem + 0.25rem); &::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); @supports (color: color-mix(in lab, red, red)) { --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%); } --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); &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; .switch__thumb { background-color: var(--default-foreground); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--default-foreground) 20%, transparent); } } } &:disabled[aria-checked="true"], &:disabled[data-selected="true"], &[data-disabled="true"][aria-checked="true"], &[data-disabled="true"][data-selected="true"], &[aria-disabled="true"][aria-checked="true"], &[aria-disabled="true"][data-selected="true"] { .switch__thumb { opacity: 0.4; } } } .switch__control { position: relative; display: flex; flex-shrink: 0; align-items: center; overflow: hidden; border-radius: calc(infinity * 1px); height: 1.25rem; width: 2.5rem; background-color: var(--switch-control-bg); transition: background-color 250ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .switch:focus-visible &, .switch[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); } .switch:hover &, .switch[data-hovered="true"] & { background-color: var(--switch-control-bg-hover); } .switch:active &, .switch[data-pressed="true"] & { background-color: var(--switch-control-bg-pressed); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transform: none; &::before, &::after { transform: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transform: none; &::before, &::after { transform: none; } } } } .switch[aria-checked="true"] &, .switch[data-selected="true"] & { background-color: var(--switch-control-bg-checked); } .switch[aria-checked="true"]:hover &, .switch[data-selected="true"]:hover &, .switch[aria-checked="true"][data-hovered="true"] &, .switch[data-selected="true"][data-hovered="true"] & { background-color: var(--switch-control-bg-checked-hover); } .switch[aria-checked="true"]:active &, .switch[data-selected="true"]:active &, .switch[aria-checked="true"][data-pressed="true"] &, .switch[data-selected="true"][data-pressed="true"] & { background-color: var(--switch-control-bg-checked-hover); } } .switch--sm .switch__control { height: 1rem; width: 2rem; } .switch--lg .switch__control { height: 1.5rem; width: 3rem; } .switch__thumb { margin-inline-start: calc(var(--spacing) * 0.5); display: flex; transform-origin: center; border-radius: calc(infinity * 1px); 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); height: 1rem; width: 1.375rem; transition: margin 300ms var(--ease-out-fluid), background-color 200ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .switch[aria-checked="true"] &, .switch[data-selected="true"] & { margin-inline-start: calc(100% - 1.5rem); background-color: var(--accent-foreground); color: var(--accent); box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3); } } .switch--sm .switch__thumb { height: 0.75rem; width: 1.03125rem; .switch[aria-checked="true"] &, .switch[data-selected="true"] & { margin-inline-start: calc(100% - 1.15625rem); } } .switch--lg .switch__thumb { height: 1.25rem; width: 1.71875rem; .switch[aria-checked="true"] &, .switch[data-selected="true"] & { margin-inline-start: calc(100% - 1.84375rem); } } .switch__thumb > * { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .switch__label { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .switch__content { display: flex; flex-direction: column; gap: calc(var(--spacing) * 0); } .switch-group { display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); } .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; flex-shrink: 0; align-items: center; justify-content: center; gap: calc(var(--spacing) * 0.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; line-height: 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); } .badge__label { padding-inline: calc(var(--spacing) * 0.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); font-size: 10px; --tw-leading: 1.34; 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; flex-shrink: 0; align-items: center; gap: calc(var(--spacing) * 0.5); border-radius: calc(var(--radius) * 2); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 0.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); } .chip__label { padding-inline: calc(var(--spacing) * 0.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; width: 100%; overflow: clip; grid-template-columns: minmax(0, 1fr); } .table__scroll-container { overflow-x: auto; scrollbar-width: thin; scrollbar-color: oklch(0% 0 0 / 0.15) transparent; &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: oklch(0% 0 0 / 0.15); border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { background: oklch(0% 0 0 / 0.25); } :is([data-theme="dark"], .dark) & { scrollbar-color: oklch(100% 0 0 / 0.15) transparent; &::-webkit-scrollbar-thumb { background: oklch(100% 0 0 / 0.15); } &::-webkit-scrollbar-thumb:hover { background: oklch(100% 0 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); border-bottom-width: 0px; background-color: transparent; } .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); & tr:first-child td:first-child, & tr:first-child td:last-child, & tr:last-child td:first-child, & tr:last-child td:last-child { border-radius: 0; } &: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); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, color-mix( in oklab, var(--surface) 81%, var(--surface-foreground) 19% ) 50%, transparent); } background-color: transparent; } @media (hover: hover) { &:hover .table__cell, &[data-hovered="true"] .table__cell { background-color: var(--default); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--default) 50%, transparent); } } } } .table__content { width: 100%; 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)); } .table-root--primary .table__content { overflow: clip; } .table__header { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } background-color: var(--surface-secondary); } .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); &::after { content: ""; pointer-events: none; position: absolute; top: calc(1 / 2 * 100%); right: calc(var(--spacing) * 0); height: calc(var(--spacing) * 4); width: 1px; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(var(--radius) * 0.5); background-color: var(--separator); } &:last-child:not(:only-child)::after { content: none; } &[data-allows-sorting="true"] { cursor: var(--cursor-interactive); } @media (hover: hover) { &[data-allows-sorting="true"]:hover, &[data-allows-sorting="true"][data-hovered="true"] { color: var(--foreground); } } &:focus-visible, &[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); } & tr:first-child td:last-child { border-top-right-radius: calc(var(--radius) * 2); } & tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) * 2); } & tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) * 2); } &:not(tbody) { position: relative; height: 100%; overflow: clip; border-radius: calc(var(--radius) * 2); } } .table__row { position: relative; height: 100%; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--separator); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--separator) 50%, transparent); } &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } @media (hover: hover) { &:hover .table__cell, &[data-hovered="true"] .table__cell { background-color: var(--surface); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--surface) 40%, transparent); } } } &[data-selected="true"] .table__cell { background-color: var(--surface); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--surface) 10%, transparent); } } &[aria-disabled="true"], &[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &:focus-visible, &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; box-shadow: inset 0 0 0 2px var(--color-focus); } &[data-dragging="true"] { opacity: 50%; } &[data-drop-target="true"] .table__cell { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } } .table__cell { height: 100%; background-color: var(--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); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, color-mix( in oklab, var(--surface) 81%, var(--surface-foreground) 19% ) 50%, transparent); } &:focus-visible, &[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; align-items: center; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); } .table__resizable-container { position: relative; overflow: auto; } .table__column-resizer { position: absolute; top: calc(1 / 2 * 100%); right: calc(var(--spacing) * 0); height: calc(var(--spacing) * 4); width: 1px; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); border-radius: calc(var(--radius) * 0.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; border-style: none; background-clip: content-box; --tw-outline-style: none; outline-style: none; &[data-hovered="true"], &:hover { height: 100%; width: calc(var(--spacing) * 0.5); background-color: var(--accent); } &[data-resizing="true"] { height: 100%; width: calc(var(--spacing) * 0.5); background-color: var(--accent); } &[data-focus-visible="true"], &:focus-visible { height: 100%; width: calc(var(--spacing) * 0.5); background-color: var(--focus); } } .table__column:has(.table__column-resizer)::after { content: none; } .table__load-more { & td, & [role="rowheader"] { padding-block: calc(var(--spacing) * 3); text-align: center; & > * { margin-inline: auto; } } } .table__load-more-content { display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2); } .alert { display: flex; width: 100%; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: calc(var(--spacing) * 4); border-radius: calc(var(--radius) * 3); background-color: var(--surface); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-shadow: var(--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); } .alert__content { display: flex; height: 100%; flex-grow: 1; flex-direction: column; align-items: flex-start; } .alert__indicator { display: flex; align-items: center; justify-content: center; padding: calc(var(--spacing) * 1); -webkit-user-select: none; user-select: none; [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 { color: var(--foreground); } .alert--default .alert__title { color: var(--foreground); } .alert--accent .alert__indicator { color: var(--accent); } .alert--accent .alert__title { color: var(--accent); } .alert--success .alert__indicator { color: var(--success); } .alert--success .alert__title { color: var(--success); } .alert--warning .alert__indicator { color: var(--warning); } .alert--warning .alert__title { color: var(--warning); } .alert--danger .alert__indicator { color: var(--danger); } .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) * 0.5); background-color: var(--surface-tertiary); @supports (color: color-mix(in lab, red, red)) { 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; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } 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); } &:has(.skeleton) { &::after { content: none; } &::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); background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100% ); z-index: 10; pointer-events: none; mix-blend-mode: overlay; } & .skeleton { &::after { content: none; } } } } .skeleton--pulse { animation: var(--animate-pulse); } .meter { display: grid; width: 100%; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; --meter-fill: var(--color-accent); [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .meter__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__track { position: relative; overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--default); grid-area: track; height: calc(var(--spacing) * 2); } .meter__fill { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); height: 100%; border-radius: calc(infinity * 1px); background-color: var(--meter-fill); transition: width 300ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; [data-slot="label"] { opacity: 100%; } } } .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; width: 100%; gap: calc(var(--spacing) * 1); grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; --progress-bar-fill: var(--color-accent); [data-slot="label"] { width: fit-content; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); grid-area: label; } .progress-bar__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__track { position: relative; overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--default); grid-area: track; height: calc(var(--spacing) * 2); } .progress-bar__fill { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); height: 100%; border-radius: calc(infinity * 1px); background-color: var(--progress-bar-fill); transition: width 300ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &:not([aria-valuenow]) { .progress-bar__fill { width: calc(2 / 5 * 100%); animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::after { animation: none; } } } } } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; [data-slot="label"] { opacity: 100%; } } } @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; align-items: center; justify-content: center; --progress-circle-stroke: var(--color-accent); --progress-circle-track-stroke: var(--color-default); .progress-circle__track { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .progress-circle__track-circle { stroke: var(--progress-circle-track-stroke); } .progress-circle__fill-circle { stroke: var(--progress-circle-stroke); transition: stroke-dashoffset 300ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &:not([aria-valuenow]) { .progress-circle__track { animation: progress-circle-spin 1s linear infinite; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::after { animation: none; } } } } } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } @keyframes progress-circle-spin { from { transform: rotate(0deg); } 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 0.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; width: calc(100vw - 2rem); @media (width >= 40rem) { width: auto; } @media (width >= 40rem) { min-width: var(--toast-width); } display: block; } .toast-region--bottom { bottom: calc(var(--spacing) * 4); left: calc(1 / 2 * 100%); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .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); left: calc(1 / 2 * 100%); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .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; left: 0; right: 0; pointer-events: auto; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: calc(var(--spacing) * 1.5); border-radius: calc(var(--radius) * 3); background-color: var(--surface); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); --tw-shadow: var(--overlay-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .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__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; height: 100%; flex-grow: 1; flex-direction: column; align-items: flex-start; align-self: center; } .toast__indicator { display: flex; flex-shrink: 0; align-items: center; justify-content: center; padding: calc(var(--spacing) * 1); color: var(--overlay-foreground); -webkit-user-select: none; user-select: none; [data-slot="toast-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } [data-slot="spinner"] { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } [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(--border); background-color: var(--default); opacity: 100%; @media (width >= 40rem) { pointer-events: none; } @media (width >= 40rem) { top: calc(var(--spacing) * -1); } @media (width >= 40rem) { right: calc(var(--spacing) * -1); } @media (width >= 40rem) { border-style: var(--tw-border-style); border-width: 1px; } @media (width >= 40rem) { background-color: var(--overlay); } @media (width >= 40rem) { opacity: 0%; } transition: opacity 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } [data-slot="close-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); @media (width >= 40rem) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); } } } .toast[data-frontmost="true"]:hover .toast__close-button { pointer-events: auto; opacity: 100%; } .toast__action { margin-top: calc(var(--spacing) * 2); @media (width >= 40rem) { margin-top: calc(var(--spacing) * 0); } } .toast--accent .toast__title { color: var(--accent); } .toast--success .toast__title { color: var(--success); } .toast--success .toast__indicator { color: var(--success); } .toast--warning .toast__title { color: var(--warning); } .toast--warning .toast__indicator { color: var(--warning); } .toast--danger .toast__title { color: var(--danger); } .toast--danger .toast__indicator { color: var(--danger); } ::view-transition-old(*), ::view-transition-new(*) { will-change: translate, opacity; } ::view-transition-new(.toast-bottom):only-child { animation: toast-slide-bottom-in 350ms; } ::view-transition-old(.toast-bottom):only-child { animation: toast-slide-bottom-out 350ms; animation-fill-mode: forwards; } ::view-transition-new(.toast-top):only-child { animation: toast-slide-top-in 350ms; } ::view-transition-old(.toast-top):only-child { animation: toast-slide-top-out 350ms; 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; [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); &:not(:has([data-slot="description"])) { align-items: center; } &:has([data-slot="description"]) { align-items: flex-start; } [data-slot="label"] { -webkit-user-select: none; user-select: none; } [data-slot="description"] { text-wrap: wrap; -webkit-user-select: none; user-select: none; } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &[data-selected="true"], &[data-indeterminate="true"] { .checkbox__indicator { border-color: var(--accent-foreground); background: var(--accent-hover); } } [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: 200ms; transition-duration: 200ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] { transition: stroke-dashoffset 150ms linear 15ms; } &[data-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], &[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"], &[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] { color: var(--danger-foreground); } &[data-indeterminate="true"] { [data-slot="checkbox-default-indicator--indeterminate"] { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } &[data-indeterminate="true"][data-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"], &[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); flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: calc(var(--radius) * 0.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 200ms var(--ease-out), transform 100ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); .checkbox:has([data-slot="description"]) & { margin-top: calc(var(--spacing) * 0.5); } &::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) * 0.75); background-color: var(--accent); opacity: 0%; --tw-content: ''; content: var(--tw-content); transition: scale 100ms var(--ease-linear), opacity 200ms var(--ease-linear), background-color 200ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .checkbox:focus-visible &, .checkbox[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); } .checkbox:hover &, .checkbox[data-hovered="true"] & { border-color: var(--field-border, var(--border)); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix( in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10% ); } &::before { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } } .checkbox[aria-checked="true"] &, .checkbox[data-selected="true"] & { border-color: transparent; color: var(--accent-foreground); &::before { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 100%; } } .checkbox[data-indeterminate="true"] & { background-color: var(--accent); color: var(--accent-foreground); } .checkbox:active[data-indeterminate="true"] &, .checkbox[data-pressed="true"][data-indeterminate="true"] & { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { 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[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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[data-invalid="true"][data-selected="true"] &, .checkbox[aria-invalid="true"][aria-checked="true"] &, .checkbox[aria-invalid="true"][data-selected="true"] & { border-color: transparent; background-color: var(--danger); color: var(--danger-foreground); &::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: 100%; } } .checkbox[data-indeterminate="true"][aria-invalid="true"] &, .checkbox[data-indeterminate="true"][data-invalid="true"] & { 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); align-items: center; justify-content: center; & 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; flex-direction: column; gap: calc(var(--spacing) * 0); } .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 &, .checkbox[data-hovered="true"] & { border-color: var(--field-border, var(--border)); @supports (color: color-mix(in lab, red, red)) { 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); } .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); &::before { background-color: var(--accent); } } .fieldset { display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); flex-shrink: 1; flex-grow: 1; flex-basis: calc(var(--spacing) * 0); } .fieldset__legend { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .fieldset__field_group { width: 100%; :where(& > :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); &[data-disabled="true"] { cursor: not-allowed; opacity: 50%; } } .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); flex: 1; align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; 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: var(--border-width-field); border-color: var(--color-field-border); transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &[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; } &[data-filled="true"] { background-color: var(--field-background, var(--default)); } &[data-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); } } .input-otp__slot-value { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-tracking: -0.27px; letter-spacing: -0.27px; animation: slot-value-in 250ms var(--ease-smooth) both; transform-origin: bottom center; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::after { animation: none; } } } } .input-otp__caret { position: absolute; height: calc(var(--spacing) * 4); width: 2px; animation: caret-blink 1.2s ease-out infinite; border-radius: 4px; background-color: var(--field-placeholder, var(--muted)); } .input-otp__separator { height: 2px; width: 6px; flex-shrink: 0; border-radius: 4px; background-color: var(--separator); } .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) { &:hover, &[data-hovered="true"] { background-color: var(--input-otp-slot-bg-hover); } } &[data-active="true"], &[data-filled="true"] { background-color: var(--input-otp-slot-bg-focus); } } @keyframes slot-value-in { 0% { opacity: 0; transform: translateY(8px) scale(0.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); border-width: 1px; background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; &::placeholder { color: var(--field-placeholder, var(--muted)); } @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } border-width: var(--border-width-field); border-color: var(--color-field-border); transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &:focus, &[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); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); } &[data-disabled="true"], &[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) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) { background-color: var(--input-bg-hover); } } &:focus, &[data-focused="true"] { background-color: var(--input-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--input-bg-focus); } } .input--full-width { width: 100%; } .input-group { display: inline-flex; min-height: calc(var(--spacing) * 9); align-items: center; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); border-width: 1px; 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: var(--border-width-field); border-color: var(--color-field-border); &:has([data-slot="input-group-textarea"]) { align-items: flex-start; height: auto; } transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &:has([data-slot="input-group-input"]:focus), &: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); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .input-group__input { flex: 1; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; &::placeholder { color: var(--field-placeholder, var(--muted)); } @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .input-group:has([data-slot="input-group-prefix"]) & { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: calc(var(--spacing) * 0); } .input-group:has([data-slot="input-group-suffix"]) & { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: calc(var(--spacing) * 0); } &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } } .input-group__input[data-slot="input-group-textarea"] { min-height: 38px; resize: vertical; } .input-group__prefix { display: flex; height: 100%; align-items: center; justify-content: center; 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-top-right-radius: 0; border-bottom-right-radius: 0; background-color: transparent; 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); border-left: none; border-top: none; border-bottom: none; .input-group:has([data-slot="input-group-textarea"]) & { align-items: flex-start; padding-top: 0.5rem; } transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .input-group__suffix { display: flex; height: 100%; align-items: center; justify-content: center; 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)); background-color: transparent; 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); border-right: none; border-top: none; border-bottom: none; .input-group:has([data-slot="input-group-textarea"]) & { align-items: flex-start; padding-top: 0.5rem; } transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--input-group-bg-hover); } } &:has([data-slot="input-group-input"]:focus), &:has([data-slot="input-group-textarea"]:focus) { background-color: var(--input-group-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } border-color: var(--color-field-border-invalid); background-color: var(--input-group-bg-focus); } [data-slot="input-group-input"], [data-slot="input-group-textarea"] { background-color: transparent; } } .input-group--full-width { width: 100%; } .number-field { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } } .number-field__group { display: grid; height: calc(var(--spacing) * 9); align-items: center; overflow: hidden; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); border-width: 1px; 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: var(--border-width-field); border-color: var(--color-field-border); grid-template-columns: 40px 1fr 40px; transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &[data-focus-within="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(--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); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .number-field__input { min-width: calc(var(--spacing) * 0); border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .number-field__group:has([slot="decrement"]) & { border-top-left-radius: 0; border-bottom-left-radius: 0; } .number-field__group:has([slot="increment"]) & { border-top-right-radius: 0; border-bottom-right-radius: 0; } &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } } .number-field__increment-button, .number-field__decrement-button { display: flex; height: 100%; width: calc(var(--spacing) * 10); align-items: center; justify-content: center; border-radius: 0; background-color: transparent; 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); border-style: solid; transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); &:active, &[data-pressed="true"] { background-color: var(--field-foreground, var(--foreground)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--field-foreground, var(--foreground)) 10%, transparent); } transform: scale(0.97); } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } [data-slot="number-field-increment-button-icon"], [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)) { 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-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: var(--tw-border-style); border-right-width: 1px; border-color: var(--field-placeholder, var(--muted)); @supports (color: color-mix(in lab, red, red)) { 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) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--number-field-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--number-field-group-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } border-color: var(--color-field-border-invalid); background-color: var(--number-field-group-bg-focus); } [data-slot="number-field-input"] { background-color: transparent; } } .number-field--full-width { width: 100%; } .number-field__group--full-width { width: 100%; } .radio-group { display: flex; flex-direction: column; &[data-orientation="vertical"] { [data-slot="radio"] { margin-top: calc(var(--spacing) * 4); } } &[data-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; gap: calc(var(--spacing) * 4); } } .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 &, .radio[data-hovered="true"] & { border-color: var(--field-border, var(--border)); @supports (color: color-mix(in lab, red, red)) { 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"]) & .radio__indicator:empty::before { background-color: var(--radio-control-bg); } .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) &, .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) & { .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); [data-slot="label"] { -webkit-user-select: none; user-select: none; } [data-slot="description"] { text-wrap: wrap; -webkit-user-select: none; user-select: none; } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .radio__control { position: relative; margin-top: 3px; display: inline-flex; width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); 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 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 100ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); .radio:focus-visible &, .radio[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); } .radio:hover &, .radio[data-hovered="true"] & { border-color: var(--field-border, var(--border)); @supports (color: color-mix(in lab, red, red)) { 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[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) & { .radio__indicator:empty::before { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } } } .radio:active &, .radio[data-pressed="true"] & { --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[data-selected="true"] & { border-color: transparent; background-color: var(--accent); } .radio:active[data-selected="true"] &, .radio[data-pressed="true"][data-selected="true"] & { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } .radio[data-invalid="true"] &, .radio[aria-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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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[data-invalid="true"][data-selected="true"] &, .radio[aria-invalid="true"][aria-checked="true"] &, .radio[aria-invalid="true"][data-selected="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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; align-items: center; justify-content: center; pointer-events: none; } .radio__indicator:empty::before { content: ""; border-radius: calc(infinity * 1px); background-color: var(--field-background, var(--default)); width: 100%; height: 100%; scale: 1; transition: scale 200ms var(--ease-out), background-color 200ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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: 0.4286; } .radio[data-selected="true"][data-pressed="true"] .radio__indicator:empty::before { scale: 0.5714; } .radio__content { display: flex; flex-direction: column; gap: calc(var(--spacing) * 0); } .radio--disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } .textfield { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } } .textfield--full-width { width: 100%; [data-slot="input"], [data-slot="textarea"] { width: 100%; } } .search-field { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } &[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); align-items: center; overflow: hidden; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); border-width: 1px; 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: var(--border-width-field); border-color: var(--color-field-border); transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &[data-focus-within="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(--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; } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .search-field__input { flex: 1; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .search-field__group:has([data-slot="search-field-search-icon"]) & { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: calc(var(--spacing) * 2); } .search-field__group:has([slot="clear"]) & { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: calc(var(--spacing) * 2); } &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } } .search-field__search-icon { pointer-events: none; flex-shrink: 0; 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); } .search-field__clear-button { margin-right: calc(var(--spacing) * 2); width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); flex-shrink: 0; [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) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--search-field-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--search-field-group-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } border-color: var(--color-field-border-invalid); background-color: var(--search-field-group-bg-focus); } [data-slot="search-field-input"] { background-color: transparent; } } .search-field--full-width { width: 100%; } .search-field__group--full-width { width: 100%; } .textarea { border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); border-width: 1px; background-color: var(--field-background, var(--default)); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--field-foreground, var(--foreground)); --tw-shadow: var(--field-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; &::placeholder { color: var(--field-placeholder, var(--muted)); } @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } min-height: 38px; border-width: var(--border-width-field); border-color: var(--color-field-border); transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &:focus, &[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); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); } &[data-disabled="true"], &[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) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--textarea-bg-hover); } } &:focus, &[data-focused="true"] { background-color: var(--textarea-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--textarea-bg-focus); } } .textarea--full-width { width: 100%; } .calendar { width: calc(var(--spacing) * 63); max-width: 100%; container-type: inline-size; } .calendar__header { display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--spacing) * 0.5); padding-bottom: calc(var(--spacing) * 4); &:has(.calendar-year-picker__trigger[data-open="true"]) { .calendar__nav-button { pointer-events: none; opacity: 0%; } } } .calendar__heading { flex: 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); } .calendar__nav-button { display: flex; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); color: var(--accent); will-change: scale; transition: transform 250ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out), opacity 150ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); color: var(--accent); } } &:active, &[data-pressed="true"] { transform: scale(0.95); } &:focus-visible, &[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); } &:disabled, &[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%; &[aria-readonly="true"] { .calendar__cell { pointer-events: none; } } } .calendar__grid-header { display: contents; & > tr { display: contents; } } .calendar__grid-body { display: contents; & > tr { display: contents; } & > tr:first-child > td { margin-top: calc(var(--spacing) * 1); } } .calendar__grid-row { display: contents; } .calendar__header-cell { display: flex; align-items: center; justify-content: center; 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); } .calendar__cell { position: relative; display: flex; aspect-ratio: 1 / 1; width: 100%; height: 100%; align-items: center; justify-content: center; 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 250ms var(--ease-out), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); &:focus-visible:not(:focus), &[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); } &[data-today="true"] { color: var(--accent); } &[data-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); } &:active, &[data-pressed="true"] { background-color: var(--default); transform: scale(0.95); &[data-selected="true"] { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } } @media (hover: hover) { &:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) { background-color: var(--default); } } &[data-outside-month="true"] { color: var(--muted); opacity: 50%; } &[data-selected="true"][data-outside-month="true"] { background-color: var(--default); } &[data-unavailable="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &:disabled:not([data-outside-month="true"]), &[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); left: calc(1 / 2 * 100%); width: 3px; height: 3px; --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); background-color: var(--muted); [data-selected="true"] > & { background-color: var(--accent-foreground); } } .range-calendar { width: calc(var(--spacing) * 63); max-width: 100%; container-type: inline-size; } .range-calendar__header { display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--spacing) * 0.5); padding-bottom: calc(var(--spacing) * 4); &:has(.calendar-year-picker__trigger[data-open="true"]) { .range-calendar__nav-button { pointer-events: none; opacity: 0%; } } } .range-calendar__heading { flex: 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); } .range-calendar__nav-button { display: flex; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); align-items: center; justify-content: center; border-radius: calc(infinity * 1px); color: var(--accent); will-change: scale; transition: transform 250ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out), opacity 150ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); color: var(--accent); } } &:active, &[data-pressed="true"] { transform: scale(0.95); } &:focus-visible, &[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); } &:disabled, &[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%; &[aria-readonly="true"] { .range-calendar__cell { pointer-events: none; } } } .range-calendar__grid-header { display: contents; & > tr { display: contents; } } .range-calendar__grid-body { display: contents; & > tr { display: contents; } & > tr:first-child > td { margin-top: calc(var(--spacing) * 1); } } .range-calendar__grid-row { display: contents; } .range-calendar__header-cell { display: flex; align-items: center; justify-content: center; 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); } .range-calendar__cell { position: relative; z-index: 1; margin-inline: calc(var(--spacing) * 0); margin-block: 2px; border-radius: calc(infinity * 1px); 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 100ms var(--ease-out), border-color 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } .range-calendar__cell-button { display: flex; aspect-ratio: 1 / 1; width: 100%; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); 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 200ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &:focus-visible:not(:focus), &[data-focus-visible="true"] { z-index: 2; .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); } } &[data-today="true"] { .range-calendar__cell-button { color: var(--accent); } } &[data-selected="true"]:not([data-outside-month="true"]) { border-radius: 0; background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } } &[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) { border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); &[data-selection-start="true"] { border-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px); } } &[data-selected="true"]:is(td:last-child > *, td:has(+ [aria-disabled]) > *) { border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); &[data-selection-end="true"] { border-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px); } } &[data-selection-start="true"]:not([data-outside-month="true"]), &[data-selection-end="true"]:not([data-outside-month="true"]) { z-index: 2; .range-calendar__cell-button { background-color: var(--accent); color: var(--accent-foreground); } } &[data-selection-start="true"]:not([data-outside-month="true"]) { border-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); } &[data-selection-end="true"]:not([data-outside-month="true"]) { border-top-right-radius: calc(infinity * 1px); border-bottom-right-radius: calc(infinity * 1px); } &:active, &[data-pressed="true"] { .range-calendar__cell-button { scale: 0.9; } &[data-selection-start="true"], &[data-selection-end="true"] { .range-calendar__cell-button { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } } } @media (hover: hover) { &:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) { .range-calendar__cell-button { background-color: var(--default); } } } &[data-outside-month="true"] { color: var(--muted); opacity: 50%; } &[data-selected="true"][data-outside-month="true"]:not( [data-selection-start="true"], [data-selection-end="true"] ) { background-color: var(--default); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--default) 20%, transparent); } } &[data-unavailable="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &:disabled:not([data-outside-month="true"]), &[data-disabled="true"]:not([data-outside-month="true"]) { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; text-decoration: line-through; } } .range-calendar__grid-body td:has(> .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"] { border-start-start-radius: calc(var(--radius) * 1); border-end-start-radius: calc(var(--radius) * 1); &[data-outside-month="true"], &[data-selection-start="true"] { border-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px); } } .range-calendar__grid-body td:has(> .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"] ) > .range-calendar__cell[data-selected="true"] { border-start-end-radius: calc(var(--radius) * 1); border-end-end-radius: calc(var(--radius) * 1); &[data-outside-month="true"], &[data-selection-end="true"] { border-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px); } } .range-calendar__cell-indicator { position: absolute; bottom: calc(var(--spacing) * 1); left: calc(1 / 2 * 100%); width: 3px; height: 3px; --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); background-color: var(--muted); [data-selected="true"] > & { background-color: var(--accent-foreground); } } .calendar:has(.calendar-year-picker__year-grid), .range-calendar:has(.calendar-year-picker__year-grid) { position: relative; } .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] { will-change: opacity; transition: opacity 150ms var(--ease-out), visibility 0ms linear; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"] { pointer-events: none; opacity: 0%; visibility: hidden; transition: opacity 150ms var(--ease-out), visibility 0ms linear 150ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .calendar-year-picker__trigger { display: flex; flex: 1; align-items: center; justify-content: flex-start; 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; &: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 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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 / 0.15) transparent; &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: oklch(0% 0 0 / 0.15); border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { background: oklch(0% 0 0 / 0.25); } :is([data-theme="dark"], .dark) & { scrollbar-color: oklch(100% 0 0 / 0.15) transparent; &::-webkit-scrollbar-thumb { background: oklch(100% 0 0 / 0.15); } &::-webkit-scrollbar-thumb:hover { background: oklch(100% 0 0 / 0.25); } } } .calendar-year-picker__year-grid[data-open="true"] { pointer-events: auto; opacity: 100%; transition: opacity 200ms var(--ease-out) 50ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } .calendar-year-picker__year-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); 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 100ms var(--ease-smooth), scale 100ms var(--ease-smooth), opacity 100ms var(--ease-smooth), background-color 100ms var(--ease-smooth), box-shadow 100ms 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,); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); @media (hover: hover) and (pointer: fine) { &:is(:hover, [data-hovered="true"]):not([data-selected="true"]) { background-color: var(--default); color: var(--default-foreground); } } &[data-selected="true"], &[aria-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); @media (hover: hover) and (pointer: fine) { &:is(:hover, [data-hovered="true"]) { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); } } } } &: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; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } } .date-field--full-width { width: 100%; } .time-field { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [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); align-items: center; overflow: hidden; border-radius: var(--field-radius, calc(var(--radius) * 1.5)); border-style: var(--tw-border-style); border-width: 1px; 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: var(--border-width-field); border-color: var(--color-field-border); transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &[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"] ) ), &: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; } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); border-color: var(--color-field-border-invalid); } &[data-disabled="true"], &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } } .date-input-group__input { display: flex; flex: 1; cursor: text; align-items: center; gap: 1px; border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; background-color: transparent; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; @media (width >= 40rem) { 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"]) & { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: calc(var(--spacing) * 2); } .date-input-group:has([data-slot="date-input-group-suffix"]) & { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: calc(var(--spacing) * 2); } .date-input-group:has(.date-range-picker__range-separator) & { &[slot="start"] { flex: none; padding-right: calc(var(--spacing) * 0); } &[slot="end"] { padding-left: calc(var(--spacing) * 0); } } &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } } .date-input-group__input-container { display: flex; flex: 1; align-items: center; width: fit-content; overflow-x: auto; overflow-y: clip; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .date-input-group__segment { display: inline-block; border-radius: calc(var(--radius) * 0.75); padding-inline: calc(var(--spacing) * 0.5); text-align: end; text-wrap: nowrap; --tw-outline-style: none; outline-style: none; &[data-type="literal"] { padding: calc(var(--spacing) * 0); color: var(--muted); } &[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } &:focus, &[data-focused="true"] { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } color: var(--accent); } &[data-disabled="true"] { opacity: 50%; } &[data-invalid="true"] { color: var(--danger); &:focus, &[data-focused="true"] { background-color: var(--danger); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } color: var(--danger); } } } .date-input-group__prefix { pointer-events: none; flex-shrink: 0; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 3); display: flex; align-items: center; } .date-input-group__suffix { pointer-events: none; flex-shrink: 0; color: var(--field-placeholder, var(--muted)); margin-right: calc(var(--spacing) * 3); display: flex; 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) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--date-input-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--date-input-group-bg-focus); } &[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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } border-color: var(--color-field-border-invalid); background-color: var(--date-input-group-bg-focus); } [data-slot="date-input-group-input"] { background-color: transparent; } } .date-input-group--full-width { width: 100%; } .date-picker { display: inline-flex; flex-direction: column; gap: calc(var(--spacing) * 1); .date-input-group__suffix, .date-input-group__prefix { pointer-events: auto; } } .date-picker__trigger { display: inline-flex; width: 100%; align-items: center; 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 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[data-disabled="true"], &[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); align-items: center; justify-content: center; color: var(--field-placeholder, var(--muted)); } .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); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } box-shadow: var(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95*1%); --tw-enter-scale: .95; &[data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } } .date-range-picker { display: inline-flex; flex-direction: column; gap: calc(var(--spacing) * 1); .date-input-group__suffix, .date-input-group__prefix { pointer-events: auto; } } .date-range-picker__trigger { display: inline-flex; width: 100%; align-items: center; 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 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[data-disabled="true"], &[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); align-items: center; justify-content: center; color: var(--field-placeholder, var(--muted)); } .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); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } box-shadow: var(--shadow-overlay); border-radius: calc(var(--radius) * 2.5); &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95*1%); --tw-enter-scale: .95; &[data-placement^="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement^="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement^="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement^="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } } .card { position: relative; display: flex; flex-direction: column; 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); } .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; flex: 1; flex-direction: column; gap: calc(var(--spacing) * 1); } .card__footer { display: flex; flex-direction: row; align-items: center; } .card--transparent { --tw-border-style: none; border-style: none; background-color: transparent; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .card--default { background-color: var(--surface); } .card--secondary { background-color: var(--surface-secondary); } .card--tertiary { background-color: var(--surface-tertiary); } .header { width: 100%; padding-inline: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1.5); padding-bottom: calc(var(--spacing) * 1); text-align: left; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--muted); } .separator { flex-shrink: 0; border-radius: 4px; border-top-style: var(--tw-border-style); border-top-width: 0px; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; background-color: var(--separator); height: 1px; width: 100%; } .separator--horizontal { height: 1px; width: 100%; } .separator--vertical { height: auto; min-height: calc(var(--spacing) * 2); width: 1px; align-self: stretch; } .separator--default { background-color: var(--separator); } .separator--secondary { background-color: var(--surface); @supports (color: color-mix(in lab, red, red)) { 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)) { 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 { width: 100%; flex-direction: row; } .separator__container--vertical { height: 100%; flex-direction: column; justify-content: center; } .separator__line { flex-shrink: 0; flex-grow: 1; } .separator__content { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; color: var(--muted); } .separator__content--horizontal { text-align: center; } .separator__content--vertical { text-align: center; } .surface { position: relative; color: var(--foreground); } .surface--transparent { background-color: transparent; } .surface--default { background-color: var(--surface); color: var(--surface-foreground); } .surface--secondary { background-color: var(--surface-secondary); color: var(--surface-secondary-foreground); } .surface--tertiary { background-color: var(--surface-tertiary); color: var(--surface-tertiary-foreground); } .avatar { position: relative; display: flex; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--default); } .avatar__fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; 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); } .avatar__image { position: absolute; inset: calc(var(--spacing) * 0); aspect-ratio: 1 / 1; width: 100%; height: 100%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 250ms; transition-duration: 250ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::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__fallback { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .avatar__fallback--accent { color: var(--accent); } .avatar__fallback--default { color: var(--default-foreground); } .avatar__fallback--success { color: var(--success); } .avatar__fallback--warning { color: var(--warning); } .avatar__fallback--danger { color: var(--danger); } .avatar--soft { background-color: transparent; } .avatar--soft .avatar__fallback--accent { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } color: var(--accent); } .avatar--soft .avatar__fallback--success { background-color: var(--success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--success) 15%, transparent); } color: var(--success); } .avatar--soft .avatar__fallback--warning { background-color: var(--warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--warning) 15%, transparent); } color: var(--warning); } .avatar--soft .avatar__fallback--danger { background-color: var(--danger); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } color: var(--danger); } .alert-dialog__trigger { display: inline-block; cursor: var(--cursor-interactive); transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &:active, &[data-pressed="true"] { transform: scale(0.97); } } .alert-dialog__backdrop { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; display: flex; flex-direction: row; align-items: center; justify-content: center; height: var(--visual-viewport-height); width: 100%; &[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: 150ms; transition-duration: 150ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; } &[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: 100ms; transition-duration: 100ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); --tw-exit-opacity: calc(0/100); --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::after { animation: none; } } } } } .alert-dialog__backdrop--transparent { background-color: transparent; } .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; flex-direction: column; align-items: center; height: var(--visual-viewport-height); width: 100%; min-width: calc(var(--spacing) * 0); flex: 1; padding: calc(var(--spacing) * 4); @media (width >= 40rem) { width: fit-content; } @media (width >= 40rem) { padding: calc(var(--spacing) * 10); } pointer-events: none; &[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: 250ms; transition-duration: 250ms; --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(105*1%); &[data-placement="auto"] { --tw-enter-translate-y: calc(1*var(--spacing)); @media (width >= 40rem) { --tw-enter-translate-y: calc(0*var(--spacing)); --tw-enter-translate-y: calc(0*100%); } } &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="center"] { --tw-enter-translate-y: calc(0*var(--spacing)*-1); --tw-enter-translate-y: calc(0*-100%); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); --tw-exit-opacity: calc(0/100); --tw-exit-opacity: 0; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::after { animation: none; } } } } } .alert-dialog__dialog { position: relative; display: flex; width: 100%; flex-direction: column; 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; &[data-placement="auto"] { margin-top: auto; @media (width >= 40rem) { margin-block: auto; } } &[data-placement="center"] { margin-block: auto; } &[data-placement="bottom"] { margin-top: auto; } &[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 { height: 100%; min-height: 100%; width: 100%; } .alert-dialog__header { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); & > .modal__icon { margin-bottom: calc(var(--spacing) * 0); } } .alert-dialog__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .alert-dialog__icon { display: flex; align-items: center; justify-content: center; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); flex-shrink: 0; border-radius: calc(infinity * 1px); -webkit-user-select: none; user-select: none; [data-slot="alert-dialog-default-icon"] { box-sizing: content-box; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } } .alert-dialog__icon--default { background-color: var(--default); color: var(--foreground); } .alert-dialog__icon--accent { background-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--accent) 15%, transparent); } color: var(--accent); } .alert-dialog__icon--success { background-color: var(--success); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--success) 15%, transparent); } color: var(--success); } .alert-dialog__icon--warning { background-color: var(--warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--warning) 15%, transparent); } color: var(--warning); } .alert-dialog__icon--danger { background-color: var(--danger); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--danger) 15%, transparent); } color: var(--danger); } .alert-dialog__body { min-height: calc(var(--spacing) * 0); flex: 1; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; line-height: 1.43; color: var(--muted); margin-block: calc(var(--spacing) * 0); overflow-y: auto; -webkit-overflow-scrolling: touch; } .alert-dialog__footer { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); } .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 { margin-top: calc(var(--spacing) * 5); } .alert-dialog__body + .alert-dialog__footer { margin-top: calc(var(--spacing) * 5); } .drawer__trigger { display: inline-block; cursor: var(--cursor-interactive); transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &:active, &[data-pressed="true"] { transform: scale(0.97); } } .drawer__backdrop { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; height: var(--visual-viewport-height); width: 100%; opacity: 1; transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1); &[data-entering="true"] { opacity: 0; } &[data-exiting="true"] { opacity: 0; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity; } @media (prefers-reduced-motion: reduce) { transition: none; } } .drawer__backdrop--transparent { background-color: transparent; } .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); width: 100%; min-width: calc(var(--spacing) * 0); } .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; flex-direction: column; 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: 250ms; --drawer-exit-duration: 200ms; --drawer-enter-ease: cubic-bezier(0.32, 0.72, 0, 1); --drawer-exit-ease: cubic-bezier(0.32, 0.72, 0, 1); will-change: translate; transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease); @media (prefers-reduced-motion: reduce) { transition: none; } &[data-placement="bottom"] { width: 100%; border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); max-height: 85vh; } &[data-placement="top"] { width: 100%; border-bottom-right-radius: calc(var(--radius) * 2); border-bottom-left-radius: calc(var(--radius) * 2); max-height: 85vh; } &[data-placement="left"] { height: 100%; border-radius: 0; width: calc(var(--spacing) * 80); max-width: 85vw; @media (width >= 40rem) { width: calc(var(--spacing) * 96); } } &[data-placement="right"] { height: 100%; border-radius: 0; width: calc(var(--spacing) * 80); max-width: 85vw; @media (width >= 40rem) { 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 0; } .drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog { translate: -100% 0; } .drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog { translate: 100% 0; } .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__handle { padding-bottom: calc(var(--spacing) * 0); } } .drawer__header { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); } .drawer__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .drawer__body { min-height: calc(var(--spacing) * 0); flex: 1; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; line-height: 1.43; color: var(--muted); margin: calc(3px * -1); margin-block: calc(var(--spacing) * 0); padding: 3px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .drawer__footer { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); } .drawer__handle { display: flex; align-items: center; justify-content: center; padding-bottom: calc(var(--spacing) * 2); & > [data-slot="drawer-handle-bar"] { height: calc(var(--spacing) * 1); width: calc(var(--spacing) * 9); border-radius: calc(infinity * 1px); background-color: var(--separator); } } .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 { margin-top: calc(var(--spacing) * 5); } .drawer__body + .drawer__footer { margin-top: calc(var(--spacing) * 5); } .drawer__handle + .drawer__header { margin-top: calc(var(--spacing) * 0); } .drawer__handle + .drawer__body { margin-top: calc(var(--spacing) * 0); } .modal__trigger { display: inline-block; cursor: var(--cursor-interactive); transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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); } &:disabled, &[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } &:active, &[data-pressed="true"] { transform: scale(0.97); } } .modal__backdrop { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; display: flex; flex-direction: row; align-items: center; justify-content: center; height: var(--visual-viewport-height); width: 100%; &[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: 150ms; transition-duration: 150ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; } &[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: 100ms; transition-duration: 100ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); --tw-exit-opacity: calc(0/100); --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::after { animation: none; } } } } } .modal__backdrop--transparent { background-color: transparent; } .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; flex-direction: column; align-items: center; height: var(--visual-viewport-height); width: 100%; min-width: calc(var(--spacing) * 0); flex: 1; padding: calc(var(--spacing) * 4); @media (width >= 40rem) { width: fit-content; } @media (width >= 40rem) { padding: calc(var(--spacing) * 10); } pointer-events: none; &[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: 250ms; transition-duration: 250ms; --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(105*1%); &[data-placement="auto"] { --tw-enter-translate-y: calc(1*var(--spacing)); @media (width >= 40rem) { --tw-enter-translate-y: calc(0*var(--spacing)); --tw-enter-translate-y: calc(0*100%); } } &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="center"] { --tw-enter-translate-y: calc(0*var(--spacing)*-1); --tw-enter-translate-y: calc(0*-100%); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); --tw-exit-opacity: calc(0/100); --tw-exit-opacity: 0; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: none; &::before, &::after { animation: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: none; &::before, &::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 (width >= 40rem) { padding: calc(var(--spacing) * 0); } &[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 (width >= 40rem) { --tw-enter-translate-y: calc(0*var(--spacing)); --tw-enter-translate-y: calc(0*100%); } } &[data-exiting="true"] { --tw-exit-scale: calc(100*1%); --tw-exit-scale: 1; } } .modal__dialog { position: relative; display: flex; width: 100%; flex-direction: column; 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; &[data-placement="auto"] { margin-top: auto; @media (width >= 40rem) { margin-block: auto; } } &[data-placement="center"] { margin-block: auto; } &[data-placement="bottom"] { margin-top: auto; } &[data-placement="top"] { margin-top: calc(var(--spacing) * 0); } } .modal__dialog--scroll-inside { overflow: hidden; } .modal__dialog--scroll-outside { height: auto; min-height: calc(var(--spacing) * 0); flex-shrink: 0; } .modal__dialog--xs { max-width: var(--container-xs); } .modal__dialog--sm { max-width: var(--container-sm); } .modal__dialog--md { max-width: var(--container-md); } .modal__dialog--lg { max-width: var(--container-lg); } .modal__dialog--cover { height: 100%; min-height: 100%; width: 100%; } .modal__dialog--full { height: 100%; min-height: 100%; width: 100%; border-radius: 0; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .modal__header { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 0); & > .modal__icon { margin-bottom: calc(var(--spacing) * 0); } } .modal__heading { vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--foreground); } .modal__icon { display: flex; align-items: center; justify-content: center; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); flex-shrink: 0; border-radius: calc(infinity * 1px); -webkit-user-select: none; user-select: none; } .modal__body { min-height: calc(var(--spacing) * 0); flex: 1; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: 1.43; line-height: 1.43; color: var(--muted); margin-block: calc(var(--spacing) * 0); } .modal__body--scroll-inside { overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal__body--scroll-outside { overflow-y: visible; } .modal__footer { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 0); } .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 { margin-top: calc(var(--spacing) * 5); } .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); &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(90*1%); --tw-enter-scale: .9; &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[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 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); &:focus-visible:not(:focus), &[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); } &:disabled, &[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); &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(90*1%); --tw-enter-scale: .9; &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } & [data-slot="overlay-arrow"] { stroke: var(--border); @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--border) 40%, transparent); } fill: var(--overlay); } &[data-placement="bottom"] [data-slot="overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="overlay-arrow"] { rotate: 90deg; } } .tooltip__trigger { display: inline-block; transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } &:focus-visible:not(:focus), &[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; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [data-slot="description"] { padding-inline: calc(var(--spacing) * 1); } [data-slot="input"] { min-width: calc(var(--spacing) * 0); flex: 1; &:has(+ .combo-box__trigger) { padding-right: calc(var(--spacing) * 7); } &:focus, &[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); } &:disabled, &[data-disabled], &[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: calc(1 / 2 * 100%); right: calc(var(--spacing) * 0); display: flex; height: 100%; flex-shrink: 0; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); cursor: pointer; align-items: center; justify-content: center; 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: 150ms; transition-duration: 150ms; -webkit-tap-highlight-color: transparent; --tw-border-style: none; border-style: none; background-color: transparent; --tw-outline-style: none; outline-style: none; @media (hover: hover) { &:hover, &[data-hovered="true"] { color: var(--field-foreground, var(--foreground)); } } &:focus-visible:not(:focus), &[data-focus-visible="true"] { border-radius: 0.25rem; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--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; } &[data-pressed="true"] { opacity: 70%; } &:disabled, &[data-disabled], &[aria-disabled="true"] { cursor: not-allowed; opacity: 50%; } [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: 150ms; transition-duration: 150ms; &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &[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); &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95*1%); --tw-enter-scale: .95; &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } } } .combo-box--full-width { width: 100%; } .combo-box__input-group--full-width { width: 100%; } .select { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { display: none; } } [data-slot="label"] { width: fit-content; } [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); border-width: 1px; 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 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--color-field-border); &:has(.select__indicator) { padding-right: calc(var(--spacing) * 7); } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &:focus-visible:not(:focus), &[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[aria-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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); } &:disabled, &[data-disabled="true"], &[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) { &:hover, &[data-hovered="true"] { background-color: var(--select-trigger-bg-hover); } } &:focus-visible:not(:focus), &[data-focus-visible="true"] { background-color: var(--select-trigger-bg-focus); } } .select__value { flex: 1; text-align: left; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); overflow-wrap: break-word; color: currentcolor; @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } [data-slot="list-box-item-indicator"] { display: none; } } .select__indicator { position: absolute; inset-block: calc(var(--spacing) * 0); right: calc(var(--spacing) * 2); margin-block: auto; display: flex; flex-shrink: 0; align-items: center; justify-content: center; 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: 150ms; transition-duration: 150ms; &[data-open="true"] { rotate: 180deg; } &[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); &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 150ms; transition-duration: 150ms; --tw-ease: ease; transition-timing-function: ease; --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95*1%); --tw-enter-scale: .95; &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: ease; transition-timing-function: ease; --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], [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 { width: 100%; } .select__trigger--full-width { width: 100%; } .autocomplete { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); } .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); border-width: 1px; 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 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--color-field-border); &:has(.autocomplete__indicator) { padding-right: calc(var(--spacing) * 7); } @media (hover: hover) { &:hover:not(:has(.autocomplete__clear-button:hover)), &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--field-background, var(--default)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); } border-color: var(--color-field-border-hover); } } &:focus-visible:not(:focus), &[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[aria-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; &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[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; } background-color: var(--color-field-focus); } &:disabled, &[data-disabled="true"], &[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) { &:hover:not(:has(.autocomplete__clear-button:hover)), &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--autocomplete-trigger-bg-hover); } } &:focus-visible:not(:focus), &[data-focus-visible="true"] { background-color: var(--autocomplete-trigger-bg-focus); } } .autocomplete__value { flex: 1; text-align: left; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); overflow-wrap: break-word; color: currentcolor; @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &[data-placeholder="true"] { color: var(--field-placeholder, var(--muted)); } [data-slot="list-box-item-indicator"] { display: none; } } .autocomplete__indicator { position: absolute; inset-block: calc(var(--spacing) * 0); right: calc(var(--spacing) * 2); margin-block: auto; display: flex; flex-shrink: 0; align-items: center; justify-content: center; 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: 150ms; transition-duration: 150ms; cursor: var(--cursor-interactive); &[data-open="true"] { rotate: 180deg; } &[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); &:focus-visible:not(:focus), &[data-focus-visible="true"] { --tw-outline-style: none; outline-style: none; } &[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: 250ms; transition-duration: 250ms; --tw-ease: cubic-bezier(0.32, 0.72, 0, 1); transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); --tw-enter-opacity: calc(0/100); --tw-enter-opacity: 0; --tw-enter-scale: calc(95*1%); --tw-enter-scale: .95; &[data-placement="top"] { --tw-enter-translate-y: calc(1*var(--spacing)); } &[data-placement="bottom"] { --tw-enter-translate-y: calc(1*var(--spacing)*-1); } &[data-placement="left"] { --tw-enter-translate-x: calc(1*var(--spacing)); } &[data-placement="right"] { --tw-enter-translate-x: calc(1*var(--spacing)*-1); } } &[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: 100ms; transition-duration: 100ms; --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); --tw-exit-scale: calc(95*1%); --tw-exit-scale: .95; --tw-exit-opacity: 0; } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity,transform; } & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } [data-slot="list-box"] { padding: calc(var(--spacing) * 1.5); --tw-outline-style: none; outline-style: none; } [data-slot="list-box-item"] { padding-inline: calc(var(--spacing) * 2.5); } [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { transition-property: none; } [data-slot="search-field"] { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); --tw-outline-style: none; outline-style: none; } [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)) { color: color-mix(in oklab, var(--overlay-foreground) 60%, transparent); } } } .autocomplete--full-width { width: 100%; } .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; align-items: center; justify-content: 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); flex-shrink: 0; align-self: center; background-color: transparent; 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,); &:not([data-empty="true"]) { transition: opacity 150ms var(--ease-smooth); &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; &::before, &::after { transition-property: none; } } @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { transition-property: none; &::before, &::after { transition-property: none; } } } } &[data-empty="true"] { pointer-events: none; opacity: 0%; } [data-slot="autocomplete-clear-button-icon"] { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--default); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); } } } &:active, &[data-pressed="true"] { transform: scale(0.93); } } .kbd { display: inline-flex; height: calc(var(--spacing) * 6); align-items: center; :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse))); } border-radius: calc(var(--radius) * 1); background-color: var(--default); padding-inline: calc(var(--spacing) * 2); text-align: center; font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--muted); &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :where(& > :not(:last-child)) { --tw-space-x-reverse: 1; } } word-spacing: -0.25rem; } .kbd__abbr { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none; } .kbd__content { display: flex; justify-content: center; align-items: center; } .kbd--light { background-color: transparent; } .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)); } &[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)); } &[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)); } &[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)); } &[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; &::-webkit-scrollbar { display: none; } } } @layer theme { @layer theme { @layer base { :root, .light, .default, [data-theme="light"], [data-theme="default"] { color-scheme: light; --white: oklch(100% 0 0); --black: oklch(0% 0 0); --snow: oklch(0.9911 0 0); --eclipse: oklch(0.2103 0.0059 285.89); --spacing: 0.25rem; --border-width: 1px; --field-border-width: 0px; --disabled-opacity: 0.5; --ring-offset-width: 2px; --cursor-interactive: pointer; --cursor-disabled: not-allowed; --radius: 0.5rem; --field-radius: calc(var(--radius) * 1.5); --background: oklch(0.9702 0 0); --foreground: var(--eclipse); --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: oklch(0.9524 0.0013 286.37); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(0.9373 0.0013 286.37); --surface-tertiary-foreground: var(--foreground); --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: oklch(0.5517 0.0138 285.94); --scrollbar: oklch(87.1% 0.006 286.286); --default: oklch(94% 0.001 286.375); --default-foreground: var(--eclipse); --accent: oklch(0.6204 0.195 253.83); --accent-foreground: var(--snow); --field-background: var(--white); --field-foreground: oklch(0.2103 0.0059 285.89); --field-placeholder: var(--muted); --field-border: transparent; --success: oklch(0.7329 0.1935 150.81); --success-foreground: var(--eclipse); --warning: oklch(0.7819 0.1585 72.33); --warning-foreground: var(--eclipse); --danger: oklch(0.6532 0.2328 25.74); --danger-foreground: var(--snow); --segment: var(--white); --segment-foreground: var(--eclipse); --border: oklch(90% 0.004 286.32); --separator: oklch(92% 0.004 286.32); --focus: var(--accent); --link: var(--foreground); --backdrop: rgba(0, 0, 0, 0.5); --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06); --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03), 0 14px 28px 0 rgba(0, 0, 0, 0.08); --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06); --skeleton-animation: shimmer; } .dark, [data-theme="dark"] { color-scheme: dark; --background: oklch(12% 0.005 285.823); --foreground: var(--snow); --surface: oklch(0.2103 0.0059 285.89); --surface-foreground: var(--foreground); --surface-secondary: oklch(0.257 0.0037 286.14); --surface-tertiary: oklch(0.2721 0.0024 247.91); --overlay: oklch(0.2103 0.0059 285.89); --overlay-foreground: var(--foreground); --muted: oklch(70.5% 0.015 286.067); --scrollbar: oklch(70.5% 0.015 286.067); --default: oklch(27.4% 0.006 286.033); --default-foreground: var(--snow); --field-background: oklch(0.2103 0.0059 285.89); --field-foreground: var(--foreground); --warning: oklch(0.8203 0.1388 76.34); --warning-foreground: var(--eclipse); --danger: oklch(0.594 0.1967 24.63); --danger-foreground: var(--snow); --segment: oklch(0.3964 0.01 285.93); --segment-foreground: var(--foreground); --border: oklch(28% 0.006 286.033); --separator: oklch(25% 0.006 286.033); --focus: var(--accent); --link: var(--foreground); --backdrop: rgba(0, 0, 0, 0.6); --surface-shadow: 0 0 0 0 transparent inset; --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset; --field-shadow: 0 0 0 0 transparent inset; } } } @layer components; } :root { --background: #ffffff; --foreground: #0f172a; --brand: #041fed; --brand-hover: #3a5bff; --brand-pressed: #031199; --spark: #5eeeff; --indigo-black: #0a0e1f; --indigo-deep: #050714; --slate-100: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-600: #475569; --slate-900: #0f172a; --off-white: #f4f5f9; } .dark { --background: #0a0e1f; --foreground: #f4f5f9; } html, body { height: 100%; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans), system-ui, -apple-system, sans-serif; } ::selection { background: var(--brand); color: #ffffff; } .bg-grid { background-image: linear-gradient( to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px ), linear-gradient( to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px ); background-size: 64px 64px; } .bg-grid-dark { background-image: linear-gradient( to right, rgba(94, 238, 255, 0.06) 1px, transparent 1px ), linear-gradient( to bottom, rgba(94, 238, 255, 0.06) 1px, transparent 1px ); background-size: 56px 56px; } .bg-dots-dark { background-image: radial-gradient( rgba(94, 238, 255, 0.18) 1px, transparent 1px ); background-size: 24px 24px; } @keyframes pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 238, 255, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(94, 238, 255, 0); } } .pulse-ring { animation: pulse-ring 2s ease-out infinite; } @keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } .float-slow { animation: float-slow 6s ease-in-out infinite; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #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: 0px; } @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-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-content { syntax: "*"; initial-value: ""; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.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-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --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-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-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-ease: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-outline-style: solid; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-space-x-reverse: 0; } } }