*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } button, input, textarea, select { font: inherit; } [hidden]:not([hidden="until-found"]) { display: none !important; } :where(img, svg, video) { max-inline-size: 100%; block-size: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --line-height: 1.5; --line-height-tight: 1.25; --line-height-relaxed: 1.75; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --gap: 0.75rem; --density-space: var(--space-40); --space-10: 0.25rem; --space-20: 0.5rem; --space-30: 0.75rem; --space-40: 1rem; --space-50: 1.5rem; --space-60: 2rem; --border-width: 1px; --radius-full: 9999px; --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04); --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15); --duration: 150ms; --duration-fast: 100ms; --duration-slow: 200ms; --duration-spin: 0.75s; --duration-shimmer: 1.2s; --ease-enter: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --focus-outline-color: currentColor; --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color); --focus-outline-offset: 2px; --focus-ring-width: 3px; --indicator-offset: 14.65%; --backdrop-color: rgb(0 0 0); --backdrop-opacity: 0.45; --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity)); --bar-height: 0.65rem; --control-size-sm: 2rem; --control-size-md: 2.375rem; --control-size-lg: 2.75rem; --control-size: var(--control-size-md); --control-pad-x: var(--font-size-md); --control-font-size: var(--font-size-md); --choice-control-size: 1.125em; --disabled-opacity: 0.65; } :root, [data-theme] { --state-selected: var(--primary); --state-selected-fg: var(--primary-fg); --state-disabled: var(--text-subtle); --indicator-ring: var(--surface); } :root { --soft-bg-mix: 88%; --soft-border-mix: 65%; --soft-hover-alpha: 12%; --soft-fg-mix: 100%; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); --viewport-block: 100vh; --viewport-inline: 100vw; --z-sticky: 10; --z-menu: 20; --z-status: 60; } @media (forced-colors: active) { :root, [data-theme] { --state-disabled: GrayText; --disabled-opacity: 1; } } @supports (block-size: 100dvh) { :root { --viewport-block: 100dvh; } } @supports (inline-size: 100vi) { :root { --viewport-inline: 100vi; } } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --shadow: 0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent); --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent); } :root, [data-theme] { --backdrop-fill: color-mix( in oklch, var(--backdrop-color) calc(var(--backdrop-opacity) * 100%), transparent ); } } :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @supports not (color: light-dark(red, blue)) { :root, [data-theme="light"], [data-theme="dark"] { color-scheme: light; } } :root, [data-theme="light"] { --primary: hsl(268 32% 33%); --primary-fg: hsl(0 0% 98%); --secondary: hsl(16 38% 38%); --secondary-fg: hsl(0 0% 98%); --success: hsl(150 40% 31%); --success-fg: hsl(0 0% 98%); --warning: hsl(36 68% 34%); --warning-fg: hsl(0 0% 98%); --danger: hsl(5 58% 43%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(258 7% 43%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(262 24% 96%); --surface-solid: hsl(261 16% 13%); --text: hsl(261 20% 13%); --text-muted: hsl(259 9% 42%); --text-subtle: hsl(258 7% 57%); --border: hsl(260 15% 88%); --focus: var(--neutral); --focus-ring: hsl(258 7% 43% / 0.3); --hover-overlay: hsl(260 20% 10% / 0.04); --radius: 0.5rem; --radius-sm: 0.25rem; --radius-lg: 0.75rem; --shadow-color: hsl(260 25% 10%); --hgroup-gap: 0.25em; } :root, [data-theme] { --heading: var(--text); --selection-bg: var(--primary); --selection-fg: var(--primary-fg); --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); } :where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) { --primary-soft-fg: initial; --secondary-soft-fg: initial; --success-soft-fg: initial; --warning-soft-fg: initial; --danger-soft-fg: initial; --neutral-soft-fg: initial; } :root, [data-theme="light"], [data-theme="dark"] { --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%); --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%); --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%); --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%); --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%); } :root, [data-theme] { accent-color: var(--primary); } [data-tone="dark"] { --tone-fg: white; } [data-tone="light"] { --tone-fg: var(--text); } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent); } } @supports (color: light-dark(red, blue)) { :root, [data-theme="light"] { --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%)); --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%)); --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%)); --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%)); --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%)); --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%)); --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%)); --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%)); --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%)); --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%)); --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%)); --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%)); --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%)); --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28)); --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%)); } } @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) { :root, [data-theme] { --focus-ring: light-dark( color-mix(in oklch, var(--focus) 30%, transparent), color-mix(in oklch, var(--focus) 28%, transparent) ); } } @media (prefers-contrast: more) { :root, [data-theme][data-theme] { --border-width: 2px; --focus-outline-offset: 3px; --focus-ring-width: 4px; --text-muted: var(--text); --text-subtle: var(--text); } } body { background: var(--surface); color: var(--text); font-family: var(--font-sans); line-height: var(--line-height); } a { color: var(--link, inherit); text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 0.12em; } :where(h1, h2, h3, h4, h5, h6) { color: var(--heading, inherit); line-height: var(--line-height-tight); text-wrap: balance; } hgroup { display: grid; gap: var(--hgroup-gap); } hgroup > * { margin-block: 0; } hr { border: 0; border-block-start: var(--border-width) solid var(--border); margin-block: var(--hr-space, var(--space-60)); margin-inline: 0; } code, kbd, samp, pre { font-family: var(--font-mono); } pre { overflow-x: auto; } small { font-size: 0.875em; } ::selection { background: var(--selection-bg, var(--primary)); color: var(--selection-fg, var(--primary-fg)); } .primary { --intent: var(--primary); --intent-fg: var(--primary-fg); --intent-soft-fg: var(--primary-soft-fg); } .secondary { --intent: var(--secondary); --intent-fg: var(--secondary-fg); --intent-soft-fg: var(--secondary-soft-fg); } .success { --intent: var(--success); --intent-fg: var(--success-fg); --intent-soft-fg: var(--success-soft-fg); } .warning { --intent: var(--warning); --intent-fg: var(--warning-fg); --intent-soft-fg: var(--warning-soft-fg); } .danger { --intent: var(--danger); --intent-fg: var(--danger-fg); --intent-soft-fg: var(--danger-soft-fg); } .neutral { --intent: var(--neutral); --intent-fg: var(--neutral-fg); --intent-soft-fg: var(--neutral-soft-fg); } .intent-color { color: var(--intent); } .solid { --ui-bg: var(--intent, var(--neutral)); --ui-fg: var(--intent-fg, var(--neutral-fg)); --ui-border: transparent; } .soft { --ui-bg: var(--surface-subtle); --ui-border: var(--border); --ui-fg: var(--intent, var(--text)); } .outline { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: var(--intent, currentColor); } .surface { --ui-bg: var(--surface); --ui-fg: var(--intent, var(--text)); --ui-border: var(--border); } .inverted { --ui-bg: var(--surface-solid); --ui-fg: var(--surface); --ui-border: transparent; --ui-hover-bg: var(--surface-solid); --heading: var(--surface); --busy-overlay-bg: var(--surface-solid); background: var(--ui-bg); color: var(--ui-fg); border-color: var(--ui-border); } .compact { --gap: var(--space-20); --density-space: var(--space-20); --control-size: var(--control-size-sm); } .spacious { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .input-icon, .otp, .join, .pagination, .tabs, .tab, .flyout ).sm { --control-size: var(--control-size-sm); --control-font-size: var(--font-size-sm); --control-pad-x: var(--font-size-sm); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .input-icon, .otp, .join, .pagination, .tabs, .tab, .flyout ).lg { --control-size: var(--control-size-lg); --control-font-size: var(--font-size-lg); --control-pad-x: var(--font-size-lg); } @supports (color: color-mix(in oklch, red, white)) { .soft { --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral))); --ui-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --ui-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } .inverted { --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black); } } :focus { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } @supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } } @media print { :root, body { color-scheme: light; background: #fff; color: #000; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } } .prose { --prose-size: 1rem; --prose-line-height: 1.7; --prose-measure: 70ch; --prose-flow: 1em; --prose-heading-line-height: 1.2; --prose-h1: 2rem; --prose-h2: 1.5rem; --prose-h3: 1.25rem; --prose-h4: 1.125rem; max-inline-size: var(--prose-measure); font-size: var(--prose-size); line-height: var(--prose-line-height); overflow-wrap: break-word; } .prose > * { margin-block-end: 0; } .prose > * + * { margin-block-start: var(--prose-flow); } .prose :where(h1, h2, h3, h4, h5, h6) { margin-block: 1.5em 0; color: var(--heading, var(--text)); font-weight: var(--font-weight-semibold); line-height: var(--prose-heading-line-height); } .prose :where(p, li, blockquote) { text-wrap: pretty; } .prose > :first-child { margin-block-start: 0; } .prose :where(h1) { font-size: var(--prose-h1); } .prose :where(h2) { font-size: var(--prose-h2); } .prose :where(h3) { font-size: var(--prose-h3); } .prose :where(h4) { font-size: var(--prose-h4); } .prose :where(a) { color: var(--link, var(--primary)); text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } .prose :where(a:hover, a:focus-visible) { text-decoration-thickness: 0.12em; } @supports (color: color-mix(in oklch, red, white)) { .prose :where(a:hover, a:focus-visible) { color: color-mix(in oklab, var(--link, var(--primary)), var(--text) 15%); } } .prose :where(ul, ol) { padding-inline-start: 1.5em; } .prose :where(li + li) { margin-block-start: 0.35em; } .prose :where(dt) { font-weight: var(--font-weight-semibold); } .prose :where(dd) { margin-inline-start: 1.5em; } .prose :where(dd + dt) { margin-block-start: 0.75em; } .prose :where(code) { padding: 0.15em 0.3em; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text); font-size: 0.875em; } .prose :where(kbd) { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.75em; min-block-size: 1.6em; padding-inline: 0.45em; border: var(--border-width) solid var(--border); border-block-end-width: calc(var(--border-width) * 2); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font-family: var(--font-mono); font-size: 0.875em; font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap; vertical-align: 0.08em; } .prose :where(pre) { padding: 1em; border: var(--border-width) solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); } .prose :where(pre) :where(code) { padding: 0; background: transparent; } .prose :where(blockquote) { margin-inline: 0; padding-inline-start: 1em; border-inline-start: var(--border-width) solid var(--border); color: var(--text-muted); } .prose :where(figure) { margin-inline: 0; } .prose :where(figcaption) { margin-block-start: 0.5em; color: var(--text-muted); font-size: 0.875em; } .prose :where(table) { inline-size: 100%; border-collapse: collapse; } .prose :where(th, td) { padding: 0.5em; border-block-end: var(--border-width) solid var(--border); text-align: start; } .prose.sm { --prose-size: 0.9375rem; --prose-h1: 1.75rem; --prose-h2: 1.375rem; --prose-h3: 1.125rem; --prose-h4: 1rem; } .prose.lg { --prose-size: 1.125rem; --prose-measure: 72ch; --prose-h1: 2.25rem; --prose-h2: 1.625rem; --prose-h3: 1.375rem; --prose-h4: 1.25rem; } .lead { font-size: 1.125em; line-height: var(--line-height-relaxed); } :where(.overline) { --intent: initial; } .overline { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; text-transform: uppercase; } .overline.pill { --overline-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 0.5em; padding-inline: 0.6em; padding-block: 0.25em; inline-size: fit-content; max-inline-size: 100%; color: var(--intent, var(--text-muted)); border: var(--border-width) solid var(--border); border-radius: var(--overline-radius); background: var(--surface); } @supports (color: color-mix(in oklch, red, white)) { .overline.pill { border-color: color-mix(in oklab, var(--intent, var(--border)) 35%, var(--border)); background: color-mix(in oklab, var(--intent, transparent) 6%, var(--surface)); } } :root { --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vw), 4.25rem); --fluid-title: clamp(2rem, calc(1.75rem + 1.111vw), 2.75rem); --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vw), 1.25rem); } @supports (inline-size: 100vi) { :root { --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vi), 4.25rem); --fluid-title: clamp(2rem, calc(1.75rem + 1.111vi), 2.75rem); --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vi), 1.25rem); } } .text-display { font-size: var(--fluid-display); line-height: var(--line-height-tight); text-wrap: balance; } .text-title { font-size: var(--fluid-title); line-height: var(--line-height-tight); text-wrap: balance; } .text-lead { font-size: var(--fluid-lead); line-height: var(--line-height-relaxed); } .container-query { container: actual-container / inline-size; } .stack { display: flex; flex-direction: column; gap: var(--gap); } .stack > * { margin-block: 0; } .cluster { display: flex; flex-direction: row; flex-wrap: var(--cluster-wrap, wrap); align-items: var(--cluster-align, center); justify-content: var(--cluster-justify, flex-start); gap: var(--gap); } .cluster > * { margin: 0; } .center { box-sizing: content-box; inline-size: calc(100% - var(--center-pad, 1rem) * 2); max-inline-size: var(--center-size, 72rem); margin-inline: auto; padding-inline: var(--center-pad, 1rem); } .frame { overflow: hidden; aspect-ratio: var(--frame-ratio, 16 / 9); } .frame > :where(img, video, iframe, canvas, svg) { inline-size: 100%; block-size: 100%; object-fit: cover; } .app-shell { min-block-size: var(--viewport-block); display: flex; flex-direction: column; } .app-layout { --app-nav-side-size: 12rem; display: grid; grid-template: "topbar" auto "main" minmax(0, 1fr) "nav" auto / minmax(0, 1fr); block-size: var(--viewport-block); min-inline-size: 0; overflow: hidden; } .app-layout > .topbar { grid-area: topbar; padding-block-start: calc(var(--space-30) + env(safe-area-inset-top)); } .app-layout > .app-main { grid-area: main; min-inline-size: 0; min-block-size: 0; overflow: auto; } .app-layout > .app-nav { grid-area: nav; } .app-layout > .fab { position: relative; grid-area: main; place-self: end; inset: auto; margin: var(--fab-offset); } @media (min-width: 48rem) { .app-layout { grid-template: "nav topbar" auto "nav main" minmax(0, 1fr) / var(--app-nav-side-size) minmax(0, 1fr); } .app-layout > .app-nav { position: sticky; inset-block: 0; grid-auto-flow: row; grid-auto-rows: minmax(var(--control-size-lg), auto); grid-auto-columns: auto; align-content: start; gap: var(--space-20); min-block-size: 0; padding-block: max(var(--space-20), env(safe-area-inset-top)) max(var(--space-20), env(safe-area-inset-bottom)); padding-inline: var(--space-20); border-block-start: 0; border-inline-end: var(--border-width) solid var(--ui-border, var(--border)); } .app-layout > .app-nav > a { grid-template-rows: auto; grid-template-columns: 1.5rem minmax(0, 1fr); place-content: center start; align-items: center; justify-items: start; gap: var(--space-30); padding-inline: var(--space-30); text-align: start; } .app-layout > .fab { margin-block-end: max(var(--fab-offset), env(safe-area-inset-bottom)); } } @media print { .app-layout { display: block; block-size: auto; overflow: visible; } .app-layout > .app-main { overflow: visible; } } .media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap); align-items: start; } .switcher { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); } .switcher > * { flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999); flex-grow: 1; min-inline-size: 0; } .sidebar-layout { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; } .sidebar-layout > :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: min(100%, var(--sidebar-content-min, 30rem)); } .sidebar-layout > :last-child { flex-basis: var(--sidebar-layout-size, 18rem); flex-grow: 1; min-inline-size: 0; } .sidebar-layout.reverse > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: min(100%, var(--sidebar-content-min, 30rem)); } .sidebar-layout.reverse > :first-child { flex-basis: var(--sidebar-layout-size, 18rem); flex-grow: 1; min-inline-size: 0; } .grid { display: grid; gap: var(--gap); grid-template-columns: var( --grid-columns, repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)) ); } :where(.grid-2, .grid-3, .grid-4, .grid-6) { display: grid; gap: var(--gap); grid-template-columns: repeat( auto-fill, minmax( min( 100%, max(16rem, calc((100% - (var(--grid-count) - 1) * var(--gap)) / var(--grid-count))) ), 1fr ) ); } .grid-2 { --grid-count: 2; } .grid-3 { --grid-count: 3; } .grid-4 { --grid-count: 4; } .grid-6 { --grid-count: 6; } :where(.grid, .grid-2, .grid-3, .grid-4, .grid-6) > * { min-inline-size: 0; } @container actual-container (min-width: 0px) { :where(.grid-2, .grid-3, .grid-4, .grid-6) { grid-template-columns: 1fr; } } @container actual-container (min-width: 28rem) { :where(.grid-2, .grid-4, .grid-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container actual-container (min-width: 48rem) { :where(.grid-3, .grid-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container actual-container (min-width: 64rem) { :where(.grid-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.grid-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .column-layout { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); } :where(.column-layout) > * { grid-column-end: span 12; min-inline-size: 0; } :where(.column-start-1) { grid-column: 1 / -1; } :where(.column-start-2) { grid-column: 2 / -1; } :where(.column-start-3) { grid-column: 3 / -1; } :where(.column-start-4) { grid-column: 4 / -1; } :where(.column-start-5) { grid-column: 5 / -1; } :where(.column-start-6) { grid-column: 6 / -1; } :where(.column-start-7) { grid-column: 7 / -1; } :where(.column-start-8) { grid-column: 8 / -1; } :where(.column-start-9) { grid-column: 9 / -1; } :where(.column-start-10) { grid-column: 10 / -1; } :where(.column-start-11) { grid-column: 11 / -1; } :where(.column-start-12) { grid-column: 12 / -1; } :where(.column-span-1) { grid-column-end: span 1; } :where(.column-span-2) { grid-column-end: span 2; } :where(.column-span-3) { grid-column-end: span 3; } :where(.column-span-4) { grid-column-end: span 4; } :where(.column-span-5) { grid-column-end: span 5; } :where(.column-span-6) { grid-column-end: span 6; } :where(.column-span-7) { grid-column-end: span 7; } :where(.column-span-8) { grid-column-end: span 8; } :where(.column-span-9) { grid-column-end: span 9; } :where(.column-span-10) { grid-column-end: span 10; } :where(.column-span-11) { grid-column-end: span 11; } :where(.column-span-12) { grid-column-end: span 12; } .scroller { --scroller-track: transparent; --scroller-thumb: var(--border); scrollbar-color: var(--scroller-thumb) var(--scroller-track); scrollbar-width: thin; } .scroller.stable-gutter { scrollbar-gutter: stable; } @supports (color: color-mix(in oklch, red, white)) { .scroller { --scroller-thumb: color-mix(in oklch, var(--text-muted), transparent 55%); } } .scroll-snap { --scroll-snap-gap: var(--gap); --scroll-snap-align: start; --scroll-snap-item-size: auto; display: flex; flex-direction: row; gap: var(--scroll-snap-gap); overflow-x: auto; } .scroll-snap > * { flex: 0 0 var(--scroll-snap-item-size); } @supports (scroll-snap-type: x mandatory) { .scroll-snap { overscroll-behavior-inline: contain; scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap)); scroll-snap-type: x proximity; scroll-snap-type: inline proximity; } .scroll-snap[data-snap="mandatory"] { scroll-snap-type: x mandatory; scroll-snap-type: inline mandatory; } .scroll-snap > * { scroll-snap-align: var(--scroll-snap-align); } .scroll-snap[data-snap-align="center"] { --scroll-snap-align: center; } } .scroll-snap[data-scrollbar="hidden"] { scrollbar-width: none; } .scroll-snap[data-scrollbar="hidden"]::-webkit-scrollbar { display: none; } .scroll-target { scroll-margin-block-start: var(--scroll-target-offset, var(--space-60)); } .topbar { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); isolation: isolate; display: flex; flex-direction: row; align-items: center; gap: var(--gap); padding-block: var(--space-30); padding-inline: var(--space-40); border-block-end: var(--border-width) solid var(--border); background: var(--surface); } @supports ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) and (background: color-mix(in oklch, red 50%, transparent)) { .topbar { background: color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); } } .measure { max-inline-size: var(--measure, 70ch); } .field { display: grid; gap: var(--space-10); color: var(--text); font-size: var(--control-font-size); } .field-group { min-inline-size: 0; margin: 0; padding: var(--space-30); border: var(--border-width) solid var(--border); border-radius: var(--radius); } .field-label, .field-group > legend { color: var(--text); font-weight: var(--font-weight-semibold); } .field-group > legend { padding-block: 0; padding-inline: var(--fieldset-legend-padding-inline, var(--space-10)); font-size: var(--font-size-xs); } .field-help { color: var(--text-muted); font-size: 0.875em; } .field-error { display: none; color: var(--danger); font-size: 0.875em; } .required-mark { color: var(--danger); } .field.danger .field-help { color: var(--danger); } .input, .textarea, .select { --control-border: var(--border); --control-bg: var(--surface); --control-fg: var(--text); --control-cursor: auto; appearance: none; -webkit-appearance: none; inline-size: 100%; min-block-size: var(--control-size); padding-inline: var(--control-pad-x); border: var(--border-width) solid var(--form-invalid-border, var(--control-border)); border-block-end-color: var( --form-invalid-border, var(--control-border-block-end-color, var(--control-border)) ); border-block-end-width: var(--control-border-block-end-width, var(--border-width)); border-radius: var(--radius); background: var(--control-bg); color: var(--control-fg); font-size: var(--control-font-size); cursor: var(--control-cursor); transition: border-color var(--duration), box-shadow var(--duration), background-color var(--duration), color var(--duration); } .textarea { min-block-size: 6rem; padding-block: var(--space-20); resize: vertical; } .input:hover:not(:disabled), .textarea:hover:not(:disabled) { --control-border: var(--text-subtle); } .select:hover:not(:disabled) { --control-bg: var(--surface-subtle); } .input:focus-visible, .textarea:focus-visible, .select:focus-visible { --control-border: var(--focus); outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .input[readonly], .textarea[readonly] { --control-bg: var(--surface-subtle); --control-border: var(--border); } .input:disabled, .textarea:disabled, .select:disabled { --control-bg: var(--surface-subtle); --control-fg: var(--state-disabled); --control-border: var(--border); --control-cursor: not-allowed; } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } :where(.choice, .check, .radio) { --intent: initial; --intent-fg: initial; } :where(.choice) > :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) { --intent: inherit; --intent-fg: inherit; } .choice { display: inline-flex; align-items: flex-start; gap: var(--space-20); color: var(--text); font-size: var(--control-font-size); cursor: pointer; } .choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) { flex: 0 0 auto; margin-block-start: calc(0.1875em + var(--choice-control-nudge, 0px)); } .choice > .switch { flex: 0 0 auto; margin-block-start: calc(0.125em + var(--choice-control-nudge, 0px)); } @supports (margin-block-start: 1lh) { .choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) { margin-block-start: calc( (1lh - var(--choice-control-size)) / 2 + var(--choice-control-nudge, 0px) ); } .choice > .switch { margin-block-start: calc( (1lh - var(--switch-block-size)) / 2 + var(--choice-control-nudge, 0px) ); } } @supports (margin-block-start: 1cap) { .choice { align-items: baseline; } .choice > :is(input[type="checkbox"], input[type="radio"]) { margin-block-start: 0; } .choice > :is(.check, .radio) { inset-block-start: calc( (var(--choice-control-size) - 1cap) / 2 + var(--choice-control-nudge, 0px) ); } .choice > .switch { inset-block-start: calc( (var(--switch-block-size) - 1cap) / 2 + var(--choice-control-nudge, 0px) ); } } .choice > span > .field-help { display: block; } .choice:has(> :disabled) { color: var(--state-disabled); cursor: not-allowed; } .check, .radio { --choice-border: var(--border); --choice-bg: var(--surface); --choice-mark: var(--primary-fg); position: relative; vertical-align: middle; display: inline-grid; place-content: center; inline-size: var(--choice-control-size); block-size: var(--choice-control-size); margin: 0; border: var(--border-width) solid var(--form-invalid-border, var(--choice-border)); background: var(--choice-bg); color: var(--choice-mark); appearance: none; -webkit-appearance: none; cursor: pointer; } .check { border-radius: var(--radius-sm); } .radio { border-radius: var(--radius-full); } .check::before, .radio::before { content: ""; position: absolute; inset: 0; margin: auto; transform: scale(0); transition: transform var(--duration); } .check::before { inline-size: 0.58em; block-size: 0.34em; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-0.06em) rotate(-45deg) scale(0); } .radio::before { inline-size: 0.5em; block-size: 0.5em; border-radius: var(--radius-full); background: currentColor; } .check:is(:checked, :indeterminate), .radio:checked { --choice-border: var(--intent, var(--state-selected)); --choice-bg: var(--intent, var(--state-selected)); --choice-mark: var(--intent-fg, var(--state-selected-fg)); } .check:checked::before { transform: translateY(-0.06em) rotate(-45deg) scale(1); } .check:indeterminate::before { border-inline-start: 0; inline-size: 0.6em; block-size: 0; border-block-end: 2px solid currentColor; transform: scale(1); } .radio:checked::before { transform: scale(1); } .check:hover:not(:checked, :indeterminate, :disabled), .radio:hover:not(:checked, :indeterminate, :disabled) { --choice-border: var(--text-subtle); } .check:focus-visible, .radio:focus-visible { --choice-border: var(--focus); outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .check:disabled, .radio:disabled { --choice-bg: var(--surface-subtle); --choice-border: var(--border); --choice-mark: var(--state-disabled); cursor: not-allowed; opacity: 1; } .select:not(:is([multiple], [size]:not([size="1"]))) { --select-icon-size: 1em; appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--control-pad-x) * 2 + var(--select-icon-size)); background-image: var(--icon-chevron); background-position: center right var(--control-pad-x); background-size: var(--select-icon-size) auto; background-repeat: no-repeat; } [dir="rtl"] .select:not(:is([multiple], [size]:not([size="1"]))) { background-position: center left var(--control-pad-x); } .select:not(:is([multiple], [size]:not([size="1"]))):dir(ltr) { background-position: center right var(--control-pad-x); } .select:not(:is([multiple], [size]:not([size="1"]))):dir(rtl) { background-position: center left var(--control-pad-x); } @media (forced-colors: active), (prefers-contrast: more) { .select:not(:is([multiple], [size]:not([size="1"]))) { appearance: auto; background-image: none; padding-inline-end: var(--control-pad-x); } } .file { color: var(--text-muted); font-size: var(--control-font-size); } .file::file-selector-button { margin-inline-end: var(--space-30); min-block-size: var(--control-size); padding-block: var(--space-10); padding-block: max(var(--space-10), calc((var(--control-size) - 1lh) / 2)); padding-inline: var(--space-20); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text); font: inherit; font-size: var(--control-font-size); font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color var(--duration), border-color var(--duration), color var(--duration); } .file:disabled::file-selector-button { cursor: not-allowed; } .file:not(:disabled)::file-selector-button:hover { background: var(--border); } .file:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .color { inline-size: var(--control-size); block-size: var(--control-size); padding: var(--border-width); border: var(--border-width) solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; } .color::-webkit-color-swatch-wrapper { padding: 0; } .color::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius) - var(--border-width)); } .color::-moz-color-swatch { border: 0; border-radius: calc(var(--radius) - var(--border-width)); } .color:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); } .color:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } @media (forced-colors: active) { .color { border-color: ButtonText; background: ButtonFace; } .color::-webkit-color-swatch { forced-color-adjust: none; } .color::-moz-color-swatch { forced-color-adjust: none; } } .field.danger { --form-invalid-border: var(--danger); } .field.danger > .field-error { display: block; } @supports selector(:has(*)) { .field:has([aria-invalid="true"]) > .field-error, .needs-validation.was-validated .field:has(:invalid) > .field-error { display: block; } } :where(.input, .textarea, .select, .check, .radio, .switch)[aria-invalid="true"], .needs-validation.was-validated :is(.input, .textarea, .select, .check, .radio, .switch):invalid { --form-invalid-border: var(--danger); } .check:is(:checked, :indeterminate)[aria-invalid="true"], .needs-validation.was-validated .check:is(:checked, :indeterminate):invalid, .radio:checked[aria-invalid="true"], .needs-validation.was-validated .radio:checked:invalid { --choice-bg: var(--danger); } .switch:checked[aria-invalid="true"], .needs-validation.was-validated .switch:checked:invalid { --switch-bg: var(--danger); } @supports selector(:user-invalid) { .needs-validation .check:is(:checked, :indeterminate):user-invalid, .needs-validation .radio:checked:user-invalid { --choice-bg: var(--danger); } .needs-validation .switch:checked:user-invalid { --switch-bg: var(--danger); } } @supports selector(:has(*)) { .choice-card:has([aria-invalid="true"]), .needs-validation.was-validated .choice-card:has(:invalid) { --form-invalid-border: var(--danger); } } @supports selector(:user-invalid) { .needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid { --form-invalid-border: var(--danger); } } @supports selector(:has(:user-invalid)) { .needs-validation .field:has(:user-invalid) > .field-error { display: block; } .needs-validation .choice-card:has(:user-invalid) { --form-invalid-border: var(--danger); } } .form-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); align-items: var(--form-actions-align, center); justify-content: var(--form-actions-justify, flex-start); margin-block-start: var(--form-actions-margin-block-start, var(--space-50)); } .form-actions.sticky { position: sticky; inset-block-end: var(--form-actions-sticky-block-offset, 0px); z-index: var(--z-sticky); isolation: isolate; margin-inline: calc(var(--form-actions-sticky-inline-offset, 0px) * -1); padding: var(--form-actions-sticky-padding, var(--space-30)); border-block-start: var(--border-width) solid var(--border); background: var(--surface); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); } @supports (background: color-mix(in oklch, red 50%, transparent)) { .form-actions.sticky { background: color-mix(in oklch, var(--surface) 88%, transparent); } } .input-icon { --input-icon-size: 1.25em; display: block; position: relative; font-size: var(--control-font-size); } .input-icon > :where(:not(.input)) { position: absolute; inset-block-start: 50%; transform: translateY(-50%); font-size: var(--input-icon-size); color: var(--text-muted); pointer-events: none; } .input-icon > :first-child:where(:not(.input)) { inset-inline-start: var(--control-pad-x); } .input-icon > .input ~ :where(:not(.input)) { inset-inline-end: var(--control-pad-x); } .input-icon > svg:where(:not(.input)) { inline-size: 1em; block-size: 1em; } .input-icon > :first-child:where(:not(.input)) ~ .input { padding-inline-start: calc(var(--control-pad-x) * 2 + var(--input-icon-size)); } .input-icon > .input:where(:not(:last-child)) { padding-inline-end: calc(var(--control-pad-x) * 2 + var(--input-icon-size)); } :where(.switch) { --intent: initial; --intent-fg: initial; } .switch { --switch-bg: var(--border); --switch-border: var(--border); --switch-knob: var(--surface-raised); --switch-block-size: calc(var(--choice-control-size) + 0.125em); --switch-width: calc(var(--switch-block-size) * 1.8); --switch-knob-margin: calc(var(--switch-block-size) * 0.08); --switch-knob-size: calc( var(--switch-block-size) - 2 * var(--border-width) - 2 * var(--switch-knob-margin) ); --switch-travel: calc( var(--switch-width) - var(--switch-knob-size) - 2 * var(--border-width) - 2 * var(--switch-knob-margin) ); position: relative; display: inline-grid; inline-size: var(--switch-width); block-size: var(--switch-block-size); margin: 0; border: var(--border-width) solid var(--form-invalid-border, var(--switch-border)); border-radius: var(--radius-full); background: var(--switch-bg); appearance: none; -webkit-appearance: none; cursor: pointer; } .switch::before { content: ""; position: absolute; inset-block-start: var(--switch-knob-margin); inset-inline-start: var(--switch-knob-margin); inline-size: var(--switch-knob-size); block-size: var(--switch-knob-size); border-radius: var(--radius-full); background: var(--switch-knob); transition: transform var(--duration), background-color var(--duration); } .switch:not(:checked):hover:not(:disabled) { --switch-border: var(--intent, var(--primary)); } .switch:checked { --switch-bg: var(--intent, var(--state-selected)); --switch-border: var(--intent, var(--state-selected)); --switch-knob: var(--intent-fg, var(--state-selected-fg)); } .switch:checked::before { transform: translateX(var(--switch-travel)); } [dir="rtl"] .switch:checked::before { transform: translateX(calc(var(--switch-travel) * -1)); } .switch:checked:dir(ltr)::before { transform: translateX(var(--switch-travel)); } .switch:checked:dir(rtl)::before { transform: translateX(calc(var(--switch-travel) * -1)); } .switch:focus-visible { --switch-border: var(--focus); outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .switch:disabled { --switch-bg: var(--surface-subtle); --switch-border: var(--border); --switch-knob: var(--state-disabled); opacity: 1; cursor: not-allowed; } @media (forced-colors: active) { .switch::before { border: var(--border-width) solid ButtonText; } } :where(.range) { --intent: initial; } .range { --range-thumb-size: 1.25rem; --range-track-height: 0.25rem; --range-thumb-bg: var(--intent, var(--primary)); --range-track-bg: var(--border); appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: var(--range-thumb-size); background: transparent; cursor: pointer; } .range::-webkit-slider-runnable-track { block-size: var(--range-track-height); border-radius: var(--radius-full); background: var(--range-track-bg); } .range::-moz-range-track { block-size: var(--range-track-height); border-radius: var(--radius-full); background: var(--range-track-bg); } .range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; inline-size: var(--range-thumb-size); block-size: var(--range-thumb-size); border-radius: var(--radius-full); border: 0; background: var(--range-thumb-bg); margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2); cursor: inherit; transition: box-shadow var(--duration); } .range::-moz-range-thumb { inline-size: var(--range-thumb-size); block-size: var(--range-thumb-size); border-radius: var(--radius-full); border: 0; background: var(--range-thumb-bg); cursor: inherit; transition: box-shadow var(--duration); } .range:focus-visible { outline: 2px solid transparent; } .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--surface), 0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring); } .range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--surface), 0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring); } .range:disabled { --range-thumb-bg: var(--state-disabled); cursor: not-allowed; opacity: var(--disabled-opacity); } @media (forced-colors: active) { .range { --range-track-bg: CanvasText; --range-thumb-bg: ButtonFace; } .range::-webkit-slider-thumb { border: var(--border-width) solid ButtonText; } .range::-moz-range-thumb { border: var(--border-width) solid ButtonText; } } :where(.choice-card) { --intent: initial; --intent-fg: initial; } .choice-card { --choice-card-pad: var(--density-space, var(--space-40)); --choice-card-radius: var(--radius); --choice-card-border: var(--border); --choice-card-bg: var(--surface); --choice-card-check-size: 1.5em; position: relative; display: block; padding: var(--choice-card-pad); border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border)); border-radius: var(--choice-card-radius); background: var(--choice-card-bg); color: var(--text); cursor: pointer; transition: border-color var(--duration), background-color var(--duration), box-shadow var(--duration); } @supports selector(:has(*)) { .choice-card > :is(input[type="radio"], input[type="checkbox"]) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } .choice-card:has(:focus-visible) { outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .choice-card:has(:disabled) { opacity: var(--disabled-opacity); cursor: not-allowed; } .choice-card:hover:not(:has(:disabled)) { --choice-card-border: var(--text-subtle); } .choice-card:has(:checked) { --choice-card-border: var(--intent, var(--state-selected)); } @supports (color: color-mix(in oklch, red, white)) { .choice-card:has(:checked) { --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--state-selected))); } } .choice-card::before, .choice-card::after { content: ""; position: absolute; inset-inline-end: -0.375em; inset-block-start: -0.375em; inline-size: var(--choice-card-check-size); block-size: var(--choice-card-check-size); transform: scale(0); transition: transform var(--duration); } .choice-card::before { background: var(--intent, var(--state-selected)); box-shadow: 0 0 0 2px var(--surface); z-index: 1; } .choice-card:has(input[type="radio"])::before { border-radius: var(--radius-full); } .choice-card:has(input[type="checkbox"])::before { border-radius: var(--radius-sm); } .choice-card::after { background: var(--intent-fg, var(--state-selected-fg)); -webkit-mask: var(--icon-check) center / 60% no-repeat; mask: var(--icon-check) center / 60% no-repeat; z-index: 2; } .choice-card:has(:checked)::before, .choice-card:has(:checked)::after { transform: scale(1); } @media (forced-colors: active) { .choice-card:has(:checked)::before { background: Highlight; outline: 2px solid Canvas; } .choice-card:has(:checked)::after { background: HighlightText; } } @media (forced-colors: none) and (prefers-contrast: no-preference) and (hover: hover) and ( pointer: fine ) { @supports (appearance: base-select) { .select:not([multiple], .native, [size]:not([size="1"])) { appearance: base-select; align-items: center; &::picker(select) { appearance: base-select; max-block-size: min(24rem, calc(var(--viewport-block) * 0.7)); margin-block: var(--space-20); padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius); background-color: var(--surface-raised); color: inherit; box-shadow: var(--shadow-popout); } &:open { --control-border: var(--border); --control-bg: var(--surface-raised); outline: none; box-shadow: var(--focus-ring-shadow); } &::picker-icon { display: none; } & option { position: relative; padding-block: var(--space-20); padding-inline: var(--space-30); white-space: normal; transition-property: color, background-color; transition-duration: var(--duration); &:not(:disabled):hover { background-color: var(--surface-subtle); color: var(--text); cursor: pointer; } &:not(:disabled):focus-visible { background-color: var(--primary); color: var(--primary-fg); outline: none; } &:active { background-color: var(--surface-subtle); color: var(--text); } &::checkmark { content: ""; display: block; inline-size: 1rem; block-size: 1rem; background-color: currentColor; -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; } } & optgroup { padding-block-start: 0.5em; & option:first-child { margin-block-start: 0.5em; } } } } } .floating-field { --floating-label-top: var(--space-10); --floating-label-opacity: 0.8; --floating-pad-block-start: calc(var(--control-size) / 2 + var(--space-20)); position: relative; display: grid; } .floating-field > :is(.input, .textarea, .select) { padding-block-start: var(--floating-pad-block-start); padding-block-end: var(--space-10); } .floating-field > .field-label { position: absolute; inset-inline-start: calc(var(--space-30) + var(--border-width)); color: var(--text-muted); font-size: var(--control-font-size); font-weight: var(--font-weight-normal); opacity: var(--floating-label-opacity); pointer-events: none; transition: inset-block-start var(--duration), transform var(--duration), font-size var(--duration), opacity var(--duration), color var(--duration); } .floating-field > :is(.input, .select) ~ .field-label { inset-block-start: 50%; transform: translateY(-50%); } .floating-field > .textarea ~ .field-label { inset-block-start: calc(1em + var(--border-width)); transform: none; } .floating-field > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown)) ~ .field-label { inset-block-start: var(--floating-label-top); transform: none; font-size: var(--font-size-xs); opacity: 1; } .floating-field > :is( .select, .input[type="date"], .input[type="time"], .input[type="datetime-local"], .input[type="month"], .input[type="week"] ) ~ .field-label { inset-block-start: var(--floating-label-top); transform: none; font-size: var(--font-size-xs); opacity: 1; } @media (forced-colors: active) { .floating-field > .field-label { opacity: 1; } } .otp { --otp-cell-size: var(--control-size); --otp-gap: var(--space-10); --otp-font-size: 1.5em; --otp-cell-border: var(--border); --otp-cell-bg: var(--surface); --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px); position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--otp-cell-size); inline-size: fit-content; max-inline-size: 100%; gap: var(--otp-gap); border-radius: var(--radius); font-size: var(--control-font-size); overflow: clip; direction: ltr; } .otp > span { inline-size: var(--otp-cell-size); block-size: var(--otp-cell-size); border: var(--otp-cell-border-width, var(--border-width)) solid var(--otp-cell-border); border-radius: var(--radius); background: var(--otp-cell-bg); transition: border-color var(--duration), background-color var(--duration); } .otp > input { position: absolute; z-index: 1; inset: 0; inline-size: calc(100% + var(--otp-caret-space)); block-size: 100%; margin: 0; padding-block: 0; padding-inline: calc((var(--otp-cell-size) - 1ch) / 2) 0; border: 0; outline: 2px solid transparent; box-shadow: none; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: var(--otp-font-size); font-variant-numeric: tabular-nums; line-height: var(--otp-cell-size); letter-spacing: calc(var(--otp-cell-size) + var(--otp-gap) - 1ch); text-align: start; appearance: none; -webkit-appearance: none; } .otp > input:focus ~ span { --otp-cell-border: var(--focus); --otp-cell-border-width: calc(var(--border-width) * 2); } .otp > input[aria-invalid="true"] ~ span, .needs-validation.was-validated .otp > input:invalid ~ span { --otp-cell-border: var(--danger); } @supports selector(:user-invalid) { .needs-validation .otp > input:user-invalid ~ span { --otp-cell-border: var(--danger); } } .otp > input:disabled { color: var(--state-disabled); cursor: not-allowed; } .otp > input:disabled ~ span { --otp-cell-bg: var(--surface-subtle); --otp-cell-border: var(--state-disabled); opacity: var(--disabled-opacity); } @media (forced-colors: active) { .otp > input:focus ~ span { --otp-cell-border: Highlight; } .otp > input[aria-invalid="true"] ~ span, .needs-validation.was-validated .otp > input:invalid ~ span { --otp-cell-border: Mark; } } :where(.btn) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; --ui-hover-bg: initial; } .btn { --btn-font-size: var(--control-font-size); --btn-min-size: var(--control-size); --btn-pad-x: var(--control-pad-x, 1em); --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral)))); --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg)))); --btn-border: var(--ui-border, var(--btn-default-border, transparent)); --btn-default-hover-bg: var(--btn-bg); --btn-radius: var(--radius); --btn-focus-color: var(--intent, var(--focus)); --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08)); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap, 0.375em); min-block-size: var(--btn-min-size); padding-block: var(--space-20); padding-block: max(var(--space-10), calc((var(--btn-min-size) - 1lh) / 2)); padding-inline: var(--btn-pad-x); border: var(--border-width) solid var(--btn-border-color, var(--btn-border)); border-block-end-color: var( --btn-border-block-end-color, var(--btn-border-color, var(--btn-border)) ); border-block-end-width: var(--btn-border-block-end-width, var(--border-width)); border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: var(--btn-font-size); font-weight: var(--font-weight-medium); line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--duration), border-color var(--duration), color var(--duration), box-shadow var(--duration), transform var(--duration); } .btn.icon-only { inline-size: var(--btn-min-size); block-size: var(--btn-min-size); padding: 0; } @supports (color: color-mix(in oklch, red, white)) { .btn { --btn-focus-ring-color: color-mix(in oklch, var(--btn-focus-color) 28%, transparent); } } .btn.ghost { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: transparent; } .btn.outline, .btn.ghost, .btn.link, .btn.soft { --btn-hover-overlay: transparent; } .btn:is(.outline, .ghost) { --ui-hover-bg: transparent; } @supports (color: color-mix(in oklch, red, white)) { .btn { --btn-default-hover-bg: color-mix(in oklch, var(--btn-bg) 88%, black); } .btn.soft { --ui-hover-bg: color-mix( in oklab, var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)), var(--intent, var(--neutral)) ); } .btn.outline, .btn.ghost { --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent); } } .btn:not(:where(:disabled, [aria-disabled="true"])):hover { background: var(--ui-hover-bg, var(--btn-default-hover-bg)); box-shadow: inset 0 0 0 999px var(--btn-hover-overlay); } .btn:not(:where(:disabled, [aria-disabled="true"])):active { transform: translateY(1px); } .btn.link { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: transparent; --btn-radius: var(--radius-sm); min-block-size: auto; padding-inline: 0; inline-size: fit-content; max-inline-size: 100%; border: 0; text-decoration: underline; text-underline-offset: 0.18em; } .btn.link:not(:where(:disabled, [aria-disabled="true"])):hover { background: transparent; text-decoration-thickness: 0.12em; } .btn:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 var(--focus-ring-width) var(--btn-focus-ring-color, var(--focus-ring)); } .btn.link:focus-visible { outline: var(--focus-outline); outline-offset: 0.2em; box-shadow: none; } .btn:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); } a.btn[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; } .btn[aria-busy="true"]:not(:disabled) { cursor: progress; } .btn[aria-busy="true"] > .spinner { --spinner-width: 0.15em; } .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link) { --btn-bg: var(--intent, var(--state-selected)); --btn-fg: var(--intent-fg, var(--state-selected-fg)); --btn-border: var(--intent, var(--state-selected)); --ui-hover-bg: var(--btn-bg); } @media (forced-colors: active) { a.btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; } } :where(.badge) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; --ui-hover-bg: initial; } .badge { --badge-size: 1.5rem; --badge-pad-x: calc(var(--badge-size) / 3); --badge-font-size: var(--font-size-sm); --badge-icon-size: 1em; --badge-dot-size: 0.5rem; --badge-dismiss-icon-size: 0.875em; --badge-default-bg: var(--surface-subtle); --badge-default-fg: var(--intent, var(--text)); --badge-default-border: var(--border); --badge-default-hover-bg: var(--badge-bg); --badge-bg: var(--ui-bg, var(--badge-default-bg)); --badge-fg: var(--ui-fg, var(--badge-default-fg)); --badge-border: var(--ui-border, var(--badge-default-border)); --badge-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; gap: 0.35em; flex: none; inline-size: fit-content; max-inline-size: 100%; min-block-size: var(--badge-size); padding-inline: var(--badge-pad-x); border: var(--border-width) solid var(--badge-border); border-radius: var(--badge-radius); background: var(--badge-bg); color: var(--badge-fg); font-size: var(--badge-font-size); font-weight: var(--font-weight-medium); line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--duration), border-color var(--duration), color var(--duration), box-shadow var(--duration); } .badge.sm { --badge-size: 1.25rem; --badge-font-size: var(--font-size-xs); --badge-dot-size: 0.375rem; } .badge.lg { --badge-size: 1.875rem; --badge-font-size: var(--font-size-md); --badge-dot-size: 0.625rem; } .badge > :where(svg, img, [aria-hidden="true"]:not(.dot)) { flex: none; inline-size: 1em; block-size: 1em; font-size: var(--badge-icon-size); line-height: 1; } @supports (color: color-mix(in oklch, red, white)) { .badge { --badge-default-bg: color-mix( in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)) ); --badge-default-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --badge-default-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } } .badge:empty { --badge-size: var(--badge-dot-size); --badge-bg: var(--intent, var(--neutral)); --badge-fg: var(--intent-fg, var(--neutral-fg)); --badge-border: transparent; padding: 0; border: 0; inline-size: var(--badge-size); block-size: var(--badge-size); } .badge > .dot { background-color: currentColor; } .badge > button { display: inline-grid; place-items: center; flex: 0 0 auto; min-inline-size: max(var(--badge-size), 24px); min-block-size: max(var(--badge-size), 24px); margin-block: -0.25rem; margin-inline-start: -0.15em; margin-inline-end: -0.45em; padding: 0.25rem; border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; } .badge > button:empty::before { content: ""; inline-size: var(--badge-dismiss-icon-size); block-size: var(--badge-dismiss-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } .badge > button:not(:disabled):hover { background: var(--hover-overlay); } :is(a.badge, button.badge).outline { --ui-hover-bg: transparent; } @supports (color: color-mix(in oklch, red, white)) { :is(a.badge, button.badge):is(.solid, :empty) { --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black); } :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) { --badge-default-hover-bg: color-mix( in oklab, var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)), var(--intent, var(--neutral)) ); } :is(a.badge, button.badge).outline { --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent); } } :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover { background: var(--ui-hover-bg, var(--badge-default-hover-bg)); } :where(a.badge, button.badge):is(.solid, :empty):not( :where(:disabled, [aria-disabled="true"]) ):hover { box-shadow: inset 0 0 0 999px var(--hover-overlay); } button.badge { cursor: pointer; } button.badge:disabled, .badge[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; } a.badge[aria-disabled="true"] { pointer-events: none; } @media (forced-colors: active) { .badge:empty { background: ButtonText; } .badge[aria-disabled="true"] { color: GrayText; border-color: GrayText; } } @media print { .badge { border: var(--border-width) solid CanvasText; } } :where(.alert) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .alert { --alert-pad-block: var(--space-30); --alert-pad-inline: var(--space-40); --alert-font-size: var(--font-size-md); --alert-icon-size: 1.25rem; --alert-default-bg: var(--surface-subtle); --alert-default-fg: var(--intent, var(--text)); --alert-default-border: var(--border); --alert-bg: var(--ui-bg, var(--alert-default-bg)); --alert-fg: var(--ui-fg, var(--alert-default-fg)); --alert-border: var(--ui-border, var(--alert-default-border)); padding-block: var(--alert-pad-block); padding-inline: var(--alert-pad-inline); background: var(--alert-bg); color: var(--alert-fg); border: var(--border-width) solid var(--alert-border); border-inline-start-color: var(--alert-border-inline-start-color, var(--alert-border)); border-inline-start-width: var(--alert-border-inline-start-width, var(--border-width)); border-radius: var(--alert-radius, var(--radius-lg)); font-size: var(--alert-font-size); } .alert > * { min-inline-size: 0; } .alert > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) { margin-block: 0; } .alert > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) + :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) { margin-block-start: var(--space-10); } @supports (color: color-mix(in oklch, red, white)) { .alert { --alert-default-bg: color-mix( in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)) ); --alert-default-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --alert-default-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } } .alert > .alert-icon { display: inline-block; flex: none; inline-size: var(--alert-icon-size); block-size: var(--alert-icon-size); font-size: var(--alert-icon-size); line-height: 1; vertical-align: -0.125em; } .alert-dismiss { --alert-dismiss-size: 1.75rem; --alert-dismiss-icon-size: 0.875rem; display: inline-grid; place-items: center; inline-size: var(--alert-dismiss-size); block-size: var(--alert-dismiss-size); flex: none; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: currentColor; opacity: 0.65; cursor: pointer; } .alert-dismiss::before { content: ""; inline-size: var(--alert-dismiss-icon-size); block-size: var(--alert-dismiss-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } @media (hover: hover) { .alert-dismiss:hover { background: var(--hover-overlay); opacity: 1; } } @supports selector(.alert:has(> *)) { .alert:has(> .alert-icon, > .alert-dismiss) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: var(--items-align, start); column-gap: var(--space-30); } .alert:has(> .alert-icon) { grid-template-columns: auto minmax(0, 1fr); } .alert:has(> .alert-icon) > .alert-icon { grid-column: 1; grid-row: 1 / -1; display: inline-grid; place-items: center; margin-block-start: 0.125em; } .alert:has(> .alert-icon) > :not(.alert-icon, .alert-dismiss) { grid-column: 2; } .alert:has(> .alert-dismiss) { grid-template-columns: minmax(0, 1fr) auto; } .alert:has(> .alert-icon):has(> .alert-dismiss) { grid-template-columns: auto minmax(0, 1fr) auto; } .alert:has(> .alert-dismiss) > .alert-dismiss { grid-column: -2 / -1; grid-row: 1; } } .alert :where(a:not(.btn)) { color: inherit; font-weight: var(--font-weight-semibold); } .alert.callout { border: 0; border-inline-start: var(--alert-border-inline-start-width, 4px) solid var(--alert-border-inline-start-color, var(--intent, var(--neutral))); } .alert.admonition { padding: 0; display: block; overflow: clip; border-color: var(--intent, var(--border)); } .alert.admonition > .alert-title { display: flex; align-items: center; gap: var(--space-20); padding-block: var(--alert-pad-block); padding-inline: var(--alert-pad-inline); border-start-start-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width)); border-start-end-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width)); } .alert.admonition > .alert-title > .alert-dismiss { margin-inline-start: auto; } @supports (color: color-mix(in oklch, red, white)) { .alert.admonition > .alert-title { background: color-mix( in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)) ); } } @supports not (color: color-mix(in oklch, red, white)) { .alert.admonition > .alert-title { background: var(--intent, var(--neutral)); color: var(--intent-fg, var(--neutral-fg)); } } .alert.admonition > .alert-body { padding-block: var(--alert-pad-block); padding-inline: var(--alert-pad-inline); background: var(--surface); color: var(--text); } .alert.admonition > .alert-body > :first-child { margin-block-start: 0; } .alert.admonition > .alert-body > :last-child { margin-block-end: 0; } @media print { .alert { border: var(--border-width) solid CanvasText; break-inside: avoid; } } .actions { --gap: var(--space-20); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; } .actions > li { margin: 0; } :where(.card) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .card { --card-pad: var(--space-40); --card-gap: var(--space-30); --card-radius: var(--radius-lg); --card-max-inline-size: none; --card-bg: var(--ui-bg, var(--surface-raised)); --card-fg: var(--ui-fg, var(--text)); --heading: var(--card-fg); --busy-overlay-bg: var(--card-bg); max-inline-size: var(--card-max-inline-size); padding: var(--card-pad); background: var(--card-bg); color: var(--card-fg); border: var(--border-width) solid var(--ui-border, var(--border)); border-radius: var(--card-radius); } :where(.card) { display: flex; flex-direction: column; gap: var(--card-gap); } :where(.card) > * { min-inline-size: 0; margin-block: 0; } .card > :where(header, footer) { display: flex; flex-wrap: wrap; align-items: var(--items-align, center); justify-content: space-between; gap: var(--space-30); min-inline-size: 0; } .card > :where(header, footer) > * { min-inline-size: 0; margin-block: 0; } .card > header { align-items: var(--items-align, flex-start); } .card > footer { margin-block-start: auto; } .card.raised { box-shadow: var(--shadow); } .card.subtle { --card-bg: var(--surface-subtle); } .card.compact { --card-pad: var(--space-20); } .card > .bleed { margin-inline: calc(var(--card-pad) * -1); max-inline-size: none; } .card > .bleed:first-child { margin-block-start: calc(var(--card-pad) * -1); border-start-start-radius: inherit; border-start-end-radius: inherit; } .card > .bleed:last-child { margin-block-end: calc(var(--card-pad) * -1); border-end-start-radius: inherit; border-end-end-radius: inherit; } .card > :where(img, picture, video, canvas, svg).bleed { display: block; inline-size: calc(100% + var(--card-pad) * 2); max-inline-size: none; } .card > picture.bleed { overflow: hidden; } .card > picture.bleed > img { display: block; inline-size: 100%; block-size: auto; } .card > :where(header, footer, figure).bleed { padding: var(--card-pad); } @media print { .card { border: var(--border-width) solid CanvasText; break-inside: avoid; } } dialog.modal { --dialog-viewport-gap-default: var(--space-40); --dialog-viewport-gap-2x: calc( var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) + var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) ); position: fixed; max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size, 32rem)); --dialog-viewport-block: var(--viewport-block); max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x)); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); padding: 0; overflow: visible; opacity: 0; transform: translateY(0.35rem); transition: opacity var(--duration) var(--ease-exit), transform var(--duration) var(--ease-exit); } dialog.modal > form, dialog.modal > .stack { display: grid; gap: var(--space-40); max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x)); overflow: auto; overscroll-behavior: contain; padding: var(--space-40); } @supports (block-size: 100svh) { dialog.modal { --dialog-viewport-block: 100svh; } } @media (max-width: 30rem) { dialog.modal { --dialog-viewport-gap-default: var(--space-30); } } dialog.modal.scrollable > form, dialog.modal.scrollable > .stack { grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } dialog.modal.scrollable > form > :not(:is(header, footer)), dialog.modal.scrollable > .stack > :not(:is(header, footer)) { min-block-size: 0; overflow: auto; overscroll-behavior: contain; } dialog.modal header > :first-child, dialog.modal footer > :first-child { margin-block-start: 0; } dialog.modal header > :last-child, dialog.modal footer > :last-child { margin-block-end: 0; } dialog.modal > form > header, dialog.modal > .stack > header { padding-inline-end: calc(var(--control-size) + var(--space-30)); } dialog.modal footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap); } dialog.modal.dialog-confirmation > form { gap: 0; padding: 0; } dialog.modal.dialog-confirmation > form > .media { gap: var(--space-40); padding: var(--space-50); } dialog.modal.dialog-confirmation > form > footer { padding: var(--space-40) var(--space-50); border-end-start-radius: calc(var(--radius-lg) - var(--border-width)); border-end-end-radius: calc(var(--radius-lg) - var(--border-width)); background: var(--surface-subtle); } :where(.dialog-icon) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; } .dialog-icon { --dialog-icon-size: 3rem; --dialog-icon-glyph-size: 1.5rem; display: inline-grid; place-items: center; inline-size: var(--dialog-icon-size); block-size: var(--dialog-icon-size); flex: none; border-radius: var(--radius-full); background: var(--ui-bg, var(--surface-subtle)); color: var(--ui-fg, var(--intent, var(--text-muted))); } .dialog-icon > * { display: inline-grid; place-items: center; inline-size: var(--dialog-icon-glyph-size); block-size: var(--dialog-icon-glyph-size); font-size: var(--dialog-icon-glyph-size); line-height: 1; } @media (max-width: 30rem) { dialog.modal.dialog-confirmation > form > .media, dialog.modal.dialog-confirmation > form > footer { padding: var(--space-40); } } dialog.modal[open] { opacity: 1; transform: none; transition: opacity var(--duration) var(--ease-enter), transform var(--duration) var(--ease-enter); } @starting-style { dialog.modal[open] { opacity: 0; transform: translateY(0.35rem); } } dialog.modal::backdrop { background: var(--backdrop-fill); opacity: 0; transition: opacity var(--duration) ease; } @supports (transition-behavior: allow-discrete) { dialog.modal { transition: opacity var(--duration) var(--ease-exit), transform var(--duration) var(--ease-exit), overlay var(--duration) allow-discrete, display var(--duration) allow-discrete; } dialog.modal[open] { transition: opacity var(--duration) var(--ease-enter), transform var(--duration) var(--ease-enter), overlay var(--duration) allow-discrete, display var(--duration) allow-discrete; } dialog.modal::backdrop { transition: opacity var(--duration) ease, overlay var(--duration) allow-discrete, display var(--duration) allow-discrete; } } dialog.modal[open]::backdrop { opacity: 1; } html.has-modal-open { overflow: hidden; } html.has-modal-open.had-scrollbar { scrollbar-gutter: stable; } @starting-style { dialog.modal[open]::backdrop { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { dialog.modal.is-static { animation: actual-dialog-static var(--duration-slow) ease; } ::view-transition-group(actual-dialog) { animation-duration: var(--duration); animation-timing-function: ease; } } @keyframes actual-dialog-static { 0%, 100% { transform: none; } 35% { transform: translateX(-0.35rem); } 70% { transform: translateX(0.35rem); } } .dialog-close { --dialog-close-icon-size: 1rem; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; position: absolute; z-index: 1; inset-block-start: var(--space-20); inset-inline-end: var(--space-20); inline-size: var(--control-size); block-size: var(--control-size); background: var(--surface-subtle); } .dialog-close::before { content: ""; inline-size: var(--dialog-close-icon-size); block-size: var(--dialog-close-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } @media (hover: hover) { .dialog-close:hover { box-shadow: inset 0 0 0 999px var(--hover-overlay); color: var(--text); } } .dialog-close:active { box-shadow: inset 0 0 0 999px var(--hover-overlay); } .dialog-close:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } dialog.drawer { --drawer-size: 20rem; --drawer-pad: var(--space-40); --drawer-closed-translate: -100%; --drawer-motion-duration: var(--duration); position: fixed; inset-block-start: 0; inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size)); block-size: var(--viewport-block); max-inline-size: none; max-block-size: var(--viewport-block); margin: 0; padding: var(--drawer-pad); border: 0; border-inline-end: var(--border-width) solid var(--border); border-radius: 0; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); opacity: 0; transform: translateX(var(--drawer-closed-translate)); transition: opacity var(--drawer-motion-duration) var(--ease-exit), transform var(--drawer-motion-duration) var(--ease-exit); } dialog.drawer[open] { --drawer-motion-duration: var(--duration-slow); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-40); opacity: 1; transform: translateX(0); transition: opacity var(--drawer-motion-duration) var(--ease-enter), transform var(--drawer-motion-duration) var(--ease-enter); } dialog.drawer > form { display: grid; grid-row: 1 / -1; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-40); min-block-size: 100%; } dialog.drawer::backdrop { background: var(--backdrop-fill); opacity: 0; transition: opacity var(--drawer-motion-duration) ease; } dialog.drawer[data-side="end"] { --drawer-closed-translate: 100%; margin-inline-start: auto; margin-inline-end: 0; border-inline-end: 0; border-inline-start: var(--border-width) solid var(--border); } dialog.drawer[open]::backdrop { opacity: 1; } @starting-style { dialog.drawer[open] { opacity: 0; transform: translateX(var(--drawer-closed-translate)); } dialog.drawer[open]::backdrop { opacity: 0; } } dialog.drawer > :not(:is(header, footer, form, .drawer-close)), dialog.drawer > form > :not(:is(header, footer, .drawer-close)) { min-block-size: 0; overflow: auto; overscroll-behavior: contain; } @supports (transition-behavior: allow-discrete) { dialog.drawer { transition: opacity var(--drawer-motion-duration) var(--ease-exit), transform var(--drawer-motion-duration) var(--ease-exit), overlay var(--drawer-motion-duration) allow-discrete, display var(--drawer-motion-duration) allow-discrete; } dialog.drawer[open] { transition: opacity var(--drawer-motion-duration) var(--ease-enter), transform var(--drawer-motion-duration) var(--ease-enter), overlay var(--drawer-motion-duration) allow-discrete, display var(--drawer-motion-duration) allow-discrete; } dialog.drawer::backdrop { transition: opacity var(--drawer-motion-duration) ease, overlay var(--drawer-motion-duration) allow-discrete, display var(--drawer-motion-duration) allow-discrete; } } [dir="rtl"] dialog.drawer { --drawer-closed-translate: 100%; } dialog.drawer:dir(ltr) { --drawer-closed-translate: -100%; } dialog.drawer:dir(rtl) { --drawer-closed-translate: 100%; } [dir="rtl"] dialog.drawer[data-side="end"] { --drawer-closed-translate: -100%; } dialog.drawer[data-side="end"]:dir(ltr) { --drawer-closed-translate: 100%; } dialog.drawer[data-side="end"]:dir(rtl) { --drawer-closed-translate: -100%; } @media (prefers-reduced-motion: no-preference) { dialog.drawer.is-static { animation: actual-dialog-static var(--duration-slow) ease; } } dialog.drawer > header, dialog.drawer > form > header { padding-inline-end: calc(var(--control-size) + var(--space-30)); } .drawer-close { --drawer-close-icon-size: 1rem; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; position: absolute; z-index: 1; inset-block-start: var(--space-20); inset-inline-end: var(--space-20); inline-size: var(--control-size); block-size: var(--control-size); background: var(--surface-subtle); } .drawer-close::before { content: ""; inline-size: var(--drawer-close-icon-size); block-size: var(--drawer-close-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } @media (hover: hover) { .drawer-close:hover { box-shadow: inset 0 0 0 999px var(--hover-overlay); color: var(--text); } } .drawer-close:active { box-shadow: inset 0 0 0 999px var(--hover-overlay); } .drawer-close:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .flyout-trigger { position: relative; display: inline-block; } .flyout-trigger.stretch { display: block; inline-size: 100%; } .flyout-trigger.stretch > [aria-haspopup="menu"] { inline-size: 100%; } .flyout { --menu-item-size: var(--control-size); z-index: var(--z-menu); position: absolute; inset-block-start: calc(100% + var(--space-10)); inset-inline-start: 0; display: grid; gap: var(--space-10); inline-size: var(--flyout-inline-size, max-content); min-inline-size: min( var(--surface-anchor-width, 0px), min(var(--flyout-max-inline-size, 20rem), calc(var(--viewport-inline) - var(--space-60))) ); max-inline-size: min( var(--flyout-max-inline-size, 20rem), calc(var(--viewport-inline) - var(--space-60)) ); max-block-size: min( 24rem, var(--available-height, calc(var(--viewport-block) - var(--space-60))) ); overflow: auto; margin: 0; padding: var(--space-10); border: var(--border-width) solid var(--border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-popout); list-style: none; opacity: 1; transition: opacity var(--duration-fast) ease; } .flyout[popover] { position: fixed; inset: auto; margin: 0; } .flyout[popover]:not(:popover-open) { display: none; opacity: 0; } .flyout:is(.is-open, :popover-open) { inset: auto; } @starting-style { .flyout:is(.is-open, :popover-open) { opacity: 0; } } .flyout[hidden] { display: none; opacity: 0; } @supports (transition-behavior: allow-discrete) { .flyout { transition: opacity var(--duration-fast) ease, overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; } } .flyout > li { margin: 0; } .flyout > :where(section, footer) { min-inline-size: 0; padding: var(--space-20); } .flyout > section > :where(h1, h2, h3, h4, h5, h6) { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .flyout > section > ul { display: grid; gap: var(--space-10); margin: var(--space-10) 0 0; padding: 0; list-style: none; } .flyout > section > ul > li { margin: 0; } .menu { display: grid; gap: var(--space-10); margin: 0; padding: var(--space-10); list-style: none; } .menu > li { margin: 0; } :where(.menu-item) { --intent: initial; --intent-fg: initial; } .menu-item { --menu-item-icon-size: 1.25em; display: flex; align-items: center; gap: var(--space-20); inline-size: 100%; min-block-size: var(--menu-item-size, var(--control-size)); padding-inline: var(--space-20); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--intent, var(--text)); font: inherit; font-size: var(--control-font-size); text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; } .menu-item-icon { display: grid; flex: 0 0 var(--menu-item-icon-size); inline-size: var(--menu-item-icon-size); place-items: center; } .menu-item-text { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } .menu-item-end { display: inline-flex; align-items: center; gap: var(--space-10); margin-inline-start: auto; color: var(--text-muted); } .menu-item:is([role="menuitemcheckbox"], [role="menuitemradio"])::before { content: ""; display: block; flex: 0 0 var(--menu-item-icon-size); inline-size: var(--menu-item-icon-size); block-size: var(--menu-item-icon-size); } .menu-item[role="menuitemcheckbox"][aria-checked="true"]::before { background: currentColor; -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; } .menu-item[role="menuitemcheckbox"][aria-checked="mixed"]::before { background: linear-gradient(currentColor 0 0) center / 60% max(var(--border-width), 0.125em) no-repeat; } .menu-item[role="menuitemradio"]::before { background: radial-gradient(circle, transparent 0 46%, currentColor 48% 58%, transparent 60%); } .menu-item[role="menuitemradio"][aria-checked="true"]::before { background: radial-gradient( circle, currentColor 0 25%, transparent 27% 46%, currentColor 48% 58%, transparent 60% ); } .menu-item:focus-visible { background: var(--surface-subtle); } .menu-item:hover:not(:where(:disabled, [aria-disabled="true"])) { background: var(--surface-subtle); } .menu-item:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: var(--disabled-opacity); } .menu-label { padding: var(--space-20); color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .menu-separator { margin: 0; border: 0; border-block-start: var(--border-width) solid var(--border); } .tooltip { --tooltip-bg: var(--surface-solid); --tooltip-fg: var(--surface); --tooltip-arrow-size: 5px; position: fixed; max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem)); padding: 0.25em 0.6em; border-radius: var(--radius-sm); border: var(--border-width) solid transparent; background: var(--tooltip-bg); color: var(--tooltip-fg); font-size: var(--font-size-xs); line-height: var(--line-height-tight); overflow-wrap: anywhere; pointer-events: auto; user-select: none; opacity: 1; transition: opacity var(--duration-fast) ease; } .tooltip[popover] { inset: auto; margin: 0; overflow: visible; } .tooltip[popover]:not(:popover-open) { display: none; opacity: 0; } .tooltip[hidden] { display: none; opacity: 0; } @starting-style { .tooltip:popover-open { opacity: 0; } } @supports (transition-behavior: allow-discrete) { .tooltip { transition: opacity var(--duration-fast) ease, overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; } } .tooltip::before { content: ""; position: absolute; inline-size: calc(var(--tooltip-arrow-size) * 2); block-size: var(--tooltip-arrow-size); background: var(--tooltip-bg); } .tooltip[data-placement^="top"]::before { bottom: calc(-0.98 * var(--tooltip-arrow-size)); left: var(--arrow-x, 50%); translate: -50% 0; clip-path: polygon(50% 100%, 0 0, 100% 0); } .tooltip[data-placement^="bottom"]::before { top: calc(-0.98 * var(--tooltip-arrow-size)); left: var(--arrow-x, 50%); translate: -50% 0; clip-path: polygon(50% 0, 0 100%, 100% 100%); } .tooltip[data-placement^="left"]::before { right: calc(-0.98 * var(--tooltip-arrow-size)); top: var(--arrow-y, 50%); inline-size: var(--tooltip-arrow-size); block-size: calc(var(--tooltip-arrow-size) * 2); translate: 0 -50%; clip-path: polygon(100% 50%, 0 0, 0 100%); } .tooltip[data-placement^="right"]::before { left: calc(-0.98 * var(--tooltip-arrow-size)); top: var(--arrow-y, 50%); inline-size: var(--tooltip-arrow-size); block-size: calc(var(--tooltip-arrow-size) * 2); translate: 0 -50%; clip-path: polygon(0 50%, 100% 0, 100% 100%); } .accordion { --accordion-radius: var(--radius); --accordion-marker-color: var(--text-muted); border: var(--border-width) solid var(--border); border-radius: var(--accordion-radius); background: var(--surface-raised); } .accordion > details + details { border-block-start: var(--border-width) solid var(--border); } .accordion summary { display: flex; align-items: center; gap: var(--space-30); cursor: pointer; list-style: none; padding: var(--space-40); color: var(--text); font-weight: var(--font-weight-medium); } .accordion summary:hover::after { --accordion-marker-color: currentColor; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { content: ""; flex: 0 0 auto; margin-inline-start: auto; inline-size: 1rem; block-size: 1rem; background-color: var(--accordion-marker-color); -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; transition: transform var(--duration); } .accordion details[open] summary::after { transform: rotate(180deg); } .accordion details > summary + * { padding-block: 0 var(--space-40); padding-inline: var(--space-40); color: var(--text-muted); margin-block: 0; } .accordion details[open] > summary + * { padding-block-start: var(--space-10); } .accordion details > summary + * > :first-child { margin-block-start: 0; } .accordion details > summary + ul, .accordion details > summary + ol { margin: 0; padding-inline-start: 2rem; } .accordion.flush { border: 0; border-radius: 0; background: transparent; } .accordion.flush summary, .accordion.flush details > summary + * { padding-inline: 0; } .accordion.separated { display: grid; gap: var(--space-20); border: 0; background: transparent; } .accordion.separated > details { border: var(--border-width) solid var(--border); border-radius: var(--accordion-radius); background: var(--surface-raised); } @media (forced-colors: active) { .accordion { --accordion-marker-color: CanvasText; } } :where(.spinner) { --intent: initial; } .spinner { --spinner-size: 1em; --spinner-width: 0.125em; --spinner-track: currentColor; --spinner-value: transparent; color: var(--intent, currentColor); display: inline-block; flex-shrink: 0; inline-size: var(--spinner-size); block-size: var(--spinner-size); border: var(--spinner-width) solid var(--spinner-track); border-inline-end-color: var(--spinner-value); border-radius: var(--radius-full); opacity: 0.85; vertical-align: text-bottom; } @supports (color: color-mix(in oklch, red, white)) { .spinner { --spinner-track: color-mix(in oklch, currentColor, transparent 70%); --spinner-value: currentColor; opacity: 1; } } .spinner.sm { --spinner-size: 0.75em; } .spinner.lg { --spinner-size: 2rem; --spinner-width: 3px; } @media (prefers-reduced-motion: no-preference) { .spinner { animation: actual-spin var(--duration-spin) linear infinite; } } @keyframes actual-spin { to { transform: rotate(360deg); } } .skeleton { --skeleton-size: 1rem; --skeleton-width: none; --skeleton-radius: var(--radius); --skeleton-track: var(--surface-subtle); --skeleton-highlight: var(--surface-raised); display: block; inline-size: 100%; max-inline-size: var(--skeleton-width); block-size: var(--skeleton-size); border-radius: var(--skeleton-radius); background: linear-gradient(90deg, var(--skeleton-track), var(--skeleton-highlight), var(--skeleton-track)) 0 0 / 200% 100%; } @media (prefers-reduced-motion: no-preference) { .skeleton { animation: actual-skeleton var(--duration-shimmer) ease-in-out infinite; } } .skeleton[data-shape="text"] { --skeleton-size: 0.85rem; --skeleton-width: 32rem; } .skeleton[data-shape="title"] { --skeleton-size: 1.4rem; --skeleton-width: 18rem; } .skeleton[data-shape="avatar"] { --skeleton-size: var(--avatar-size, 2.25rem); --skeleton-radius: var(--radius-full); inline-size: var(--skeleton-size); flex: 0 0 auto; } .skeleton[data-shape="box"] { --skeleton-size: 8rem; } @media (forced-colors: active) { .skeleton { border: var(--border-width) solid ButtonText; background: GrayText; } } @keyframes actual-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } [aria-busy] > .spinner:last-child { display: none; } [aria-busy="true"] > .spinner:last-child { display: inline-block; } @supports selector([aria-busy="true"]:has(> .spinner:last-child)) { [aria-busy="true"]:not(.btn):has(> .spinner:last-child) { position: relative; } [aria-busy="true"]:not(.btn):has(> .spinner:last-child)::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--busy-overlay-bg, var(--surface)); } [aria-busy="true"]:not(.btn) > .spinner:last-child { --spinner-size: 2rem; position: absolute; inset: 0; z-index: 2; margin: auto; display: block; } } @supports (selector([aria-busy="true"]:has(> .spinner:last-child))) and (color: color-mix(in oklch, red, white)) { [aria-busy="true"]:not(.btn):has(> .spinner:last-child)::before { background: color-mix(in oklch, var(--busy-overlay-bg, var(--surface)), transparent 20%); } } :where(.progress) { --intent: initial; } .progress { --progress-track: var(--surface-subtle); --progress-value: var(--intent, var(--primary)); appearance: none; -webkit-appearance: none; display: block; inline-size: 100%; block-size: var(--bar-height); overflow: hidden; border: 0; border-radius: var(--radius-full); background: var(--progress-track); } .progress::-webkit-progress-bar { block-size: var(--bar-height); border-radius: var(--radius-full); background: var(--progress-track); } .progress::-webkit-progress-value { block-size: var(--bar-height); border-radius: var(--radius-full); background: var(--progress-value); } .progress::-moz-progress-bar { block-size: var(--bar-height); border-radius: var(--radius-full); background: var(--progress-value); } .progress:indeterminate { background: linear-gradient(to right, var(--progress-value) 30%, var(--progress-track) 30%) top left / 150% 150% no-repeat, var(--progress-track); } .progress:indeterminate::-webkit-progress-bar { background: transparent; } .progress:indeterminate::-webkit-progress-value { background: transparent; } .progress:indeterminate::-moz-progress-bar { background: transparent; } @media (prefers-reduced-motion: no-preference) { .progress:indeterminate { animation: actual-progress-indeterminate var(--duration-shimmer) ease-in-out infinite; } :where([dir="rtl"] .progress:indeterminate) { animation-direction: reverse; } } @keyframes actual-progress-indeterminate { 0% { background-position: 200% 0; } 20% { background-position: 100% 0; } 80% { background-position: -100% 0; } 100% { background-position: -200% 0; } } @media (forced-colors: active) { .progress::-webkit-progress-value, .progress:indeterminate::-webkit-progress-value { background: Highlight; } .progress::-moz-progress-bar, .progress:indeterminate::-moz-progress-bar { background: Highlight; } } :where(.status-bar) { --intent: initial; --intent-fg: initial; } .status-bar { --status-bg: var(--intent, var(--text)); --status-fg: var(--intent-fg, var(--surface)); position: fixed; inset-block-end: calc(var(--space-40) + var(--status-viewport-offset, 0px)); inset-inline: var(--space-40); z-index: var(--z-status); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-20); inline-size: fit-content; max-inline-size: min(calc(var(--viewport-inline) - var(--space-60)), 32rem); margin-inline: auto; overflow-wrap: anywhere; padding-block: var(--space-20); padding-inline: var(--space-30); border-radius: var(--radius-full); background: var(--status-bg); color: var(--status-fg); box-shadow: var(--shadow-popout); opacity: 0; translate: 0 var(--space-30); pointer-events: none; transition: opacity var(--duration-fast) var(--ease-exit), translate var(--duration) var(--ease-exit), background-color var(--duration) ease; } .status-bar.is-open { opacity: 1; translate: 0 0; transition: opacity var(--duration) var(--ease-enter), translate var(--duration-slow) var(--ease-enter), background-color var(--duration) ease; } :where(.avatar) { --intent: initial; --intent-fg: initial; } .avatar { --avatar-size: var(--avatar-stack-size, 2.25rem); --avatar-radius: var(--radius-full); --avatar-font-size: var(--avatar-stack-font-size, var(--font-size-sm)); --avatar-bg: var(--intent, var(--surface-subtle)); --avatar-fg: var(--intent-fg, var(--tone-fg, var(--text-muted))); position: relative; display: inline-grid; place-items: center; inline-size: var(--avatar-size); block-size: var(--avatar-size); overflow: visible; padding: 0; border: 0; border-radius: var(--avatar-radius); background: var(--avatar-bg); color: var(--avatar-fg); font: inherit; font-size: var(--avatar-font-size); font-weight: var(--font-weight-semibold); line-height: 1; text-decoration: none; vertical-align: middle; user-select: none; transition: box-shadow var(--duration), opacity var(--duration), transform var(--duration); } @media (forced-colors: active) { .avatar { border: var(--border-width) solid CanvasText; } :where(a.avatar, button.avatar)::after { display: none; } } .avatar > :first-child:not(:where(img, picture, .badge)) { display: inline-grid; place-items: center; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: inherit; text-decoration: none; } .avatar > img, .avatar > picture { display: block; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: inherit; } .avatar > img, .avatar > picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; } .avatar > picture > img { display: block; } button.avatar { appearance: none; cursor: pointer; } :where(a.avatar, button.avatar)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hover-overlay); opacity: 0; pointer-events: none; transition: opacity var(--duration); } :where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):hover::after { opacity: 1; } :where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):active { transform: translateY(1px); } button.avatar:disabled, a.avatar[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); } a.avatar[aria-disabled="true"] { pointer-events: none; } .avatar.sm { --avatar-stack-size: 1.75rem; --avatar-stack-font-size: var(--font-size-xs); } .avatar.lg { --avatar-stack-size: 3rem; --avatar-stack-font-size: var(--font-size-lg); } .avatar > .badge:empty { --avatar-status-translate-x: 50%; position: absolute; inset-block-end: var(--indicator-offset); inset-inline-end: var(--indicator-offset); z-index: 1; box-shadow: 0 0 0 2px var(--indicator-ring); transform: translate(var(--avatar-status-translate-x), 50%); } [dir="rtl"] .avatar > .badge:empty { --avatar-status-translate-x: -50%; } .avatar:dir(ltr) > .badge:empty { --avatar-status-translate-x: 50%; } .avatar:dir(rtl) > .badge:empty { --avatar-status-translate-x: -50%; } .avatar-stack { --avatar-stack-overlap: calc(var(--avatar-stack-size, 2.25rem) / -4); --avatar-stack-ring: 2px; display: inline-flex; align-items: center; } .avatar-stack.sm { --avatar-stack-size: 1.75rem; --avatar-stack-font-size: var(--font-size-xs); } .avatar-stack.lg { --avatar-stack-size: 3rem; --avatar-stack-font-size: var(--font-size-lg); } @supports selector(:has(> .avatar)) { .avatar-stack:has(> .avatar.sm) { --avatar-stack-size: 1.75rem; --avatar-stack-font-size: var(--font-size-xs); } .avatar-stack:has(> .avatar.lg) { --avatar-stack-size: 3rem; --avatar-stack-font-size: var(--font-size-lg); } } .avatar-stack > .avatar { box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface); } .avatar-stack > .avatar + .avatar { margin-inline-start: var(--avatar-stack-overlap); } .avatar-stack > .avatar:is(:hover, :focus-visible) { z-index: 1; } .indicator { position: relative; } .indicator-item { --indicator-translate-x: 50%; --indicator-translate-y: -50%; position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; transform: translate(var(--indicator-translate-x), var(--indicator-translate-y)); } .indicator-item.start { --indicator-translate-x: -50%; inset-inline-start: 0; inset-inline-end: auto; } .indicator-item.bottom { --indicator-translate-y: 50%; inset-block-start: auto; inset-block-end: 0; } [dir="rtl"] .indicator-item { --indicator-translate-x: -50%; } .indicator-item:dir(ltr) { --indicator-translate-x: 50%; } .indicator-item:dir(rtl) { --indicator-translate-x: -50%; } [dir="rtl"] .indicator-item.start { --indicator-translate-x: 50%; } .indicator-item.start:dir(ltr) { --indicator-translate-x: -50%; } .indicator-item.start:dir(rtl) { --indicator-translate-x: 50%; } .key { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.75em; min-block-size: 1.6em; padding-inline: 0.45em; border: var(--border-width) solid var(--border); border-block-end-width: calc(var(--border-width) * 2); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font-family: var(--font-mono); font-size: 0.875em; font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap; vertical-align: 0.08em; } .key.sm { font-size: var(--font-size-xs); } .key.lg { font-size: var(--font-size-md); } .chat { --chat-gap: var(--space-30); --chat-max-size: min(85%, 40rem); display: grid; grid-auto-rows: min-content; column-gap: var(--chat-gap); } .chat-start { grid-template-columns: auto minmax(0, 1fr); justify-items: start; } .chat-end { grid-template-columns: minmax(0, 1fr) auto; justify-items: end; } .chat-avatar { grid-row: 1 / span 3; align-self: end; } .chat-start > .chat-avatar { grid-column: 1; } .chat-end > .chat-avatar { grid-column: 2; } .chat-header, .chat-footer { display: flex; gap: var(--space-10); color: var(--text-muted); font-size: var(--font-size-xs); } .chat-start > :is(.chat-header, .chat-bubble, .chat-footer) { grid-column: 2; } .chat-end > :is(.chat-header, .chat-bubble, .chat-footer) { grid-column: 1; } :where(.chat-bubble) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .chat-bubble { --chat-bubble-bg: var(--ui-bg, var(--intent, var(--surface-subtle))); --chat-bubble-fg: var(--ui-fg, var(--intent-fg, var(--text))); --chat-bubble-border: var(--ui-border, transparent); inline-size: fit-content; max-inline-size: var(--chat-max-size); padding: var(--space-20) var(--space-30); border: var(--border-width) solid var(--chat-bubble-border); border-radius: var(--radius-lg); background: var(--chat-bubble-bg); color: var(--chat-bubble-fg); overflow-wrap: anywhere; } .chat-start > .chat-bubble { border-end-start-radius: var(--radius-sm); } .chat-end > .chat-bubble { border-end-end-radius: var(--radius-sm); } @supports selector(:has(*)) { .chat:not(:has(> .chat-avatar)) { column-gap: 0; } } .fab { --fab-offset: var(--space-40); --fab-gap: var(--space-20); --fab-icon-size: 1.5rem; position: fixed; z-index: var(--z-menu); inset-block-end: max(var(--fab-offset), env(safe-area-inset-bottom)); inset-inline-end: var(--fab-offset); } .fab > summary { position: relative; list-style: none; cursor: pointer; } .fab > summary::-webkit-details-marker { display: none; } .fab > summary::before, .fab > summary::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: var(--fab-icon-size); block-size: var(--fab-icon-size); background: currentColor; opacity: 0; transform: scale(0.8); transition: opacity var(--duration), transform var(--duration); } .fab > summary::before { -webkit-mask: var(--icon-plus) center / contain no-repeat; mask: var(--icon-plus) center / contain no-repeat; opacity: 1; transform: none; } .fab > summary::after { -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } .fab-actions { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + var(--fab-gap)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--fab-gap); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--space-10)); transition: opacity var(--duration), transform var(--duration), visibility 0s linear var(--duration); } .fab-action { display: flex; align-items: center; justify-content: flex-end; gap: var(--fab-gap); inline-size: max-content; max-inline-size: calc(var(--viewport-inline) - var(--fab-offset) - var(--fab-offset)); } .fab-label { flex: 0 1 auto; overflow: hidden; max-inline-size: 16rem; padding: var(--space-10) var(--space-20); border-radius: var(--radius); border: var(--border-width) solid transparent; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); text-overflow: ellipsis; white-space: nowrap; } .fab[open] > .fab-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .fab[open] > summary::before { opacity: 0; transform: scale(0.8); } .fab[open] > summary::after { opacity: 1; transform: none; } :where(.rating) { --intent: initial; } .rating { --rating-size: 1.25rem; --rating-gap: 0.1rem; --rating-color: var(--intent, var(--warning)); --rating-empty: var(--border); --rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 16 16'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.783.57-1.838-.196-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292Z'/%3E%3C/svg%3E"); display: inline-flex; gap: 0; color: var(--rating-color); } .rating > input[type="radio"] { appearance: none; flex: 0 0 auto; inline-size: calc(var(--rating-size) + var(--rating-gap)); block-size: var(--rating-size); margin: 0; border: 0; background: var(--rating-empty); -webkit-mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat; mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat; cursor: pointer; transition: background-color var(--duration); } .rating > input[type="radio"]:checked { background: var(--rating-color); } .rating > input[type="radio"]:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); } .rating > input[type="radio"]:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); background: var(--rating-color); } @supports selector(:has(*)) { .rating > input[type="radio"]:has(~ input[type="radio"]:checked) { background: var(--rating-color); } @media (hover: hover) { .rating > input[type="radio"]:not(:disabled):hover, .rating > input[type="radio"]:has(~ input[type="radio"]:not(:disabled):hover) { background: var(--rating-color); } .rating > input[type="radio"]:not(:disabled):hover ~ input[type="radio"] { background: var(--rating-empty); } } } .rating.sm { --rating-size: 1rem; } .rating.lg { --rating-size: 1.75rem; } @media (forced-colors: active) { .rating > input[type="radio"] { appearance: auto; inline-size: auto; block-size: auto; background: Canvas; -webkit-mask: none; mask: none; opacity: 1; } } .steps { --step-size: 1.75rem; --step-inline-gap: var(--space-20); --step-line-size: var(--border-width); --step-marker-bg: var(--surface); --step-marker-border: var(--border); --step-marker-fg: var(--text-muted); --step-marker-radius: var(--radius-full); --step-line: var(--border); counter-reset: actual-step; display: flex; margin: 0; padding: 0; list-style: none; } .steps > li { position: relative; color: var(--text-muted); counter-increment: actual-step; } .steps > li::before { content: counter(actual-step); position: relative; z-index: 1; display: inline-grid; place-items: center; inline-size: var(--step-size); block-size: var(--step-size); border: var(--border-width) solid var(--step-marker-border); border-radius: var(--step-marker-radius); background: var(--step-marker-bg); color: var(--step-marker-fg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1; } .steps .step-label { font-size: var(--font-size-sm); line-height: var(--line-height-tight); color: inherit; } .steps > li:not(:last-child)::after { content: ""; } .steps > .step-complete { --step-marker-bg: var(--state-selected); --step-marker-border: var(--state-selected); --step-marker-fg: var(--state-selected-fg); --step-line: var(--state-selected); color: var(--text); } .steps > [aria-current="step"] { --step-marker-bg: var(--surface); --step-marker-border: var(--state-selected); --step-marker-fg: var(--state-selected); --step-line: var(--border); color: var(--text); } .steps > [aria-current="step"]::before { border-width: calc(var(--border-width) * 2); } .steps > .step-complete:not([aria-current="step"])::before { content: var(--step-complete-mark, counter(actual-step)); } .steps-horizontal { --step-min: 7rem; --step-gap: var(--space-20); inline-size: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; } .steps-horizontal:has(a[href]) { padding-block: calc(var(--focus-outline-offset) + var(--border-width) * 2); } .steps-horizontal > li { display: grid; flex: 1 0 var(--step-min); grid-template-rows: var(--step-size); gap: var(--step-gap); justify-items: center; min-inline-size: max(var(--step-size), var(--step-min)); text-align: center; } .steps-horizontal > li:empty { flex: 1 1 0; justify-items: start; min-inline-size: var(--step-size); } .steps-horizontal > li:empty::after { inset-inline-start: var(--step-size); } .steps-horizontal > li:empty:last-child { flex: 0 0 auto; } .steps-horizontal > li::after { position: absolute; inset-block-start: 0; inset-inline-start: calc(50% + var(--step-size) / 2); inline-size: calc(100% - var(--step-size)); block-size: var(--step-size); background: var( --step-connector, linear-gradient(var(--step-line), var(--step-line)) center / 100% var(--step-line-size) no-repeat ); } @container actual-container (inline-size >= 60rem) { .steps-horizontal:has(.step-label) > li { display: flex; flex: 1 1 auto; align-items: center; gap: var(--step-inline-gap); min-inline-size: 0; text-align: start; white-space: nowrap; } .steps-horizontal:has(.step-label) > li::after { position: static; flex: 1 1 2rem; inline-size: auto; block-size: var(--step-size); margin-inline-end: var(--step-inline-gap); background: var( --step-inline-connector, var( --step-connector, linear-gradient(var(--step-line), var(--step-line)) center / 100% var(--step-line-size) no-repeat ) ); } .steps-horizontal:has(.step-label) > li:last-child { flex: 0 0 auto; } } .steps-vertical { --step-vertical-gap: var(--space-40); flex-direction: column; gap: var(--step-vertical-gap); } .steps-vertical > li { display: grid; grid-template-columns: var(--step-size) minmax(0, 1fr); align-items: start; justify-items: start; gap: var(--step-inline-gap); min-block-size: var(--step-size); } .steps-vertical > li:empty { grid-template-columns: var(--step-size); } .steps-vertical > li > .step-label { align-self: center; } .steps-vertical > li::after { position: absolute; inset-block-start: var(--step-size); inset-inline-start: calc((var(--step-size) - var(--step-line-size)) / 2); inline-size: var(--step-line-size); block-size: calc(100% - var(--step-size) + var(--step-vertical-gap)); background: linear-gradient(var(--step-line), var(--step-line)) center / var(--step-line-size) 100% no-repeat; } :where(.app-nav) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .app-nav { --app-nav-size: 4rem; --app-nav-gap: var(--space-10); --app-nav-icon-size: 1.5rem; position: sticky; inset-block-end: 0; z-index: var(--z-sticky); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--app-nav-gap); min-block-size: calc(var(--app-nav-size) + env(safe-area-inset-bottom)); padding-block: var(--space-10) max(var(--space-10), env(safe-area-inset-bottom)); padding-inline: var(--space-10); border-block-start: var(--border-width) solid var(--ui-border, var(--border)); background: var(--ui-bg, var(--surface)); color: var(--ui-fg, var(--text-muted)); } .app-nav > a { display: grid; grid-template-rows: auto auto; place-content: center; justify-items: center; gap: var(--space-10); min-inline-size: 0; min-block-size: var(--control-size-lg); padding-inline: var(--space-10); border-radius: var(--radius); color: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); text-align: center; text-decoration: none; overflow-wrap: anywhere; } .app-nav > a > :where(svg, img, [aria-hidden="true"]) { inline-size: var(--app-nav-icon-size); block-size: var(--app-nav-icon-size); font-size: var(--app-nav-icon-size); line-height: 1; } .app-nav > a:hover { background: var(--surface-subtle); color: var(--text); } .app-nav > a[aria-current="page"] { background: var(--state-selected); color: var(--state-selected-fg); } @media (forced-colors: active) { .app-nav > a[aria-current="page"] { background: Highlight; color: HighlightText; } } :where(.navbar) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .navbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: var(--space-30); padding-inline: var(--space-40); border: var(--border-width) solid var(--ui-border, var(--border)); border-radius: var(--radius-lg); background: var(--ui-bg, var(--surface-raised)); color: var(--ui-fg, var(--text)); } .navbar-brand { display: inline-flex; align-items: center; gap: var(--space-20); color: var(--ui-fg, var(--text)); font-weight: var(--font-weight-bold); text-decoration: none; } .navbar-brand:focus-visible { border-radius: var(--radius-sm); } .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin: 0; padding: 0; list-style: none; } .nav-link { display: inline-flex; align-items: center; min-block-size: var(--control-size-sm); padding-inline: var(--space-20); border-radius: var(--radius); color: var(--ui-fg, var(--text-muted)); font-weight: var(--font-weight-medium); text-decoration: none; } .nav-link[aria-current] { background: var(--surface-subtle); color: var(--state-selected); } .nav-link:hover { background: var(--surface-subtle); color: var(--text); } .nav-link[aria-current]:hover { color: var(--state-selected); } .nav-list { display: grid; grid-template-columns: minmax(0, 1fr); --gap: var(--space-20); gap: var(--gap); margin: 0; padding: 0; list-style: none; } .nav-list > li { margin: 0; } .nav-list .nav-link { position: relative; inline-size: 100%; } .nav-list .nav-link[aria-current]::before { content: ""; position: absolute; inset-block: var(--space-20); inset-inline-start: 0; border-inline-start: 2px solid currentColor; } .breadcrumb { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin: 0; padding: 0; color: var(--text-subtle); font-size: var(--font-size-sm); list-style: none; } .breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-10); } .breadcrumb li + li::before { content: "/"; color: var(--text-subtle); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:not([aria-current="page"]):hover { color: var(--text); text-decoration: underline; } .breadcrumb a:focus-visible { border-radius: var(--radius-sm); } .breadcrumb :where(li, a, span)[aria-current="page"] { color: var(--text); font-weight: var(--font-weight-medium); } .pagination { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin: 0; padding: 0; list-style: none; font-size: var(--control-font-size); font-variant-numeric: tabular-nums; } .pagination .btn { --btn-pad-x: var(--space-20); min-inline-size: var(--control-size); } .pagination > li > [aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--control-size); } :where(.tab) { --intent: initial; } .tabs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-10); margin: 0; padding: 0; border-block-end: var(--border-width) solid var(--border); list-style: none; } .tabs:where([aria-orientation="vertical"]) { display: grid; align-content: start; justify-items: stretch; border-block-end: 0; border-inline-end: var(--border-width) solid var(--border); } .tab { position: relative; display: inline-flex; align-items: center; gap: var(--tab-gap, 0.375em); min-block-size: var(--control-size); padding-inline: var(--space-30); border: 0; border-radius: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--control-font-size); font-weight: var(--font-weight-semibold); text-decoration: none; cursor: pointer; } .tabs:where([aria-orientation="vertical"]) .tab { justify-content: flex-start; padding-inline-end: var(--space-40); } .tab:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: var(--disabled-opacity); } .tab:hover:not(:where(:disabled, [aria-disabled="true"])) { color: var(--text); } .tab:focus-visible { outline: var(--focus-outline); outline-color: var(--focus); outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tabs:where([aria-orientation="vertical"]) .tab:focus-visible { border-start-start-radius: var(--radius-sm); border-start-end-radius: 0; border-end-start-radius: var(--radius-sm); border-end-end-radius: 0; } .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--intent, var(--state-selected)); } .tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; border-block-end: 2px solid currentColor; } .tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after, .tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after { inset-block: 0; inset-inline: auto 0; border-block-end: 0; border-inline-end: 2px solid currentColor; } @supports selector(.scrollspy a:target-current) { .scrollspy { scroll-target-group: auto; } .scrollspy a:target-current { color: var(--text); font-weight: var(--font-weight-medium); } } .data-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: var(--space-20) var(--space-40); } .data-list > dt { min-inline-size: 0; margin-block-start: 0; font-weight: var(--font-weight-semibold); } .data-list > dd { min-inline-size: 0; margin: 0; } .list { --list-item-min-size: var(--control-size-lg); --list-item-pad-block: var(--space-30); --list-item-pad-inline: 0; --list-item-gap: var(--gap); --list-divider: var(--border-width) solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border-block-start: var(--list-divider); list-style: none; } .list > li { margin: 0; } .list > :where(.list-item), .list > li > .list-item { display: flex; align-items: start; gap: var(--list-item-gap); min-block-size: var(--list-item-min-size); padding-block: var(--list-item-pad-block); padding-inline: var(--list-item-pad-inline); } .list > .list-item + .list-item, .list > li + li { border-block-start: var(--list-divider); } a.list-item { position: relative; color: inherit; text-decoration: none; } a.list-item:hover { background: var(--surface-subtle); } a.list-item[aria-current] { background: var(--surface-subtle); } a.list-item[aria-current]::before { content: ""; position: absolute; inset-block: var(--list-item-pad-block); inset-inline-start: 0; border-inline-start: 2px solid var(--state-selected); } .list-item-content { flex: 1 1 0; min-inline-size: 0; } .list-item-title, .list-item-text { display: block; margin: 0; overflow-wrap: anywhere; } .list-item-text { color: var(--text-muted); font-size: var(--font-size-sm); } .list-item-trailing { flex: none; margin-inline-start: auto; min-inline-size: 0; } @media print { .list > :where(.list-item), .list > li > .list-item { break-inside: avoid; } } .table-wrap { position: relative; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; overflow-x: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); } .table { --table-min: 100%; --table-cell-pad: var(--space-30); inline-size: max(var(--table-min), 100%); border-collapse: collapse; background: transparent; color: var(--text); font-size: var(--font-size-md); } .table caption { padding: var(--table-cell-pad); color: var(--text-muted); text-align: var(--text-align, start); } .table th, .table td { padding: var(--table-cell-pad); border-block-end: var(--border-width) solid var(--border); text-align: var(--text-align, start); vertical-align: baseline; } .table th { color: var(--text-muted); font-weight: var(--font-weight-semibold); } .table thead th { vertical-align: bottom; } .table thead { background: var(--surface-subtle); } .table tbody tr:hover { background-color: var(--hover-overlay); } .table > tr:last-child > *, .table > :last-child > tr:last-child > * { border-block-end: 0; } .table.compact { --table-cell-pad: var(--space-20); } .meter { appearance: none; -webkit-appearance: none; display: block; inline-size: 100%; block-size: var(--bar-height); overflow: hidden; border: 0; border-radius: var(--radius-full); background: var(--surface-subtle); } .meter:not(meter) { --intent: initial; display: flex; } .meter:not(meter) > * { flex: var(--meter-value, 1) 1 0; min-inline-size: 0; background: var(--intent); } .meter:not(meter) > * + * { border-inline-start: var(--border-width) solid var(--surface); } .meter::-webkit-meter-bar { -webkit-appearance: none; block-size: var(--bar-height); border: 0; border-radius: var(--radius-full); background: var(--surface-subtle); } .meter::-webkit-meter-optimum-value { block-size: var(--bar-height); border-radius: var(--radius-full); background: var(--success); } .meter::-webkit-meter-suboptimum-value { block-size: var(--bar-height); border-radius: var(--radius-full); background: var(--warning); } .meter::-webkit-meter-even-less-good-value { block-size: var(--bar-height); border-radius: var(--radius-full); background: var(--danger); } .meter::-moz-meter-bar { block-size: var(--bar-height); border-radius: var(--radius-full); } @media (forced-colors: active) { .meter::-webkit-meter-optimum-value, .meter::-webkit-meter-suboptimum-value, .meter::-webkit-meter-even-less-good-value { background: Highlight; } .meter::-moz-meter-bar { background: Highlight; } } .join { --join-radius: var(--radius); --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; align-items: stretch; display: inline-flex; } .join.circle { --join-radius: var(--radius-full); } .join-addon { --control-border: var(--border); --control-bg: var(--surface-subtle); --control-fg: var(--text-muted); align-items: center; display: inline-flex; justify-content: center; min-block-size: var(--control-size); padding-inline: var(--space-30); border: var(--border-width) solid var(--control-border); border-radius: var(--radius); background: var(--control-bg); color: var(--control-fg); font-size: var(--control-font-size); line-height: 1; white-space: nowrap; } .join > * { border-start-start-radius: var(--join-ss); border-start-end-radius: var(--join-se); border-end-end-radius: var(--join-ee); border-end-start-radius: var(--join-es); } .join > .btn.icon-only { block-size: auto; } .join > :first-child { --join-ss: var(--join-radius); --join-es: var(--join-radius); } .join > :last-child { --join-se: var(--join-radius); --join-ee: var(--join-radius); } .join > :only-child { --join-ss: var(--join-radius); --join-se: var(--join-radius); --join-es: var(--join-radius); --join-ee: var(--join-radius); } .join > * + * { margin-inline-start: calc(var(--border-width) * -1); } .join > :is(:hover, :focus, :focus-within) { z-index: 1; } .join > :is(:focus, :focus-within) { z-index: 4; } .join > :is(.input, .textarea, .select) { z-index: 3; } .join:has(> :is(.input, .textarea, .select):focus-visible) { border-radius: var(--join-radius); outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .join:has(> :is(.input, .textarea, .select)) > :is(.input, .textarea, .select):focus-visible { outline: none; box-shadow: none; } .join:has(> :is(.input, .textarea, .select)) > .btn.outline { --btn-border-color: var(--intent, var(--border)); } @property --aura-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } :where(.aura) { --intent: initial; --intent-fg: initial; } .aura { --aura-color: var(--intent, var(--primary)); --aura-width: 2px; --aura-blur: 0.25rem; --aura-intensity: 1; --aura-radius: var(--radius-lg); --aura-duration: 6s; position: relative; isolation: isolate; display: inline-grid; padding: var(--aura-width); border-radius: calc(var(--aura-radius) + var(--aura-width)); border: var(--border-width) solid transparent; background: var(--aura-color); background: conic-gradient( from var(--aura-angle), transparent 0 78%, var(--aura-color) 93%, transparent ); } .aura::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: inherit; filter: blur(var(--aura-blur)); opacity: calc(0.55 * var(--aura-intensity)); pointer-events: none; content: ""; } .aura::after { position: absolute; z-index: -1; inset: calc(-1 * var(--aura-blur)); border-radius: calc(var(--aura-radius) + var(--aura-width) + var(--aura-blur)); background: var(--aura-color); filter: blur(calc(var(--aura-blur) * 4)); opacity: calc(0.15 * var(--aura-intensity)); pointer-events: none; content: ""; } .aura > * { position: relative; } .aura-glow { background: var(--aura-color); } @media (prefers-reduced-motion: no-preference) { .aura:not(.aura-glow) { animation: aura-rotate var(--aura-duration) linear infinite; } .aura-glow::before { animation: aura-breathe-near var(--aura-duration) ease-in-out infinite; } .aura-glow::after { animation: aura-breathe-far var(--aura-duration) ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { .aura:not(.aura-glow) { background: radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%), radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%); } } @keyframes aura-rotate { to { --aura-angle: 360deg; } } @keyframes aura-breathe-near { 50% { opacity: calc(0.95 * var(--aura-intensity)); transform: scale(1.03); } } @keyframes aura-breathe-far { 50% { opacity: calc(0.28 * var(--aura-intensity)); transform: scale(1.07); } } .aura:has(> .btn) { --aura-radius: var(--radius); } .aura:has(> :is(.card, .alert)) { --aura-radius: var(--radius-lg); } .aura:has(> .badge) { --aura-radius: var(--radius-full); } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (pointer: coarse) { .touch-target { position: relative; } .touch-target::after { content: ""; position: absolute; inset: calc(var(--space-20) * -1); } } .overflow-auto { overflow: auto; } .fit { inline-size: fit-content; max-inline-size: 100%; } .grow { flex: 1 1 auto; min-inline-size: 0; } .text-nowrap { white-space: nowrap; } .truncate { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .items-start { --items-align: start; align-items: start; } .items-center { --items-align: center; align-items: center; } .items-end { --items-align: end; align-items: end; } .muted { color: var(--text-muted); } .circle { border-radius: var(--radius-full); } .text-start { --text-align: start; text-align: start; } .text-center { --text-align: center; text-align: center; } .text-end { --text-align: end; text-align: end; } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .list-reset { margin: 0; padding: 0; list-style: none; } .dot { flex: none; inline-size: 0.25rem; block-size: 0.25rem; border-radius: var(--radius-full); background: var(--text-subtle); } .link-plain { color: inherit; text-decoration: none; } .link-muted { color: var(--text-muted); text-decoration: none; } .link-muted:hover, .link-muted:focus-visible { color: var(--text); } .gap-none { gap: 0; } .py { padding-block: var(--density-space); } .px { padding-inline: var(--density-space); } .mbs { margin-block-start: var(--density-space); } .mbe { margin-block-end: var(--density-space); } .display-block { display: block; } .display-inline { display: inline; } .display-inline-block { display: inline-block; } .display-flex { display: flex; } .display-inline-flex { display: inline-flex; } .display-grid { display: grid; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } .inline-size-full { inline-size: 100%; } .block-size-full { block-size: 100%; } .min-inline-size-0 { min-inline-size: 0; } .min-block-size-0 { min-block-size: 0; } .max-inline-size-none { max-inline-size: none; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .justify-content-start { --cluster-justify: flex-start; justify-content: flex-start; } .justify-content-center { --cluster-justify: center; justify-content: center; } .justify-content-end { --cluster-justify: flex-end; justify-content: flex-end; } .justify-content-space-between { --cluster-justify: space-between; justify-content: space-between; } .align-self-start { align-self: start; } .align-self-center { align-self: center; } .align-self-end { align-self: end; } .padding-context { padding: var(--density-space); } .margin-inline-auto { margin-inline: auto; } .margin-inline-start-auto { margin-inline-start: auto; } .margin-inline-end-auto { margin-inline-end: auto; } .margin-block-start-auto { margin-block-start: auto; } .margin-block-end-auto { margin-block-end: auto; } .gap-context { gap: var(--gap); } .row-gap-context { row-gap: var(--gap); } .column-gap-context { column-gap: var(--gap); } .overflow-hidden { overflow: hidden; } .overflow-clip { overflow: clip; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .white-space-normal { white-space: normal; } .text-break { overflow-wrap: break-word; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .font-weight-normal { font-weight: var(--font-weight-normal); } .font-weight-medium { font-weight: var(--font-weight-medium); } .font-weight-semibold { font-weight: var(--font-weight-semibold); } .font-weight-bold { font-weight: var(--font-weight-bold); } .radius-sm-context { border-radius: var(--radius-sm); } .radius-context { border-radius: var(--radius); } .radius-lg-context { border-radius: var(--radius-lg); } .border-context { border: var(--border-width) solid var(--border); } .border-block-start { border-block-start: var(--border-width) solid var(--border); } .border-block-end { border-block-end: var(--border-width) solid var(--border); } .border-inline-start { border-inline-start: var(--border-width) solid var(--border); } .border-inline-end { border-inline-end: var(--border-width) solid var(--border); } .background-surface { --heading: currentColor; background: var(--surface); color: var(--text); } .background-raised { --heading: currentColor; background: var(--surface-raised); color: var(--text); } .background-subtle { --heading: currentColor; background: var(--surface-subtle); color: var(--text); } .shadow-context { box-shadow: var(--shadow); } .shadow-popout-context { box-shadow: var(--shadow-popout); } .cursor-pointer { cursor: pointer; } .pointer-events-none { pointer-events: none; } .user-select-none { -webkit-user-select: none; user-select: none; } .display-none { display: none; } .visibility-hidden { visibility: hidden; }