/* @webcommerciale/os v0.229.0 */
@layer ds {
@layer tokens, base, roles, components, utilities;
@layer tokens {
:root {
--ds-surface-0: #fafafa;
--ds-surface-1: #ffffff;
--ds-surface-2: #f3f3f4;
--ds-surface-3: #e6e6e8;
--ds-surface-disabled: #f3f3f4;
--ds-surface-hover: rgb(10 10 13 / 0.04);
--ds-surface-active: rgb(10 10 13 / 0.08);
--ds-ink-1: #0a0a0d;
--ds-ink-2: #53535c;
--ds-ink-3: #6f6f79;
--ds-text-primary-neutral: var(--ds-ink-1);
--ds-text-secondary-neutral: var(--ds-ink-2);
--ds-text-tertiary-neutral: var(--ds-ink-3);
--ds-text-disabled: #6f6f79;
--ds-interactive: #3e3d46;
--ds-interactive-tint: rgb(62 61 70 / 0.1);
--ds-interactive-tint-hover: rgb(62 61 70 / 0.18);
--ds-interactive-edge: rgb(62 61 70 / 0.2);
--ds-border: #d2d2d6;
--ds-border-subtle: #dfdfe2;
--ds-border-strong: #81818a;
--ds-border-disabled: #c5c5cb;
--ds-border-active: var(--ds-interactive);
--ds-inverse: #17171b;
--ds-on-inverse: #fafafa;
--ds-inverse-hover: #25252b;
--ds-inverse-active: #3e3d46;
--ds-secondary-on-inverse: #b2b2b9;
--ds-success-on-inverse: #4ade80;
--ds-warning-on-inverse: #fbbf24;
--ds-danger-on-inverse: #fca5a5;
--ds-info-on-inverse: #7dd3fc;
--ds-brand: #2563eb;
--ds-on-brand: var(--ds-static-white);
--ds-brand-hover: color-mix(in srgb, var(--ds-brand) 85%, black);
--ds-brand-active: color-mix(in srgb, var(--ds-brand) 72%, black);
--ds-brand-tint: color-mix(in srgb, var(--ds-brand) 10%, transparent);
--ds-brand-tint-hover: color-mix(in srgb, var(--ds-brand) 18%, transparent);
--ds-brand-edge: color-mix(in srgb, var(--ds-brand) 20%, transparent);
--ds-brand-ink: color-mix(in srgb, var(--ds-brand) 78%, black);
--ds-success: #15803d;
--ds-success-hover: #166534;
--ds-success-active: #14532d;
--ds-success-tint: rgb(21 128 61 / 0.1);
--ds-success-tint-hover: rgb(21 128 61 / 0.18);
--ds-success-edge: rgb(21 128 61 / 0.2);
--ds-success-ink: #166534;
--ds-on-success: var(--ds-static-white);
--ds-warning: #b45309;
--ds-warning-tint: rgb(180 83 9 / 0.1);
--ds-warning-edge: rgb(180 83 9 / 0.2);
--ds-warning-ink: #92400e;
--ds-on-warning: var(--ds-static-white);
--ds-danger: #dc2626;
--ds-danger-hover: #b91c1c;
--ds-danger-active: #991b1b;
--ds-danger-tint: rgb(220 38 38 / 0.1);
--ds-danger-tint-hover: rgb(220 38 38 / 0.18);
--ds-danger-edge: rgb(220 38 38 / 0.2);
--ds-danger-ink: #991b1b;
--ds-on-danger: var(--ds-static-white);
--ds-info: #0369a1;
--ds-info-tint: rgb(3 105 161 / 0.1);
--ds-info-edge: rgb(3 105 161 / 0.2);
--ds-info-ink: #075985;
--ds-on-info: var(--ds-static-white);
--ds-scrim: rgb(10 10 13 / 0.2);
--ds-hue-red: #b91c1c;
--ds-hue-red-tint: rgb(185 28 28 / 0.12);
--ds-hue-red-edge: rgb(185 28 28 / 0.25);
--ds-hue-red-ink: #991b1b;
--ds-on-hue-red: var(--ds-static-white);
--ds-hue-orange: #c2410c;
--ds-hue-orange-tint: rgb(194 65 12 / 0.12);
--ds-hue-orange-edge: rgb(194 65 12 / 0.25);
--ds-hue-orange-ink: #9a3412;
--ds-on-hue-orange: var(--ds-static-white);
--ds-hue-amber: #b45309;
--ds-hue-amber-tint: rgb(180 83 9 / 0.12);
--ds-hue-amber-edge: rgb(180 83 9 / 0.25);
--ds-hue-amber-ink: #92400e;
--ds-on-hue-amber: var(--ds-static-white);
--ds-hue-yellow: #a16207;
--ds-hue-yellow-tint: rgb(161 98 7 / 0.12);
--ds-hue-yellow-edge: rgb(161 98 7 / 0.25);
--ds-hue-yellow-ink: #854d0e;
--ds-on-hue-yellow: var(--ds-static-white);
--ds-hue-lime: #4d7c0f;
--ds-hue-lime-tint: rgb(77 124 15 / 0.12);
--ds-hue-lime-edge: rgb(77 124 15 / 0.25);
--ds-hue-lime-ink: #3f6212;
--ds-on-hue-lime: var(--ds-static-white);
--ds-hue-green: #15803d;
--ds-hue-green-tint: rgb(21 128 61 / 0.12);
--ds-hue-green-edge: rgb(21 128 61 / 0.25);
--ds-hue-green-ink: #166534;
--ds-on-hue-green: var(--ds-static-white);
--ds-hue-teal: #0f766e;
--ds-hue-teal-tint: rgb(15 118 110 / 0.12);
--ds-hue-teal-edge: rgb(15 118 110 / 0.25);
--ds-hue-teal-ink: #115e59;
--ds-on-hue-teal: var(--ds-static-white);
--ds-hue-cyan: #0e7490;
--ds-hue-cyan-tint: rgb(14 116 144 / 0.12);
--ds-hue-cyan-edge: rgb(14 116 144 / 0.25);
--ds-hue-cyan-ink: #155e75;
--ds-on-hue-cyan: var(--ds-static-white);
--ds-hue-blue: #1d4ed8;
--ds-hue-blue-tint: rgb(29 78 216 / 0.12);
--ds-hue-blue-edge: rgb(29 78 216 / 0.25);
--ds-hue-blue-ink: #1e40af;
--ds-on-hue-blue: var(--ds-static-white);
--ds-hue-indigo: #4338ca;
--ds-hue-indigo-tint: rgb(67 56 202 / 0.12);
--ds-hue-indigo-edge: rgb(67 56 202 / 0.25);
--ds-hue-indigo-ink: #3730a3;
--ds-on-hue-indigo: var(--ds-static-white);
--ds-hue-violet: #6d28d9;
--ds-hue-violet-tint: rgb(109 40 217 / 0.12);
--ds-hue-violet-edge: rgb(109 40 217 / 0.25);
--ds-hue-violet-ink: #5b21b6;
--ds-on-hue-violet: var(--ds-static-white);
--ds-hue-pink: #be185d;
--ds-hue-pink-tint: rgb(190 24 93 / 0.12);
--ds-hue-pink-edge: rgb(190 24 93 / 0.25);
--ds-hue-pink-ink: #9d174d;
--ds-on-hue-pink: var(--ds-static-white);
--ds-static-white: #ffffff;
--ds-static-black: #000000;
--ds-focus: #17171b;
--ds-syntax-string: #15803d;
--ds-syntax-keyword: #7c3aed;
--ds-syntax-number: #b45309;
--ds-syntax-name: #0369a1;
--ds-chart-1: #f54900;
--ds-chart-2: #009689;
--ds-chart-3: #104e64;
--ds-chart-4: #ffb900;
--ds-chart-5: #fe9a00;
--ds-logo-word-1: #141413;
--ds-logo-word-2: #666666;
--ds-logo-dot-2: #808080;
--ds-logo-dot-3: #999999;
--ds-logo-symbol-dot: #999999;
}
[data-brand] {
--ds-brand-hover: color-mix(in srgb, var(--ds-brand) 85%, black);
--ds-brand-active: color-mix(in srgb, var(--ds-brand) 72%, black);
--ds-brand-tint: color-mix(in srgb, var(--ds-brand) 10%, transparent);
--ds-brand-tint-hover: color-mix(in srgb, var(--ds-brand) 18%, transparent);
--ds-brand-edge: color-mix(in srgb, var(--ds-brand) 20%, transparent);
--ds-brand-ink: color-mix(in srgb, var(--ds-brand) 78%, black);
}
[data-theme="dark"] {
--ds-surface-0: #0a0a0d;
--ds-surface-1: #17171b;
--ds-surface-2: #25252b;
--ds-surface-3: #3e3d46;
--ds-surface-disabled: #25252b;
--ds-surface-hover: rgb(250 250 250 / 0.05);
--ds-surface-active: rgb(250 250 250 / 0.09);
--ds-ink-1: #fafafa;
--ds-ink-2: #b2b2b9;
--ds-ink-3: #6f6f79;
--ds-text-primary-neutral: var(--ds-ink-1);
--ds-text-secondary-neutral: var(--ds-ink-2);
--ds-text-tertiary-neutral: var(--ds-ink-3);
--ds-text-disabled: #6f6f79;
--ds-interactive: #d2d2d6;
--ds-interactive-tint: rgb(210 210 214 / 0.1);
--ds-interactive-tint-hover: rgb(210 210 214 / 0.2);
--ds-interactive-edge: rgb(210 210 214 / 0.2);
--ds-border: #43434b;
--ds-border-subtle: #2e2e35;
--ds-border-strong: #8d8d96;
--ds-border-disabled: #53535c;
--ds-border-active: var(--ds-interactive);
--ds-inverse: #fafafa;
--ds-on-inverse: #17171b;
--ds-inverse-hover: #e6e6e8;
--ds-inverse-active: #d2d2d6;
--ds-secondary-on-inverse: #53535c;
--ds-success-on-inverse: #166534;
--ds-warning-on-inverse: #92400e;
--ds-danger-on-inverse: #991b1b;
--ds-info-on-inverse: #075985;
--ds-brand: #2563eb;
--ds-on-brand: var(--ds-static-white);
--ds-brand-hover: color-mix(in srgb, var(--ds-brand) 80%, white);
--ds-brand-active: color-mix(in srgb, var(--ds-brand) 65%, white);
--ds-brand-tint: color-mix(in srgb, var(--ds-brand) 15%, transparent);
--ds-brand-tint-hover: color-mix(in srgb, var(--ds-brand) 25%, transparent);
--ds-brand-edge: color-mix(in srgb, var(--ds-brand) 30%, transparent);
--ds-brand-ink: color-mix(in srgb, var(--ds-brand) 50%, white);
--ds-success: #15803d;
--ds-success-hover: #166534;
--ds-success-active: #14532d;
--ds-success-tint: rgb(21 128 61 / 0.15);
--ds-success-tint-hover: rgb(21 128 61 / 0.25);
--ds-success-edge: rgb(21 128 61 / 0.3);
--ds-success-ink: #4ade80;
--ds-on-success: var(--ds-static-white);
--ds-warning: #b45309;
--ds-warning-tint: rgb(180 83 9 / 0.15);
--ds-warning-edge: rgb(180 83 9 / 0.3);
--ds-warning-ink: #fbbf24;
--ds-on-warning: var(--ds-static-white);
--ds-danger: #dc2626;
--ds-danger-hover: #b91c1c;
--ds-danger-active: #991b1b;
--ds-danger-tint: rgb(220 38 38 / 0.15);
--ds-danger-tint-hover: rgb(220 38 38 / 0.25);
--ds-danger-edge: rgb(220 38 38 / 0.3);
--ds-danger-ink: #fca5a5;
--ds-on-danger: var(--ds-static-white);
--ds-info: #0369a1;
--ds-info-tint: rgb(3 105 161 / 0.15);
--ds-info-edge: rgb(3 105 161 / 0.3);
--ds-info-ink: #7dd3fc;
--ds-on-info: var(--ds-static-white);
--ds-focus: #fafafa;
--ds-scrim: rgb(10 10 13 / 0.35);
--ds-syntax-string: #4ade80;
--ds-syntax-keyword: #c4b5fd;
--ds-syntax-number: #fbbf24;
--ds-syntax-name: #7dd3fc;
--ds-chart-1: #1447e6;
--ds-chart-2: #00bc7d;
--ds-chart-3: #fe9a00;
--ds-chart-4: #ad46ff;
--ds-chart-5: #ff2056;
--ds-hue-red: #b91c1c;
--ds-hue-red-tint: rgb(248 113 113 / 0.14);
--ds-hue-red-edge: rgb(248 113 113 / 0.35);
--ds-hue-red-ink: #fca5a5;
--ds-on-hue-red: var(--ds-static-white);
--ds-hue-orange: #c2410c;
--ds-hue-orange-tint: rgb(251 146 60 / 0.14);
--ds-hue-orange-edge: rgb(251 146 60 / 0.35);
--ds-hue-orange-ink: #fdba74;
--ds-on-hue-orange: var(--ds-static-white);
--ds-hue-amber: #b45309;
--ds-hue-amber-tint: rgb(251 191 36 / 0.14);
--ds-hue-amber-edge: rgb(251 191 36 / 0.35);
--ds-hue-amber-ink: #fcd34d;
--ds-on-hue-amber: var(--ds-static-white);
--ds-hue-yellow: #a16207;
--ds-hue-yellow-tint: rgb(250 204 21 / 0.14);
--ds-hue-yellow-edge: rgb(250 204 21 / 0.35);
--ds-hue-yellow-ink: #fde047;
--ds-on-hue-yellow: var(--ds-static-white);
--ds-hue-lime: #4d7c0f;
--ds-hue-lime-tint: rgb(163 230 53 / 0.14);
--ds-hue-lime-edge: rgb(163 230 53 / 0.35);
--ds-hue-lime-ink: #bef264;
--ds-on-hue-lime: var(--ds-static-white);
--ds-hue-green: #15803d;
--ds-hue-green-tint: rgb(74 222 128 / 0.14);
--ds-hue-green-edge: rgb(74 222 128 / 0.35);
--ds-hue-green-ink: #86efac;
--ds-on-hue-green: var(--ds-static-white);
--ds-hue-teal: #0f766e;
--ds-hue-teal-tint: rgb(45 212 191 / 0.14);
--ds-hue-teal-edge: rgb(45 212 191 / 0.35);
--ds-hue-teal-ink: #5eead4;
--ds-on-hue-teal: var(--ds-static-white);
--ds-hue-cyan: #0e7490;
--ds-hue-cyan-tint: rgb(34 211 238 / 0.14);
--ds-hue-cyan-edge: rgb(34 211 238 / 0.35);
--ds-hue-cyan-ink: #67e8f9;
--ds-on-hue-cyan: var(--ds-static-white);
--ds-hue-blue: #1d4ed8;
--ds-hue-blue-tint: rgb(96 165 250 / 0.14);
--ds-hue-blue-edge: rgb(96 165 250 / 0.35);
--ds-hue-blue-ink: #93c5fd;
--ds-on-hue-blue: var(--ds-static-white);
--ds-hue-indigo: #4338ca;
--ds-hue-indigo-tint: rgb(129 140 248 / 0.14);
--ds-hue-indigo-edge: rgb(129 140 248 / 0.35);
--ds-hue-indigo-ink: #c7d2fe;
--ds-on-hue-indigo: var(--ds-static-white);
--ds-hue-violet: #6d28d9;
--ds-hue-violet-tint: rgb(167 139 250 / 0.14);
--ds-hue-violet-edge: rgb(167 139 250 / 0.35);
--ds-hue-violet-ink: #c4b5fd;
--ds-on-hue-violet: var(--ds-static-white);
--ds-hue-pink: #be185d;
--ds-hue-pink-tint: rgb(244 114 182 / 0.14);
--ds-hue-pink-edge: rgb(244 114 182 / 0.35);
--ds-hue-pink-ink: #f9a8d4;
--ds-on-hue-pink: var(--ds-static-white);
--ds-logo-word-1: #ffffff;
--ds-logo-word-2: #999999;
--ds-logo-dot-2: #999999;
--ds-logo-dot-3: #808080;
--ds-logo-symbol-dot: #ffffff;
}
[data-theme="dark"] [data-brand] {
--ds-brand-hover: color-mix(in srgb, var(--ds-brand) 80%, white);
--ds-brand-active: color-mix(in srgb, var(--ds-brand) 65%, white);
--ds-brand-tint: color-mix(in srgb, var(--ds-brand) 15%, transparent);
--ds-brand-tint-hover: color-mix(in srgb, var(--ds-brand) 25%, transparent);
--ds-brand-edge: color-mix(in srgb, var(--ds-brand) 30%, transparent);
--ds-brand-ink: color-mix(in srgb, var(--ds-brand) 50%, white);
}
[data-brand="ink"],
[data-theme="dark"] [data-brand="ink"] {
--ds-brand: var(--ds-inverse);
--ds-on-brand: var(--ds-on-inverse);
--ds-brand-hover: var(--ds-inverse-hover);
--ds-brand-active: var(--ds-inverse-active);
}
[data-ground="inverse"] {
--ds-text-primary-neutral: #fafafa;
--ds-text-secondary-neutral: #b2b2b9;
--ds-quote: #fafafa;
--ds-on-quote: #0a0a0d;
--ds-quote-hover: #e6e6e8;
--ds-quote-active: #d2d2d6;
}
[data-theme="dark"] [data-ground="inverse"] {
--ds-text-primary-neutral: #0a0a0d;
--ds-text-secondary-neutral: #53535c;
--ds-quote: #0a0a0d;
--ds-on-quote: #fafafa;
--ds-quote-hover: #25252b;
--ds-quote-active: #3e3d46;
}
[data-ground="inverse"] :is(.ds-popover, .ds-dialog, .ds-drawer) {
--ds-text-primary-neutral: var(--ds-ink-1);
--ds-text-secondary-neutral: var(--ds-ink-2);
}
:root {
--ds-space-0: 0;
--ds-space-px: 1px;
--ds-space-0-5: 0.125rem;
--ds-space-1: 0.25rem;
--ds-space-2: 0.5rem;
--ds-space-3: 0.75rem;
--ds-space-4: 1rem;
--ds-space-5: 1.25rem;
--ds-space-6: 1.5rem;
--ds-space-8: 2rem;
--ds-space-10: 2.5rem;
--ds-space-12: 3rem;
--ds-space-16: 4rem;
--ds-space-20: 5rem;
--ds-space-24: 6rem;
--ds-space-32: 8rem;
}
:root {
--ds-size-1: 1.5rem;
--ds-size-2: 2rem;
--ds-size-3: 2.5rem;
--ds-size-4: 3rem;
--ds-size-5: 3.5rem;
--ds-size-6: 4rem;
}
:root {
--ds-viewport: 100vw;
}
:root {
--ds-break-compact: 30rem;
--ds-break-phone: 40rem;
--ds-break-wide: 60rem;
--ds-break-tablet: 64rem;
--ds-break-desktop: 80rem;
}
:root {
--ds-typeface-display: "General Sans", system-ui, sans-serif;
--ds-typeface-body: Satoshi, system-ui, sans-serif;
--ds-typeface-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root {
--ds-weight-delicate: 300;
--ds-weight-standard: 400;
--ds-weight-robust: 500;
--ds-weight-intense: 600;
}
:root,
[data-surface="web"] {
--ds-rhythm-line: var(--ds-space-1);
--ds-rhythm-element: var(--ds-space-4);
--ds-rhythm-block: var(--ds-space-12);
--ds-rhythm-section: clamp(5rem, calc(var(--ds-viewport) * 0.12), 10rem);
--ds-font-heading-1-face: var(--ds-typeface-display);
--ds-font-heading-1-size: clamp(3.5rem, calc(var(--ds-viewport) * 0.05), 5rem);
--ds-font-heading-1-weight: var(--ds-weight-standard);
--ds-font-heading-1-leading: 1.05;
--ds-font-heading-1-tracking: -0.03em;
--ds-font-heading-2-face: var(--ds-typeface-display);
--ds-font-heading-2-size: clamp(2.5rem, calc(var(--ds-viewport) * 0.035), 3.5rem);
--ds-font-heading-2-weight: var(--ds-weight-standard);
--ds-font-heading-2-leading: 1.1;
--ds-font-heading-2-tracking: -0.025em;
--ds-font-heading-3-face: var(--ds-typeface-display);
--ds-font-heading-3-size: clamp(1.875rem, calc(var(--ds-viewport) * 0.02), 2.25rem);
--ds-font-heading-3-weight: var(--ds-weight-standard);
--ds-font-heading-3-leading: 1.15;
--ds-font-heading-3-tracking: -0.02em;
--ds-font-heading-4-face: var(--ds-typeface-display);
--ds-font-heading-4-size: 1.5rem;
--ds-font-heading-4-weight: var(--ds-weight-robust);
--ds-font-heading-4-leading: 2rem;
--ds-font-heading-4-tracking: -0.01em;
--ds-font-heading-5-face: var(--ds-typeface-display);
--ds-font-heading-5-size: 1.25rem;
--ds-font-heading-5-weight: var(--ds-weight-robust);
--ds-font-heading-5-leading: 1.75rem;
--ds-font-heading-5-tracking: 0;
--ds-font-heading-6-face: var(--ds-typeface-body);
--ds-font-heading-6-size: 1.125rem;
--ds-font-heading-6-weight: var(--ds-weight-robust);
--ds-font-heading-6-leading: 1.5rem;
--ds-font-heading-6-tracking: 0;
--ds-font-copy-size: clamp(1.125rem, calc(var(--ds-viewport) * 0.003 + 1.05rem), 1.25rem);
--ds-font-copy-leading: 1.5rem;
--ds-font-body-size: 1rem;
--ds-font-body-leading: 1.25rem;
--ds-font-copy-prose-size: clamp(1.125rem, calc(var(--ds-viewport) * 0.003 + 1.05rem), 1.25rem);
--ds-font-copy-prose-leading: 1.75rem;
--ds-font-body-prose-size: 1rem;
--ds-font-body-prose-leading: 1.5rem;
--ds-font-label-size: 0.875rem;
--ds-font-label-leading: 1rem;
--ds-font-small-size: 0.75rem;
--ds-font-small-leading: 1rem;
--ds-font-mono-size: 0.75rem;
--ds-font-mono-leading: 1rem;
--ds-font-copy-face: var(--ds-typeface-body);
--ds-font-copy-weight: var(--ds-weight-standard);
--ds-font-body-face: var(--ds-typeface-body);
--ds-font-body-weight: var(--ds-weight-standard);
--ds-font-copy-prose-face: var(--ds-typeface-body);
--ds-font-copy-prose-weight: var(--ds-weight-standard);
--ds-font-body-prose-face: var(--ds-typeface-body);
--ds-font-body-prose-weight: var(--ds-weight-standard);
--ds-font-label-face: var(--ds-typeface-body);
--ds-font-label-weight: var(--ds-weight-standard);
--ds-font-small-face: var(--ds-typeface-body);
--ds-font-small-weight: var(--ds-weight-standard);
--ds-font-mono-face: var(--ds-typeface-mono);
--ds-font-mono-weight: var(--ds-weight-standard);
--ds-font-overline-face: var(--ds-typeface-body);
--ds-font-overline-weight: var(--ds-weight-robust);
--ds-font-overline-size: 0.875rem;
--ds-font-overline-leading: 1rem;
--ds-font-overline-tracking: 0.08em;
--ds-font-micro-face: var(--ds-typeface-body);
--ds-font-micro-weight: var(--ds-weight-robust);
--ds-font-micro-size: 0.625rem;
--ds-font-micro-leading: 0.75rem;
--ds-font-micro-tracking: 0.16em;
--ds-font-copy-tracking: 0;
--ds-font-body-tracking: 0;
--ds-font-copy-prose-tracking: 0;
--ds-font-body-prose-tracking: 0;
--ds-font-label-tracking: 0;
--ds-font-small-tracking: 0;
--ds-font-mono-tracking: 0;
--ds-emphasis-weight: var(--ds-weight-robust);
--ds-current-weight: var(--ds-weight-robust);
--ds-bold-weight: var(--ds-weight-intense);
}
[data-surface="product"] {
--ds-rhythm-line: var(--ds-space-1);
--ds-rhythm-element: var(--ds-space-3);
--ds-rhythm-block: var(--ds-space-6);
--ds-rhythm-section: var(--ds-space-8);
--ds-font-heading-1-face: var(--ds-typeface-display);
--ds-font-heading-1-size: 1.75rem;
--ds-font-heading-1-weight: var(--ds-weight-intense);
--ds-font-heading-1-leading: 2.25rem;
--ds-font-heading-1-tracking: -0.01em;
--ds-font-heading-2-face: var(--ds-typeface-display);
--ds-font-heading-2-size: 1.5rem;
--ds-font-heading-2-weight: var(--ds-weight-robust);
--ds-font-heading-2-leading: 2rem;
--ds-font-heading-2-tracking: -0.01em;
--ds-font-heading-3-face: var(--ds-typeface-display);
--ds-font-heading-3-size: 1.25rem;
--ds-font-heading-3-weight: var(--ds-weight-robust);
--ds-font-heading-3-leading: 1.75rem;
--ds-font-heading-3-tracking: -0.005em;
--ds-font-heading-4-face: var(--ds-typeface-body);
--ds-font-heading-4-size: 1.125rem;
--ds-font-heading-4-weight: var(--ds-weight-robust);
--ds-font-heading-4-leading: 1.5rem;
--ds-font-heading-4-tracking: 0;
--ds-font-heading-5-face: var(--ds-typeface-body);
--ds-font-heading-5-size: 1rem;
--ds-font-heading-5-weight: var(--ds-weight-robust);
--ds-font-heading-5-leading: 1.5rem;
--ds-font-heading-5-tracking: 0;
--ds-font-heading-6-face: var(--ds-typeface-body);
--ds-font-heading-6-size: 0.875rem;
--ds-font-heading-6-weight: var(--ds-weight-intense);
--ds-font-heading-6-leading: 1.25rem;
--ds-font-heading-6-tracking: 0.01em;
--ds-font-copy-size: 1.125rem;
--ds-font-copy-leading: 1.5rem;
--ds-font-body-size: 1rem;
--ds-font-body-leading: 1.25rem;
--ds-font-copy-prose-size: 1.125rem;
--ds-font-copy-prose-leading: 1.75rem;
--ds-font-body-prose-size: 1rem;
--ds-font-body-prose-leading: 1.5rem;
--ds-font-label-size: 0.875rem;
--ds-font-label-leading: 1rem;
--ds-font-small-size: 0.75rem;
--ds-font-small-leading: 1rem;
--ds-font-mono-size: 0.75rem;
--ds-font-mono-leading: 1rem;
--ds-font-copy-face: var(--ds-typeface-body);
--ds-font-copy-weight: var(--ds-weight-standard);
--ds-font-body-face: var(--ds-typeface-body);
--ds-font-body-weight: var(--ds-weight-standard);
--ds-font-copy-prose-face: var(--ds-typeface-body);
--ds-font-copy-prose-weight: var(--ds-weight-standard);
--ds-font-body-prose-face: var(--ds-typeface-body);
--ds-font-body-prose-weight: var(--ds-weight-standard);
--ds-font-label-face: var(--ds-typeface-body);
--ds-font-label-weight: var(--ds-weight-standard);
--ds-font-small-face: var(--ds-typeface-body);
--ds-font-small-weight: var(--ds-weight-standard);
--ds-font-mono-face: var(--ds-typeface-mono);
--ds-font-mono-weight: var(--ds-weight-standard);
--ds-font-overline-face: var(--ds-typeface-body);
--ds-font-overline-weight: var(--ds-weight-robust);
--ds-font-overline-size: 0.8125rem;
--ds-font-overline-leading: 1rem;
--ds-font-overline-tracking: 0.08em;
--ds-font-micro-face: var(--ds-typeface-body);
--ds-font-micro-weight: var(--ds-weight-robust);
--ds-font-micro-size: 0.625rem;
--ds-font-micro-leading: 0.75rem;
--ds-font-micro-tracking: 0.16em;
--ds-font-copy-tracking: 0;
--ds-font-body-tracking: 0;
--ds-font-copy-prose-tracking: 0;
--ds-font-body-prose-tracking: 0;
--ds-font-label-tracking: 0;
--ds-font-small-tracking: 0;
--ds-font-mono-tracking: 0;
--ds-emphasis-weight: var(--ds-weight-robust);
--ds-current-weight: var(--ds-weight-robust);
--ds-bold-weight: var(--ds-weight-intense);
}
.ds-viewport-scope {
--ds-rhythm-section: clamp(5rem, calc(var(--ds-viewport) * 0.12), 10rem);
--ds-font-heading-1-size: clamp(3.5rem, calc(var(--ds-viewport) * 0.05), 5rem);
--ds-font-heading-2-size: clamp(2.5rem, calc(var(--ds-viewport) * 0.035), 3.5rem);
--ds-font-heading-3-size: clamp(1.875rem, calc(var(--ds-viewport) * 0.02), 2.25rem);
--ds-font-copy-size: clamp(1.125rem, calc(var(--ds-viewport) * 0.003 + 1.05rem), 1.25rem);
--ds-font-copy-prose-size: clamp(1.125rem, calc(var(--ds-viewport) * 0.003 + 1.05rem), 1.25rem);
}
[data-surface="product"] .ds-viewport-scope,
.ds-viewport-scope[data-surface="product"] {
--ds-rhythm-section: var(--ds-space-8);
--ds-font-heading-1-size: 1.75rem;
--ds-font-heading-2-size: 1.5rem;
--ds-font-heading-3-size: 1.25rem;
--ds-font-copy-size: 1.125rem;
--ds-font-copy-prose-size: 1.125rem;
}
:root {
--ds-radius-0: 0;
--ds-radius-full: 9999px;
--ds-radius: 0.5rem;
}
:root,
[data-radius="round"] {
--ds-radius-1: calc(var(--ds-radius) * 0.5);
--ds-radius-2: var(--ds-radius);
--ds-radius-3: calc(var(--ds-radius) * 1.5);
--ds-radius-4: calc(var(--ds-radius) * 2);
}
[data-radius="square"] {
--ds-radius-1: 0;
--ds-radius-2: 0;
--ds-radius-3: 0;
--ds-radius-4: 0;
}
[data-radius="soft"] {
--ds-radius-1: calc(var(--ds-radius) * 0.25);
--ds-radius-2: calc(var(--ds-radius) * 0.5);
--ds-radius-3: calc(var(--ds-radius) * 0.75);
--ds-radius-4: var(--ds-radius);
}
[data-radius="pill"] {
--ds-radius-1: calc(var(--ds-radius) * 1.5);
--ds-radius-2: calc(var(--ds-radius) * 3);
--ds-radius-3: calc(var(--ds-radius) * 4.5);
--ds-radius-4: calc(var(--ds-radius) * 6);
}
:root {
--ds-duration-fast: 100ms;
--ds-duration: 200ms;
--ds-duration-slow: 400ms;
--ds-duration-loop: 700ms;
--ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--ds-duration-fast: 0s;
--ds-duration: 0s;
--ds-duration-slow: 0s;
--ds-duration-loop: 0s;
}
}
[data-text="large"] {
font-size: 115%;
}
[data-text="huge"] {
font-size: 130%;
}
@media (prefers-contrast: more) {
:root:not([data-contrast="normal"]) {
--ds-text-secondary-neutral: var(--ds-ink-1);
--ds-text-tertiary-neutral: var(--ds-ink-2);
}
}
[data-contrast="high"] {
--ds-text-secondary-neutral: var(--ds-ink-1);
--ds-text-tertiary-neutral: var(--ds-ink-2);
}
}
@layer base {
@font-face {
font-family: "General Sans";
src: url("https://cdn.fontshare.com/wf/LHQJ5KSAL7VGAEIDSTEXCCOIUKFLT2I6/GW57XUEG4ZBVMLZZTQZTGYPROITRRQ5W/JA3IZUEMJ2J6WWT2OQVJOAWDXO3YL4YG.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "General Sans";
src: url("https://cdn.fontshare.com/wf/RRO6TYZXO7WQBHSH4BZYSTI7E7T2HKLF/55LXPUDQQQTSLB3M2T377FIN2EKQQWJY/3HUYMY6WP3BZQYPOVGG6IZQAM476CQDC.woff2") format("woff2");
font-weight: 200 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("https://cdn.fontshare.com/wf/3JZIFUW7KLFSPLVCIUI2DLGNIER6IFCX/MMP4RUF5LYGUAZS3DCJC3GJ6F6SAGKSN/E3NEPGEAHYCHR37DSBXHV33XCYYRE2CY.woff2") format("woff2");
font-weight: 300 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("https://cdn.fontshare.com/wf/HJHZ26OECMTXRH7JXPFC7EVIHDSLT2RA/LJRNLR7WCPF3PY3SZ7B2LHNUTQMFNCHL/4MCJYGQDIOOXHWSIIB2OYNDBEALJSOGN.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("https://cdn.fontshare.com/wf/KDSQNRHYYJCWSLSNMQTKJOY7QNC2IBLM/HGYBIGJ4X7DYUETLTGW4BIVO3FCWLJUR/AFY5UJBPUVSDM77Q42DSHPT5JUNR7N4Y.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Cabinet Grotesk";
src: url("https://cdn.fontshare.com/wf/J2PZYZURCR7HNQKXCZ4VXYA3K5FFCCLT/PZSZLWHMBCE7FFGOUYDEU33FAESUMA3X/JFDL5FBAQ2WMYL3LGKSCZKAIFCS2UQ63.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Grotesk";
src: url("https://cdn.fontshare.com/wf/5TRO2J3HJNIQODLQ4CTSMGSLAWSE5YUY/GHXENXHZCDIOE5E73364PNNASRNO3JVW/GLZTRU2GIKPV5HYT3E6HDLWOXAWPNZDV.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Supreme";
src: url("https://cdn.fontshare.com/wf/DLQ4UJISF7NR5UWCRH7SSBZSGVFYEQVB/ECAFP4IWEYQWGLRGLDAA4D47EQQC2YFW/WC57ME7FJIJNRKIFOCKR52F2X2KO67EO.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Supreme";
src: url("https://cdn.fontshare.com/wf/QN3TIUT2GLJT6WB3XTDDWOYM5RZ3KEGB/CBLU5DRGUM4ST5QM56HEQKDBMG2XTIL7/GPZNNDUEMEWV7QFJ7WNIEFP2732UWFKR.woff2") format("woff2");
font-weight: 100 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Synonym";
src: url("https://cdn.fontshare.com/wf/74H2KDWJMBALTKHNIQRGZBU5ICACXZVT/ELAHIXGEN3HHKQ7JK54VOXWQFZLLOHW2/37TO4J4G54TAREFY7PFS5VAXDGLM7BKV.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ranade";
src: url("https://cdn.fontshare.com/wf/4I3GQ5RKI7INEN77JLE5K6MUGH3Q6XBQ/OE2GKODT24OQXFQ3ANDXIPBDXBQU4CTJ/4ISE7PRDMUTRGIOEEJAQ6FWTTIGY35CA.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ranade";
src: url("https://cdn.fontshare.com/wf/QN7LKEQOYA5STN563TMUFXBD3K5JFPXM/4SSBT3UGWZ5VT2MUMU4AMQRL4F67YPTW/TATVWUXMC5VRJJCIQ6G5V5QV74Y64R6O.woff2") format("woff2");
font-weight: 100 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Chillax";
src: url("https://cdn.fontshare.com/wf/ZYDQ23QUC5RIWZP2XNQDB6EQIKJAJRWI/OQWULF7QT4HTMBH6W3XY6DESOSZLWT3L/7L7IIHAKMJC3Z2MTNHMMKSRMMTKZN4OJ.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Excon";
src: url("https://cdn.fontshare.com/wf/UOR3GKGGYKSXOPARPVX2LJSFIQ5PMFIP/ALZ7XEMFCRLSTJ343FMZX7JLYI4PVW5W/PWFSX23HSOTS4S5H2EZBA72ULDLBSG3V.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Panchang";
src: url("https://cdn.fontshare.com/wf/NATVPFYC4NJ2MZVSHF5VZYFWGTTPQUYX/MRQWDISFO5EKUB3Q72S4DXWYEOXNEN2I/2DYLXJJ5VPGFHZKCL4LCW4EGVHYDFG4L.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Author";
src: url("https://cdn.fontshare.com/wf/QZLHF3POTW3Q4X3B52OFR36T6QNVHQFS/5FBYPSFR2SRQ6KYXCBCN3RAWZYT24FWF/U3WWVCRZ5YHQTK3ABY6QQSB4YY63S65B.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Author";
src: url("https://cdn.fontshare.com/wf/J3IKMZZZ53F75WBIOJVUHEVKJKYNOXXF/UK6TMU4KDUOBA2TQL35OYZWT4CNBGRHR/JP2S43GCZFWRA6HO554DNBR74NVQDKCI.woff2") format("woff2");
font-weight: 200 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("https://cdn.fontshare.com/wf/U2HFRBAHB5SL53RHFEF22BIJZSJRHR2Y/LFPV5QZIFT7V5OMDNHDQPJYOQAHFUE4W/CLVUG765RK3TA3ESG2NBCJJGWFQVIBTA.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("https://cdn.fontshare.com/wf/QZRCKFY3YNTSI7ZJRBICCIGOZTP4A7XJ/N5R3WNWTF5UMZX6H7KNBVR5N5PJZCKKX/TJFEEESODHVFXP2MHRXMD2MGSHGGFUZG.woff2") format("woff2");
font-weight: 200 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Outfit";
src: url("https://cdn.fontshare.com/wf/5CUYQY5BTX2W3ZPVRCCCLWNDFRFO4X2Q/4ZFWCKR7SZIG5QK3WRRMPJIO3T4V7P3P/MSBFVUKVELIKYOCZRGPPNF2NPYHTJ4RR.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("https://cdn.fontshare.com/wf/5G6YRLMIWY5GPB75EI24HCVKJKMQGWLI/NP23AIQUUOOIWEESZ4D3OGFMR4MPF75J/EFQMYWHMMQMIFBBHL4HUWRDRN2DPS43B.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("https://cdn.fontshare.com/wf/WT5NLJWZXTOTXMGPK35CM4HWYX6QS7CO/A6YTVV4P3AYYOOCQJMPPMNWIXNX6WAEF/DXSWN6IEQKO75Q3UDN6QUISGGQ5ONGP7.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("https://cdn.fontshare.com/wf/6KNUAYMK3PTPQA22366IWF5JUVT35NZ3/E4CLT6PE4W64IV56BHAWFRZFLHPZIXFF/DEPNXL2T77QGX4DXZAN3G53TXHO2JEFP.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Grotesk";
src: url("https://cdn.fontshare.com/wf/LLDTU5IBGILM4TSXOAMDTWNJV35KBJWC/LYWYE3G3V5JOPYD3OWV4MDZKNYGJZ4DA/XJLULP2KEJI5ZCOQKN5ZUVKPBUCWRA4C.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Familjen Grotesk";
src: url("https://cdn.fontshare.com/wf/NTCF4RFM2UCBDNIZSZJ2FJAYZGML7L7W/VNVZLHJOZUKZG52GQBR64UJY2WQARRH4/EUKAH7AC77WFGLRQRNT3XYBHQRJ6TEPV.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Familjen Grotesk";
src: url("https://cdn.fontshare.com/wf/Y6NJIWB5CQK7XNEWVEGH5GOYQWN3OJ2R/F4QDOHVKOLGVT3AXSM6KAET7PK5CQMYZ/W42KHABBGBFJLBMKEMN44SQAGGNQFJEF.woff2") format("woff2");
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Roboto";
src: url("https://fonts.gstatic.com/s/roboto/v51/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto";
src: url("https://fonts.gstatic.com/s/roboto/v51/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBnkaSTbQWg.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Clash Display";
src: url("https://cdn.fontshare.com/wf/DK2FOA46SRWJ5HXWWU5TK4N4CMHYD236/FPEAXZZSH5L2K5MTJFRIWD2MC32IJMN3/THOOS4VOCKT7H2XEB27NQDYM2NYS4AAR.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Melodrama";
src: url("https://cdn.fontshare.com/wf/LC7IMMWVM27SA7ALSOK4NI36ZAQ55VBY/FNO72OGA42HOJR66E5WCXLYW2ONKD6RY/YDIY5IEHM22WUOHX7EQUCQJQULHZUNOV.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "New Title";
src: url("https://cdn.fontshare.com/wf/I4HE5VRMUUQT2NN3CP4EAQPABPLFBSL2/T7PW55Z4NGUO5UFYA3ICXUCXJNCKJ3CH/JSD4VOU4UFQMJWNYYTPSIJNGJF72ETZY.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Boska";
src: url("https://cdn.fontshare.com/wf/F6DH4EYJFNRTNWGLTO2BPSKARPMHLGXH/SM2YVNODZS7TYVQMIAVSBXOAJTTMGFKH/4PUMKPO7UMWCY6AUSYUVMCIQCUHPZGR6.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Boska";
src: url("https://cdn.fontshare.com/wf/YNVJ5KDAUGRC7H2OELMRGJDPURX7OWRX/LVIYHQTGVJPX2FEYEKRDME2CIXQN6NX5/PRXYWF6YBNXBT5KSOU4HTLJK7NMUBBIV.woff2") format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Sentient";
src: url("https://cdn.fontshare.com/wf/NY2ZL3ZVCWEGOL6C3UVCNGYW5UU4EWVZ/E62VQS3OCYTBL5HEKIEGN3RTBX7KFK6F/NZPIPWPM74OTNMX6CKNACLBKCGJLJEBU.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Sentient";
src: url("https://cdn.fontshare.com/wf/NX7NNT2RFBKC4E3YONV5GVZSXNHXNBGR/TWKNDFJUVBI2VY3NA2ECZKQB2A6HC7SM/6OP3OPKYYSIBJGHTOO5N77NQJC6ZBAAM.woff2") format("woff2");
font-weight: 200 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gambetta";
src: url("https://cdn.fontshare.com/wf/KF6223JOZFTD7NR7IMVECSOT3R43BE2B/TQPO7YGAI6O7DJGTUUZNDSZCZ45HM7AA/5ZRASRUCHEY46ZB6T6A2OKXSW5JB4C5M.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gambetta";
src: url("https://cdn.fontshare.com/wf/PMNFESIVGZWELXBWOE4KEOW2HBZUTWQK/IPHBCP7PJIACKJKIVZ6R55WWL3JC7SGF/ZMIMUE36RZIMFJ34AVWZRQQEWM54OFWG.woff2") format("woff2");
font-weight: 300 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Erode";
src: url("https://cdn.fontshare.com/wf/YVHXIVYMTHSZF6EW66XL7QNUAFEYQBX5/CCRUQ7ASHMKXJT5SBSL4ST3ZADAZ2CZL/MOKCGU3EKYHOXP3Y5X7XQ2BPG4HCMF66.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Erode";
src: url("https://cdn.fontshare.com/wf/4GDBXYSCBGNURX6OPUJE2EMBI6UDBLJZ/JC4NOSNPXLCVFO3PNRMEM2Q66I7UUFKD/OCJ3WFMT5PZOL4G7ERGYK77EYKDLSNTR.woff2") format("woff2");
font-weight: 300 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Zodiak";
src: url("https://cdn.fontshare.com/wf/UDGW4K5KDO2WNP2256GU5CP7HQDVADLQ/LML445TYWQT7TRPDYZPCIVB3BJWX7NTD/2O5TXCJMYUDHI5FO6N4PXN6WNROSBHNU.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Zodiak";
src: url("https://cdn.fontshare.com/wf/LLJK6BA3SBYYKFUWUFGCSXX4U6FAVOZG/EI6KLD2HJRQIOCHFM4UO3UOS4HQJVMD6/MPUGY4TY2OAWTBKRTKSL7ZAFNDFL5WEU.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Bespoke Serif";
src: url("https://cdn.fontshare.com/wf/LQBL2BKOVSXOIPKVAC7Y76PA7GZ2HXBD/IQ53PCOMUF4S5V5TKVBLDGYVOV4Y73B5/QQHHDRSCXVWQMZ6WGM4VTWROGNY4EHQH.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bespoke Serif";
src: url("https://cdn.fontshare.com/wf/HC7WW3IHSQE42LDAISTJUDIMC6WXDYWA/6ELDKO7AR6O37OXX45LVNY4CRXMHJ4SA/OCG4B3AYFIJYARETUDDBO7AIYCYIBCJD.woff2") format("woff2");
font-weight: 300 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Rowan";
src: url("https://cdn.fontshare.com/wf/NGG2G4MYJUJPAQGN7ADGDQGIAHBDZUN3/JWZWCVELXUDLILF3X5AEYPUXHWKSW6K4/2SRBZSI5NSXTSCHCB2MIF6DGXP47ROZM.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Rowan";
src: url("https://cdn.fontshare.com/wf/E37OND4MKCM7E3XUFA62CRVORLXJ75KQ/LBZ4G4LCYJT2XN24BLVJJ6KTQWPCGLH3/WE5XIUZLMUN45XJLV324KEFABLYDZWXO.woff2") format("woff2");
font-weight: 300 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Literata";
src: url("https://cdn.fontshare.com/wf/KN664EMG3NVEZG3VBPPRZPN5AQAGCY5X/MSM7FVKIBWW3Q6X65E2YJQPFW5MJY5WY/7EBS3IMYIOXQAIQHH3MHB5O6IEHHGXBJ.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Literata";
src: url("https://cdn.fontshare.com/wf/G5TSYBYOS3B2UHUZXCPMI5R7FGXNUXPL/CWSD2Y6M7FPLW3TO3UXBXG442WT5DJ7N/ZPETCLDQL2VLZBKMQ6BZVA7D3ULIYGJJ.woff2") format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Recia";
src: url("https://cdn.fontshare.com/wf/QBY2446VXAT2DZLD7GHWW6KRNM5ABXOT/EECPSK5XOVM4KEA67D34T7ONY32JIE4I/B65RVEVO2M5DMTKJFTCGLNK4PU3C6VAZ.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Recia";
src: url("https://cdn.fontshare.com/wf/IBEPNRXY5CWCZFLBYQ5XLQ7RFCQB6ZJ6/UDPQJLYXJFG734MO2PGR5OF7R4HEF6HP/2QIULXBFDEOIRE3FA2QWX4KSJ225RJ5M.woff2") format("woff2");
font-weight: 300 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Playfair Display";
src: url("https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Playfair Display";
src: url("https://fonts.gstatic.com/s/playfairdisplay/v40/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7yRZrPA.woff2") format("woff2");
font-weight: 400 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Bespoke Slab";
src: url("https://cdn.fontshare.com/wf/ZSNDP4V7GHBEHAGPPCQMMX57JDIAP7VG/BGMG7RMO4HQMP7WPMFPOT6LMXKXWXROZ/AHR6HDH3A57RXGN6FFQF6JWBZFD7AFDV.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bespoke Slab";
src: url("https://cdn.fontshare.com/wf/BLN4PO3O43X46VXWMKHKB5PDKSLVRWOE/5R3S5OPMEVDMWFLH47OOFC45PFAMIIQJ/ZMJ7TY4KTVOR7XDXTWIA6QTPXBZXEPUM.woff2") format("woff2");
font-weight: 300 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Azeret Mono";
src: url("https://cdn.fontshare.com/wf/ASWSMZKQ23WEXZBVNMUWSVUMPLFQRPHW/NRSBSJV2GBSTS4NZUIGQTFNNJM2L4WXC/6Q6YTQSA7J7EBIZ4AJJG7JJSMMDPZUW6.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Azeret Mono";
src: url("https://cdn.fontshare.com/wf/M2BKKGKKHDB6EDBRXOOZPBVQ5GN5YPGM/Y4OK4RYRDC3JJNKHUWO43UEKWAFOUK3U/5ISX64NVT7S3NHOFMN6N4435K3OHXZ4M.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYE98RXi4EwSsbg.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFuaHi6WZ3S_Yg.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("https://fonts.gstatic.com/s/spacemono/v17/i7dNIFZifjKcF5UAWdDRYERMR3K_MQacbw.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
[data-face="general-sans"] { font-family: "General Sans", system-ui, sans-serif; }
[data-face="satoshi"] { font-family: "Satoshi", system-ui, sans-serif; }
[data-face="switzer"] { font-family: "Switzer", system-ui, sans-serif; }
[data-face="cabinet-grotesk"] { font-family: "Cabinet Grotesk", system-ui, sans-serif; }
[data-face="clash-grotesk"] { font-family: "Clash Grotesk", system-ui, sans-serif; }
[data-face="supreme"] { font-family: "Supreme", system-ui, sans-serif; }
[data-face="synonym"] { font-family: "Synonym", system-ui, sans-serif; }
[data-face="ranade"] { font-family: "Ranade", system-ui, sans-serif; }
[data-face="chillax"] { font-family: "Chillax", system-ui, sans-serif; }
[data-face="excon"] { font-family: "Excon", system-ui, sans-serif; }
[data-face="panchang"] { font-family: "Panchang", system-ui, sans-serif; }
[data-face="author"] { font-family: "Author", system-ui, sans-serif; }
[data-face="plus-jakarta-sans"] { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
[data-face="outfit"] { font-family: "Outfit", system-ui, sans-serif; }
[data-face="archivo"] { font-family: "Archivo", system-ui, sans-serif; }
[data-face="manrope"] { font-family: "Manrope", system-ui, sans-serif; }
[data-face="space-grotesk"] { font-family: "Space Grotesk", system-ui, sans-serif; }
[data-face="familjen-grotesk"] { font-family: "Familjen Grotesk", system-ui, sans-serif; }
[data-face="roboto"] { font-family: "Roboto", system-ui, sans-serif; }
[data-face="montserrat"] { font-family: "Montserrat", system-ui, sans-serif; }
[data-face="clash-display"] { font-family: "Clash Display", system-ui, sans-serif; }
[data-face="melodrama"] { font-family: "Melodrama", system-ui, sans-serif; }
[data-face="new-title"] { font-family: "New Title", system-ui, sans-serif; }
[data-face="boska"] { font-family: "Boska", Georgia, serif; }
[data-face="sentient"] { font-family: "Sentient", Georgia, serif; }
[data-face="gambetta"] { font-family: "Gambetta", Georgia, serif; }
[data-face="erode"] { font-family: "Erode", Georgia, serif; }
[data-face="zodiak"] { font-family: "Zodiak", Georgia, serif; }
[data-face="bespoke-serif"] { font-family: "Bespoke Serif", Georgia, serif; }
[data-face="rowan"] { font-family: "Rowan", Georgia, serif; }
[data-face="literata"] { font-family: "Literata", Georgia, serif; }
[data-face="recia"] { font-family: "Recia", Georgia, serif; }
[data-face="playfair-display"] { font-family: "Playfair Display", Georgia, serif; }
[data-face="bespoke-slab"] { font-family: "Bespoke Slab", Georgia, serif; }
[data-face="azeret-mono"] { font-family: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-face="space-mono"] { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
body {
margin: 0;
font-family: var(--ds-typeface-body);
font-size: var(--ds-font-body-size);
line-height: var(--ds-font-body-leading);
color: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-0);
-webkit-font-smoothing: antialiased;
}
h1 { font: var(--ds-font-heading-1-weight) var(--ds-font-heading-1-size) / var(--ds-font-heading-1-leading) var(--ds-font-heading-1-face); letter-spacing: var(--ds-font-heading-1-tracking); }
h2 { font: var(--ds-font-heading-2-weight) var(--ds-font-heading-2-size) / var(--ds-font-heading-2-leading) var(--ds-font-heading-2-face); letter-spacing: var(--ds-font-heading-2-tracking); }
h3 { font: var(--ds-font-heading-3-weight) var(--ds-font-heading-3-size) / var(--ds-font-heading-3-leading) var(--ds-font-heading-3-face); letter-spacing: var(--ds-font-heading-3-tracking); }
h4 { font: var(--ds-font-heading-4-weight) var(--ds-font-heading-4-size) / var(--ds-font-heading-4-leading) var(--ds-font-heading-4-face); letter-spacing: var(--ds-font-heading-4-tracking); }
h5 { font: var(--ds-font-heading-5-weight) var(--ds-font-heading-5-size) / var(--ds-font-heading-5-leading) var(--ds-font-heading-5-face); letter-spacing: var(--ds-font-heading-5-tracking); }
h6 { font: var(--ds-font-heading-6-weight) var(--ds-font-heading-6-size) / var(--ds-font-heading-6-leading) var(--ds-font-heading-6-face); letter-spacing: var(--ds-font-heading-6-tracking); }
h1, h2, h3, h4, h5, h6 {
margin: 0;
color: inherit;
}
strong,
b {
font-weight: var(--ds-bold-weight);
}
p {
margin: 0;
line-height: var(--ds-font-body-prose-leading);
}
small { font-size: var(--ds-font-small-size); }
code, pre, kbd, samp { font-family: var(--ds-typeface-mono); }
a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: from-font;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
text-underline-offset: 0.15em;
transition:
color var(--ds-duration) var(--ds-ease-out),
text-decoration-color var(--ds-duration) var(--ds-ease-out);
}
a:hover {
text-decoration-color: currentColor;
}
:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
}
@layer roles {
.ds-font-heading-1,
.ds-font-heading-2,
.ds-font-heading-3,
.ds-font-heading-4,
.ds-font-heading-5,
.ds-font-heading-6 {
margin: 0;
color: inherit;
text-wrap-style: balance;
}
.ds-font-heading-1 {
font-family: var(--ds-font-heading-1-face);
font-size: var(--ds-font-heading-1-size);
font-weight: var(--ds-font-heading-1-weight);
line-height: var(--ds-font-heading-1-leading);
letter-spacing: var(--ds-font-heading-1-tracking);
}
.ds-font-heading-2 {
font-family: var(--ds-font-heading-2-face);
font-size: var(--ds-font-heading-2-size);
font-weight: var(--ds-font-heading-2-weight);
line-height: var(--ds-font-heading-2-leading);
letter-spacing: var(--ds-font-heading-2-tracking);
}
.ds-font-heading-3 {
font-family: var(--ds-font-heading-3-face);
font-size: var(--ds-font-heading-3-size);
font-weight: var(--ds-font-heading-3-weight);
line-height: var(--ds-font-heading-3-leading);
letter-spacing: var(--ds-font-heading-3-tracking);
}
.ds-font-heading-4 {
font-family: var(--ds-font-heading-4-face);
font-size: var(--ds-font-heading-4-size);
font-weight: var(--ds-font-heading-4-weight);
line-height: var(--ds-font-heading-4-leading);
letter-spacing: var(--ds-font-heading-4-tracking);
}
.ds-font-heading-5 {
font-family: var(--ds-font-heading-5-face);
font-size: var(--ds-font-heading-5-size);
font-weight: var(--ds-font-heading-5-weight);
line-height: var(--ds-font-heading-5-leading);
letter-spacing: var(--ds-font-heading-5-tracking);
}
.ds-font-heading-6 {
font-family: var(--ds-font-heading-6-face);
font-size: var(--ds-font-heading-6-size);
font-weight: var(--ds-font-heading-6-weight);
line-height: var(--ds-font-heading-6-leading);
letter-spacing: var(--ds-font-heading-6-tracking);
}
.ds-font-copy,
.ds-font-body,
.ds-font-label,
.ds-font-small,
.ds-font-mono {
margin: 0;
color: inherit;
text-wrap-style: pretty;
}
.ds-font-copy {
font-family: var(--ds-font-copy-face);
font-size: var(--ds-font-copy-size);
line-height: var(--ds-font-copy-leading);
font-weight: var(--ds-font-copy-weight);
}
.ds-font-body {
font-family: var(--ds-font-body-face);
font-size: var(--ds-font-body-size);
line-height: var(--ds-font-body-leading);
font-weight: var(--ds-font-body-weight);
}
.ds-font-copy-prose {
font-family: var(--ds-font-copy-prose-face);
font-size: var(--ds-font-copy-prose-size);
line-height: var(--ds-font-copy-prose-leading);
font-weight: var(--ds-font-copy-prose-weight);
}
.ds-font-body-prose {
font-family: var(--ds-font-body-prose-face);
font-size: var(--ds-font-body-prose-size);
line-height: var(--ds-font-body-prose-leading);
font-weight: var(--ds-font-body-prose-weight);
}
.ds-font-label {
font-family: var(--ds-font-label-face);
font-size: var(--ds-font-label-size);
line-height: var(--ds-font-label-leading);
font-weight: var(--ds-font-label-weight);
}
.ds-font-small {
font-family: var(--ds-font-small-face);
font-size: var(--ds-font-small-size);
line-height: var(--ds-font-small-leading);
font-weight: var(--ds-font-small-weight);
}
.ds-font-mono {
font-family: var(--ds-font-mono-face);
font-size: var(--ds-font-mono-size);
line-height: var(--ds-font-mono-leading);
font-weight: var(--ds-font-mono-weight);
letter-spacing: var(--ds-font-mono-tracking);
}
.ds-font-overline {
margin: 0;
font-family: var(--ds-font-overline-face);
font-size: var(--ds-font-overline-size);
font-weight: var(--ds-font-overline-weight);
line-height: var(--ds-font-overline-leading);
letter-spacing: var(--ds-font-overline-tracking);
text-transform: uppercase;
color: inherit;
}
.ds-font-micro {
margin: 0;
font-family: var(--ds-font-micro-face);
font-size: var(--ds-font-micro-size);
font-weight: var(--ds-font-micro-weight);
line-height: var(--ds-font-micro-leading);
letter-spacing: var(--ds-font-micro-tracking);
text-transform: uppercase;
}
.ds-text-colour--primary-neutral { color: var(--ds-text-primary-neutral); }
.ds-text-colour--secondary-neutral { color: var(--ds-text-secondary-neutral); }
.ds-text-colour--tertiary-neutral { color: var(--ds-text-tertiary-neutral); }
.ds-text-colour--success { color: var(--ds-success-ink); }
.ds-text-colour--warning { color: var(--ds-warning-ink); }
.ds-text-colour--danger { color: var(--ds-danger-ink); }
.ds-text-colour--info { color: var(--ds-info-ink); }
}
@layer components {
.ds-stack,
.ds-row {
display: flex;
min-width: 0;
}
.ds-stack { flex-direction: column; }
.ds-row { flex-direction: row; }
.ds-stack:is(ul, ol),
.ds-row:is(ul, ol),
.ds-grid:is(ul, ol) {
list-style: none;
margin: 0;
padding: 0;
}
.ds-grid {
--ds-grid-floor: 24rem;
--ds-grid-gap: 0px;
display: grid;
min-width: 0;
}
.ds-gap-line { --ds-grid-gap: var(--ds-rhythm-line); gap: var(--ds-grid-gap); }
.ds-gap-element { --ds-grid-gap: var(--ds-rhythm-element); gap: var(--ds-grid-gap); }
.ds-gap-block { --ds-grid-gap: var(--ds-rhythm-block); gap: var(--ds-grid-gap); }
.ds-gap-section { --ds-grid-gap: var(--ds-rhythm-section); gap: var(--ds-grid-gap); }
.ds-align-start { align-items: flex-start; }
.ds-align-center { align-items: center; }
.ds-align-end { align-items: flex-end; }
.ds-align-stretch { align-items: stretch; }
.ds-align-baseline { align-items: baseline; }
.ds-justify-start { justify-content: flex-start; }
.ds-justify-center { justify-content: center; }
.ds-justify-end { justify-content: flex-end; }
.ds-justify-between { justify-content: space-between; }
.ds-wrap { flex-wrap: wrap; }
.ds-cols-1 { grid-template-columns: 1fr; }
.ds-cols-2 {
grid-template-columns: repeat(
auto-fill,
minmax(min(max(var(--ds-grid-floor), (100% - var(--ds-grid-gap)) / 2), 100%), 1fr)
);
}
.ds-cols-3 {
grid-template-columns: repeat(
auto-fill,
minmax(min(max(var(--ds-grid-floor), (100% - 2 * var(--ds-grid-gap)) / 3), 100%), 1fr)
);
}
.ds-cols-4 {
grid-template-columns: repeat(
auto-fill,
minmax(min(max(var(--ds-grid-floor), (100% - 3 * var(--ds-grid-gap)) / 4), 100%), 1fr)
);
}
.ds-grid--posters {
--ds-grid-floor: 10rem;
}
.ds-grid--stats {
--ds-grid-floor: 8rem;
}
.ds-grid--products {
--ds-grid-floor: 15rem;
}
.ds-cols-auto {
--ds-grid-floor: 18rem;
grid-template-columns: repeat(auto-fill, minmax(min(var(--ds-grid-floor), 100%), 1fr));
}
.ds-avatar {
--ds-avatar-face: var(--ds-font-body-face);
--ds-avatar-weight: var(--ds-emphasis-weight);
--ds-avatar-intent: line-height font-size;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: var(--ds-avatar-size);
block-size: var(--ds-avatar-size);
border-radius: var(--ds-radius-full);
background-color: var(--ds-surface-3);
--ds-avatar-ink: var(--ds-text-primary-neutral);
color: var(--ds-avatar-ink);
font-family: var(--ds-avatar-face);
font-weight: var(--ds-avatar-weight);
--ds-avatar-initials-size: calc(var(--ds-avatar-size) * 0.4);
font-size: var(--ds-avatar-initials-size);
line-height: 1;
overflow: hidden;
user-select: none;
}
.ds-avatar--xsmall { --ds-avatar-size: var(--ds-size-1); }
.ds-avatar--small { --ds-avatar-size: var(--ds-size-2); }
.ds-avatar--medium { --ds-avatar-size: var(--ds-size-3); }
.ds-avatar--large { --ds-avatar-size: var(--ds-size-4); }
.ds-avatar--xlarge { --ds-avatar-size: var(--ds-size-5); }
.ds-avatar--xxlarge { --ds-avatar-size: var(--ds-size-6); }
.ds-avatar--square {
border-radius: var(--ds-radius-2);
}
.ds-avatar__image {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: inherit;
}
.ds-avatar-stack {
display: inline-flex;
align-items: center;
}
.ds-avatar-stack > .ds-avatar {
box-shadow: 0 0 0 2px var(--ds-avatar-ring, var(--ds-static-white));
}
.ds-avatar-stack > .ds-avatar + .ds-avatar {
margin-inline-start: calc(var(--ds-avatar-size) * -0.3);
}
.ds-avatar-stack > .ds-avatar:not(:first-child) > .ds-avatar__initials {
transform: translateX(calc(var(--ds-avatar-size) * 0.15));
}
.ds-avatar-stack--xsmall { --ds-avatar-size: var(--ds-size-1); }
.ds-avatar-stack--small { --ds-avatar-size: var(--ds-size-2); }
.ds-avatar-stack--medium { --ds-avatar-size: var(--ds-size-3); }
.ds-avatar-stack--large { --ds-avatar-size: var(--ds-size-4); }
.ds-avatar-stack--xlarge { --ds-avatar-size: var(--ds-size-5); }
.ds-avatar-stack--xxlarge { --ds-avatar-size: var(--ds-size-6); }
.ds-avatar-stack__more {
--ds-avatar-stack-more-face: var(--ds-font-body-face);
margin-inline-start: var(--ds-space-2);
font-family: var(--ds-avatar-stack-more-face);
--ds-avatar-stack-more-size: calc(var(--ds-avatar-size) * 0.35);
font-size: var(--ds-avatar-stack-more-size);
font-weight: var(--ds-avatar-weight);
--ds-avatar-stack-more-ink: var(--ds-text-secondary-neutral);
color: var(--ds-avatar-stack-more-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-avatar--pressable {
padding: 0;
border: 0;
cursor: pointer;
font: inherit;
transition: box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-avatar--pressable:hover {
box-shadow: 0 0 0 2px var(--ds-border-strong);
}
.ds-avatar--pressable:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-avatar[data-broken] .ds-avatar__image {
display: none;
}
.ds-avatar-identity {
display: inline-flex;
align-items: center;
gap: var(--ds-rhythm-element);
min-inline-size: 0;
color: inherit;
text-decoration: none;
text-align: start;
}
button.ds-avatar-identity {
font: inherit;
padding: 0;
border: 0;
background: none;
}
.ds-avatar-identity--pressable {
cursor: pointer;
}
.ds-avatar-identity:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-avatar-identity__text {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.ds-avatar-identity__name {
--ds-avatar-identity-name-face: var(--ds-font-label-face);
--ds-avatar-identity-name-size: var(--ds-font-label-size);
--ds-avatar-identity-name-weight: var(--ds-font-label-weight);
--ds-avatar-identity-name-leading: var(--ds-font-label-leading);
--ds-avatar-identity-name-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-avatar-identity-name-face);
font-size: var(--ds-avatar-identity-name-size);
font-weight: var(--ds-avatar-identity-name-weight);
line-height: var(--ds-avatar-identity-name-leading);
letter-spacing: var(--ds-avatar-identity-name-tracking);
--ds-avatar-identity-name-ink: var(--ds-text-primary-neutral);
color: var(--ds-avatar-identity-name-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-avatar-identity__description {
--ds-avatar-identity-description-face: var(--ds-font-small-face);
--ds-avatar-identity-description-size: var(--ds-font-small-size);
--ds-avatar-identity-description-weight: var(--ds-font-small-weight);
--ds-avatar-identity-description-leading: var(--ds-font-small-leading);
--ds-avatar-identity-description-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-avatar-identity-description-face);
font-size: var(--ds-avatar-identity-description-size);
font-weight: var(--ds-avatar-identity-description-weight);
line-height: var(--ds-avatar-identity-description-leading);
letter-spacing: var(--ds-avatar-identity-description-tracking);
--ds-avatar-identity-description-ink: var(--ds-text-secondary-neutral);
color: var(--ds-avatar-identity-description-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(.ds-avatar-identity--medium, .ds-avatar-identity--large, .ds-avatar-identity--xlarge, .ds-avatar-identity--xxlarge)
.ds-avatar-identity__name {
--ds-avatar-identity-name-face: var(--ds-font-body-face);
--ds-avatar-identity-name-size: var(--ds-font-body-size);
--ds-avatar-identity-name-weight: var(--ds-font-body-weight);
--ds-avatar-identity-name-leading: var(--ds-font-body-leading);
--ds-avatar-identity-name-tracking: var(--ds-font-body-tracking);
font-family: var(--ds-avatar-identity-name-face);
font-size: var(--ds-avatar-identity-name-size);
font-weight: var(--ds-avatar-identity-name-weight);
line-height: var(--ds-avatar-identity-name-leading);
letter-spacing: var(--ds-avatar-identity-name-tracking);
}
:is(.ds-avatar-identity--medium, .ds-avatar-identity--large, .ds-avatar-identity--xlarge, .ds-avatar-identity--xxlarge)
.ds-avatar-identity__description {
--ds-avatar-identity-description-face: var(--ds-font-label-face);
--ds-avatar-identity-description-size: var(--ds-font-label-size);
--ds-avatar-identity-description-weight: var(--ds-font-label-weight);
--ds-avatar-identity-description-leading: var(--ds-font-label-leading);
--ds-avatar-identity-description-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-avatar-identity-description-face);
font-size: var(--ds-avatar-identity-description-size);
font-weight: var(--ds-avatar-identity-description-weight);
line-height: var(--ds-avatar-identity-description-leading);
letter-spacing: var(--ds-avatar-identity-description-tracking);
}
.ds-badge {
--ds-badge-tracking: var(--ds-font-overline-tracking);
--ds-badge-weight: var(--ds-emphasis-weight);
box-sizing: border-box;
display: inline-flex;
align-items: center;
min-block-size: var(--ds-badge-tier);
gap: var(--ds-space-1);
padding-block: 0;
padding-inline: var(--ds-badge-inset);
border: 1px solid transparent;
border-radius: var(--ds-radius-2);
font-weight: var(--ds-badge-weight);
text-transform: uppercase;
letter-spacing: var(--ds-badge-tracking);
vertical-align: middle;
white-space: nowrap;
}
.ds-badge--medium {
--ds-badge-face: var(--ds-font-body-face);
--ds-badge-size: var(--ds-font-body-size);
--ds-badge-leading: var(--ds-font-body-leading);
--ds-badge-tier: var(--ds-size-3);
--ds-badge-inset: var(--ds-space-4);
font-family: var(--ds-badge-face);
font-size: var(--ds-badge-size);
letter-spacing: var(--ds-badge-tracking);
line-height: var(--ds-badge-leading);
}
.ds-badge--small {
--ds-badge-face: var(--ds-font-label-face);
--ds-badge-size: var(--ds-font-label-size);
--ds-badge-leading: var(--ds-font-label-leading);
--ds-badge-tier: var(--ds-size-2);
--ds-badge-inset: var(--ds-space-3);
font-family: var(--ds-badge-face);
font-size: var(--ds-badge-size);
letter-spacing: var(--ds-badge-tracking);
line-height: var(--ds-badge-leading);
}
.ds-badge--xsmall {
--ds-badge-face: var(--ds-font-small-face);
--ds-badge-size: var(--ds-font-small-size);
--ds-badge-leading: var(--ds-font-small-leading);
--ds-badge-tier: var(--ds-size-1);
--ds-badge-inset: var(--ds-space-2);
font-family: var(--ds-badge-face);
font-size: var(--ds-badge-size);
letter-spacing: var(--ds-badge-tracking);
line-height: var(--ds-badge-leading);
}
.ds-badge--plain {
text-transform: none;
letter-spacing: normal;
}
.ds-badge--xxsmall {
--ds-badge-face: var(--ds-font-small-face);
--ds-badge-size: var(--ds-font-small-size);
--ds-badge-leading: var(--ds-font-small-leading);
--ds-badge-tier: var(--ds-space-5);
--ds-badge-inset: var(--ds-space-2);
font-family: var(--ds-badge-face);
font-size: var(--ds-badge-size);
letter-spacing: var(--ds-badge-tracking);
line-height: var(--ds-badge-leading);
}
.ds-badge--control.ds-badge--xsmall {
min-block-size: var(--ds-badge-tier);
}
.ds-badge--control.ds-badge--xxsmall {
min-block-size: var(--ds-size-1);
}
.ds-badge--control.ds-badge--small {
min-block-size: var(--ds-badge-tier);
}
.ds-badge--control.ds-badge--medium {
min-block-size: var(--ds-badge-tier);
}
.ds-badge__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-badge__icon > svg {
width: 100%;
height: 100%;
}
.ds-badge--count {
--ds-badge-count-face: var(--ds-font-small-face);
--ds-badge-count-size: var(--ds-font-small-size);
font-family: var(--ds-badge-count-face);
font-size: var(--ds-badge-count-size);
justify-content: center;
--ds-badge-count-floor: var(--ds-badge-leading);
box-sizing: border-box;
min-block-size: var(--ds-badge-count-floor);
block-size: var(--ds-badge-count-floor);
min-inline-size: var(--ds-badge-count-floor);
padding-block: 0;
padding-inline: var(--ds-space-0-5);
border-radius: var(--ds-radius-full);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.ds-badge__label {
overflow: hidden;
text-overflow: ellipsis;
}
.ds-badge--neutral {
--ds-badge-ink: var(--ds-text-primary-neutral);
--ds-badge-tint: var(--ds-interactive-tint);
--ds-badge-edge: var(--ds-interactive-edge);
--ds-badge-solid: var(--ds-inverse);
--ds-badge-on-solid: var(--ds-on-inverse);
}
.ds-badge--brand {
--ds-badge-ink: var(--ds-brand-ink);
--ds-badge-tint: var(--ds-brand-tint);
--ds-badge-edge: var(--ds-brand-edge);
--ds-badge-solid: var(--ds-brand);
--ds-badge-on-solid: var(--ds-on-brand);
}
.ds-badge--success {
--ds-badge-ink: var(--ds-success-ink);
--ds-badge-tint: var(--ds-success-tint);
--ds-badge-edge: var(--ds-success-edge);
--ds-badge-solid: var(--ds-success);
--ds-badge-on-solid: var(--ds-on-success);
}
.ds-badge--warning {
--ds-badge-ink: var(--ds-warning-ink);
--ds-badge-tint: var(--ds-warning-tint);
--ds-badge-edge: var(--ds-warning-edge);
--ds-badge-solid: var(--ds-warning);
--ds-badge-on-solid: var(--ds-on-warning);
}
.ds-badge--danger {
--ds-badge-ink: var(--ds-danger-ink);
--ds-badge-tint: var(--ds-danger-tint);
--ds-badge-edge: var(--ds-danger-edge);
--ds-badge-solid: var(--ds-danger);
--ds-badge-on-solid: var(--ds-on-danger);
}
.ds-badge--info {
--ds-badge-ink: var(--ds-info-ink);
--ds-badge-tint: var(--ds-info-tint);
--ds-badge-edge: var(--ds-info-edge);
--ds-badge-solid: var(--ds-info);
--ds-badge-on-solid: var(--ds-on-info);
}
.ds-badge--hue-red {
--ds-badge-ink: var(--ds-hue-red-ink);
--ds-badge-tint: var(--ds-hue-red-tint);
--ds-badge-edge: var(--ds-hue-red-edge);
--ds-badge-solid: var(--ds-hue-red);
--ds-badge-on-solid: var(--ds-on-hue-red);
}
.ds-badge--hue-orange {
--ds-badge-ink: var(--ds-hue-orange-ink);
--ds-badge-tint: var(--ds-hue-orange-tint);
--ds-badge-edge: var(--ds-hue-orange-edge);
--ds-badge-solid: var(--ds-hue-orange);
--ds-badge-on-solid: var(--ds-on-hue-orange);
}
.ds-badge--hue-amber {
--ds-badge-ink: var(--ds-hue-amber-ink);
--ds-badge-tint: var(--ds-hue-amber-tint);
--ds-badge-edge: var(--ds-hue-amber-edge);
--ds-badge-solid: var(--ds-hue-amber);
--ds-badge-on-solid: var(--ds-on-hue-amber);
}
.ds-badge--hue-yellow {
--ds-badge-ink: var(--ds-hue-yellow-ink);
--ds-badge-tint: var(--ds-hue-yellow-tint);
--ds-badge-edge: var(--ds-hue-yellow-edge);
--ds-badge-solid: var(--ds-hue-yellow);
--ds-badge-on-solid: var(--ds-on-hue-yellow);
}
.ds-badge--hue-lime {
--ds-badge-ink: var(--ds-hue-lime-ink);
--ds-badge-tint: var(--ds-hue-lime-tint);
--ds-badge-edge: var(--ds-hue-lime-edge);
--ds-badge-solid: var(--ds-hue-lime);
--ds-badge-on-solid: var(--ds-on-hue-lime);
}
.ds-badge--hue-green {
--ds-badge-ink: var(--ds-hue-green-ink);
--ds-badge-tint: var(--ds-hue-green-tint);
--ds-badge-edge: var(--ds-hue-green-edge);
--ds-badge-solid: var(--ds-hue-green);
--ds-badge-on-solid: var(--ds-on-hue-green);
}
.ds-badge--hue-teal {
--ds-badge-ink: var(--ds-hue-teal-ink);
--ds-badge-tint: var(--ds-hue-teal-tint);
--ds-badge-edge: var(--ds-hue-teal-edge);
--ds-badge-solid: var(--ds-hue-teal);
--ds-badge-on-solid: var(--ds-on-hue-teal);
}
.ds-badge--hue-cyan {
--ds-badge-ink: var(--ds-hue-cyan-ink);
--ds-badge-tint: var(--ds-hue-cyan-tint);
--ds-badge-edge: var(--ds-hue-cyan-edge);
--ds-badge-solid: var(--ds-hue-cyan);
--ds-badge-on-solid: var(--ds-on-hue-cyan);
}
.ds-badge--hue-blue {
--ds-badge-ink: var(--ds-hue-blue-ink);
--ds-badge-tint: var(--ds-hue-blue-tint);
--ds-badge-edge: var(--ds-hue-blue-edge);
--ds-badge-solid: var(--ds-hue-blue);
--ds-badge-on-solid: var(--ds-on-hue-blue);
}
.ds-badge--hue-indigo {
--ds-badge-ink: var(--ds-hue-indigo-ink);
--ds-badge-tint: var(--ds-hue-indigo-tint);
--ds-badge-edge: var(--ds-hue-indigo-edge);
--ds-badge-solid: var(--ds-hue-indigo);
--ds-badge-on-solid: var(--ds-on-hue-indigo);
}
.ds-badge--hue-violet {
--ds-badge-ink: var(--ds-hue-violet-ink);
--ds-badge-tint: var(--ds-hue-violet-tint);
--ds-badge-edge: var(--ds-hue-violet-edge);
--ds-badge-solid: var(--ds-hue-violet);
--ds-badge-on-solid: var(--ds-on-hue-violet);
}
.ds-badge--hue-pink {
--ds-badge-ink: var(--ds-hue-pink-ink);
--ds-badge-tint: var(--ds-hue-pink-tint);
--ds-badge-edge: var(--ds-hue-pink-edge);
--ds-badge-solid: var(--ds-hue-pink);
--ds-badge-on-solid: var(--ds-on-hue-pink);
}
.ds-badge--fill-solid {
background-color: var(--ds-badge-solid);
border-color: var(--ds-badge-solid);
color: var(--ds-badge-on-solid);
}
.ds-badge--fill-soft {
background-color: var(--ds-badge-tint);
border-color: var(--ds-badge-edge);
color: var(--ds-badge-ink);
}
.ds-badge--fill-none {
background-color: transparent;
border-color: var(--ds-badge-ink);
color: var(--ds-badge-ink);
}
.ds-badge--control {
cursor: pointer;
appearance: none;
transition:
background-color var(--ds-duration) var(--ds-ease),
box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-badge--control:hover {
box-shadow: inset 0 0 0 100px color-mix(in srgb, currentColor 12%, transparent);
}
.ds-badge--control:active {
box-shadow: inset 0 0 0 100px color-mix(in srgb, currentColor 20%, transparent);
}
.ds-badge--control:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-badge--selected {
background-color: var(--ds-badge-solid);
border-color: var(--ds-badge-solid);
color: var(--ds-badge-on-solid);
}
.ds-badge__action {
display: inline-flex;
align-items: center;
gap: inherit;
min-width: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
text-transform: inherit;
letter-spacing: inherit;
color: inherit;
cursor: pointer;
}
.ds-badge__action:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-badge__remove {
font: inherit;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.4em;
height: 1.4em;
margin-inline-end: -0.35em;
padding: 0;
border: 0;
border-radius: var(--ds-radius-full);
background: transparent;
color: inherit;
cursor: pointer;
opacity: 0.65;
transition:
opacity var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-badge__remove::after {
content: "";
position: absolute;
inset: calc((1.4em - max(24px, 1.4em)) / 2);
}
.ds-badge__remove > svg {
width: 0.8em;
height: 0.8em;
}
.ds-badge__remove:hover {
opacity: 1;
background-color: color-mix(in srgb, currentColor 18%, transparent);
}
.ds-badge__remove:focus-visible {
opacity: 1;
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
.ds-badge--notify {
box-sizing: border-box;
--ds-badge-floor-face: var(--ds-font-small-face);
--ds-badge-floor-size: var(--ds-font-small-size);
font-family: var(--ds-badge-floor-face);
font-size: var(--ds-badge-floor-size);
line-height: 1;
min-inline-size: var(--ds-space-5);
min-block-size: var(--ds-space-5);
block-size: var(--ds-space-5);
padding-block: 0;
padding-inline: var(--ds-space-1);
justify-content: center;
border-radius: var(--ds-radius-full);
border-color: transparent;
text-transform: none;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--ds-badge-ring, var(--ds-surface-0));
}
.ds-badge--dot {
box-sizing: border-box;
min-inline-size: var(--ds-space-2);
inline-size: var(--ds-space-2);
min-block-size: var(--ds-space-2);
block-size: var(--ds-space-2);
padding: 0;
}
.ds-breadcrumb {
--ds-breadcrumb-face: var(--ds-font-label-face);
--ds-breadcrumb-tracking: var(--ds-font-label-tracking);
--ds-breadcrumb-size: var(--ds-font-label-size);
--ds-breadcrumb-weight: var(--ds-font-label-weight);
--ds-breadcrumb-leading: var(--ds-font-label-leading);
--ds-breadcrumb-here-weight: var(--ds-emphasis-weight);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1);
font-family: var(--ds-breadcrumb-face);
font-size: var(--ds-breadcrumb-size);
letter-spacing: var(--ds-breadcrumb-tracking);
font-weight: var(--ds-breadcrumb-weight);
line-height: var(--ds-breadcrumb-leading);
}
.ds-breadcrumb__list {
display: contents;
margin: 0;
padding: 0;
list-style: none;
}
.ds-breadcrumb__crumb {
display: flex;
align-items: center;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-breadcrumb__crumb + .ds-breadcrumb__crumb::before {
content: "";
display: inline-block;
inline-size: 0.4em;
block-size: 0.4em;
--ds-breadcrumb-separator-ink: var(--ds-text-tertiary-neutral);
border-block-start: 1px solid var(--ds-breadcrumb-separator-ink);
border-inline-end: 1px solid var(--ds-breadcrumb-separator-ink);
rotate: 45deg;
margin-inline: var(--ds-space-1);
flex: none;
}
.ds-breadcrumb__link {
--ds-breadcrumb-link-ink: var(--ds-text-secondary-neutral);
color: var(--ds-breadcrumb-link-ink);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: var(--ds-space-2) var(--ds-space-1);
margin: calc(var(--ds-space-2) * -1) calc(var(--ds-space-1) * -1);
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-breadcrumb__link:hover {
--ds-breadcrumb-link-ink: var(--ds-text-primary-neutral);
color: var(--ds-breadcrumb-link-ink);
}
.ds-breadcrumb__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-breadcrumb__here {
--ds-breadcrumb-here-ink: var(--ds-text-primary-neutral);
color: var(--ds-breadcrumb-here-ink);
font-weight: var(--ds-breadcrumb-here-weight);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-button {
--ds-button-face: var(--ds-font-body-face);
--ds-button-weight: var(--ds-emphasis-weight);
--ds-button-gap: var(--ds-space-2);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-button-gap);
border: var(--ds-button-edge-width, 1px) solid transparent;
text-transform: var(--ds-button-case, none);
border-radius: var(--ds-radius-2);
font-family: var(--ds-button-face);
font-weight: var(--ds-button-weight);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
min-inline-size: fit-content;
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-button--xsmall {
--ds-button-face: var(--ds-font-small-face);
--ds-button-tracking: var(--ds-font-small-tracking);
--ds-button-size: var(--ds-font-small-size);
--ds-button-leading: var(--ds-font-small-leading);
font-family: var(--ds-button-face);
font-size: var(--ds-button-size); line-height: var(--ds-button-leading);
letter-spacing: var(--ds-button-tracking);
min-block-size: var(--ds-size-1);
--ds-button-pad: calc((var(--ds-size-1) - var(--ds-font-small-leading) - var(--ds-button-edge-width, 1px) * 2) / 2);
padding-block: var(--ds-button-pad);
padding-inline: var(--ds-space-2);
}
.ds-button--small {
--ds-button-face: var(--ds-font-label-face);
--ds-button-tracking: var(--ds-font-label-tracking);
--ds-button-size: var(--ds-font-label-size);
--ds-button-leading: var(--ds-font-label-leading);
font-family: var(--ds-button-face);
font-size: var(--ds-button-size); line-height: var(--ds-button-leading);
letter-spacing: var(--ds-button-tracking);
min-block-size: var(--ds-size-2);
--ds-button-pad: calc((var(--ds-size-2) - var(--ds-font-label-leading) - var(--ds-button-edge-width, 1px) * 2) / 2);
padding-block: var(--ds-button-pad);
padding-inline: var(--ds-space-3);
}
.ds-button--medium {
--ds-button-face: var(--ds-font-body-face);
--ds-button-tracking: var(--ds-font-body-tracking);
--ds-button-size: var(--ds-font-body-size);
--ds-button-leading: var(--ds-font-body-leading);
font-family: var(--ds-button-face);
font-size: var(--ds-button-size); line-height: var(--ds-button-leading);
letter-spacing: var(--ds-button-tracking);
min-block-size: var(--ds-size-3);
--ds-button-pad: calc((var(--ds-size-3) - var(--ds-font-body-leading) - var(--ds-button-edge-width, 1px) * 2) / 2);
padding-block: var(--ds-button-pad);
padding-inline: var(--ds-space-4);
}
.ds-button--large {
--ds-button-face: var(--ds-font-body-face);
--ds-button-tracking: var(--ds-font-body-tracking);
--ds-button-size: var(--ds-font-body-size);
--ds-button-leading: var(--ds-font-body-leading);
font-family: var(--ds-button-face);
font-size: var(--ds-button-size); line-height: var(--ds-button-leading);
letter-spacing: var(--ds-button-tracking);
min-block-size: var(--ds-size-4);
--ds-button-pad: calc((var(--ds-size-4) - var(--ds-font-body-leading) - var(--ds-button-edge-width, 1px) * 2) / 2);
padding-block: var(--ds-button-pad);
padding-inline: var(--ds-space-5);
}
.ds-button--xlarge {
--ds-button-face: var(--ds-font-body-face);
--ds-button-tracking: var(--ds-font-body-tracking);
--ds-button-size: var(--ds-font-body-size);
--ds-button-leading: var(--ds-font-body-leading);
font-family: var(--ds-button-face);
font-size: var(--ds-button-size); line-height: var(--ds-button-leading);
letter-spacing: var(--ds-button-tracking);
min-block-size: var(--ds-size-5);
--ds-button-pad: calc((var(--ds-size-5) - var(--ds-font-body-leading) - var(--ds-button-edge-width, 1px) * 2) / 2);
padding-block: var(--ds-button-pad);
padding-inline: var(--ds-space-6);
}
.ds-button--xxlarge {
--ds-button-face: var(--ds-font-body-face);
--ds-button-tracking: var(--ds-font-body-tracking);
--ds-button-size: var(--ds-font-body-size);
--ds-button-leading: var(--ds-font-body-leading);
font-family: var(--ds-button-face);
font-size: var(--ds-button-size); line-height: var(--ds-button-leading);
letter-spacing: var(--ds-button-tracking);
min-block-size: var(--ds-size-6);
--ds-button-pad: calc((var(--ds-size-6) - var(--ds-font-body-leading) - var(--ds-button-edge-width, 1px) * 2) / 2);
padding-block: var(--ds-button-pad);
padding-inline: var(--ds-space-8);
}
.ds-button--icon {
padding-inline: 0;
}
.ds-button--icon.ds-button--xsmall { inline-size: var(--ds-size-1); }
.ds-button--icon.ds-button--small { inline-size: var(--ds-size-2); }
.ds-button--icon.ds-button--medium { inline-size: var(--ds-size-3); }
.ds-button--icon.ds-button--large { inline-size: var(--ds-size-4); }
.ds-button--icon.ds-button--xlarge { inline-size: var(--ds-size-5); }
.ds-button--icon.ds-button--xxlarge { inline-size: var(--ds-size-6); }
.ds-button--block {
display: flex;
inline-size: 100%;
}
.ds-button__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-button__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-button--inverse {
--ds-button-ink: var(--ds-text-primary-neutral);
--ds-button-tint: var(--ds-interactive-tint);
--ds-button-tint-hover: var(--ds-interactive-tint-hover);
--ds-button-edge: var(--ds-inverse);
--ds-button-solid: var(--ds-inverse);
--ds-button-solid-hover: var(--ds-inverse-hover);
--ds-button-solid-active: var(--ds-inverse-active);
--ds-button-solid-edge: var(--ds-inverse);
--ds-button-on-solid: var(--ds-on-inverse);
}
.ds-button--neutral {
--ds-button-ink: var(--ds-text-primary-neutral);
--ds-button-tint: var(--ds-surface-hover);
--ds-button-tint-hover: var(--ds-surface-active);
--ds-button-edge: var(--ds-border);
--ds-button-solid: var(--ds-surface-1);
--ds-button-solid-hover: var(--ds-surface-2);
--ds-button-solid-active: var(--ds-surface-3);
--ds-button-solid-edge: transparent;
--ds-button-on-solid: var(--ds-text-primary-neutral);
}
.ds-button--brand {
--ds-button-ink: var(--ds-brand-ink);
--ds-button-tint: var(--ds-brand-tint);
--ds-button-tint-hover: var(--ds-brand-tint-hover);
--ds-button-edge: var(--ds-brand);
--ds-button-solid: var(--ds-brand);
--ds-button-solid-hover: var(--ds-brand-hover);
--ds-button-solid-active: var(--ds-brand-active);
--ds-button-solid-edge: var(--ds-brand);
--ds-button-on-solid: var(--ds-on-brand);
}
.ds-button--danger {
--ds-button-ink: var(--ds-danger-ink);
--ds-button-tint: var(--ds-danger-tint);
--ds-button-tint-hover: var(--ds-danger-tint-hover);
--ds-button-edge: var(--ds-danger);
--ds-button-solid: var(--ds-danger);
--ds-button-solid-hover: var(--ds-danger-hover);
--ds-button-solid-active: var(--ds-danger-active);
--ds-button-solid-edge: var(--ds-danger);
--ds-button-on-solid: var(--ds-on-danger);
}
.ds-button--success {
--ds-button-ink: var(--ds-success-ink);
--ds-button-tint: var(--ds-success-tint);
--ds-button-tint-hover: var(--ds-success-tint-hover);
--ds-button-edge: var(--ds-success);
--ds-button-solid: var(--ds-success);
--ds-button-solid-hover: var(--ds-success-hover);
--ds-button-solid-active: var(--ds-success-active);
--ds-button-solid-edge: var(--ds-success);
--ds-button-on-solid: var(--ds-on-success);
}
.ds-button--fill-solid {
background-color: var(--ds-button-solid);
border-color: var(--ds-button-solid-edge);
color: var(--ds-button-on-solid);
}
.ds-button--fill-outline {
background-color: transparent;
border-color: var(--ds-button-edge);
color: var(--ds-button-ink);
}
.ds-button--fill-none {
background-color: transparent;
border-color: transparent;
color: var(--ds-button-ink);
}
.ds-button--fill-solid:hover:not(:disabled) {
background-color: var(--ds-button-solid-hover);
border-color: var(--ds-button-solid-hover);
}
.ds-button--fill-solid:active:not(:disabled) {
background-color: var(--ds-button-solid-active);
border-color: var(--ds-button-solid-active);
}
.ds-button--fill-none[aria-pressed="true"]:not(:disabled),
.ds-button--fill-outline[aria-pressed="true"]:not(:disabled) {
--ds-button-edge: var(--ds-border-active);
border-color: var(--ds-border-active);
--ds-button-ink: var(--ds-text-primary-neutral);
color: var(--ds-button-ink);
}
.ds-button--fill-none[aria-pressed="true"]:not(:disabled) {
background-color: var(--ds-button-tint-hover);
}
[data-ground="inverse"] .ds-button:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-button) {
--ds-button-ink: var(--ds-on-inverse);
--ds-button-edge: var(--ds-secondary-on-inverse);
--ds-button-tint: var(--ds-inverse-hover);
--ds-button-tint-hover: var(--ds-inverse-active);
}
[data-ground="inverse"] .ds-button--inverse:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-button) {
--ds-button-solid: var(--ds-quote);
--ds-button-solid-hover: var(--ds-quote-hover);
--ds-button-solid-active: var(--ds-quote-active);
--ds-button-solid-edge: var(--ds-quote);
--ds-button-on-solid: var(--ds-on-quote);
}
.ds-button--fill-outline:hover:not(:disabled),
.ds-button--fill-none:hover:not(:disabled) {
background-color: var(--ds-button-tint);
}
.ds-button--fill-outline:active:not(:disabled),
.ds-button--fill-none:active:not(:disabled) {
background-color: var(--ds-button-tint-hover);
}
.ds-button:disabled {
background-color: var(--ds-surface-disabled);
border-color: var(--ds-border-disabled);
--ds-button-ink: var(--ds-text-disabled);
color: var(--ds-button-ink);
cursor: not-allowed;
}
@container ds-toolbar (width <= 30rem) {
.ds-button--terse .ds-button__label {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.ds-toolbar__start .ds-button--fill-outline:not(.ds-button--neutral),
.ds-toolbar__end .ds-button--fill-outline:not(.ds-button--neutral) {
--ds-button-edge: transparent;
}
.ds-spinner {
box-sizing: border-box;
display: inline-block;
flex: none;
inline-size: var(--ds-spinner-size);
block-size: var(--ds-spinner-size);
border: calc(var(--ds-spinner-size) / 8) solid
color-mix(in srgb, currentColor 25%, transparent);
border-block-start-color: currentColor;
border-radius: var(--ds-radius-full);
animation: ds-spinner-turn var(--ds-duration-loop) linear infinite;
}
@keyframes ds-spinner-turn {
to {
transform: rotate(1turn);
}
}
.ds-stat {
--ds-stat-face: var(--ds-font-body-face);
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
font-family: var(--ds-stat-face);
}
.ds-stat__label {
--ds-stat-label-face: var(--ds-font-label-face);
--ds-stat-label-tracking: var(--ds-font-label-tracking);
--ds-stat-label-size: var(--ds-font-label-size);
--ds-stat-label-weight: var(--ds-font-label-weight);
--ds-stat-label-leading: var(--ds-font-label-leading);
order: -1;
font-family: var(--ds-stat-label-face);
font-size: var(--ds-stat-label-size);
letter-spacing: var(--ds-stat-label-tracking);
font-weight: var(--ds-stat-label-weight);
line-height: var(--ds-stat-label-leading);
--ds-stat-label-ink: var(--ds-text-secondary-neutral);
color: var(--ds-stat-label-ink);
}
.ds-stat__value {
--ds-stat-value-face: var(--ds-font-heading-3-face);
--ds-stat-value-size: var(--ds-font-heading-3-size);
--ds-stat-value-leading: var(--ds-font-heading-3-leading);
--ds-stat-value-tracking: var(--ds-font-heading-3-tracking);
font-family: var(--ds-stat-value-face);
font-size: var(--ds-stat-value-size);
line-height: var(--ds-stat-value-leading);
font-weight: var(--ds-font-heading-3-weight);
letter-spacing: var(--ds-stat-value-tracking);
--ds-stat-value-ink: var(--ds-text-primary-neutral);
color: var(--ds-stat-value-ink);
font-variant-numeric: tabular-nums;
}
.ds-stat--small .ds-stat__value {
--ds-stat-value-face: var(--ds-font-heading-5-face);
--ds-stat-value-size: var(--ds-font-heading-5-size);
--ds-stat-value-leading: var(--ds-font-heading-5-leading);
--ds-stat-value-tracking: var(--ds-font-heading-5-tracking);
font-family: var(--ds-stat-value-face);
font-size: var(--ds-stat-value-size);
letter-spacing: var(--ds-stat-value-tracking);
line-height: var(--ds-stat-value-leading);
}
.ds-stat--large .ds-stat__value {
--ds-stat-value-face: var(--ds-font-heading-2-face);
--ds-stat-value-size: var(--ds-font-heading-2-size);
--ds-stat-value-leading: var(--ds-font-heading-2-leading);
--ds-stat-value-tracking: var(--ds-font-heading-2-tracking);
font-family: var(--ds-stat-value-face);
font-size: var(--ds-stat-value-size);
letter-spacing: var(--ds-stat-value-tracking);
line-height: var(--ds-stat-value-leading);
}
.ds-stat__note {
--ds-stat-note-face: var(--ds-font-small-face);
--ds-stat-note-tracking: var(--ds-font-small-tracking);
--ds-stat-note-size: var(--ds-font-small-size);
--ds-stat-note-weight: var(--ds-font-small-weight);
--ds-stat-note-leading: var(--ds-font-small-leading);
font-family: var(--ds-stat-note-face);
font-size: var(--ds-stat-note-size);
letter-spacing: var(--ds-stat-note-tracking);
font-weight: var(--ds-stat-note-weight);
line-height: var(--ds-stat-note-leading);
--ds-stat-note-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-stat-note-ink);
}
.ds-stat__change {
--ds-stat-change-face: var(--ds-font-small-face);
--ds-stat-change-tracking: var(--ds-font-small-tracking);
--ds-stat-change-size: var(--ds-font-small-size);
--ds-stat-change-weight: var(--ds-font-small-weight);
--ds-stat-change-leading: var(--ds-font-small-leading);
display: inline-flex;
align-items: baseline;
gap: var(--ds-space-1);
font-family: var(--ds-stat-change-face);
font-size: var(--ds-stat-change-size);
letter-spacing: var(--ds-stat-change-tracking);
font-weight: var(--ds-stat-change-weight);
line-height: var(--ds-stat-change-leading);
font-variant-numeric: tabular-nums;
--ds-stat-change-ink: var(--ds-text-secondary-neutral);
color: var(--ds-stat-change-ink);
}
.ds-stat__change--up { color: var(--ds-success-ink); }
.ds-stat__change--down { color: var(--ds-danger-ink); }
.ds-feedback {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-3) var(--ds-space-4);
}
.ds-feedback__question {
--ds-feedback-question-face: var(--ds-font-label-face);
--ds-feedback-question-size: var(--ds-font-label-size);
--ds-feedback-question-weight: var(--ds-font-label-weight);
--ds-feedback-question-leading: var(--ds-font-label-leading);
--ds-feedback-question-tracking: var(--ds-font-label-tracking);
display: block;
margin: 0;
font-family: var(--ds-feedback-question-face);
font-size: var(--ds-feedback-question-size);
font-weight: var(--ds-feedback-question-weight);
line-height: var(--ds-feedback-question-leading);
letter-spacing: var(--ds-feedback-question-tracking);
}
.ds-feedback__answers {
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.ds-feedback__comment {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
flex-basis: 100%;
min-inline-size: 0;
}
.ds-feedback__prompt {
--ds-feedback-prompt-face: var(--ds-font-label-face);
--ds-feedback-prompt-size: var(--ds-font-label-size);
--ds-feedback-prompt-weight: var(--ds-font-label-weight);
--ds-feedback-prompt-leading: var(--ds-font-label-leading);
--ds-feedback-prompt-tracking: var(--ds-font-label-tracking);
--ds-feedback-prompt-ink: var(--ds-text-secondary-neutral);
display: block;
margin: 0;
font-family: var(--ds-feedback-prompt-face);
font-size: var(--ds-feedback-prompt-size);
font-weight: var(--ds-feedback-prompt-weight);
line-height: var(--ds-feedback-prompt-leading);
letter-spacing: var(--ds-feedback-prompt-tracking);
color: var(--ds-feedback-prompt-ink);
}
.ds-feedback__send {
display: flex;
justify-content: flex-end;
}
.ds-feedback__thanks {
--ds-feedback-thanks-face: var(--ds-font-label-face);
--ds-feedback-thanks-size: var(--ds-font-label-size);
--ds-feedback-thanks-weight: var(--ds-font-label-weight);
--ds-feedback-thanks-leading: var(--ds-font-label-leading);
--ds-feedback-thanks-tracking: var(--ds-font-label-tracking);
--ds-feedback-thanks-ink: var(--ds-text-secondary-neutral);
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin: 0;
font-family: var(--ds-feedback-thanks-face);
font-size: var(--ds-feedback-thanks-size);
font-weight: var(--ds-feedback-thanks-weight);
line-height: var(--ds-feedback-thanks-leading);
letter-spacing: var(--ds-feedback-thanks-tracking);
color: var(--ds-feedback-thanks-ink);
}
.ds-feedback__tick {
display: flex;
flex: none;
color: var(--ds-success);
}
.ds-field {
--ds-field-intent: line-height;
--ds-field-step: var(--ds-space-2);
display: flex;
flex-direction: column;
gap: var(--ds-field-step);
min-inline-size: 0;
}
.ds-field__label {
--ds-field-label-weight: var(--ds-emphasis-weight);
--ds-field-label-face: var(--ds-font-label-face);
--ds-field-label-tracking: var(--ds-font-label-tracking);
--ds-field-label-size: var(--ds-font-label-size);
--ds-field-label-leading: var(--ds-font-label-leading);
font-family: var(--ds-field-label-face);
font-size: var(--ds-field-label-size);
letter-spacing: var(--ds-field-label-tracking);
line-height: var(--ds-field-label-leading);
font-weight: var(--ds-field-label-weight);
line-height: var(--ds-field-label-leading);
--ds-field-label-ink: var(--ds-text-primary-neutral);
color: var(--ds-field-label-ink);
}
.ds-field__label--hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-field__required {
color: var(--ds-danger-ink);
}
.ds-field__frame {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--ds-field-gap);
min-inline-size: 0;
padding-inline: var(--ds-field-inset);
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
--ds-field-frame-ink: var(--ds-text-primary-neutral);
color: var(--ds-field-frame-ink);
transition:
border-color var(--ds-duration) var(--ds-ease);
}
.ds-field--xsmall > .ds-field__frame {
--ds-field-frame-face: var(--ds-font-small-face);
--ds-field-frame-tracking: var(--ds-font-small-tracking);
--ds-field-frame-size: var(--ds-font-small-size);
--ds-field-frame-weight: var(--ds-font-small-weight);
--ds-field-frame-leading: var(--ds-font-small-leading);
--ds-field-gap: var(--ds-space-1);
--ds-field-inset: var(--ds-space-2);
min-block-size: var(--ds-size-1);
font-family: var(--ds-field-frame-face);
font-size: var(--ds-field-frame-size);
letter-spacing: var(--ds-field-frame-tracking);
font-weight: var(--ds-field-frame-weight);
line-height: var(--ds-field-frame-leading);
}
.ds-field--small > .ds-field__frame {
--ds-field-frame-face: var(--ds-font-label-face);
--ds-field-frame-tracking: var(--ds-font-label-tracking);
--ds-field-frame-size: var(--ds-font-label-size);
--ds-field-frame-weight: var(--ds-font-label-weight);
--ds-field-frame-leading: var(--ds-font-label-leading);
--ds-field-gap: var(--ds-space-1);
--ds-field-inset: var(--ds-space-3);
min-block-size: var(--ds-size-2);
font-family: var(--ds-field-frame-face);
font-size: var(--ds-field-frame-size);
letter-spacing: var(--ds-field-frame-tracking);
font-weight: var(--ds-field-frame-weight);
line-height: var(--ds-field-frame-leading);
}
.ds-field--medium > .ds-field__frame {
--ds-field-frame-face: var(--ds-font-body-face);
--ds-field-frame-tracking: var(--ds-font-body-tracking);
--ds-field-frame-size: var(--ds-font-body-size);
--ds-field-frame-weight: var(--ds-font-body-weight);
--ds-field-frame-leading: var(--ds-font-body-leading);
--ds-field-gap: var(--ds-space-2);
--ds-field-inset: var(--ds-space-3);
min-block-size: var(--ds-size-3);
font-family: var(--ds-field-frame-face);
font-size: var(--ds-field-frame-size);
letter-spacing: var(--ds-field-frame-tracking);
font-weight: var(--ds-field-frame-weight);
line-height: var(--ds-field-frame-leading);
}
.ds-field--large > .ds-field__frame {
--ds-field-frame-face: var(--ds-font-body-face);
--ds-field-frame-tracking: var(--ds-font-body-tracking);
--ds-field-frame-size: var(--ds-font-body-size);
--ds-field-frame-weight: var(--ds-font-body-weight);
--ds-field-frame-leading: var(--ds-font-body-leading);
--ds-field-gap: var(--ds-space-2);
--ds-field-inset: var(--ds-space-4);
min-block-size: var(--ds-size-4);
font-family: var(--ds-field-frame-face);
font-size: var(--ds-field-frame-size);
letter-spacing: var(--ds-field-frame-tracking);
font-weight: var(--ds-field-frame-weight);
line-height: var(--ds-field-frame-leading);
}
.ds-field--xlarge > .ds-field__frame {
--ds-field-frame-face: var(--ds-font-body-face);
--ds-field-frame-tracking: var(--ds-font-body-tracking);
--ds-field-frame-size: var(--ds-font-body-size);
--ds-field-frame-weight: var(--ds-font-body-weight);
--ds-field-frame-leading: var(--ds-font-body-leading);
--ds-field-gap: var(--ds-space-2);
--ds-field-inset: var(--ds-space-4);
min-block-size: var(--ds-size-5);
font-family: var(--ds-field-frame-face);
font-size: var(--ds-field-frame-size);
letter-spacing: var(--ds-field-frame-tracking);
font-weight: var(--ds-field-frame-weight);
line-height: var(--ds-field-frame-leading);
}
.ds-field--xxlarge > .ds-field__frame {
--ds-field-frame-face: var(--ds-font-body-face);
--ds-field-frame-tracking: var(--ds-font-body-tracking);
--ds-field-frame-size: var(--ds-font-body-size);
--ds-field-frame-weight: var(--ds-font-body-weight);
--ds-field-frame-leading: var(--ds-font-body-leading);
--ds-field-gap: var(--ds-space-2);
--ds-field-inset: var(--ds-space-5);
min-block-size: var(--ds-size-6);
font-family: var(--ds-field-frame-face);
font-size: var(--ds-field-frame-size);
letter-spacing: var(--ds-field-frame-tracking);
font-weight: var(--ds-field-frame-weight);
line-height: var(--ds-field-frame-leading);
}
.ds-field--multiline > .ds-field__frame {
--ds-field-frame-leading: var(--ds-font-body-leading);
align-items: flex-start;
padding-block: var(--ds-field-inset);
min-block-size: 0;
line-height: var(--ds-field-frame-leading);
}
.ds-field__control {
flex: 1;
align-self: stretch;
min-inline-size: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
margin: 0;
}
.ds-field__control:focus {
outline: none;
}
.ds-field__control::placeholder {
--ds-field-control-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-field-control-ink);
}
textarea.ds-field__control {
resize: vertical;
min-block-size: 4lh;
}
.ds-field__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
--ds-field-icon-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-field-icon-ink);
}
.ds-field__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-field__prefix {
flex: 0 1 auto;
min-inline-size: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl;
--ds-field-prefix-ink: var(--ds-text-secondary-neutral);
color: var(--ds-field-prefix-ink);
}
.ds-field__prefix + .ds-field__control {
flex-basis: auto;
margin-inline-start: calc(var(--ds-field-gap) * -1);
}
.ds-field__frame:hover:not(:has(:disabled)) {
background-image: linear-gradient(var(--ds-surface-hover), var(--ds-surface-hover));
}
.ds-field__frame:focus-within,
.ds-field__frame:has([aria-expanded="true"]) {
border-color: var(--ds-focus);
}
.ds-field--bare > .ds-field__frame {
border-color: transparent;
background-color: transparent;
}
.ds-field--bare > .ds-field__frame:focus-within,
.ds-field--bare > .ds-field__frame:has([aria-expanded="true"]) {
border-color: transparent;
background-image: linear-gradient(var(--ds-surface-hover), var(--ds-surface-hover));
}
.ds-field--invalid > .ds-field__frame {
border-color: var(--ds-danger);
}
.ds-field--invalid > .ds-field__frame:focus-within,
.ds-field--invalid > .ds-field__frame:has([aria-expanded="true"]) {
border-color: var(--ds-danger);
}
.ds-field__frame:has(:disabled) {
background-color: var(--ds-surface-disabled);
border-color: var(--ds-border-disabled);
--ds-field-frame-ink: var(--ds-text-disabled);
color: var(--ds-field-frame-ink);
cursor: not-allowed;
}
.ds-field__control:disabled {
cursor: not-allowed;
--ds-field-control-ink: var(--ds-text-disabled);
color: var(--ds-field-control-ink);
-webkit-text-fill-color: var(--ds-text-disabled);
opacity: 1;
}
.ds-field__control:disabled::placeholder {
--ds-field-control-ink: var(--ds-text-disabled);
color: var(--ds-field-control-ink);
}
.ds-field__message {
--ds-field-message-face: var(--ds-font-label-face);
--ds-field-message-tracking: var(--ds-font-label-tracking);
--ds-field-message-size: var(--ds-font-label-size);
--ds-field-message-weight: var(--ds-font-label-weight);
--ds-field-message-leading: var(--ds-font-label-leading);
font-family: var(--ds-field-message-face);
font-size: var(--ds-field-message-size);
letter-spacing: var(--ds-field-message-tracking);
font-weight: var(--ds-field-message-weight);
line-height: var(--ds-field-message-leading);
line-height: var(--ds-field-message-leading);
--ds-field-message-ink: var(--ds-text-secondary-neutral);
color: var(--ds-field-message-ink);
}
.ds-field__message--error {
color: var(--ds-danger-ink);
}
.ds-choice--xsmall  {
--ds-choice-face: var(--ds-font-small-face);
--ds-choice-tracking: var(--ds-font-small-tracking);
--ds-choice-size: var(--ds-font-small-size);
--ds-choice-weight: var(--ds-font-small-weight);
--ds-choice-leading: var(--ds-font-small-leading);
--ds-choice-tier: var(--ds-size-1); --ds-choice-mark: 0.875rem; font-size: var(--ds-choice-size); line-height: var(--ds-choice-leading); }
.ds-choice--small   {
--ds-choice-face: var(--ds-font-label-face);
--ds-choice-tracking: var(--ds-font-label-tracking);
--ds-choice-size: var(--ds-font-label-size);
--ds-choice-weight: var(--ds-font-label-weight);
--ds-choice-leading: var(--ds-font-label-leading);
--ds-choice-tier: var(--ds-size-2); --ds-choice-mark: 1rem;     font-size: var(--ds-choice-size); line-height: var(--ds-choice-leading); }
.ds-choice--medium  {
--ds-choice-face: var(--ds-font-body-face);
--ds-choice-tracking: var(--ds-font-body-tracking);
--ds-choice-size: var(--ds-font-body-size);
--ds-choice-leading: var(--ds-font-body-leading);
--ds-choice-tier: var(--ds-size-3); --ds-choice-mark: 1.125rem; font-size: var(--ds-choice-size); line-height: var(--ds-choice-leading); }
.ds-choice--large   {
--ds-choice-face: var(--ds-font-body-face);
--ds-choice-tracking: var(--ds-font-body-tracking);
--ds-choice-size: var(--ds-font-body-size);
--ds-choice-weight: var(--ds-font-body-weight);
--ds-choice-leading: var(--ds-font-body-leading);
--ds-choice-tier: var(--ds-size-4); --ds-choice-mark: 1.25rem;  font-size: var(--ds-choice-size); line-height: var(--ds-choice-leading); }
.ds-choice--xlarge  {
--ds-choice-face: var(--ds-font-body-face);
--ds-choice-tracking: var(--ds-font-body-tracking);
--ds-choice-size: var(--ds-font-body-size);
--ds-choice-weight: var(--ds-font-body-weight);
--ds-choice-leading: var(--ds-font-body-leading);
--ds-choice-tier: var(--ds-size-5); --ds-choice-mark: 1.375rem; font-size: var(--ds-choice-size); line-height: var(--ds-choice-leading); }
.ds-choice--xxlarge {
--ds-choice-face: var(--ds-font-body-face);
--ds-choice-tracking: var(--ds-font-body-tracking);
--ds-choice-size: var(--ds-font-body-size);
--ds-choice-weight: var(--ds-font-body-weight);
--ds-choice-leading: var(--ds-font-body-leading);
--ds-choice-tier: var(--ds-size-6); --ds-choice-mark: 1.5rem;   font-size: var(--ds-choice-size); line-height: var(--ds-choice-leading); }
.ds-choice {
--ds-choice-intent: gap;
display: inline-grid;
grid-template-columns: auto 1fr;
gap: 0.6em;
align-items: center;
min-block-size: var(--ds-choice-tier);
cursor: pointer;
}
.ds-choice:has(.ds-choice__description) {
align-items: start;
}
.ds-choice:not(:has(.ds-choice__text)) {
gap: 0;
}
.ds-choice__input {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-choice__mark {
position: relative;
box-sizing: border-box;
display: grid;
place-items: center;
flex: none;
inline-size: var(--ds-choice-mark);
block-size: var(--ds-choice-mark);
border: 1px solid var(--ds-border-strong);
background-color: var(--ds-surface-1);
color: transparent;
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-choice:has(.ds-choice__description) .ds-choice__mark {
margin-block-start: 0.1em;
}
.ds-choice__mark::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: max(var(--ds-choice-tier), 100%);
block-size: max(var(--ds-choice-tier), 100%);
transform: translate(-50%, -50%);
}
.ds-choice__input:checked + .ds-choice__mark,
.ds-choice__input:indeterminate + .ds-choice__mark {
background-color: var(--ds-choice-fill);
border-color: var(--ds-choice-fill);
color: var(--ds-choice-ink);
}
.ds-choice--inverse {
--ds-choice-fill: var(--ds-inverse);
--ds-choice-ink: var(--ds-on-inverse);
}
.ds-choice--brand {
--ds-choice-fill: var(--ds-brand);
--ds-choice-ink: var(--ds-on-brand);
}
.ds-choice:hover .ds-choice__input:not(:disabled) + .ds-choice__mark {
border-color: var(--ds-border-active);
}
.ds-choice__input:focus-visible + .ds-choice__mark {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-choice__input:disabled + .ds-choice__mark {
background-color: var(--ds-surface-disabled);
border-color: var(--ds-border-disabled);
--ds-choice-mark-ink: var(--ds-text-disabled);
color: var(--ds-choice-mark-ink);
}
.ds-choice:has(:disabled) {
cursor: not-allowed;
--ds-choice-ink: var(--ds-text-disabled);
color: var(--ds-choice-ink);
}
.ds-choice__text {
display: flex;
flex-direction: column;
gap: 0;
min-inline-size: 0;
}
.ds-choice__label {
--ds-choice-label-face: var(--ds-font-body-face);
font-family: var(--ds-choice-label-face);
color: inherit;
}
.ds-choice__description {
--ds-choice-description-face: var(--ds-font-label-face);
--ds-choice-description-tracking: var(--ds-font-label-tracking);
--ds-choice-description-size: var(--ds-font-label-size);
--ds-choice-description-weight: var(--ds-font-label-weight);
--ds-choice-description-leading: var(--ds-font-label-leading);
font-family: var(--ds-choice-description-face);
font-size: var(--ds-choice-description-size);
letter-spacing: var(--ds-choice-description-tracking);
font-weight: var(--ds-choice-description-weight);
line-height: var(--ds-choice-description-leading);
--ds-choice-description-ink: var(--ds-text-secondary-neutral);
color: var(--ds-choice-description-ink);
}
.ds-choice:has(:disabled) .ds-choice__description {
--ds-choice-description-ink: var(--ds-text-disabled);
color: var(--ds-choice-description-ink);
}
[data-ground="inverse"] .ds-choice:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-choice) {
--ds-choice-fill: var(--ds-quote);
--ds-choice-ink: var(--ds-on-quote);
}
[data-ground="inverse"] .ds-choice__mark:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-choice__mark) {
background-color: var(--ds-inverse);
border-color: var(--ds-secondary-on-inverse);
}
[data-ground="inverse"] .ds-choice__input:disabled + .ds-choice__mark:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-choice__mark) {
background-color: var(--ds-inverse-active);
border-color: var(--ds-inverse-active);
}
.ds-checkbox__box {
border-radius: var(--ds-radius-1);
}
.ds-checkbox__box > svg {
inline-size: calc(var(--ds-choice-mark) * 0.78);
block-size: calc(var(--ds-choice-mark) * 0.78);
}
.ds-checkbox--done .ds-checkbox__box {
border-radius: var(--ds-radius-full);
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-checkbox--done:hover .ds-choice__input:not(:checked):not(:disabled) + .ds-checkbox__box {
--ds-checkbox-done-hint: var(--ds-text-disabled);
color: var(--ds-checkbox-done-hint);
}
.ds-checkbox--done .ds-choice__input:checked + .ds-checkbox__box {
--ds-checkbox-done-fill: var(--ds-success);
--ds-checkbox-done-on: var(--ds-on-success);
background-color: var(--ds-checkbox-done-fill);
border-color: var(--ds-checkbox-done-fill);
color: var(--ds-checkbox-done-on);
}
.ds-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--ds-rhythm-element);
inline-size: 100%;
}
.ds-state--page {
padding-block: var(--ds-space-24);
min-block-size: 60vh;
}
.ds-state--panel {
padding-block: var(--ds-space-16);
}
.ds-state--inline {
padding-block: var(--ds-space-10);
}
.ds-state__mark {
display: inline-flex;
--ds-state-mark-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-state-mark-ink);
}
.ds-state--page .ds-state__mark { font-size: var(--ds-size-4); }
.ds-state--panel .ds-state__mark { font-size: var(--ds-size-3); }
.ds-state--inline .ds-state__mark { font-size: var(--ds-size-2); }
.ds-state__mark > svg {
inline-size: 1em;
block-size: 1em;
}
.ds-state__mark > svg :is(path, circle, rect, line, polyline, polygon) {
vector-effect: non-scaling-stroke;
}
.ds-state--error .ds-state__mark {
color: var(--ds-danger-ink);
}
.ds-state__text {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
align-items: center;
max-inline-size: 44ch;
}
.ds-state__title {
--ds-state-title-weight: var(--ds-emphasis-weight);
--ds-state-title-face: var(--ds-font-body-face);
--ds-state-title-leading: var(--ds-font-body-leading);
font-family: var(--ds-state-title-face);
font-weight: var(--ds-state-title-weight);
line-height: var(--ds-state-title-leading);
margin: 0;
--ds-state-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-state-title-ink);
}
.ds-state--page .ds-state__title {
--ds-state-title-leading: var(--ds-font-heading-5-leading);
--ds-state-title-face: var(--ds-font-heading-5-face);
--ds-state-title-tracking: var(--ds-font-heading-5-tracking);
--ds-state-title-size: var(--ds-font-heading-5-size);
--ds-state-title-weight: var(--ds-font-heading-5-weight);
font-family: var(--ds-state-title-face);
font-size: var(--ds-state-title-size);
letter-spacing: var(--ds-state-title-tracking);
font-weight: var(--ds-state-title-weight);}
.ds-state--panel .ds-state__title {
--ds-state-title-leading: var(--ds-font-heading-6-leading);
--ds-state-title-face: var(--ds-font-heading-6-face);
--ds-state-title-tracking: var(--ds-font-heading-6-tracking);
--ds-state-title-size: var(--ds-font-heading-6-size);
font-family: var(--ds-state-title-face);
font-size: var(--ds-state-title-size);
letter-spacing: var(--ds-state-title-tracking);}
.ds-state--inline .ds-state__title {
--ds-state-title-leading: var(--ds-font-body-leading);
--ds-state-title-face: var(--ds-font-body-face);
--ds-state-title-tracking: var(--ds-font-body-tracking);
--ds-state-title-size: var(--ds-font-body-size);
font-family: var(--ds-state-title-face);
font-size: var(--ds-state-title-size);
letter-spacing: var(--ds-state-title-tracking);}
.ds-state__description {
--ds-state-description-face: var(--ds-font-label-face);
--ds-state-description-tracking: var(--ds-font-label-tracking);
--ds-state-description-size: var(--ds-font-label-size);
--ds-state-description-weight: var(--ds-font-label-weight);
--ds-state-description-leading: var(--ds-font-label-leading);
font-family: var(--ds-state-description-face);
font-size: var(--ds-state-description-size);
letter-spacing: var(--ds-state-description-tracking);
font-weight: var(--ds-state-description-weight);
line-height: var(--ds-state-description-leading);
--ds-state-description-ink: var(--ds-text-secondary-neutral);
color: var(--ds-state-description-ink);
}
.ds-alert {
display: flex;
align-items: start;
gap: var(--ds-space-3);
padding: var(--ds-space-4);
border-radius: var(--ds-radius-2);
border-inline-start: var(--ds-space-1) solid var(--ds-alert-edge);
background-color: var(--ds-alert-wash);
--ds-alert-ink: var(--ds-text-primary-neutral);
color: var(--ds-alert-ink);
}
.ds-alert--neutral {
--ds-alert-edge: var(--ds-border-strong);
--ds-alert-wash: var(--ds-surface-2);
--ds-alert-mark: var(--ds-text-secondary-neutral);
}
.ds-alert--info {
--ds-alert-edge: var(--ds-info-ink);
--ds-alert-wash: var(--ds-info-tint);
--ds-alert-mark: var(--ds-info-ink);
}
.ds-alert--success {
--ds-alert-edge: var(--ds-success-ink);
--ds-alert-wash: var(--ds-success-tint);
--ds-alert-mark: var(--ds-success-ink);
}
.ds-alert--warning {
--ds-alert-edge: var(--ds-warning-ink);
--ds-alert-wash: var(--ds-warning-tint);
--ds-alert-mark: var(--ds-warning-ink);
}
.ds-alert--danger {
--ds-alert-edge: var(--ds-danger-ink);
--ds-alert-wash: var(--ds-danger-tint);
--ds-alert-mark: var(--ds-danger-ink);
}
.ds-alert__mark {
--ds-alert-mark-leading: var(--ds-font-body-leading);
display: inline-flex;
flex: none;
line-height: var(--ds-alert-mark-leading);
inline-size: 1lh;
block-size: 1lh;
color: var(--ds-alert-mark);
}
.ds-alert__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-alert__text {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
flex: 1;
}
.ds-alert__title {
--ds-alert-title-weight: var(--ds-emphasis-weight);
--ds-alert-title-face: var(--ds-font-body-face);
--ds-alert-title-tracking: var(--ds-font-body-tracking);
--ds-alert-title-size: var(--ds-font-body-size);
--ds-alert-title-leading: var(--ds-font-body-leading);
margin: 0;
font-family: var(--ds-alert-title-face);
font-size: var(--ds-alert-title-size);
letter-spacing: var(--ds-alert-title-tracking);
line-height: var(--ds-alert-title-leading);
font-weight: var(--ds-alert-title-weight);
}
.ds-alert__body {
--ds-alert-body-face: var(--ds-font-label-face);
--ds-alert-body-tracking: var(--ds-font-label-tracking);
--ds-alert-body-size: var(--ds-font-label-size);
--ds-alert-body-weight: var(--ds-font-label-weight);
--ds-alert-body-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-alert-body-face);
font-size: var(--ds-alert-body-size);
letter-spacing: var(--ds-alert-body-tracking);
font-weight: var(--ds-alert-body-weight);
line-height: var(--ds-alert-body-leading);
--ds-alert-body-ink: var(--ds-text-secondary-neutral);
color: var(--ds-alert-body-ink);
}
.ds-alert__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ds-space-2);
margin-block-start: var(--ds-space-3);
}
.ds-alert--inline {
align-items: center;
}
.ds-alert--inline .ds-alert__actions {
margin-block-start: 0;
margin-inline-start: auto;
}
.ds-alert__close {
flex: none;
margin-inline-start: auto;
}
.ds-switch__track {
display: grid;
inline-size: calc(var(--ds-choice-mark) * 1.75);
border-radius: var(--ds-radius-full);
border: 0;
background-color: var(--ds-surface-3);
}
.ds-switch__track::before {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: calc(var(--ds-choice-mark) * 0.1);
inline-size: calc(var(--ds-choice-mark) * 0.8);
block-size: calc(var(--ds-choice-mark) * 0.8);
border-radius: 50%;
background-color: var(--ds-surface-1);
translate: 0 -50%;
transition:
translate var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-choice__input:checked + .ds-switch__track::before {
translate: calc(var(--ds-choice-mark) * 0.75) -50%;
}
.ds-choice__input:disabled + .ds-switch__track::before {
background-color: var(--ds-text-disabled);
}
[data-ground="inverse"] .ds-switch__track:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-switch__track) {
background-color: var(--ds-inverse-active);
border-color: transparent;
}
[data-ground="inverse"] .ds-switch__track:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-switch__track)::before {
background-color: var(--ds-inverse);
}
[data-ground="inverse"] .ds-choice__input:checked + .ds-switch__track:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-switch__track) {
background-color: var(--ds-choice-fill);
}
[data-ground="inverse"] .ds-choice__input:disabled + .ds-switch__track:not(:is(.ds-popover, .ds-dialog, .ds-drawer) .ds-switch__track)::before {
background-color: var(--ds-secondary-on-inverse);
}
.ds-table {
display: block;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
--ds-table-cell-pad-block: var(--ds-space-3);
--ds-table-cell-pad-inline: var(--ds-space-4);
--ds-table-column-min: var(--ds-size-4);
--ds-table-resize-step: var(--ds-space-2);
--ds-table-select-width: var(--ds-size-4);
--ds-table-face: var(--ds-font-label-face);
--ds-table-tracking: var(--ds-font-label-tracking);
--ds-table-size: var(--ds-font-label-size);
--ds-table-leading: var(--ds-font-label-leading);
}
.ds-table__scroll {
position: relative;
overflow: auto;
overscroll-behavior-x: contain;
}
.ds-table__scroll:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-table__table {
inline-size: max-content;
min-inline-size: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
font-family: var(--ds-table-face);
font-size: var(--ds-table-size);
letter-spacing: var(--ds-table-tracking);
line-height: var(--ds-table-leading);
--ds-table-ink: var(--ds-text-primary-neutral);
color: var(--ds-table-ink);
}
.ds-table__caption {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-table__caption--visible {
--ds-table-caption--visible-face: var(--ds-font-label-face);
--ds-table-caption--visible-tracking: var(--ds-font-label-tracking);
--ds-table-caption--visible-size: var(--ds-font-label-size);
--ds-table-caption--visible-weight: var(--ds-font-label-weight);
--ds-table-caption--visible-leading: var(--ds-font-label-leading);
position: static;
inline-size: auto;
block-size: auto;
margin: 0;
clip-path: none;
white-space: normal;
padding: var(--ds-table-cell-pad-block) var(--ds-table-cell-pad-inline);
font-family: var(--ds-table-caption--visible-face);
font-size: var(--ds-table-caption--visible-size);
letter-spacing: var(--ds-table-caption--visible-tracking);
font-weight: var(--ds-table-caption--visible-weight);
line-height: var(--ds-table-caption--visible-leading);
--ds-table-caption--visible-ink: var(--ds-text-secondary-neutral);
color: var(--ds-table-caption--visible-ink);
text-align: start;
}
.ds-table__th {
--ds-table-th-weight: var(--ds-emphasis-weight);
padding: var(--ds-table-cell-pad-block) var(--ds-table-cell-pad-inline);
border-block-end: 1px solid var(--ds-border-subtle);
font-weight: var(--ds-table-th-weight);
--ds-table-th-ink: var(--ds-text-primary-neutral);
color: var(--ds-table-th-ink);
text-align: start;
white-space: nowrap;
vertical-align: middle;
}
.ds-table--resizable .ds-table__th {
position: relative;
box-sizing: border-box;
}
.ds-table__resizer {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: var(--ds-space-2);
cursor: col-resize;
touch-action: none;
user-select: none;
}
.ds-table__resizer::after {
--ds-table-resizer-ink: transparent;
content: "";
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: 1px;
background-color: var(--ds-table-resizer-ink);
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-table__resizer:hover::after,
.ds-table__resizer:focus-visible::after,
.ds-table__resizer[data-resizing]::after {
--ds-table-resizer-ink: var(--ds-border-active);
}
.ds-table__resizer:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-table--sticky .ds-table__th {
position: sticky;
inset-block-start: 0;
z-index: 1;
background-color: var(--ds-surface-1);
}
.ds-table__sort {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.ds-table__sort:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-table__arrow {
display: inline-flex;
inline-size: 1lh;
block-size: 1lh;
--ds-table-arrow-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-table-arrow-ink);
opacity: 0;
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-table__arrow > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-table__sort:hover .ds-table__arrow,
.ds-table__sort:focus-visible .ds-table__arrow {
opacity: 0.5;
}
.ds-table__th[aria-sort] .ds-table__arrow {
opacity: 1;
--ds-table-arrow-ink: var(--ds-text-primary-neutral);
color: var(--ds-table-arrow-ink);
}
.ds-table__grip,
.ds-table__head-menu {
opacity: 0;
}
.ds-table__head-menu {
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-table__grip {
touch-action: none;
max-inline-size: 0;
margin-inline-start: calc(-1 * var(--ds-space-2));
pointer-events: none;
}
.ds-table__th:hover .ds-table__grip,
.ds-table__grip:focus-visible,
.ds-table__grip[draggable]:active {
opacity: 1;
max-inline-size: 1lh;
margin-inline-start: 0;
pointer-events: auto;
}
.ds-table__th:hover .ds-table__head-menu,
.ds-table__head-menu:focus-visible,
.ds-table__head-menu[aria-expanded="true"] {
opacity: 1;
}
@media (hover: none) {
.ds-table__grip,
.ds-table__head-menu {
opacity: 1;
}
.ds-table__grip {
max-inline-size: 1lh;
margin-inline-start: 0;
pointer-events: auto;
}
}
.ds-table__head-cell {
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.ds-table__cell--end .ds-table__head-cell {
justify-content: flex-end;
}
.ds-table__head-menu {
margin-inline-start: auto;
}
.ds-table__cell--end .ds-table__head-menu {
margin-inline-start: 0;
}
.ds-table__grip {
position: relative;
display: inline-flex;
flex: none;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
--ds-table-grip-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-table-grip-ink);
cursor: grab;
transition:
color var(--ds-duration) var(--ds-ease),
opacity var(--ds-duration) var(--ds-ease),
max-inline-size var(--ds-duration) var(--ds-ease),
margin-inline-start var(--ds-duration) var(--ds-ease);
}
.ds-table__grip:hover,
.ds-table__grip:focus-visible {
--ds-table-grip-ink: var(--ds-text-primary-neutral);
color: var(--ds-table-grip-ink);
}
.ds-table__grip > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-table__grip::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: max(24px, 100%);
block-size: max(24px, 100%);
transform: translate(-50%, -50%);
}
.ds-table__grip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-table__th--dragging {
opacity: 0.4;
}
.ds-table__th--over {
box-shadow: inset 2px 0 0 var(--ds-focus);
}
.ds-table__th--over-end {
box-shadow: inset -2px 0 0 var(--ds-focus);
}
.ds-table__td {
padding: var(--ds-table-cell-pad-block) var(--ds-table-cell-pad-inline);
vertical-align: middle;
}
.ds-table--lines-rows .ds-table__td,
.ds-table--lines-grid .ds-table__td {
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-table--lines-rows .ds-table__row:last-child .ds-table__td,
.ds-table--lines-grid .ds-table__row:last-child .ds-table__td {
border-block-end: 0;
}
.ds-table--lines-grid .ds-table__td + .ds-table__td,
.ds-table--lines-grid .ds-table__th + .ds-table__th {
border-inline-start: 1px solid var(--ds-border-subtle);
}
.ds-table--zebra .ds-table__row:nth-child(even) {
background-color: var(--ds-surface-hover);
}
.ds-table__row {
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-table__row--link {
cursor: pointer;
}
.ds-table__row:hover {
background-color: var(--ds-surface-hover);
}
.ds-table__row:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-table__add-line {
display: flex;
align-items: center;
gap: var(--ds-space-2);
--ds-table-add-ink: var(--ds-text-secondary-neutral);
color: var(--ds-table-add-ink);
}
.ds-table__add-mark {
display: inline-flex;
flex: none;
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
}
.ds-table__add {
background-color: transparent;
}
.ds-table__row--selected,
.ds-table__row--selected:hover {
background-color: var(--ds-surface-active);
}
.ds-table__cell--clamp {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-inline-size: 1px;
}
.ds-table__cell--start { text-align: start; }
.ds-table__cell--end { text-align: end; }
.ds-table__cell--select {
box-sizing: border-box;
inline-size: var(--ds-table-select-width);
padding-inline-end: 0;
white-space: nowrap;
}
.ds-table--frozen .ds-table__cell--frozen {
position: sticky;
inset-inline-start: 0;
z-index: 1;
background-color: var(--ds-surface-1);
}
.ds-table--frozen .ds-table__cell--select.ds-table__cell--frozen + .ds-table__cell--frozen {
inset-inline-start: var(--ds-table-select-width);
}
.ds-table--frozen.ds-table--overflows .ds-table__cell--frozen:not(.ds-table__cell--select) {
border-inline-end: 1px solid var(--ds-border);
}
.ds-table--frozen.ds-table--sticky .ds-table__th.ds-table__cell--frozen {
z-index: 2;
}
.ds-table__row:hover .ds-table__cell--frozen,
.ds-table--zebra .ds-table__row:nth-child(even) .ds-table__cell--frozen {
background-image: linear-gradient(var(--ds-surface-hover), var(--ds-surface-hover));
}
.ds-table__row--selected .ds-table__cell--frozen,
.ds-table__row--selected:hover .ds-table__cell--frozen {
background-image: linear-gradient(var(--ds-surface-active), var(--ds-surface-active));
}
.ds-table__state {
padding: 0;
border-block-end: 0;
}
.ds-table__foot {
display: flex;
align-items: center;
gap: var(--ds-space-4);
padding: var(--ds-space-3) var(--ds-space-4);
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-table__foot > * {
flex: 1;
min-inline-size: 0;
}
.ds-table__th[aria-sort="descending"] .ds-swap__off {
display: none;
}
.ds-table__th[aria-sort="descending"] .ds-swap__on {
display: inline-flex;
}
.ds-table__cell--actions {
--ds-table-actions-width: var(--ds-size-3);
inline-size: var(--ds-table-actions-width);
text-align: end;
}
.ds-table--compact {
--ds-table-cell-pad-block: var(--ds-space-2);
--ds-table-cell-pad-inline: var(--ds-space-3);
}
.ds-table__summary .ds-table__td {
--ds-table-summary-weight: var(--ds-emphasis-weight);
position: sticky;
inset-block-end: 0;
z-index: 1;
font-weight: var(--ds-table-summary-weight);
border-block-start: 1px solid var(--ds-border-subtle);
border-block-end: 0;
background-color: var(--ds-surface-1);
}
.ds-table--frozen .ds-table__summary .ds-table__cell--frozen {
z-index: 2;
}
.ds-table__row[data-hue] > :first-child {
box-shadow: inset var(--ds-space-1) 0 0 0 var(--ds-table-row-hue);
}
.ds-table__row[data-hue="red"] { --ds-table-row-hue: var(--ds-hue-red-edge); }
.ds-table__row[data-hue="orange"] { --ds-table-row-hue: var(--ds-hue-orange-edge); }
.ds-table__row[data-hue="amber"] { --ds-table-row-hue: var(--ds-hue-amber-edge); }
.ds-table__row[data-hue="yellow"] { --ds-table-row-hue: var(--ds-hue-yellow-edge); }
.ds-table__row[data-hue="lime"] { --ds-table-row-hue: var(--ds-hue-lime-edge); }
.ds-table__row[data-hue="green"] { --ds-table-row-hue: var(--ds-hue-green-edge); }
.ds-table__row[data-hue="teal"] { --ds-table-row-hue: var(--ds-hue-teal-edge); }
.ds-table__row[data-hue="cyan"] { --ds-table-row-hue: var(--ds-hue-cyan-edge); }
.ds-table__row[data-hue="blue"] { --ds-table-row-hue: var(--ds-hue-blue-edge); }
.ds-table__row[data-hue="indigo"] { --ds-table-row-hue: var(--ds-hue-indigo-edge); }
.ds-table__row[data-hue="violet"] { --ds-table-row-hue: var(--ds-hue-violet-edge); }
.ds-table__row[data-hue="pink"] { --ds-table-row-hue: var(--ds-hue-pink-edge); }
.ds-table__cell--grip {
inline-size: var(--ds-space-8);
padding-inline-end: 0;
}
.ds-table__row-grip {
display: inline-flex;
align-items: center;
justify-content: center;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
--ds-table-row-grip-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-table-row-grip-ink);
cursor: grab;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-table__row-grip:active {
cursor: grabbing;
}
.ds-table__row-grip:hover,
.ds-table__row-grip:focus-visible {
--ds-table-row-grip-ink: var(--ds-text-primary-neutral);
color: var(--ds-table-row-grip-ink);
}
.ds-table__row--dragging,
.ds-table__row.ds-sortable__item--dragging {
opacity: 0.4;
}
.ds-table__row--over > *,
.ds-table__row.ds-sortable__item--over > .ds-table__td {
box-shadow: inset 0 2px 0 0 var(--ds-border-active);
}
.ds-table__row--over-end > *,
.ds-table__row.ds-sortable__item--over-end > .ds-table__td {
box-shadow: inset 0 -2px 0 0 var(--ds-border-active);
}
.ds-table__cell--caret {
inline-size: var(--ds-space-8);
padding-inline-end: 0;
}
.ds-table__caret {
display: inline-flex;
align-items: center;
justify-content: center;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
--ds-table-caret-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-table-caret-ink);
cursor: pointer;
transition:
color var(--ds-duration) var(--ds-ease),
rotate var(--ds-duration) var(--ds-ease);
}
.ds-table__caret:hover,
.ds-table__caret:focus-visible {
--ds-table-caret-ink: var(--ds-text-primary-neutral);
color: var(--ds-table-caret-ink);
}
.ds-table__caret[aria-expanded="true"] {
rotate: 90deg;
}
.ds-table__detail {
padding-block: var(--ds-space-3);
}
.ds-prev-next {
--ds-prev-next-floor: 16rem;
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(max(var(--ds-prev-next-floor), (100% - var(--ds-space-4)) / 2), 100%), 1fr)
);
gap: var(--ds-space-4);
}
.ds-prev-next__link {
--ds-prev-next-ink: var(--ds-text-primary-neutral);
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
padding: var(--ds-space-4);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
color: var(--ds-prev-next-ink);
text-decoration: none;
transition:
border-color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-prev-next__link:hover {
--ds-prev-next-ink: var(--ds-text-primary-neutral);
border-color: var(--ds-border-strong);
background-color: var(--ds-surface-hover);
}
.ds-prev-next__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-prev-next__link--next {
grid-column: -2;
text-align: end;
}
.ds-prev-next__way {
--ds-prev-next-way-face: var(--ds-font-small-face);
--ds-prev-next-way-size: var(--ds-font-small-size);
--ds-prev-next-way-weight: var(--ds-font-small-weight);
--ds-prev-next-way-leading: var(--ds-font-small-leading);
--ds-prev-next-way-tracking: var(--ds-font-small-tracking);
--ds-prev-next-way-ink: var(--ds-text-tertiary-neutral);
display: flex;
align-items: center;
gap: var(--ds-space-1);
font-family: var(--ds-prev-next-way-face);
font-size: var(--ds-prev-next-way-size);
font-weight: var(--ds-prev-next-way-weight);
line-height: var(--ds-prev-next-way-leading);
letter-spacing: var(--ds-prev-next-way-tracking);
color: var(--ds-prev-next-way-ink);
}
.ds-prev-next__link--next .ds-prev-next__way {
justify-content: flex-end;
}
.ds-prev-next__mark {
display: flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-prev-next__name {
--ds-prev-next-name-face: var(--ds-font-label-face);
--ds-prev-next-name-size: var(--ds-font-label-size);
--ds-prev-next-name-weight: var(--ds-emphasis-weight);
--ds-prev-next-name-leading: var(--ds-font-label-leading);
--ds-prev-next-name-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-prev-next-name-face);
font-size: var(--ds-prev-next-name-size);
font-weight: var(--ds-prev-next-name-weight);
line-height: var(--ds-prev-next-name-leading);
letter-spacing: var(--ds-prev-next-name-tracking);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-share {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
min-inline-size: 0;
}
.ds-share__title {
--ds-share-title-face: var(--ds-font-label-face);
--ds-share-title-size: var(--ds-font-label-size);
--ds-share-title-weight: var(--ds-emphasis-weight);
--ds-share-title-leading: var(--ds-font-label-leading);
--ds-share-title-tracking: var(--ds-font-label-tracking);
--ds-share-title-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-share-title-face);
font-size: var(--ds-share-title-size);
font-weight: var(--ds-share-title-weight);
line-height: var(--ds-share-title-leading);
letter-spacing: var(--ds-share-title-tracking);
color: var(--ds-share-title-ink);
}
.ds-share__url {
--ds-share-url-face: var(--ds-font-mono-face);
--ds-share-url-size: var(--ds-font-mono-size);
--ds-share-url-weight: var(--ds-font-mono-weight);
--ds-share-url-leading: var(--ds-font-mono-leading);
--ds-share-url-tracking: var(--ds-font-mono-tracking);
--ds-share-url-ink: var(--ds-text-secondary-neutral);
flex: 1 1 12rem;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--ds-share-url-face);
font-size: var(--ds-share-url-size);
font-weight: var(--ds-share-url-weight);
line-height: var(--ds-share-url-leading);
letter-spacing: var(--ds-share-url-tracking);
color: var(--ds-share-url-ink);
}
.ds-share__native[hidden] {
display: none;
}
.ds-pagination {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--ds-space-4);
}
.ds-pagination__summary {
--ds-pagination-summary-face: var(--ds-font-label-face);
--ds-pagination-summary-tracking: var(--ds-font-label-tracking);
--ds-pagination-summary-size: var(--ds-font-label-size);
--ds-pagination-summary-weight: var(--ds-font-label-weight);
--ds-pagination-summary-leading: var(--ds-font-label-leading);
font-family: var(--ds-pagination-summary-face);
font-size: var(--ds-pagination-summary-size);
letter-spacing: var(--ds-pagination-summary-tracking);
font-weight: var(--ds-pagination-summary-weight);
line-height: var(--ds-pagination-summary-leading);
--ds-pagination-summary-ink: var(--ds-text-secondary-neutral);
color: var(--ds-pagination-summary-ink);
font-variant-numeric: tabular-nums;
}
.ds-pagination {
container-type: inline-size;
}
.ds-pagination__pages {
display: flex;
align-items: center;
gap: var(--ds-space-1);
}
.ds-pagination--xsmall { --ds-pagination-tier: var(--ds-size-1); }
.ds-pagination--small { --ds-pagination-tier: var(--ds-size-2); }
.ds-pagination--medium { --ds-pagination-tier: var(--ds-size-3); }
.ds-pagination--large { --ds-pagination-tier: var(--ds-size-4); }
.ds-pagination--xlarge { --ds-pagination-tier: var(--ds-size-5); }
.ds-pagination--xxlarge { --ds-pagination-tier: var(--ds-size-6); }
.ds-pagination--xsmall .ds-pagination__summary,
.ds-pagination--xsmall .ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-small-face);
--ds-pagination-gap-size: var(--ds-font-small-size);
--ds-pagination-gap-weight: var(--ds-font-small-weight);
--ds-pagination-gap-leading: var(--ds-font-small-leading);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size); line-height: var(--ds-pagination-gap-leading);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);}
.ds-pagination--small .ds-pagination__summary,
.ds-pagination--small .ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-label-face);
--ds-pagination-gap-size: var(--ds-font-label-size);
--ds-pagination-gap-weight: var(--ds-font-label-weight);
--ds-pagination-gap-leading: var(--ds-font-label-leading);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size); line-height: var(--ds-pagination-gap-leading);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);}
.ds-pagination--medium .ds-pagination__summary,
.ds-pagination--medium .ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-body-face);
--ds-pagination-gap-size: var(--ds-font-body-size);
--ds-pagination-gap-weight: var(--ds-font-body-weight);
--ds-pagination-gap-leading: var(--ds-font-body-leading);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size); line-height: var(--ds-pagination-gap-leading);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);}
.ds-pagination--large .ds-pagination__summary,
.ds-pagination--large .ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-body-face);
--ds-pagination-gap-size: var(--ds-font-body-size);
--ds-pagination-gap-weight: var(--ds-font-body-weight);
--ds-pagination-gap-leading: var(--ds-font-body-leading);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size); line-height: var(--ds-pagination-gap-leading);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);}
.ds-pagination--xlarge .ds-pagination__summary,
.ds-pagination--xlarge .ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-body-face);
--ds-pagination-gap-size: var(--ds-font-body-size);
--ds-pagination-gap-weight: var(--ds-font-body-weight);
--ds-pagination-gap-leading: var(--ds-font-body-leading);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size); line-height: var(--ds-pagination-gap-leading);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);}
.ds-pagination--xxlarge .ds-pagination__summary,
.ds-pagination--xxlarge .ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-body-face);
--ds-pagination-gap-size: var(--ds-font-body-size);
--ds-pagination-gap-weight: var(--ds-font-body-weight);
--ds-pagination-gap-leading: var(--ds-font-body-leading);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size); line-height: var(--ds-pagination-gap-leading);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);}
.ds-pagination__page {
min-inline-size: var(--ds-pagination-tier);
padding-inline: var(--ds-space-1);
font-variant-numeric: tabular-nums;
}
.ds-pagination__gap {
--ds-pagination-gap-face: var(--ds-font-label-face);
--ds-pagination-gap-tracking: var(--ds-font-label-tracking);
--ds-pagination-gap-size: var(--ds-font-label-size);
--ds-pagination-gap-weight: var(--ds-font-label-weight);
display: flex;
align-items: center;
justify-content: center;
min-inline-size: var(--ds-pagination-tier);
--ds-pagination-gap-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-pagination-gap-ink);
font-family: var(--ds-pagination-gap-face);
font-size: var(--ds-pagination-gap-size);
letter-spacing: var(--ds-pagination-gap-tracking);
font-weight: var(--ds-pagination-gap-weight);
user-select: none;
}
.ds-pagination__choice {
display: none;
}
@container (width <= 30rem) {
.ds-pagination__number {
display: none;
}
.ds-pagination__choice {
display: block;
}
}
.ds-skeleton {
display: block;
border-radius: var(--ds-radius-1);
background-color: var(--ds-surface-2);
background-image: linear-gradient(
90deg,
transparent 0%,
var(--ds-surface-3) 50%,
transparent 100%
);
background-size: 200% 100%;
background-repeat: no-repeat;
animation: ds-skeleton-sweep calc(var(--ds-duration-loop) * 2) linear infinite;
}
@keyframes ds-skeleton-sweep {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.ds-skeleton--text {
block-size: 0.7lh;
margin-block: 0.15lh;
}
.ds-skeleton__lines {
display: flex;
flex-direction: column;
}
.ds-skeleton__lines > .ds-skeleton--text:last-child:not(:only-child) {
inline-size: 60%;
}
.ds-skeleton--block {
inline-size: 100%;
aspect-ratio: var(--ds-skeleton-ratio, 16 / 9);
border-radius: var(--ds-radius-2);
}
.ds-skeleton--circle {
inline-size: var(--ds-skeleton-size, 1lh);
block-size: var(--ds-skeleton-size, 1lh);
flex: none;
border-radius: var(--ds-radius-full);
}
.ds-swap__off,
.ds-swap__on {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ds-swap__on {
display: none;
}
[data-copied="true"] .ds-swap__off {
display: none;
}
[data-copied="true"] .ds-swap__on {
display: inline-flex;
}
.ds-snippet {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
}
.ds-snippet__name {
--ds-snippet-name-tracking: var(--ds-font-mono-tracking);
--ds-snippet-name-size: var(--ds-font-mono-size);
--ds-snippet-name-weight: var(--ds-font-mono-weight);
--ds-snippet-name-leading: var(--ds-font-mono-leading);
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-2) var(--ds-space-4);
border-block-end: 1px solid var(--ds-border-subtle);
--ds-snippet-name-face: var(--ds-font-mono-face);
font-family: var(--ds-snippet-name-face);
font-size: var(--ds-snippet-name-size);
letter-spacing: var(--ds-snippet-name-tracking);
font-weight: var(--ds-snippet-name-weight);
line-height: var(--ds-snippet-name-leading);
--ds-snippet-name-ink: var(--ds-text-secondary-neutral);
color: var(--ds-snippet-name-ink);
}
.ds-snippet__scroll {
overflow-x: auto;
position: relative;
padding: var(--ds-space-4);
padding-inline-end: var(--ds-space-12);
}
.ds-snippet__code {
--ds-snippet-code-tracking: var(--ds-font-mono-tracking);
--ds-snippet-code-size: var(--ds-font-mono-size);
--ds-snippet-code-weight: var(--ds-font-mono-weight);
display: block;
margin: 0;
--ds-snippet-code-face: var(--ds-font-mono-face);
font-family: var(--ds-snippet-code-face);
font-size: var(--ds-snippet-code-size);
letter-spacing: var(--ds-snippet-code-tracking);
font-weight: var(--ds-snippet-code-weight);
line-height: var(--ds-space-5);
--ds-snippet-code-ink: var(--ds-text-primary-neutral);
color: var(--ds-snippet-code-ink);
tab-size: 4;
white-space: pre;
}
.ds-snippet__tok--comment {  --ds-snippet-tok--comment-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-snippet-tok--comment-ink);}
.ds-snippet__tok--string { color: var(--ds-syntax-string); }
.ds-snippet__tok--keyword { color: var(--ds-syntax-keyword); }
.ds-snippet__tok--number { color: var(--ds-syntax-number); }
.ds-snippet__tok--name { color: var(--ds-syntax-name); }
.ds-snippet__copy {
position: absolute;
inset-block-start: var(--ds-space-2);
inset-inline-end: var(--ds-space-2);
opacity: 0.6;
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-snippet:hover .ds-snippet__copy,
.ds-snippet__copy:focus-visible,
.ds-snippet__copy[data-copied="true"] {
opacity: 1;
}
.ds-snippet--named .ds-snippet__copy {
inset-block-start: 0;
}
.ds-progress {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
min-inline-size: 0;
}
.ds-progress__head {
--ds-progress-head-face: var(--ds-font-label-face);
--ds-progress-head-tracking: var(--ds-font-label-tracking);
--ds-progress-head-size: var(--ds-font-label-size);
--ds-progress-head-weight: var(--ds-font-label-weight);
--ds-progress-head-leading: var(--ds-font-label-leading);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ds-space-4);
font-family: var(--ds-progress-head-face);
font-size: var(--ds-progress-head-size);
letter-spacing: var(--ds-progress-head-tracking);
font-weight: var(--ds-progress-head-weight);
line-height: var(--ds-progress-head-leading);
}
.ds-progress__label {
--ds-progress-label-ink: var(--ds-text-primary-neutral);
color: var(--ds-progress-label-ink);
min-inline-size: 0;
}
.ds-progress__line {
display: flex;
align-items: center;
gap: var(--ds-space-3);
}
.ds-progress__line .ds-progress__track {
flex: 1;
}
.ds-progress__value {
--ds-progress-value-face: var(--ds-font-label-face);
--ds-progress-value-tracking: var(--ds-font-label-tracking);
--ds-progress-value-size: var(--ds-font-label-size);
--ds-progress-value-weight: var(--ds-font-label-weight);
--ds-progress-value-leading: var(--ds-font-label-leading);
font-family: var(--ds-progress-value-face);
font-size: var(--ds-progress-value-size);
letter-spacing: var(--ds-progress-value-tracking);
font-weight: var(--ds-progress-value-weight);
line-height: var(--ds-progress-value-leading);
--ds-progress-value-ink: var(--ds-text-secondary-neutral);
color: var(--ds-progress-value-ink);
font-variant-numeric: tabular-nums;
flex: none;
}
.ds-progress--brand { --ds-progress-fill: var(--ds-brand); }
.ds-progress--success { --ds-progress-fill: var(--ds-success); }
.ds-progress--warning { --ds-progress-fill: var(--ds-warning); }
.ds-progress--danger { --ds-progress-fill: var(--ds-danger); }
.ds-progress--neutral { --ds-progress-fill: var(--ds-inverse); }
.ds-progress__track {
display: block;
position: relative;
inline-size: 100%;
block-size: var(--ds-progress-thickness);
background-color: var(--ds-surface-active);
border-radius: var(--ds-radius-full);
overflow: hidden;
}
.ds-progress__fill {
display: block;
block-size: 100%;
inline-size: var(--ds-progress-share, 0%);
background-color: var(--ds-progress-fill);
border-radius: inherit;
transition: inline-size var(--ds-duration) var(--ds-ease-out);
}
.ds-progress--unknown .ds-progress__fill {
inline-size: 40%;
margin-inline-start: 30%;
animation: ds-progress-sweep calc(var(--ds-duration-loop) * 2) var(--ds-ease-in-out) infinite;
}
@keyframes ds-progress-sweep {
0% { margin-inline-start: -40%; }
100% { margin-inline-start: 100%; }
}
.ds-progress--small { --ds-progress-thickness: var(--ds-space-1); }
.ds-progress--medium { --ds-progress-thickness: var(--ds-space-2); }
.ds-progress--large { --ds-progress-thickness: var(--ds-space-3); }
.ds-progress__ring {
display: block;
inline-size: var(--ds-progress-diameter);
block-size: var(--ds-progress-diameter);
transform: rotate(-90deg);
}
.ds-progress__ring-track {
stroke: var(--ds-surface-active);
}
.ds-progress__ring-fill {
stroke: var(--ds-progress-fill);
stroke-linecap: round;
transition: stroke-dashoffset var(--ds-duration) var(--ds-ease-out);
}
.ds-progress--unknown .ds-progress__ring {
animation: ds-progress-turn var(--ds-duration-loop) linear infinite;
}
@keyframes ds-progress-turn {
to { transform: rotate(270deg); }
}
.ds-progress--small .ds-progress__ring { --ds-progress-diameter: var(--ds-size-1); }
.ds-progress--medium .ds-progress__ring { --ds-progress-diameter: var(--ds-size-3); }
.ds-progress--large .ds-progress__ring { --ds-progress-diameter: var(--ds-size-5); }
.ds-progress__steps {
display: flex;
gap: var(--ds-space-1);
inline-size: 100%;
}
.ds-progress__step {
flex: 1;
block-size: var(--ds-progress-thickness);
background-color: var(--ds-surface-active);
border-radius: var(--ds-radius-full);
transition: background-color var(--ds-duration) var(--ds-ease-out);
}
.ds-progress__step--done {
background-color: var(--ds-progress-fill);
}
.ds-steps {
--ds-steps-face: var(--ds-font-label-face);
--ds-steps-size: var(--ds-font-small-size);
--ds-steps-weight: var(--ds-font-label-weight);
--ds-steps-leading: var(--ds-font-small-leading);
--ds-steps-tracking: var(--ds-font-small-tracking);
--ds-steps-marker: var(--ds-size-1);
--ds-steps-line: 2px;
--ds-steps-gap: var(--ds-space-2);
--ds-steps-fill: var(--ds-brand);
--ds-steps-on-fill: var(--ds-on-brand);
--ds-steps-rest: var(--ds-border);
--ds-steps-ink: var(--ds-text-primary-neutral);
--ds-steps-ink-rest: var(--ds-text-secondary-neutral);
display: flex;
align-items: flex-start;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--ds-steps-face);
font-size: var(--ds-steps-size);
font-weight: var(--ds-steps-weight);
line-height: var(--ds-steps-leading);
letter-spacing: var(--ds-steps-tracking);
}
.ds-steps__item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-steps-gap);
min-inline-size: 0;
color: var(--ds-steps-ink-rest);
}
.ds-steps__item + .ds-steps__item::before {
content: "";
position: absolute;
inset-block-start: calc((var(--ds-steps-marker) - var(--ds-steps-line)) / 2);
inset-inline-end: calc(50% + var(--ds-steps-marker) / 2 + var(--ds-steps-gap));
inline-size: calc(100% - var(--ds-steps-marker) - var(--ds-steps-gap) * 2);
block-size: var(--ds-steps-line);
border-radius: var(--ds-radius-full);
background-color: var(--ds-steps-rest);
}
.ds-steps__item--done + .ds-steps__item::before,
.ds-steps__item--current::before {
background-color: var(--ds-steps-fill);
}
.ds-steps__marker {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--ds-steps-marker);
block-size: var(--ds-steps-marker);
border-radius: var(--ds-radius-full);
border: var(--ds-steps-line) solid var(--ds-steps-rest);
background-color: transparent;
transition:
background-color var(--ds-duration) var(--ds-ease-out),
border-color var(--ds-duration) var(--ds-ease-out),
color var(--ds-duration) var(--ds-ease-out);
}
.ds-steps__marker > svg {
inline-size: var(--ds-steps-size);
block-size: var(--ds-steps-size);
}
.ds-steps__item--done .ds-steps__marker,
.ds-steps__item--current .ds-steps__marker {
border-color: var(--ds-steps-fill);
background-color: var(--ds-steps-fill);
color: var(--ds-steps-on-fill);
}
.ds-steps__label {
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.ds-steps__item--current {
color: var(--ds-steps-ink);
}
.ds-steps__item--current .ds-steps__label {
font-weight: var(--ds-emphasis-weight);
}
.ds-timeline {
list-style: none;
margin: 0;
padding: 0;
display: block;
--ds-timeline-dot: 0.625rem;
--ds-timeline-lane: 1.25rem;
--ds-timeline-mark: 0.875rem;
--ds-timeline-gap: var(--ds-space-3);
--ds-timeline-step: var(--ds-space-4);
--ds-timeline-clear: var(--ds-space-1);
--ds-timeline-colour: var(--ds-border-strong);
--ds-timeline-line: var(--ds-border);
--ds-timeline-title-face: var(--ds-font-body-face);
--ds-timeline-title-size: var(--ds-font-body-size);
--ds-timeline-title-leading: var(--ds-font-body-leading);
--ds-timeline-small-face: var(--ds-font-small-face);
--ds-timeline-small-size: var(--ds-font-small-size);
--ds-timeline-small-leading: var(--ds-font-small-leading);
--ds-timeline-ink: var(--ds-text-primary-neutral);
--ds-timeline-ink-detail: var(--ds-text-secondary-neutral);
--ds-timeline-ink-time: var(--ds-text-tertiary-neutral);
--ds-timeline-ink-hover: var(--ds-interactive);
}
.ds-timeline__entry {
display: grid;
column-gap: var(--ds-timeline-gap);
padding-block-end: var(--ds-timeline-step);
position: relative;
}
.ds-timeline__entry:last-child {
padding-block-end: 0;
}
.ds-timeline--rail {
display: grid;
grid-template-columns: auto var(--ds-timeline-lane) minmax(0, 1fr);
column-gap: var(--ds-timeline-gap);
}
.ds-timeline--rail .ds-timeline__entry {
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: auto;
}
.ds-timeline--rail .ds-timeline__time {
grid-column: 1;
grid-row: 1;
text-align: end;
padding-block-start: 0.125rem;
}
.ds-timeline--rail .ds-timeline__marker {
grid-column: 2;
grid-row: 1 / -1;
}
.ds-timeline--rail .ds-timeline__body {
grid-column: 3;
grid-row: 1 / -1;
}
.ds-timeline--inline .ds-timeline__entry {
grid-template-columns: var(--ds-timeline-lane) minmax(0, 1fr);
grid-template-rows: auto auto;
}
.ds-timeline--inline .ds-timeline__marker {
grid-column: 1;
grid-row: 1 / -1;
}
.ds-timeline--inline .ds-timeline__time {
grid-column: 2;
grid-row: 1;
}
.ds-timeline--inline .ds-timeline__body {
grid-column: 2;
}
.ds-timeline__marker {
position: relative;
inline-size: var(--ds-timeline-lane);
display: grid;
grid-template-rows: var(--ds-timeline-lane);
justify-items: center;
align-items: center;
color: var(--ds-timeline-colour);
}
.ds-timeline__marker::before {
content: "";
display: block;
inline-size: var(--ds-timeline-dot);
block-size: var(--ds-timeline-dot);
border-radius: var(--ds-radius-full);
background-color: currentcolor;
}
.ds-timeline__marker:has(svg)::before {
content: none;
}
.ds-timeline__marker svg {
inline-size: var(--ds-timeline-mark);
block-size: var(--ds-timeline-mark);
}
.ds-timeline__entry:not(:last-child) .ds-timeline__marker::after {
content: "";
position: absolute;
inset-block-start: calc((var(--ds-timeline-lane) / 2) + (var(--ds-timeline-dot) / 2) + var(--ds-timeline-clear));
inset-block-end: calc(-1 * (var(--ds-timeline-step) + (var(--ds-timeline-lane) / 2) - (var(--ds-timeline-dot) / 2) - var(--ds-timeline-clear)));
inset-inline-start: calc(50% - 0.5px);
inline-size: 1px;
background-color: var(--ds-timeline-line);
}
.ds-timeline__body {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-timeline__time {
font-family: var(--ds-timeline-small-face);
font-size: var(--ds-timeline-small-size);
line-height: var(--ds-timeline-small-leading);
color: var(--ds-timeline-ink-time);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-timeline__title {
font-family: var(--ds-timeline-title-face);
font-size: var(--ds-timeline-title-size);
line-height: var(--ds-timeline-title-leading);
color: var(--ds-timeline-ink);
}
button.ds-timeline__title {
appearance: none;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: var(--ds-timeline-ink);
text-align: start;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
align-self: start;
transition: color var(--ds-duration) var(--ds-ease);
}
button.ds-timeline__title:hover {
color: var(--ds-timeline-ink-hover);
}
.ds-timeline__chevron {
display: inline-grid;
place-items: center;
color: var(--ds-timeline-ink-time);
transition: transform var(--ds-duration) var(--ds-ease);
}
.ds-timeline__chevron svg {
inline-size: var(--ds-timeline-mark);
block-size: var(--ds-timeline-mark);
}
button.ds-timeline__title[aria-expanded="true"] .ds-timeline__chevron {
transform: rotate(180deg);
}
a.ds-timeline__title {
text-decoration: none;
color: var(--ds-timeline-ink);
transition: color var(--ds-duration) var(--ds-ease);
}
a.ds-timeline__title:hover {
color: var(--ds-timeline-ink-hover);
}
.ds-timeline__detail {
font-family: var(--ds-timeline-small-face);
font-size: var(--ds-timeline-small-size);
line-height: var(--ds-timeline-small-leading);
color: var(--ds-timeline-ink-detail);
}
.ds-timeline__content {
margin-block-start: var(--ds-space-2);
min-inline-size: 0;
}
.ds-timeline__entry--hue-red .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-red); }
.ds-timeline__entry--hue-orange .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-orange); }
.ds-timeline__entry--hue-amber .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-amber); }
.ds-timeline__entry--hue-yellow .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-yellow); }
.ds-timeline__entry--hue-lime .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-lime); }
.ds-timeline__entry--hue-green .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-green); }
.ds-timeline__entry--hue-teal .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-teal); }
.ds-timeline__entry--hue-cyan .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-cyan); }
.ds-timeline__entry--hue-blue .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-blue); }
.ds-timeline__entry--hue-indigo .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-indigo); }
.ds-timeline__entry--hue-violet .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-violet); }
.ds-timeline__entry--hue-pink .ds-timeline__marker { --ds-timeline-colour: var(--ds-hue-pink); }
.ds-change {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ds-space-2);
min-inline-size: 0;
--ds-change-face: var(--ds-font-small-face);
--ds-change-size: var(--ds-font-small-size);
--ds-change-leading: var(--ds-font-small-leading);
--ds-change-was: var(--ds-text-tertiary-neutral);
--ds-change-now: var(--ds-text-primary-neutral);
--ds-change-arrow: var(--ds-text-tertiary-neutral);
font-family: var(--ds-change-face);
font-size: var(--ds-change-size);
line-height: var(--ds-change-leading);
}
.ds-change__was {
color: var(--ds-change-was);
min-inline-size: 0;
}
.ds-change__now {
color: var(--ds-change-now);
min-inline-size: 0;
}
.ds-change__was--empty,
.ds-change__now--empty {
font-style: italic;
color: var(--ds-change-arrow);
}
.ds-change__arrow {
color: var(--ds-change-arrow);
white-space: nowrap;
}
.ds-moment {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-moment[title] {
cursor: help;
}
.ds-log {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
container-type: inline-size;
--ds-log-rows-min: 34rem;
--ds-log-panel: 28rem;
--ds-log-col-when: 9rem;
--ds-log-col-what: 11rem;
--ds-log-col-who: 12rem;
--ds-log-ink-what: var(--ds-text-primary-neutral);
--ds-log-ink-who: var(--ds-text-primary-neutral);
--ds-log-ink-mark: var(--ds-text-tertiary-neutral);
--ds-log-title-face: var(--ds-font-label-face);
--ds-log-title-size: var(--ds-font-label-size);
--ds-log-title-weight: var(--ds-font-label-weight);
--ds-log-title-leading: var(--ds-font-label-leading);
--ds-log-title-ink: var(--ds-text-primary-neutral);
}
.ds-log .ds-toolbar + .ds-log__split {
margin-block-start: calc(var(--ds-rhythm-element) - var(--ds-rhythm-block));
}
.ds-log__split {
display: flex;
align-items: start;
--ds-grid-gap: var(--ds-space-4);
gap: var(--ds-grid-gap);
min-inline-size: 0;
}
.ds-log__rows {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
}
.ds-log .ds-log__split > .ds-log__panel {
flex: 0 0 var(--ds-log-panel);
max-inline-size: 100%;
min-inline-size: 0;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
position: sticky;
inset-block-start: var(--ds-space-4);
}
@container (width < 60rem) {
.ds-log__split {
flex-direction: column;
align-items: stretch;
}
.ds-log .ds-log__split > .ds-log__panel {
flex: 1 1 auto;
inline-size: 100%;
position: static;
order: -1;
}
.ds-log__split > .ds-drawer--inline[data-open="true"] {
inline-size: auto;
max-inline-size: 100%;
}
.ds-log__split > .ds-drawer--inline[data-open="false"] {
margin-inline: 0;
margin-block: 0 calc(var(--ds-grid-gap, 0px) * -1);
}
}
@container (width < 80rem) {
.ds-log__split--three {
flex-direction: column;
align-items: stretch;
}
.ds-log__split--three > .ds-log__panel {
flex: 1 1 auto;
inline-size: 100%;
position: static;
order: -1;
}
.ds-log__split--three > .ds-drawer--inline[data-open="true"] {
inline-size: auto;
max-inline-size: 100%;
}
}
.ds-log__kind {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
white-space: nowrap;
}
.ds-log__mark {
display: inline-grid;
place-items: center;
inline-size: 1rem;
block-size: 1rem;
color: var(--ds-log-ink-mark);
}
.ds-log__mark svg {
inline-size: 0.875rem;
block-size: 0.875rem;
}
.ds-log__what {
color: var(--ds-log-ink-what);
}
.ds-log__who {
color: var(--ds-log-ink-who);
white-space: nowrap;
}
.ds-log__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-3);
padding: var(--ds-space-3) var(--ds-space-4);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-log__panel-title {
font-family: var(--ds-log-title-face);
font-size: var(--ds-log-title-size);
font-weight: var(--ds-log-title-weight);
line-height: var(--ds-log-title-leading);
color: var(--ds-log-title-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-log__panel-summary {
display: flex;
flex-direction: column;
align-items: start;
gap: var(--ds-rhythm-element);
padding: var(--ds-space-4);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-log__panel-summary .ds-description-list {
inline-size: 100%;
}
.ds-log__panel-body {
padding: var(--ds-space-4);
max-block-size: 60vh;
overflow: auto;
position: relative;
}
.ds-settings {
--ds-settings-rail: 12rem;
container-type: inline-size;
container-name: ds-settings;
}
.ds-settings__body {
display: grid;
grid-template-columns: var(--ds-settings-rail) minmax(0, 1fr);
gap: var(--ds-rhythm-block);
align-items: start;
}
.ds-settings__list {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.ds-settings__link {
--ds-settings-link-face: var(--ds-font-label-face);
--ds-settings-link-tracking: var(--ds-font-label-tracking);
--ds-settings-link-size: var(--ds-font-label-size);
--ds-settings-link-leading: var(--ds-font-label-leading);
--ds-settings-link-weight: var(--ds-font-label-weight);
--ds-settings-link-ink: var(--ds-text-secondary-neutral);
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-1) var(--ds-space-2);
box-sizing: border-box;
min-block-size: var(--ds-size-2);
border-radius: var(--ds-radius-2);
font-family: var(--ds-settings-link-face);
font-size: var(--ds-settings-link-size);
letter-spacing: var(--ds-settings-link-tracking);
line-height: var(--ds-settings-link-leading);
font-weight: var(--ds-settings-link-weight);
color: var(--ds-settings-link-ink);
text-decoration: none;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-settings__link:hover {
--ds-settings-link-ink: var(--ds-text-primary-neutral);
color: var(--ds-settings-link-ink);
background-color: var(--ds-surface-hover);
}
.ds-settings__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-settings__link[aria-current] {
--ds-settings-link-weight-current: var(--ds-current-weight);
--ds-settings-link-ink: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-active);
color: var(--ds-settings-link-ink);
font-weight: var(--ds-settings-link-weight-current);
}
.ds-settings__mark {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-settings__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-settings__page {
min-inline-size: 0;
}
@container ds-settings (width <= 40rem) {
.ds-settings__body {
grid-template-columns: minmax(0, 1fr);
}
.ds-settings__list {
flex-direction: row;
gap: var(--ds-space-1);
position: relative;
overflow-x: auto;
}
.ds-settings__link {
white-space: nowrap;
}
}
.ds-error {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
min-block-size: 100%;
padding: var(--ds-rhythm-block) var(--ds-space-6);
}
.ds-error > .ds-state {
flex: 1;
}
.ds-error__code {
--ds-error-code-face: var(--ds-font-small-face);
--ds-error-code-size: var(--ds-font-small-size);
--ds-error-code-weight: var(--ds-font-small-weight);
--ds-error-code-leading: var(--ds-font-small-leading);
--ds-error-code-tracking: var(--ds-font-small-tracking);
--ds-error-code-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-error-code-face);
font-size: var(--ds-error-code-size);
font-weight: var(--ds-error-code-weight);
line-height: var(--ds-error-code-leading);
letter-spacing: var(--ds-error-code-tracking);
color: var(--ds-error-code-ink);
}
.ds-field.ds-phone-field {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--ds-space-2);
row-gap: var(--ds-field-step);
align-items: start;
}
.ds-phone-field > .ds-field__label,
.ds-phone-field > .ds-field__message {
grid-column: 1 / -1;
}
.ds-phone-field__country {
inline-size: auto;
}
.ds-phone-field__country .ds-field__frame {
inline-size: auto;
}
.ds-phone-field__number {
min-inline-size: 0;
}
.ds-popover {
box-sizing: border-box;
position: fixed;
inset: auto;
margin: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1px;
min-inline-size: 12rem;
max-block-size: min(24rem, calc(100dvh - var(--ds-space-8)));
overflow-y: auto;
padding: var(--ds-space-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-1);
--ds-popover-ink: var(--ds-text-primary-neutral);
color: var(--ds-popover-ink);
}
.ds-popover--dialog {
gap: 0;
padding: var(--ds-space-3);
}
.ds-popover:not(:popover-open) {
display: none;
}
.ds-popover__item {
--ds-popover-item-face: var(--ds-font-label-face);
--ds-popover-item-tracking: var(--ds-font-label-tracking);
--ds-popover-item-size: var(--ds-font-label-size);
--ds-popover-item-weight: var(--ds-font-label-weight);
--ds-popover-item-leading: var(--ds-font-label-leading);
display: flex;
align-items: center;
gap: var(--ds-space-3);
min-block-size: var(--ds-size-2);
inline-size: 100%;
padding-inline: var(--ds-space-2);
border: 0;
border-radius: var(--ds-radius-2);
background: none;
font-family: var(--ds-popover-item-face);
font-size: var(--ds-popover-item-size);
letter-spacing: var(--ds-popover-item-tracking);
font-weight: var(--ds-popover-item-weight);
line-height: var(--ds-popover-item-leading);
color: inherit;
text-align: start;
text-decoration: none;
cursor: pointer;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-popover__item:hover {
background-color: var(--ds-surface-hover);
}
.ds-popover__item:focus {
outline: none;
background-color: var(--ds-surface-active);
}
.ds-popover__item:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-popover__item[aria-disabled="true"] {
--ds-popover-item-ink: var(--ds-text-disabled);
color: var(--ds-popover-item-ink);
cursor: default;
}
.ds-popover__item[aria-disabled="true"]:hover {
background-color: transparent;
}
.ds-popover__item--danger {
color: var(--ds-danger-ink);
}
.ds-popover__icon,
.ds-popover__check {
display: flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-popover__icon > svg,
.ds-popover__check > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-popover__check--empty {
visibility: hidden;
}
.ds-popover__label {
flex: 1;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-popover__shortcut {
--ds-popover-shortcut-tracking: var(--ds-font-mono-tracking);
--ds-popover-shortcut-size: var(--ds-font-mono-size);
--ds-popover-shortcut-weight: var(--ds-font-mono-weight);
flex: none;
padding-inline-start: var(--ds-space-4);
--ds-popover-shortcut-face: var(--ds-font-mono-face);
font-family: var(--ds-popover-shortcut-face);
font-size: var(--ds-popover-shortcut-size);
letter-spacing: var(--ds-popover-shortcut-tracking);
font-weight: var(--ds-popover-shortcut-weight);
--ds-popover-shortcut-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-popover-shortcut-ink);
}
.ds-popover__heading {
--ds-popover-heading-face: var(--ds-font-small-face);
--ds-popover-heading-size: var(--ds-font-small-size);
--ds-popover-heading-weight: var(--ds-font-small-weight);
--ds-popover-heading-leading: var(--ds-font-small-leading);
--ds-popover-heading-tracking: var(--ds-font-overline-tracking);
padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-1);
font-family: var(--ds-popover-heading-face);
font-size: var(--ds-popover-heading-size);
font-weight: var(--ds-popover-heading-weight);
line-height: var(--ds-popover-heading-leading);
letter-spacing: var(--ds-popover-heading-tracking);
text-transform: uppercase;
--ds-popover-heading-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-popover-heading-ink);
}
.ds-popover__separator {
display: block;
block-size: 1px;
margin: var(--ds-space-1) 0;
border: 0;
background-color: var(--ds-border-subtle);
}
.ds-popover__header {
display: flex;
align-items: center;
padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-3);
margin-block-end: var(--ds-space-1);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-popover__detail {
--ds-popover-detail-face: var(--ds-font-small-face);
--ds-popover-detail-size: var(--ds-font-small-size);
--ds-popover-detail-weight: var(--ds-font-small-weight);
--ds-popover-detail-leading: var(--ds-font-small-leading);
--ds-popover-detail-tracking: var(--ds-font-small-tracking);
flex: none;
padding-inline-start: var(--ds-space-4);
font-family: var(--ds-popover-detail-face);
font-size: var(--ds-popover-detail-size);
font-weight: var(--ds-popover-detail-weight);
line-height: var(--ds-popover-detail-leading);
letter-spacing: var(--ds-popover-detail-tracking);
--ds-popover-detail-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-popover-detail-ink);
}
.ds-popover__switch {
--ds-popover-switch-mark: 1rem;
--ds-popover-switch-fill: var(--ds-inverse);
position: relative;
display: block;
flex: none;
margin-inline-start: var(--ds-space-4);
inline-size: calc(var(--ds-popover-switch-mark) * 1.75);
block-size: var(--ds-popover-switch-mark);
border-radius: var(--ds-radius-full);
background-color: var(--ds-surface-3);
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-popover__switch::before {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: calc(var(--ds-popover-switch-mark) * 0.1);
inline-size: calc(var(--ds-popover-switch-mark) * 0.8);
block-size: calc(var(--ds-popover-switch-mark) * 0.8);
border-radius: 50%;
background-color: var(--ds-surface-0);
translate: 0 -50%;
transition: translate var(--ds-duration) var(--ds-ease);
}
.ds-popover__item[aria-checked="true"] > .ds-popover__switch {
background-color: var(--ds-popover-switch-fill);
}
.ds-popover__item[aria-checked="true"] > .ds-popover__switch::before {
translate: calc(var(--ds-popover-switch-mark) * 0.75) -50%;
}
.ds-popover__search {
position: sticky;
inset-block-start: calc(var(--ds-space-1) * -1);
z-index: 1;
margin: calc(var(--ds-space-1) * -1) calc(var(--ds-space-1) * -1) var(--ds-space-1);
border-block-end: 1px solid var(--ds-border-subtle);
background-color: var(--ds-surface-1);
}
.ds-popover__search .ds-field__frame {
border-color: transparent;
border-radius: 0;
background-color: transparent;
}
.ds-popover__search .ds-field__frame:focus-within {
border-color: transparent;
}
.ds-popover__empty {
--ds-popover-empty-face: var(--ds-font-label-face);
--ds-popover-empty-tracking: var(--ds-font-label-tracking);
--ds-popover-empty-size: var(--ds-font-label-size);
padding: var(--ds-space-3) var(--ds-space-2);
font-family: var(--ds-popover-empty-face);
font-size: var(--ds-popover-empty-size);
letter-spacing: var(--ds-popover-empty-tracking);
--ds-popover-empty-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-popover-empty-ink);
}
.ds-popover__item[aria-selected="true"] .ds-swap__off {
display: none;
}
.ds-popover__item[aria-selected="true"] .ds-swap__on {
display: inline-flex;
}
@container ds-app-shell (width <= 40rem) {
.ds-popover[role="menu"] {
--ds-popover-sheet: 1;
--ds-popover-ceiling: 85dvh;
inset: auto 0 0;
inline-size: 100%;
min-inline-size: 100%;
max-block-size: var(--ds-popover-ceiling);
padding: var(--ds-space-2) var(--ds-space-2) calc(var(--ds-space-2) + env(safe-area-inset-bottom, 0px));
border-inline: 0;
border-block-end: 0;
border-radius: var(--ds-radius-4) var(--ds-radius-4) 0 0;
}
}
.ds-prose {
--ds-prose-face: var(--ds-font-copy-prose-face);
--ds-prose-tracking: var(--ds-font-copy-prose-tracking);
--ds-prose-size: var(--ds-font-copy-prose-size);
--ds-prose-weight: var(--ds-font-copy-prose-weight);
--ds-prose-leading: var(--ds-font-copy-prose-leading);
--ds-prose-code-size: var(--ds-font-label-size);
--ds-prose-emphasis-weight: var(--ds-bold-weight);
--ds-prose-ink: var(--ds-text-primary-neutral);
color: var(--ds-prose-ink);
font-family: var(--ds-prose-face);
font-size: var(--ds-prose-size);
letter-spacing: var(--ds-prose-tracking);
font-weight: var(--ds-prose-weight);
line-height: var(--ds-prose-leading);
max-inline-size: var(--ds-prose-measure, 48ch);
text-wrap-style: pretty;
container-type: inline-size;
container-name: ds-prose;
}
.ds-prose > * {
margin-block: 0;
}
.ds-prose p:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
font-size: var(--ds-prose-size);
line-height: var(--ds-prose-leading);
}
.ds-prose > * + * {
margin-block-start: var(--ds-rhythm-element);
}
.ds-prose :is(h1, h2, h3, h4, h5, h6):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
text-wrap-style: balance;
}
.ds-prose > :is(h1, h2, h3, h4, h5, h6) + * {
margin-block-start: var(--ds-space-3);
}
.ds-prose > * + :is(h1, h2, h3, h4, h5, h6) {
margin-block-start: var(--ds-rhythm-block);
}
.ds-prose > :first-child {
margin-block-start: 0;
}
.ds-prose h1:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-h1-face: var(--ds-font-heading-2-face);
--ds-prose-h1-size: var(--ds-font-heading-2-size);
--ds-prose-h1-leading: var(--ds-font-heading-2-leading);
--ds-prose-h1-tracking: var(--ds-font-heading-2-tracking);
font-family: var(--ds-prose-h1-face);
font-size: var(--ds-prose-h1-size);
line-height: var(--ds-prose-h1-leading);
font-weight: var(--ds-font-heading-2-weight);
letter-spacing: var(--ds-prose-h1-tracking);
}
.ds-prose h2:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-h2-face: var(--ds-font-heading-3-face);
--ds-prose-h2-size: var(--ds-font-heading-3-size);
--ds-prose-h2-leading: var(--ds-font-heading-3-leading);
--ds-prose-h2-tracking: var(--ds-font-heading-3-tracking);
font-family: var(--ds-prose-h2-face);
font-size: var(--ds-prose-h2-size);
line-height: var(--ds-prose-h2-leading);
font-weight: var(--ds-font-heading-3-weight);
letter-spacing: var(--ds-prose-h2-tracking);
}
.ds-prose h3:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-h3-face: var(--ds-font-heading-4-face);
--ds-prose-h3-size: var(--ds-font-heading-4-size);
--ds-prose-h3-leading: var(--ds-font-heading-4-leading);
--ds-prose-h3-tracking: var(--ds-font-heading-4-tracking);
font-family: var(--ds-prose-h3-face);
font-size: var(--ds-prose-h3-size);
line-height: var(--ds-prose-h3-leading);
font-weight: var(--ds-font-heading-4-weight);
letter-spacing: var(--ds-prose-h3-tracking);
}
.ds-prose :is(h4, h5, h6):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-h4-face: var(--ds-font-heading-6-face);
--ds-prose-h4-size: var(--ds-font-heading-6-size);
--ds-prose-h4-leading: var(--ds-font-heading-6-leading);
--ds-prose-h4-tracking: var(--ds-font-heading-6-tracking);
font-family: var(--ds-prose-h4-face);
font-size: var(--ds-prose-h4-size);
line-height: var(--ds-prose-h4-leading);
font-weight: var(--ds-font-heading-6-weight);
letter-spacing: var(--ds-prose-h4-tracking);
}
.ds-prose a:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: from-font;
}
.ds-prose a:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)):hover {
text-decoration-thickness: 2px;
}
.ds-prose a:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)):focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-prose strong:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
font-weight: var(--ds-prose-emphasis-weight);
}
.ds-prose :is(code, kbd, samp):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-code-face: var(--ds-font-mono-face);
font-family: var(--ds-prose-code-face);
font-size: var(--ds-prose-code-size);
}
.ds-prose :not(pre) > code:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
padding: 0.1em 0.3em;
border-radius: var(--ds-radius-1);
background-color: var(--ds-surface-2);
}
.ds-prose mark:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
padding: 0.1em 0.2em;
border-radius: var(--ds-radius-1);
background-color: var(--ds-warning-tint);
color: inherit;
}
.ds-prose :is(ul, ol):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
padding-inline-start: var(--ds-space-6);
}
.ds-prose li + li:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
margin-block-start: var(--ds-space-2);
}
.ds-prose li > :is(ul, ol):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
margin-block-start: var(--ds-space-2);
}
.ds-prose :is(dt):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
font-weight: var(--ds-prose-emphasis-weight);
}
.ds-prose dd:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
margin-inline-start: var(--ds-space-6);
}
.ds-prose dd + dt:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
margin-block-start: var(--ds-space-4);
}
.ds-prose blockquote:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
padding-inline-start: var(--ds-space-4);
border-inline-start: 2px solid var(--ds-border);
--ds-prose-ink: var(--ds-text-secondary-neutral);
color: var(--ds-prose-ink);
}
.ds-prose blockquote:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) > * + * {
margin-block-start: var(--ds-space-3);
}
.ds-prose hr:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
display: block;
block-size: 1px;
border: 0;
background-color: var(--ds-border-subtle);
}
.ds-prose :is(img, video, svg):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
max-inline-size: 100%;
block-size: auto;
border-radius: var(--ds-radius-2);
}
.ds-prose figure:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
margin-inline: 0;
}
.ds-prose figure img:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
display: block;
inline-size: auto;
max-inline-size: 100%;
max-block-size: var(--ds-prose-picture-ceiling, 32rem);
margin-inline: auto;
}
.ds-prose figure.ds-prose__row img:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
max-block-size: var(--ds-prose-picture-ceiling-row, 18rem);
}
.ds-prose figcaption:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-figcaption-size: var(--ds-font-label-size);
--ds-prose-figcaption-leading: var(--ds-font-label-leading);
margin-block-start: var(--ds-space-2);
font-size: var(--ds-prose-figcaption-size);
line-height: var(--ds-prose-figcaption-leading);
--ds-prose-ink: var(--ds-text-secondary-neutral);
color: var(--ds-prose-ink);
text-align: center;
}
.ds-prose pre:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
position: relative;
overflow-x: auto;
padding: var(--ds-space-4);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-1);
}
.ds-prose pre code:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
padding: 0;
background: none;
}
.ds-prose__scroll {
position: relative;
overflow-x: auto;
}
.ds-prose table:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
--ds-prose-table-size: var(--ds-font-label-size);
--ds-prose-table-leading: var(--ds-font-label-leading);
inline-size: 100%;
border-collapse: collapse;
font-size: var(--ds-prose-table-size);
line-height: var(--ds-prose-table-leading);
}
.ds-prose :is(th, td):not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
padding: var(--ds-space-2) var(--ds-space-3);
border-block-end: 1px solid var(--ds-border-subtle);
text-align: start;
vertical-align: top;
}
.ds-prose th:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
font-weight: var(--ds-prose-emphasis-weight);
}
.ds-prose :is(figure, img, pre, .ds-prose__scroll).ds-prose__wide {
max-inline-size: none;
inline-size: 100%;
}
.ds-prose figure.ds-prose__row {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-4);
align-items: flex-start;
}
.ds-prose figure.ds-prose__row > img:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
flex: 1 1 9rem;
min-inline-size: 0;
}
.ds-prose figure.ds-prose__row > figcaption:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
flex-basis: 100%;
}
@container ds-prose (min-width: 40rem) {
.ds-prose figure:is(.ds-prose__aside, .ds-prose__aside-end) {
inline-size: fit-content;
max-inline-size: min(48%, 20rem);
}
.ds-prose figure:is(.ds-prose__aside, .ds-prose__aside-end) img:not(:where([class^="ds-"]:not([class^="ds-prose"]), .ds-prose [class^="ds-"]:not([class^="ds-prose"]) *)) {
margin-inline: 0;
}
.ds-prose figure:is(.ds-prose__aside, .ds-prose__aside-end) {
margin-block-start: 0;
margin-block-end: var(--ds-rhythm-block);
padding-block-start: calc((1lh - 1em) / 2);
}
.ds-prose > *:has(+ figure:is(.ds-prose__aside, .ds-prose__aside-end)) {
margin-block-end: var(--ds-rhythm-block);
}
.ds-prose figure.ds-prose__aside {
float: inline-start;
margin-inline-end: var(--ds-rhythm-block);
}
.ds-prose figure.ds-prose__aside-end {
float: inline-end;
margin-inline-start: var(--ds-rhythm-block);
}
.ds-prose :is(h2, h3, ul, ol, blockquote, pre, hr, figure, table, .ds-prose__scroll) {
clear: both;
}
}
.ds-provider {
--ds-provider-face: var(--ds-font-body-face);
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
min-block-size: var(--ds-provider-tier);
padding-inline: var(--ds-provider-inset);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-1);
--ds-provider-ink: var(--ds-text-primary-neutral);
color: var(--ds-provider-ink);
font-family: var(--ds-provider-face);
font-weight: var(--ds-font-body-weight);
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-provider--xsmall {
--ds-provider-face: var(--ds-font-small-face);
--ds-provider-tracking: var(--ds-font-small-tracking);
--ds-provider-size: var(--ds-font-small-size);
--ds-provider-weight: var(--ds-font-small-weight);
--ds-provider-leading: var(--ds-font-small-leading);
--ds-provider-tier: var(--ds-size-1); --ds-provider-inset: var(--ds-space-2); font-size: var(--ds-provider-size); line-height: var(--ds-provider-leading); }
.ds-provider--small {
--ds-provider-face: var(--ds-font-label-face);
--ds-provider-tracking: var(--ds-font-label-tracking);
--ds-provider-size: var(--ds-font-label-size);
--ds-provider-weight: var(--ds-font-label-weight);
--ds-provider-leading: var(--ds-font-label-leading);
--ds-provider-tier: var(--ds-size-2); --ds-provider-inset: var(--ds-space-3); font-size: var(--ds-provider-size); line-height: var(--ds-provider-leading); }
.ds-provider--medium {
--ds-provider-face: var(--ds-font-body-face);
--ds-provider-tracking: var(--ds-font-body-tracking);
--ds-provider-size: var(--ds-font-body-size);
--ds-provider-weight: var(--ds-font-body-weight);
--ds-provider-leading: var(--ds-font-body-leading);
--ds-provider-tier: var(--ds-size-3); --ds-provider-inset: var(--ds-space-4); font-size: var(--ds-provider-size); line-height: var(--ds-provider-leading); }
.ds-provider--large {
--ds-provider-face: var(--ds-font-body-face);
--ds-provider-tracking: var(--ds-font-body-tracking);
--ds-provider-size: var(--ds-font-body-size);
--ds-provider-weight: var(--ds-font-body-weight);
--ds-provider-leading: var(--ds-font-body-leading);
--ds-provider-tier: var(--ds-size-4); --ds-provider-inset: var(--ds-space-4); font-size: var(--ds-provider-size); line-height: var(--ds-provider-leading); }
.ds-provider--xlarge {
--ds-provider-face: var(--ds-font-body-face);
--ds-provider-tracking: var(--ds-font-body-tracking);
--ds-provider-size: var(--ds-font-body-size);
--ds-provider-weight: var(--ds-font-body-weight);
--ds-provider-leading: var(--ds-font-body-leading);
--ds-provider-tier: var(--ds-size-5); --ds-provider-inset: var(--ds-space-5); font-size: var(--ds-provider-size); line-height: var(--ds-provider-leading); }
.ds-provider--xxlarge {
--ds-provider-face: var(--ds-font-body-face);
--ds-provider-tracking: var(--ds-font-body-tracking);
--ds-provider-size: var(--ds-font-body-size);
--ds-provider-weight: var(--ds-font-body-weight);
--ds-provider-leading: var(--ds-font-body-leading);
--ds-provider-tier: var(--ds-size-6); --ds-provider-inset: var(--ds-space-6); font-size: var(--ds-provider-size); line-height: var(--ds-provider-leading); }
.ds-provider__mark {
position: absolute;
inset-inline-start: var(--ds-provider-inset);
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1lh;
block-size: 1lh;
}
.ds-provider__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-provider__label {
padding-inline: calc(1lh + var(--ds-space-2));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-provider:hover:not(:disabled) {
background-image: linear-gradient(var(--ds-surface-hover), var(--ds-surface-hover));
}
.ds-provider:active:not(:disabled) {
background-image: linear-gradient(var(--ds-surface-active), var(--ds-surface-active));
}
.ds-provider:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-provider:disabled {
background-color: var(--ds-surface-disabled);
--ds-provider-ink: var(--ds-text-disabled);
color: var(--ds-provider-ink);
cursor: not-allowed;
}
.ds-toolbar {
display: flex;
align-items: center;
gap: var(--ds-space-3);
flex-wrap: wrap;
padding-block: var(--ds-space-3);
padding-inline: var(--ds-toolbar-gutter, var(--ds-space-4));
}
.ds-toolbar:not(:last-child) {
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-toolbar--bare {
padding: 0;
}
.ds-toolbar--bare:not(:last-child) {
border-block-end: 0;
}
.ds-toolbar--sticky {
position: sticky;
inset-block-start: 0;
z-index: 1;
background-color: var(--ds-surface-1);
}
.ds-toolbar__search {
flex: 1;
min-inline-size: 12rem;
}
.ds-toolbar__start,
.ds-toolbar__end {
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: none;
}
.ds-toolbar--split .ds-toolbar__end {
margin-inline-start: auto;
}
.ds-toolbar {
container-type: inline-size;
container-name: ds-toolbar;
}
@container ds-toolbar (max-width: 30rem) {
.ds-toolbar__start .ds-button:has(.ds-button__icon) .ds-button__label,
.ds-toolbar__end .ds-button:has(.ds-button__icon) .ds-button__label {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-toolbar__search {
min-inline-size: 5rem;
}
}
.ds-radio__dot {
border-radius: 50%;
}
.ds-radio__dot::before {
content: "";
display: block;
inline-size: calc(var(--ds-choice-mark) * 0.44);
block-size: calc(var(--ds-choice-mark) * 0.44);
border-radius: 50%;
background-color: currentColor;
}
.ds-radio-group {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.ds-radio-group__options {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
}
.ds-radio-group--row .ds-radio-group__options {
flex-direction: row;
flex-wrap: wrap;
column-gap: var(--ds-space-6);
}
.ds-search__clear {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 1.25em;
block-size: 1.25em;
padding: 0;
border: 0;
border-radius: var(--ds-radius-full);
background: none;
--ds-search-clear-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-search-clear-ink);
cursor: pointer;
transition:
color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-search__clear::after {
content: "";
position: absolute;
inset: calc((1.25em - max(24px, 1.25em)) / 2);
}
.ds-search__clear > svg {
inline-size: 0.85em;
block-size: 0.85em;
}
.ds-search__clear:hover {
--ds-search-clear-ink: var(--ds-text-primary-neutral);
color: var(--ds-search-clear-ink);
background-color: var(--ds-surface-hover);
}
.ds-search__clear:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
--ds-search-clear-ink: var(--ds-text-primary-neutral);
color: var(--ds-search-clear-ink);
}
.ds-field__control[type="search"]::-webkit-search-cancel-button,
.ds-field__control[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.ds-search__end {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
flex: none;
--ds-search-end-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-search-end-ink);
pointer-events: none;
}
.ds-select__control {
--ds-select-intent: padding;
display: flex;
align-items: center;
gap: var(--ds-space-2);
text-align: start;
cursor: pointer;
}
.ds-field__frame:not(:has(.ds-field__icon)) > .ds-select__control {
margin-inline: -0.75em;
padding-inline: 0.75em;
}
.ds-field--xsmall .ds-field__frame:not(:has(.ds-field__icon)) > .ds-select__control {
margin-inline: -0.5em;
padding-inline: 0.5em;
}
.ds-select__value {
flex: 1;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-select__value--empty {
--ds-select-value--empty-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-select-value--empty-ink);
}
.ds-select__arrow {
display: flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
--ds-select-arrow-ink: var(--ds-text-secondary-neutral);
color: var(--ds-select-arrow-ink);
transition: transform var(--ds-duration-fast) var(--ds-ease);
}
.ds-select__arrow > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-select__control[aria-expanded="true"] .ds-select__arrow {
transform: rotate(180deg);
}
.ds-select__control:disabled {
cursor: not-allowed;
}
.ds-select__mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-select__mark > svg,
.ds-select__mark > img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.ds-segmented {
--ds-segmented-inset: var(--ds-space-1);
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
padding: var(--ds-segmented-inset);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-2);
flex-wrap: wrap;
}
.ds-segmented--block {
display: flex;
}
.ds-segmented--xsmall {
--ds-segmented-tier: var(--ds-size-1);
--ds-segmented-inset: var(--ds-space-0-5);
}
.ds-segmented--xsmall
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-face: var(--ds-font-small-face);
--ds-segmented-option-tracking: var(--ds-font-small-tracking);
--ds-segmented-option-size: var(--ds-font-small-size);
--ds-segmented-option-leading: var(--ds-font-small-leading);
padding-inline: 0.75em; font-size: var(--ds-segmented-option-size); line-height: var(--ds-segmented-option-leading); }
.ds-segmented--small { --ds-segmented-tier: var(--ds-size-2); }
.ds-segmented--small
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-face: var(--ds-font-label-face);
--ds-segmented-option-tracking: var(--ds-font-label-tracking);
--ds-segmented-option-size: var(--ds-font-label-size);
--ds-segmented-option-leading: var(--ds-font-label-leading);
padding-inline: 0.9em; font-size: var(--ds-segmented-option-size); line-height: var(--ds-segmented-option-leading); }
.ds-segmented--medium { --ds-segmented-tier: var(--ds-size-3); }
.ds-segmented--medium
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-face: var(--ds-font-body-face);
--ds-segmented-option-tracking: var(--ds-font-body-tracking);
--ds-segmented-option-size: var(--ds-font-body-size);
--ds-segmented-option-leading: var(--ds-font-body-leading);
padding-inline: 1.15em; font-size: var(--ds-segmented-option-size); line-height: var(--ds-segmented-option-leading); }
.ds-segmented--large { --ds-segmented-tier: var(--ds-size-4); }
.ds-segmented--large
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-face: var(--ds-font-body-face);
--ds-segmented-option-tracking: var(--ds-font-body-tracking);
--ds-segmented-option-size: var(--ds-font-body-size);
--ds-segmented-option-leading: var(--ds-font-body-leading);
padding-inline: 1.4em; font-size: var(--ds-segmented-option-size); line-height: var(--ds-segmented-option-leading); }
.ds-segmented--xlarge { --ds-segmented-tier: var(--ds-size-5); }
.ds-segmented--xlarge
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-face: var(--ds-font-body-face);
--ds-segmented-option-tracking: var(--ds-font-body-tracking);
--ds-segmented-option-size: var(--ds-font-body-size);
--ds-segmented-option-leading: var(--ds-font-body-leading);
padding-inline: 1.5em; font-size: var(--ds-segmented-option-size); line-height: var(--ds-segmented-option-leading); }
.ds-segmented--xxlarge { --ds-segmented-tier: var(--ds-size-6); }
.ds-segmented--xxlarge
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-face: var(--ds-font-body-face);
--ds-segmented-option-tracking: var(--ds-font-body-tracking);
--ds-segmented-option-size: var(--ds-font-body-size);
--ds-segmented-option-leading: var(--ds-font-body-leading);
padding-inline: 1.75em; font-size: var(--ds-segmented-option-size); line-height: var(--ds-segmented-option-leading); }
.ds-segmented--block
.ds-segmented__option {
text-decoration: none;
flex: 1;
}
.ds-segmented__option {
text-decoration: none;
--ds-segmented-option-weight: var(--ds-emphasis-weight);
--ds-segmented-option-face: var(--ds-font-body-face);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
min-block-size: calc(var(--ds-segmented-tier) - var(--ds-segmented-inset) * 2);
border: 1px solid transparent;
border-radius: var(--ds-radius-2);
background: none;
font-family: var(--ds-segmented-option-face);
font-weight: var(--ds-segmented-option-weight);
--ds-segmented-option-ink: var(--ds-text-secondary-neutral);
color: var(--ds-segmented-option-ink);
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-segmented__option[aria-checked="true"] {
background-color: var(--ds-surface-1);
border-color: var(--ds-border);
--ds-segmented-option-ink: var(--ds-text-primary-neutral);
color: var(--ds-segmented-option-ink);
}
.ds-segmented__option:hover:not([aria-checked="true"]):not(:disabled) {
--ds-segmented-option-ink: var(--ds-text-primary-neutral);
color: var(--ds-segmented-option-ink);
background-color: var(--ds-surface-hover);
}
.ds-segmented__option:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -1px;
}
.ds-segmented__option:disabled {
--ds-segmented-option-ink: var(--ds-text-disabled);
color: var(--ds-segmented-option-ink);
cursor: not-allowed;
}
.ds-segmented__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-segmented__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-segmented .ds-segmented__option--iconic {
padding-inline: 0;
inline-size: calc(var(--ds-segmented-tier) - var(--ds-segmented-inset) * 2);
}
.ds-range {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
min-inline-size: 0;
}
.ds-range__head {
--ds-range-head-face: var(--ds-font-body-face);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ds-space-4);
font-family: var(--ds-range-head-face);
}
.ds-range__label {
--ds-range-label-ink: var(--ds-text-primary-neutral);
color: var(--ds-range-label-ink);
min-inline-size: 0;
}
.ds-range__label--hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-range__value {
--ds-range-value-ink: var(--ds-text-secondary-neutral);
color: var(--ds-range-value-ink);
font-variant-numeric: tabular-nums;
flex: none;
}
.ds-range--xsmall { --ds-range-tier: var(--ds-size-1); --ds-range-rail: var(--ds-space-1); }
.ds-range--xsmall .ds-range__head {
--ds-range-head-face: var(--ds-font-small-face);
--ds-range-head-tracking: var(--ds-font-small-tracking);
--ds-range-head-size: var(--ds-font-small-size);
--ds-range-head-weight: var(--ds-font-small-weight);
--ds-range-head-leading: var(--ds-font-small-leading);
font-family: var(--ds-range-head-face);
font-size: var(--ds-range-head-size); line-height: var(--ds-range-head-leading);
letter-spacing: var(--ds-range-head-tracking);
font-weight: var(--ds-range-head-weight);}
.ds-range--small { --ds-range-tier: var(--ds-size-2); --ds-range-rail: var(--ds-space-1); }
.ds-range--small .ds-range__head {
--ds-range-head-face: var(--ds-font-label-face);
--ds-range-head-tracking: var(--ds-font-label-tracking);
--ds-range-head-size: var(--ds-font-label-size);
--ds-range-head-weight: var(--ds-font-label-weight);
--ds-range-head-leading: var(--ds-font-label-leading);
font-family: var(--ds-range-head-face);
font-size: var(--ds-range-head-size); line-height: var(--ds-range-head-leading);
letter-spacing: var(--ds-range-head-tracking);
font-weight: var(--ds-range-head-weight);}
.ds-range--medium { --ds-range-tier: var(--ds-size-3); --ds-range-rail: var(--ds-space-2); }
.ds-range--medium .ds-range__head {
--ds-range-head-face: var(--ds-font-body-face);
--ds-range-head-tracking: var(--ds-font-body-tracking);
--ds-range-head-size: var(--ds-font-body-size);
--ds-range-head-weight: var(--ds-font-body-weight);
--ds-range-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-range-head-face);
font-size: var(--ds-range-head-size); line-height: var(--ds-range-head-leading);
letter-spacing: var(--ds-range-head-tracking);
font-weight: var(--ds-range-head-weight);}
.ds-range--large { --ds-range-tier: var(--ds-size-4); --ds-range-rail: var(--ds-space-2); }
.ds-range--large .ds-range__head {
--ds-range-head-face: var(--ds-font-body-face);
--ds-range-head-tracking: var(--ds-font-body-tracking);
--ds-range-head-size: var(--ds-font-body-size);
--ds-range-head-weight: var(--ds-font-body-weight);
--ds-range-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-range-head-face);
font-size: var(--ds-range-head-size); line-height: var(--ds-range-head-leading);
letter-spacing: var(--ds-range-head-tracking);
font-weight: var(--ds-range-head-weight);}
.ds-range--xlarge { --ds-range-tier: var(--ds-size-5); --ds-range-rail: var(--ds-space-2); }
.ds-range--xlarge .ds-range__head {
--ds-range-head-face: var(--ds-font-body-face);
--ds-range-head-tracking: var(--ds-font-body-tracking);
--ds-range-head-size: var(--ds-font-body-size);
--ds-range-head-weight: var(--ds-font-body-weight);
--ds-range-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-range-head-face);
font-size: var(--ds-range-head-size); line-height: var(--ds-range-head-leading);
letter-spacing: var(--ds-range-head-tracking);
font-weight: var(--ds-range-head-weight);}
.ds-range--xxlarge { --ds-range-tier: var(--ds-size-6); --ds-range-rail: var(--ds-space-2); }
.ds-range--xxlarge .ds-range__head {
--ds-range-head-face: var(--ds-font-body-face);
--ds-range-head-tracking: var(--ds-font-body-tracking);
--ds-range-head-size: var(--ds-font-body-size);
--ds-range-head-weight: var(--ds-font-body-weight);
--ds-range-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-range-head-face);
font-size: var(--ds-range-head-size); line-height: var(--ds-range-head-leading);
letter-spacing: var(--ds-range-head-tracking);
font-weight: var(--ds-range-head-weight);}
.ds-range__row {
position: relative;
display: flex;
align-items: center;
min-block-size: var(--ds-range-tier);
padding-inline: calc(var(--ds-range-handle) / 2);
touch-action: none;
cursor: pointer;
--ds-range-handle: calc(var(--ds-range-tier) / 2);
}
.ds-range__rail {
display: block;
position: relative;
inline-size: 100%;
block-size: var(--ds-range-rail);
background-color: var(--ds-surface-3);
border-radius: var(--ds-radius-full);
transition: block-size var(--ds-duration) var(--ds-ease-out);
}
.ds-range--held .ds-range__rail {
block-size: calc(var(--ds-range-rail) * 2);
}
.ds-range__fill {
position: absolute;
inset-block: 0;
inset-inline-start: var(--ds-range-from);
inline-size: calc(var(--ds-range-to) - var(--ds-range-from));
background-color: var(--ds-inverse);
border-radius: inherit;
}
.ds-range__handle {
position: absolute;
inset-inline-start: var(--ds-range-at);
inset-block-start: 50%;
margin-block-start: calc(var(--ds-range-handle) / -2);
inline-size: var(--ds-range-handle);
block-size: var(--ds-range-handle);
margin-inline-start: calc(var(--ds-range-handle) / -2);
padding: 0;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-full);
background-color: var(--ds-inverse);
cursor: grab;
transition:
background-color var(--ds-duration) var(--ds-ease),
scale var(--ds-duration) var(--ds-ease-out);
}
.ds-range__handle:hover {
background-color: var(--ds-inverse-hover);
}
.ds-range__handle--held,
.ds-range__handle:active {
background-color: var(--ds-inverse-active);
scale: 1.5;
cursor: grabbing;
}
.ds-range__handle:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-range--disabled .ds-range__row {
cursor: not-allowed;
}
.ds-range--disabled .ds-range__fill {
background-color: var(--ds-surface-disabled);
}
.ds-range--disabled .ds-range__handle {
background-color: var(--ds-text-disabled);
border-color: var(--ds-border-disabled);
cursor: not-allowed;
}
.ds-range--disabled .ds-range__label,
.ds-range--disabled .ds-range__value {
--ds-range-value-ink: var(--ds-text-disabled);
color: var(--ds-range-value-ink);
}
.ds-date-field__open {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 1.5em;
block-size: 1.5em;
padding: 0;
border: 0;
border-radius: var(--ds-radius-1);
background: none;
--ds-date-field-open-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-date-field-open-ink);
cursor: pointer;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-date-field__open > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-date-field__open:hover:not(:disabled) {
--ds-date-field-open-ink: var(--ds-text-primary-neutral);
color: var(--ds-date-field-open-ink);
}
.ds-date-field__open:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
.ds-date-field__open:disabled {
--ds-date-field-open-ink: var(--ds-text-disabled);
color: var(--ds-date-field-open-ink);
cursor: not-allowed;
}
.ds-date-field__panel {
padding: var(--ds-space-3);
}
.ds-date-field__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-2);
padding-block-end: var(--ds-space-3);
}
.ds-date-field__month {
--ds-date-field-month-face: var(--ds-font-label-face);
--ds-date-field-month-tracking: var(--ds-font-label-tracking);
--ds-date-field-month-size: var(--ds-font-label-size);
--ds-date-field-month-leading: var(--ds-font-label-leading);
--ds-date-field-weight: var(--ds-emphasis-weight);
font-family: var(--ds-date-field-month-face);
font-size: var(--ds-date-field-month-size);
letter-spacing: var(--ds-date-field-month-tracking);
line-height: var(--ds-date-field-month-leading);
font-weight: var(--ds-date-field-weight);
--ds-date-field-month-ink: var(--ds-text-primary-neutral);
color: var(--ds-date-field-month-ink);
}
.ds-date-field__step {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: var(--ds-size-2);
block-size: var(--ds-size-2);
padding: 0;
border: 0;
border-radius: var(--ds-radius-full);
background-color: var(--ds-surface-2);
--ds-date-field-step-ink: var(--ds-text-secondary-neutral);
color: var(--ds-date-field-step-ink);
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-date-field__step > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-date-field__step:hover:not(:disabled) {
background-color: var(--ds-surface-3);
--ds-date-field-step-ink: var(--ds-text-primary-neutral);
color: var(--ds-date-field-step-ink);
}
.ds-date-field__step:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-date-field__step:disabled {
--ds-date-field-step-ink: var(--ds-text-disabled);
color: var(--ds-date-field-step-ink);
cursor: not-allowed;
}
.ds-date-field__day--within {
background-color: var(--ds-surface-active);
border-radius: 0;
}
.ds-date-field__day--from {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.ds-date-field__day--to {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.ds-date-field__presets {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-1);
padding-block-end: var(--ds-space-3);
}
.ds-date-field__note {
display: block;
--ds-date-field-note-face: var(--ds-font-small-face);
--ds-date-field-note-size: var(--ds-font-small-size);
--ds-date-field-note-leading: var(--ds-font-small-leading);
--ds-date-field-note-weight: var(--ds-font-small-weight);
--ds-date-field-note-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-date-field-note-face);
font-size: var(--ds-date-field-note-size);
line-height: var(--ds-date-field-note-leading);
font-weight: var(--ds-date-field-note-weight);
letter-spacing: var(--ds-date-field-note-tracking);
--ds-date-field-note-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-date-field-note-ink);
}
.ds-date-field__day[aria-selected="true"] .ds-date-field__note {
color: inherit;
}
.ds-date-field--noted .ds-date-field__day {
flex-direction: column;
gap: 0;
block-size: auto;
min-block-size: calc(var(--ds-size-2) + var(--ds-space-3));
padding-block: var(--ds-space-1);
}
.ds-date-field__grid {
display: grid;
grid-template-columns: repeat(7, var(--ds-size-2));
gap: var(--ds-space-1);
}
.ds-date-field__weekday {
--ds-date-field-weekday-face: var(--ds-font-small-face);
--ds-date-field-weekday-tracking: var(--ds-font-small-tracking);
--ds-date-field-weekday-size: var(--ds-font-small-size);
--ds-date-field-weekday-weight: var(--ds-font-small-weight);
--ds-date-field-weekday-leading: var(--ds-font-small-leading);
display: flex;
align-items: center;
justify-content: center;
block-size: var(--ds-size-1);
inline-size: var(--ds-size-2);
font-family: var(--ds-date-field-weekday-face);
font-size: var(--ds-date-field-weekday-size);
letter-spacing: var(--ds-date-field-weekday-tracking);
font-weight: var(--ds-date-field-weekday-weight);
line-height: var(--ds-date-field-weekday-leading);
--ds-date-field-weekday-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-date-field-weekday-ink);
}
.ds-date-field__day {
--ds-date-field-day-face: var(--ds-font-label-face);
--ds-date-field-day-tracking: var(--ds-font-label-tracking);
--ds-date-field-day-size: var(--ds-font-label-size);
--ds-date-field-day-weight: var(--ds-font-label-weight);
--ds-date-field-day-leading: var(--ds-font-label-leading);
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-2);
block-size: var(--ds-size-2);
padding: 0;
border: 1px solid transparent;
border-radius: var(--ds-radius-1);
background: none;
font-family: var(--ds-date-field-day-face);
font-size: var(--ds-date-field-day-size);
letter-spacing: var(--ds-date-field-day-tracking);
font-weight: var(--ds-date-field-day-weight);
line-height: var(--ds-date-field-day-leading);
font-variant-numeric: tabular-nums;
--ds-date-field-day-ink: var(--ds-text-primary-neutral);
color: var(--ds-date-field-day-ink);
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-date-field__day:hover:not(:disabled):not([aria-selected="true"]) {
background-color: var(--ds-surface-hover);
}
.ds-date-field__day:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -1px;
}
.ds-date-field__day--outside {
--ds-date-field-day--outside-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-date-field-day--outside-ink);
}
.ds-date-field__day--today {
border-color: var(--ds-border);
}
.ds-date-field__day[aria-selected="true"] {
background-color: var(--ds-inverse);
border-color: var(--ds-inverse);
--ds-date-field-day-ink: var(--ds-on-inverse);
color: var(--ds-date-field-day-ink);
}
.ds-date-field__day:disabled {
--ds-date-field-day-ink: var(--ds-text-disabled);
color: var(--ds-date-field-day-ink);
cursor: not-allowed;
}
.ds-inline-edit {
--ds-inline-edit-tier: var(--ds-size-2);
--ds-inline-edit-value-face: var(--ds-font-label-face);
--ds-inline-edit-value-size: var(--ds-font-label-size);
--ds-inline-edit-value-leading: var(--ds-font-label-leading);
--ds-inline-edit-value-weight: var(--ds-font-label-weight);
--ds-inline-edit-value-tracking: var(--ds-font-label-tracking);
--ds-inline-edit-inset: var(--ds-space-3);
display: grid;
inline-size: 100%;
min-inline-size: 0;
}
.ds-inline-edit--xsmall {
--ds-inline-edit-tier: var(--ds-size-1);
--ds-inline-edit-inset: var(--ds-space-2);
--ds-inline-edit-value-face: var(--ds-font-small-face);
--ds-inline-edit-value-size: var(--ds-font-small-size);
--ds-inline-edit-value-leading: var(--ds-font-small-leading);
--ds-inline-edit-value-weight: var(--ds-font-small-weight);
--ds-inline-edit-value-tracking: var(--ds-font-small-tracking);
}
.ds-inline-edit--medium,
.ds-inline-edit--large,
.ds-inline-edit--xlarge,
.ds-inline-edit--xxlarge {
--ds-inline-edit-value-face: var(--ds-font-body-face);
--ds-inline-edit-value-size: var(--ds-font-body-size);
--ds-inline-edit-value-leading: var(--ds-font-body-leading);
--ds-inline-edit-value-weight: var(--ds-font-body-weight);
--ds-inline-edit-value-tracking: var(--ds-font-body-tracking);
}
.ds-inline-edit--medium {
--ds-inline-edit-tier: var(--ds-size-3);
--ds-inline-edit-inset: var(--ds-space-3);
}
.ds-inline-edit--large {
--ds-inline-edit-tier: var(--ds-size-4);
--ds-inline-edit-inset: var(--ds-space-4);
}
.ds-inline-edit--xlarge {
--ds-inline-edit-tier: var(--ds-size-5);
--ds-inline-edit-inset: var(--ds-space-4);
}
.ds-inline-edit--xxlarge {
--ds-inline-edit-tier: var(--ds-size-6);
--ds-inline-edit-inset: var(--ds-space-5);
}
.ds-inline-edit__value:not([hidden]) {
--ds-inline-edit-value-ink: var(--ds-text-primary-neutral);
--ds-inline-edit-empty-ink: var(--ds-text-tertiary-neutral);
--ds-inline-edit-wash: var(--ds-surface-hover);
--ds-inline-edit-value-pad: calc((var(--ds-inline-edit-tier) - var(--ds-inline-edit-value-leading) - 2px) / 2);
display: block;
box-sizing: border-box;
inline-size: 100%;
min-inline-size: 0;
min-block-size: var(--ds-inline-edit-tier);
padding-block: var(--ds-inline-edit-value-pad);
padding-inline: var(--ds-inline-edit-inset);
margin: 0;
border: 1px solid transparent;
border-radius: var(--ds-radius-2);
background-color: transparent;
font-family: var(--ds-inline-edit-value-face);
font-size: var(--ds-inline-edit-value-size);
line-height: var(--ds-inline-edit-value-leading);
font-weight: var(--ds-inline-edit-value-weight);
letter-spacing: var(--ds-inline-edit-value-tracking);
color: var(--ds-inline-edit-value-ink);
text-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: text;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-inline-edit__value:hover {
background-color: var(--ds-inline-edit-wash);
}
.ds-inline-edit__value:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-inline-edit__value--empty {
color: var(--ds-inline-edit-empty-ink);
}
.ds-inline-edit--choice .ds-inline-edit__value {
cursor: pointer;
}
.ds-inline-edit__field:not([hidden]) {
display: block;
}
.ds-drop-zone {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
}
.ds-drop-zone__box {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--ds-rhythm-element);
padding: var(--ds-drop-zone-inset);
background-color: var(--ds-surface-2);
border: 1px dashed var(--ds-border-strong);
border-radius: var(--ds-radius-2);
transition:
border-color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-drop-zone--panel .ds-drop-zone__box {
--ds-drop-zone-inset: var(--ds-space-10);
}
.ds-drop-zone--inline .ds-drop-zone__box {
--ds-drop-zone-inset: var(--ds-space-4);
flex-direction: row;
justify-content: flex-start;
text-align: start;
}
.ds-drop-zone__box:hover:not(:has(:disabled)) {
border-color: var(--ds-border-active);
}
.ds-drop-zone__box:focus-within {
border-color: var(--ds-focus);
box-shadow: 0 0 0 1px var(--ds-focus);
}
.ds-drop-zone__box[data-over] {
border-style: solid;
border-color: var(--ds-border-active);
background-color: var(--ds-surface-1);
}
.ds-drop-zone__box:has(:disabled) {
border-color: var(--ds-border-disabled);
cursor: not-allowed;
}
.ds-drop-zone__input {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
opacity: 0;
font-size: 0;
cursor: pointer;
}
.ds-drop-zone__input:disabled {
cursor: not-allowed;
}
.ds-drop-zone__mark {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
--ds-drop-zone-mark-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-drop-zone-mark-ink);
--ds-drop-zone-mark-size: var(--ds-size-2);
inline-size: var(--ds-drop-zone-mark-size);
block-size: var(--ds-drop-zone-mark-size);
}
.ds-drop-zone--inline .ds-drop-zone__mark {
--ds-drop-zone-mark-size: var(--ds-size-1);
}
.ds-drop-zone__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-drop-zone__text {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
align-items: center;
}
.ds-drop-zone--inline .ds-drop-zone__text {
align-items: flex-start;
}
.ds-drop-zone__label {
--ds-drop-zone-label-weight: var(--ds-emphasis-weight);
--ds-drop-zone-label-face: var(--ds-font-body-face);
--ds-drop-zone-label-tracking: var(--ds-font-body-tracking);
--ds-drop-zone-label-size: var(--ds-font-body-size);
--ds-drop-zone-label-leading: var(--ds-font-body-leading);
font-family: var(--ds-drop-zone-label-face);
font-size: var(--ds-drop-zone-label-size);
letter-spacing: var(--ds-drop-zone-label-tracking);
line-height: var(--ds-drop-zone-label-leading);
font-weight: var(--ds-drop-zone-label-weight);
--ds-drop-zone-label-ink: var(--ds-text-primary-neutral);
color: var(--ds-drop-zone-label-ink);
cursor: pointer;
}
.ds-drop-zone__box:has(:disabled) .ds-drop-zone__label {
--ds-drop-zone-label-ink: var(--ds-text-disabled);
color: var(--ds-drop-zone-label-ink);
cursor: not-allowed;
}
.ds-drop-zone__hint {
--ds-drop-zone-hint-face: var(--ds-font-label-face);
--ds-drop-zone-hint-tracking: var(--ds-font-label-tracking);
--ds-drop-zone-hint-size: var(--ds-font-label-size);
--ds-drop-zone-hint-weight: var(--ds-font-label-weight);
--ds-drop-zone-hint-leading: var(--ds-font-label-leading);
font-family: var(--ds-drop-zone-hint-face);
font-size: var(--ds-drop-zone-hint-size);
letter-spacing: var(--ds-drop-zone-hint-tracking);
font-weight: var(--ds-drop-zone-hint-weight);
line-height: var(--ds-drop-zone-hint-leading);
--ds-drop-zone-hint-ink: var(--ds-text-secondary-neutral);
color: var(--ds-drop-zone-hint-ink);
}
.ds-drop-zone__file {
--ds-drop-zone-file-face: var(--ds-font-label-face);
--ds-drop-zone-file-tracking: var(--ds-font-label-tracking);
--ds-drop-zone-file-size: var(--ds-font-label-size);
--ds-drop-zone-file-leading: var(--ds-font-label-leading);
--ds-drop-zone-file-weight: var(--ds-bold-weight);
--ds-drop-zone-file-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-drop-zone-file-face);
font-size: var(--ds-drop-zone-file-size);
letter-spacing: var(--ds-drop-zone-file-tracking);
font-weight: var(--ds-drop-zone-file-weight);
line-height: var(--ds-drop-zone-file-leading);
color: var(--ds-drop-zone-file-ink);
overflow-wrap: anywhere;
}
.ds-drop-zone__message {
--ds-drop-zone-message-face: var(--ds-font-label-face);
--ds-drop-zone-message-tracking: var(--ds-font-label-tracking);
--ds-drop-zone-message-size: var(--ds-font-label-size);
--ds-drop-zone-message-weight: var(--ds-font-label-weight);
--ds-drop-zone-message-leading: var(--ds-font-label-leading);
font-family: var(--ds-drop-zone-message-face);
font-size: var(--ds-drop-zone-message-size);
letter-spacing: var(--ds-drop-zone-message-tracking);
font-weight: var(--ds-drop-zone-message-weight);
line-height: var(--ds-drop-zone-message-leading);
color: var(--ds-danger-ink);
}
.ds-drop-zone--invalid .ds-drop-zone__box {
border-color: var(--ds-danger-ink);
}
.ds-drop-zone--invalid .ds-drop-zone__box:focus-within {
box-shadow: 0 0 0 1px var(--ds-danger-ink);
}
.ds-sortable {
position: relative;
}
.ds-sortable__list {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
margin: 0;
padding: 0;
list-style: none;
}
.ds-sortable__item {
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-space-2) var(--ds-space-3);
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-sortable__item--dragging {
opacity: 0.4;
}
.ds-sortable__item.ds-sortable__item--over::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: calc(var(--ds-rhythm-line) / -2 - 1px);
block-size: 0;
border-block-start: 2px solid var(--ds-border-active);
}
.ds-sortable__item.ds-sortable__item--over-end::before {
inset-block-start: auto;
inset-block-end: calc(var(--ds-rhythm-line) / -2 - 1px);
}
.ds-sortable__grip {
touch-action: none;
position: relative;
display: inline-flex;
flex: none;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
--ds-sortable-grip-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-sortable-grip-ink);
cursor: grab;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-sortable__grip:active {
cursor: grabbing;
}
.ds-sortable__grip:hover,
.ds-sortable__grip:focus-visible {
--ds-sortable-grip-ink: var(--ds-text-primary-neutral);
color: var(--ds-sortable-grip-ink);
}
.ds-sortable__grip > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-sortable__grip::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: max(var(--ds-size-3), 100%);
block-size: max(var(--ds-size-3), 100%);
transform: translate(-50%, -50%);
}
.ds-sortable__list[data-ds-sortable-handle="row"] .ds-sortable__item {
cursor: grab;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.ds-sortable__list[data-ds-sortable-handle="row"] .ds-sortable__item:active {
cursor: grabbing;
}
.ds-sortable__grip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-sortable__content {
--ds-sortable-content-face: var(--ds-font-body-face);
--ds-sortable-content-tracking: var(--ds-font-body-tracking);
--ds-sortable-content-size: var(--ds-font-body-size);
--ds-sortable-content-weight: var(--ds-font-body-weight);
--ds-sortable-content-leading: var(--ds-font-body-leading);
flex: 1;
min-inline-size: 0;
font-family: var(--ds-sortable-content-face);
font-size: var(--ds-sortable-content-size);
letter-spacing: var(--ds-sortable-content-tracking);
font-weight: var(--ds-sortable-content-weight);
line-height: var(--ds-sortable-content-leading);
--ds-sortable-content-ink: var(--ds-text-primary-neutral);
color: var(--ds-sortable-content-ink);
}
.ds-sortable__said {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.ds-color-picker__swatch {
display: inline-block;
flex: none;
box-sizing: border-box;
inline-size: 1lh;
block-size: 1lh;
background-color: var(--ds-swatch);
border-radius: var(--ds-radius-1);
border: 1px solid var(--ds-border);
}
.ds-color-picker__value {
flex: 1;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: start;
}
.ds-color-picker__value--empty {
--ds-color-picker-value--empty-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-color-picker-value--empty-ink);
}
.ds-color-picker__control {
display: flex;
align-items: center;
gap: var(--ds-field-gap);
}
.ds-color-picker__arrow {
display: inline-flex;
flex: none;
--ds-color-picker-arrow-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-color-picker-arrow-ink);
}
.ds-color-picker__arrow > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-color-picker__item .ds-color-picker__swatch {
margin-inline-end: var(--ds-space-2);
}
.ds-color-picker__custom {
--ds-color-picker-custom-face: var(--ds-font-label-face);
--ds-color-picker-custom-tracking: var(--ds-font-label-tracking);
--ds-color-picker-custom-size: var(--ds-font-label-size);
--ds-color-picker-custom-weight: var(--ds-font-label-weight);
--ds-color-picker-custom-leading: var(--ds-font-label-leading);
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin-block-start: var(--ds-space-1);
padding: var(--ds-space-2);
border-block-start: 1px solid var(--ds-border-subtle);
font-family: var(--ds-color-picker-custom-face);
font-size: var(--ds-color-picker-custom-size);
letter-spacing: var(--ds-color-picker-custom-tracking);
font-weight: var(--ds-color-picker-custom-weight);
line-height: var(--ds-color-picker-custom-leading);
--ds-color-picker-custom-ink: var(--ds-text-secondary-neutral);
color: var(--ds-color-picker-custom-ink);
}
.ds-color-picker__native {
box-sizing: border-box;
flex: none;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-1);
background: none;
cursor: pointer;
}
.ds-color-picker__hex {
flex: 1;
min-inline-size: 0;
box-sizing: border-box;
font: inherit;
padding: var(--ds-space-1) var(--ds-space-2);
background-color: transparent;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-1);
--ds-color-picker-hex-ink: var(--ds-text-primary-neutral);
color: var(--ds-color-picker-hex-ink);
}
.ds-color-picker__hex::placeholder {
--ds-color-picker-hex-placeholder-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-color-picker-hex-placeholder-ink);
}
.ds-color-picker__hex:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
.ds-color-picker__native::-webkit-color-swatch-wrapper {
padding: 0;
}
.ds-color-picker__native::-webkit-color-swatch {
border: none;
border-radius: calc(var(--ds-radius-1) - 1px);
}
.ds-color-picker__native::-moz-color-swatch {
border: none;
border-radius: calc(var(--ds-radius-1) - 1px);
}
.ds-color-picker__native:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-description-list {
--ds-description-list-face: var(--ds-font-label-face);
--ds-description-list-tracking: var(--ds-font-label-tracking);
--ds-description-list-size: var(--ds-font-label-size);
--ds-description-list-weight: var(--ds-font-label-weight);
--ds-description-list-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-description-list-face);
font-size: var(--ds-description-list-size);
letter-spacing: var(--ds-description-list-tracking);
font-weight: var(--ds-description-list-weight);
line-height: var(--ds-description-list-leading);
}
.ds-description-list__name {
--ds-description-list-name-face: var(--ds-description-list-face);
--ds-description-list-name-size: var(--ds-description-list-size);
--ds-description-list-name-weight: var(--ds-description-list-weight);
--ds-description-list-name-leading: var(--ds-description-list-leading);
--ds-description-list-name-tracking: var(--ds-description-list-tracking);
--ds-description-list-name-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-description-list-name-face);
font-size: var(--ds-description-list-name-size);
font-weight: var(--ds-description-list-name-weight);
line-height: var(--ds-description-list-name-leading);
letter-spacing: var(--ds-description-list-name-tracking);
text-transform: var(--ds-description-list-name-case, none);
color: var(--ds-description-list-name-ink);
}
.ds-description-list__value {
margin: 0;
--ds-description-list-value-ink: var(--ds-text-primary-neutral);
color: var(--ds-description-list-value-ink);
min-inline-size: 0;
text-wrap-style: pretty;
overflow-wrap: anywhere;
}
.ds-description-list--rows {
display: grid;
grid-template-columns: max-content 1fr;
row-gap: var(--ds-space-3);
}
.ds-description-list--rows > .ds-description-list__name {
padding-inline-end: var(--ds-space-6);
}
.ds-description-list--stacked {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
}
.ds-description-list--stacked .ds-description-list__value + .ds-description-list__name {
margin-block-start: var(--ds-space-3);
}
.ds-description-list--inline {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
column-gap: var(--ds-space-8);
row-gap: var(--ds-space-6);
}
.ds-description-list__pair {
min-inline-size: 0;
}
.ds-description-list--inline .ds-description-list__name {
--ds-description-list-name-size: var(--ds-font-small-size);
--ds-description-list-name-leading: var(--ds-font-small-leading);
--ds-description-list-name-tracking: var(--ds-font-small-tracking);
}
.ds-description-list--inline .ds-description-list__value {
--ds-description-list-value-weight: var(--ds-emphasis-weight);
--ds-description-list-value-leading: var(--ds-font-body-leading);
font-weight: var(--ds-description-list-value-weight);
line-height: var(--ds-description-list-value-leading);
}
.ds-description-list--inline .ds-description-list__name {
margin-block-end: var(--ds-space-1);
}
.ds-description-list--ruled.ds-description-list--rows > .ds-description-list__name,
.ds-description-list--ruled.ds-description-list--rows > .ds-description-list__value {
padding-block-end: var(--ds-space-3);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-description-list--ruled.ds-description-list--stacked > .ds-description-list__value {
padding-block-end: var(--ds-space-3);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-description-list--ruled.ds-description-list--rows > .ds-description-list__name:nth-last-child(2),
.ds-description-list--ruled.ds-description-list--rows > .ds-description-list__value:last-child,
.ds-description-list--ruled.ds-description-list--stacked > .ds-description-list__value:last-child {
padding-block-end: 0;
border-block-end: 0;
}
.ds-description-list--controls > .ds-description-list__name,
.ds-description-list--controls > .ds-description-list__value {
display: flex;
align-items: center;
}
.ds-description-list--controls > .ds-description-list__value {
flex-wrap: wrap;
gap: var(--ds-space-2);
}
.ds-field-group {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.ds-field-group__name {
--ds-field-group-name-weight: var(--ds-emphasis-weight);
--ds-field-group-name-face: var(--ds-font-body-face);
--ds-field-group-name-tracking: var(--ds-font-body-tracking);
--ds-field-group-name-size: var(--ds-font-body-size);
--ds-field-group-name-leading: var(--ds-font-body-leading);
display: block;
padding: 0;
margin-block-end: var(--ds-rhythm-element);
font-family: var(--ds-field-group-name-face);
font-size: var(--ds-field-group-name-size);
letter-spacing: var(--ds-field-group-name-tracking);
line-height: var(--ds-field-group-name-leading);
font-weight: var(--ds-field-group-name-weight);
--ds-field-group-name-ink: var(--ds-text-primary-neutral);
color: var(--ds-field-group-name-ink);
}
.ds-field-group__hint {
--ds-field-group-hint-face: var(--ds-font-small-face);
--ds-field-group-hint-tracking: var(--ds-font-small-tracking);
--ds-field-group-hint-size: var(--ds-font-small-size);
--ds-field-group-hint-weight: var(--ds-font-small-weight);
--ds-field-group-hint-leading: var(--ds-font-small-leading);
font-family: var(--ds-field-group-hint-face);
font-size: var(--ds-field-group-hint-size);
letter-spacing: var(--ds-field-group-hint-tracking);
font-weight: var(--ds-field-group-hint-weight);
line-height: var(--ds-field-group-hint-leading);
--ds-field-group-hint-ink: var(--ds-text-secondary-neutral);
color: var(--ds-field-group-hint-ink);
}
.ds-field-group__name:has(+ :is(.ds-field-group__hint, .ds-field-group__message)) {
margin-block-end: 0;
}
.ds-field-group__fields {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
min-inline-size: 0;
}
.ds-field-group:not(.ds-field-group--row) > .ds-field-group__fields:has(> .ds-field) {
gap: var(--ds-rhythm-block);
}
.ds-field-group--row .ds-field-group__fields {
flex-direction: row;
flex-wrap: wrap;
align-items: start;
}
.ds-field-group--row .ds-field-group__fields > * {
flex: 1 1 8rem;
min-inline-size: 0;
}
.ds-field-group__item {
position: relative;
display: flex;
align-items: end;
gap: var(--ds-rhythm-element);
min-inline-size: 0;
}
.ds-field-group__item > :not(.ds-button, .ds-field-group__grip) {
flex: 1 1 0;
min-inline-size: 0;
}
.ds-field-group__item > .ds-button {
flex: none;
}
.ds-field-group--repeat > .ds-button {
align-self: start;
}
.ds-field-group__grip {
touch-action: none;
position: relative;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
font: inherit;
inline-size: 1lh;
block-size: var(--ds-size-3);
padding: 0;
border: 0;
background: none;
--ds-field-group-grip-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-field-group-grip-ink);
cursor: grab;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-field-group__grip > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-field-group__grip:active {
cursor: grabbing;
}
.ds-field-group__grip:hover,
.ds-field-group__grip:focus-visible {
--ds-field-group-grip-ink: var(--ds-text-primary-neutral);
color: var(--ds-field-group-grip-ink);
}
.ds-field-group__grip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-field-group__grip::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 50%;
inline-size: max(var(--ds-size-3), 100%);
transform: translateX(-50%);
}
.ds-field-group__item--dragging,
.ds-field-group__item.ds-sortable__item--dragging {
opacity: 0.4;
}
.ds-field-group__item--over::before,
.ds-field-group__item.ds-sortable__item--over::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: calc(var(--ds-rhythm-element) / -2 - 1px);
block-size: 0;
border-block-start: 2px solid var(--ds-border-active);
}
.ds-field-group__item--over-end::before,
.ds-field-group__item.ds-sortable__item--over-end::before {
inset-block-start: auto;
inset-block-end: calc(var(--ds-rhythm-element) / -2 - 1px);
}
.ds-field-group__message {
--ds-field-group-message-face: var(--ds-font-small-face);
--ds-field-group-message-tracking: var(--ds-font-small-tracking);
--ds-field-group-message-size: var(--ds-font-small-size);
--ds-field-group-message-weight: var(--ds-font-small-weight);
--ds-field-group-message-leading: var(--ds-font-small-leading);
font-family: var(--ds-field-group-message-face);
font-size: var(--ds-field-group-message-size);
letter-spacing: var(--ds-field-group-message-tracking);
font-weight: var(--ds-field-group-message-weight);
line-height: var(--ds-field-group-message-leading);
color: var(--ds-danger-ink);
}
.ds-tabs {
display: flex;
align-items: stretch;
gap: 0;
border-block-end: 1px solid var(--ds-border);
overflow-x: auto;
position: relative;
}
.ds-tabs--xsmall { --ds-tabs-tier: var(--ds-size-1); }
.ds-tabs--xsmall .ds-tabs__tab {
--ds-tabs-tab-face: var(--ds-font-small-face);
--ds-tabs-tab-tracking: var(--ds-font-small-tracking);
--ds-tabs-tab-size: var(--ds-font-small-size);
--ds-tabs-tab-leading: var(--ds-font-small-leading);
padding-inline: 0.6em; font-size: var(--ds-tabs-tab-size); line-height: var(--ds-tabs-tab-leading); }
.ds-tabs--small { --ds-tabs-tier: var(--ds-size-2); }
.ds-tabs--small .ds-tabs__tab {
--ds-tabs-tab-face: var(--ds-font-label-face);
--ds-tabs-tab-tracking: var(--ds-font-label-tracking);
--ds-tabs-tab-size: var(--ds-font-label-size);
--ds-tabs-tab-leading: var(--ds-font-label-leading);
padding-inline: 0.7em; font-size: var(--ds-tabs-tab-size); line-height: var(--ds-tabs-tab-leading); }
.ds-tabs--medium { --ds-tabs-tier: var(--ds-size-3); }
.ds-tabs--medium .ds-tabs__tab {
--ds-tabs-tab-face: var(--ds-font-body-face);
--ds-tabs-tab-tracking: var(--ds-font-body-tracking);
--ds-tabs-tab-size: var(--ds-font-body-size);
--ds-tabs-tab-leading: var(--ds-font-body-leading);
padding-inline: 0.75em; font-size: var(--ds-tabs-tab-size); line-height: var(--ds-tabs-tab-leading); }
.ds-tabs--large { --ds-tabs-tier: var(--ds-size-4); }
.ds-tabs--large .ds-tabs__tab {
--ds-tabs-tab-face: var(--ds-font-body-face);
--ds-tabs-tab-tracking: var(--ds-font-body-tracking);
--ds-tabs-tab-size: var(--ds-font-body-size);
--ds-tabs-tab-leading: var(--ds-font-body-leading);
padding-inline: 0.9em; font-size: var(--ds-tabs-tab-size); line-height: var(--ds-tabs-tab-leading); }
.ds-tabs--xlarge { --ds-tabs-tier: var(--ds-size-5); }
.ds-tabs--xlarge .ds-tabs__tab {
--ds-tabs-tab-face: var(--ds-font-body-face);
--ds-tabs-tab-tracking: var(--ds-font-body-tracking);
--ds-tabs-tab-size: var(--ds-font-body-size);
--ds-tabs-tab-leading: var(--ds-font-body-leading);
padding-inline: 1em; font-size: var(--ds-tabs-tab-size); line-height: var(--ds-tabs-tab-leading); }
.ds-tabs--xxlarge { --ds-tabs-tier: var(--ds-size-6); }
.ds-tabs--xxlarge .ds-tabs__tab {
--ds-tabs-tab-face: var(--ds-font-body-face);
--ds-tabs-tab-tracking: var(--ds-font-body-tracking);
--ds-tabs-tab-size: var(--ds-font-body-size);
--ds-tabs-tab-leading: var(--ds-font-body-leading);
padding-inline: 1.15em; font-size: var(--ds-tabs-tab-size); line-height: var(--ds-tabs-tab-leading); }
.ds-tabs__tab {
--ds-tabs-tab-weight: var(--ds-emphasis-weight);
--ds-tabs-tab-face: var(--ds-font-body-face);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
min-block-size: var(--ds-tabs-tier);
border: 0;
border-block-end: 2px solid transparent;
margin-block-end: -1px;
background: none;
font-family: var(--ds-tabs-tab-face);
font-weight: var(--ds-tabs-tab-weight);
--ds-tabs-tab-ink: var(--ds-text-secondary-neutral);
color: var(--ds-tabs-tab-ink);
white-space: nowrap;
cursor: pointer;
transition:
color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-tabs__tab[aria-selected="true"] {
border-block-end-color: var(--ds-inverse);
--ds-tabs-tab-ink: var(--ds-text-primary-neutral);
color: var(--ds-tabs-tab-ink);
}
.ds-tabs__tab:hover:not([aria-selected="true"]):not(:disabled) {
--ds-tabs-tab-ink: var(--ds-text-primary-neutral);
color: var(--ds-tabs-tab-ink);
background-color: var(--ds-surface-hover);
border-start-start-radius: var(--ds-radius-2);
border-start-end-radius: var(--ds-radius-2);
}
.ds-tabs__tab:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
border-radius: var(--ds-radius-1);
}
.ds-tabs__tab:disabled {
--ds-tabs-tab-ink: var(--ds-text-disabled);
color: var(--ds-tabs-tab-ink);
cursor: not-allowed;
}
.ds-tabs__item {
position: relative;
display: inline-flex;
align-items: stretch;
flex: none;
}
.ds-tabs__menu {
align-self: center;
opacity: 0;
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-tabs__item:hover .ds-tabs__menu,
.ds-tabs__menu:focus-visible,
.ds-tabs__menu[aria-expanded="true"] {
opacity: 1;
}
@media (hover: none) {
.ds-tabs__menu {
opacity: 1;
}
}
.ds-tabs__item--carrying,
.ds-tabs__item.ds-sortable__item--dragging {
opacity: 0.4;
}
.ds-tabs__item--over::before,
.ds-tabs__item.ds-sortable__item--over::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: -1px;
inline-size: 0;
border-inline-start: 2px solid var(--ds-border-active);
}
.ds-tabs__item--over-end::before,
.ds-tabs__item.ds-sortable__item--over-end::before {
inset-inline-start: auto;
inset-inline-end: -1px;
}
.ds-tabs__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-tabs__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-tabs__panel {
padding-block-start: var(--ds-rhythm-element);
}
.ds-tabs__panel:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-2);
}
.ds-toasts {
position: fixed;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
padding: var(--ds-space-4);
padding-block-end: calc(var(--ds-space-4) + env(safe-area-inset-bottom, 0px));
pointer-events: none;
inline-size: min(24rem, 100%);
}
.ds-toasts > * {
pointer-events: auto;
}
.ds-toasts--bottom-end { inset-block-end: 0; inset-inline-end: 0; align-items: end; }
.ds-toasts--bottom-start { inset-block-end: 0; inset-inline-start: 0; align-items: start; }
.ds-toasts--top-end { inset-block-start: 0; inset-inline-end: 0; align-items: end; }
.ds-toasts--top-start { inset-block-start: 0; inset-inline-start: 0; align-items: start; }
.ds-toasts--bottom-center { inset-block-end: 0; inset-inline: 0; margin-inline: auto; align-items: center; }
.ds-toasts--top-center { inset-block-start: 0; inset-inline: 0; margin-inline: auto; align-items: center; }
.ds-toast {
--ds-toast-face: var(--ds-font-body-face);
box-sizing: border-box;
display: flex;
align-items: start;
gap: var(--ds-space-3);
inline-size: 100%;
padding: var(--ds-space-3) var(--ds-space-4);
border-radius: var(--ds-radius-3);
background-color: var(--ds-inverse);
--ds-toast-ink: var(--ds-on-inverse);
color: var(--ds-toast-ink);
font-family: var(--ds-toast-face);
}
.ds-toast > .ds-button--icon {
--ds-toast-cross-tier: var(--ds-size-2);
--ds-toast-cross-line: var(--ds-font-label-leading);
margin-block: calc((var(--ds-toast-cross-line) - var(--ds-toast-cross-tier)) / 2);
}
.ds-toast__mark {
--ds-toast-mark-leading: var(--ds-font-label-leading);
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
line-height: var(--ds-toast-mark-leading);
}
.ds-toast__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-toast--success .ds-toast__mark { color: var(--ds-success-on-inverse); }
.ds-toast--warning .ds-toast__mark { color: var(--ds-warning-on-inverse); }
.ds-toast--danger .ds-toast__mark { color: var(--ds-danger-on-inverse); }
.ds-toast--info .ds-toast__mark { color: var(--ds-info-on-inverse); }
.ds-toast__text {
flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
}
.ds-toast__title {
--ds-toast-title-weight: var(--ds-emphasis-weight);
--ds-toast-title-face: var(--ds-font-label-face);
--ds-toast-title-tracking: var(--ds-font-label-tracking);
--ds-toast-title-size: var(--ds-font-label-size);
--ds-toast-title-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-toast-title-face);
font-size: var(--ds-toast-title-size);
letter-spacing: var(--ds-toast-title-tracking);
line-height: var(--ds-toast-title-leading);
font-weight: var(--ds-toast-title-weight);
}
.ds-toast__body {
--ds-toast-body-face: var(--ds-font-label-face);
--ds-toast-body-tracking: var(--ds-font-label-tracking);
--ds-toast-body-size: var(--ds-font-label-size);
--ds-toast-body-weight: var(--ds-font-label-weight);
--ds-toast-body-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-toast-body-face);
font-size: var(--ds-toast-body-size);
letter-spacing: var(--ds-toast-body-tracking);
font-weight: var(--ds-toast-body-weight);
line-height: var(--ds-toast-body-leading);
--ds-toast-body-ink: var(--ds-secondary-on-inverse);
color: var(--ds-toast-body-ink);
text-wrap-style: pretty;
}
.ds-toast__actions {
display: flex;
gap: var(--ds-space-2);
margin-block-start: var(--ds-space-1);
}
.ds-cookie-banner {
--ds-cookie-banner-ink: var(--ds-on-inverse);
--ds-cookie-banner-ground: var(--ds-inverse);
position: fixed;
z-index: 20;
color: var(--ds-cookie-banner-ink);
}
.ds-cookie-banner[hidden],
.ds-cookie-banner [hidden] {
display: none;
}
.ds-cookie-banner--bar {
inset-block-end: 0;
inset-inline: 0;
display: grid;
justify-content: center;
grid-template-columns: min(100%, var(--ds-site-band, 100%));
background-color: var(--ds-cookie-banner-ground);
}
.ds-cookie-banner--corner {
display: block;
inset-block-end: var(--ds-space-4);
inset-inline: var(--ds-space-4);
max-inline-size: 28rem;
border-radius: var(--ds-radius-3);
background-color: var(--ds-cookie-banner-ground);
}
.ds-cookie-banner--inline {
display: block;
position: relative;
z-index: auto;
border-radius: var(--ds-radius-3);
background-color: var(--ds-cookie-banner-ground);
}
.ds-cookie-banner__band {
box-sizing: border-box;
position: relative;
min-inline-size: 0;
padding: var(--ds-space-5) var(--ds-site-gutter, var(--ds-space-6));
padding-inline-end: calc(var(--ds-site-gutter, var(--ds-space-6)) + var(--ds-size-2));
}
.ds-cookie-banner--corner .ds-cookie-banner__band,
.ds-cookie-banner--inline .ds-cookie-banner__band {
padding: var(--ds-space-5);
padding-inline-end: calc(var(--ds-space-5) + var(--ds-size-2));
}
.ds-cookie-banner__close {
position: absolute;
inset-block-start: var(--ds-space-2);
inset-inline-end: var(--ds-space-2);
}
.ds-cookie-banner__first {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4) var(--ds-space-8);
}
.ds-cookie-banner__text {
--ds-cookie-banner-text-face: var(--ds-font-body-face);
--ds-cookie-banner-text-size: var(--ds-font-body-size);
--ds-cookie-banner-text-weight: var(--ds-font-body-weight);
--ds-cookie-banner-text-leading: var(--ds-font-body-leading);
--ds-cookie-banner-text-tracking: var(--ds-font-body-tracking);
margin: 0;
max-inline-size: 60ch;
font-family: var(--ds-cookie-banner-text-face);
font-size: var(--ds-cookie-banner-text-size);
font-weight: var(--ds-cookie-banner-text-weight);
line-height: var(--ds-cookie-banner-text-leading);
letter-spacing: var(--ds-cookie-banner-text-tracking);
}
.ds-cookie-banner__text a:not([class^="ds-"]) {
color: inherit;
}
.ds-cookie-banner__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-3);
}
.ds-cookie-banner__choices {
display: grid;
gap: var(--ds-space-5);
max-inline-size: 48rem;
}
.ds-cookie-banner__title {
--ds-cookie-banner-title-face: var(--ds-font-heading-6-face);
--ds-cookie-banner-title-size: var(--ds-font-heading-6-size);
--ds-cookie-banner-title-weight: var(--ds-emphasis-weight);
--ds-cookie-banner-title-leading: var(--ds-font-heading-6-leading);
--ds-cookie-banner-title-tracking: var(--ds-font-heading-6-tracking);
margin: 0;
font-family: var(--ds-cookie-banner-title-face);
font-size: var(--ds-cookie-banner-title-size);
font-weight: var(--ds-cookie-banner-title-weight);
line-height: var(--ds-cookie-banner-title-leading);
letter-spacing: var(--ds-cookie-banner-title-tracking);
}
.ds-cookie-banner__title:focus {
outline: none;
}
.ds-cookie-banner__list {
display: grid;
gap: var(--ds-space-4);
}
.ds-contents {
--ds-contents-face: var(--ds-font-label-face);
--ds-contents-size: var(--ds-font-label-size);
--ds-contents-weight: var(--ds-font-label-weight);
--ds-contents-leading: var(--ds-font-label-leading);
--ds-contents-tracking: var(--ds-font-label-tracking);
--ds-contents-here-weight: var(--ds-emphasis-weight);
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
font-family: var(--ds-contents-face);
font-size: var(--ds-contents-size);
font-weight: var(--ds-contents-weight);
line-height: var(--ds-contents-leading);
letter-spacing: var(--ds-contents-tracking);
}
.ds-contents__title {
--ds-contents-title-face: var(--ds-font-small-face);
--ds-contents-title-size: var(--ds-font-small-size);
--ds-contents-title-weight: var(--ds-font-small-weight);
--ds-contents-title-leading: var(--ds-font-small-leading);
--ds-contents-title-tracking: var(--ds-font-small-tracking);
--ds-contents-title-ink: var(--ds-text-tertiary-neutral);
display: block;
margin: 0;
font-family: var(--ds-contents-title-face);
font-size: var(--ds-contents-title-size);
font-weight: var(--ds-contents-title-weight);
line-height: var(--ds-contents-title-leading);
letter-spacing: var(--ds-contents-title-tracking);
color: var(--ds-contents-title-ink);
}
.ds-contents__list {
--ds-contents-rail: var(--ds-border);
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
border-inline-start: 1px solid var(--ds-contents-rail);
}
.ds-contents__item {
display: flex;
min-inline-size: 0;
}
.ds-contents__link {
--ds-contents-link-ink: var(--ds-text-secondary-neutral);
--ds-contents-mark: transparent;
display: block;
flex: 1;
min-inline-size: 0;
padding-block: var(--ds-space-2);
padding-inline: var(--ds-space-3);
margin-inline-start: -1px;
border-inline-start: 1px solid var(--ds-contents-mark);
color: var(--ds-contents-link-ink);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition:
color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-contents__link:hover {
--ds-contents-link-ink: var(--ds-text-primary-neutral);
}
.ds-contents__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
border-radius: var(--ds-radius-1);
}
.ds-contents__link[aria-current] {
--ds-contents-link-ink: var(--ds-text-primary-neutral);
--ds-contents-mark: var(--ds-border-active);
font-weight: var(--ds-contents-here-weight);
}
.ds-contents__item--sub .ds-contents__link {
padding-inline-start: var(--ds-space-6);
}
.ds-theme-toggle:where(:not(.ds-theme-toggle--panel)) {
--ds-theme-toggle-ink: var(--ds-text-secondary-neutral);
--ds-theme-toggle-ink-current: var(--ds-text-primary-neutral);
--ds-theme-toggle-rail: var(--ds-surface-3);
--ds-theme-toggle-knob: var(--ds-surface-1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
border: 0;
padding-block: 0;
padding-inline: var(--ds-space-2);
background-color: transparent;
border-radius: var(--ds-radius-2);
color: var(--ds-theme-toggle-ink);
cursor: pointer;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-theme-toggle:where(:not(.ds-theme-toggle--panel)):hover {
background-color: var(--ds-surface-hover);
}
.ds-theme-toggle:where(:not(.ds-theme-toggle--panel)):focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-theme-toggle--xsmall {
--ds-theme-toggle-face: var(--ds-font-small-face);
--ds-theme-toggle-size: var(--ds-font-small-size);
--ds-theme-toggle-leading: var(--ds-font-small-leading);
font-family: var(--ds-theme-toggle-face);
font-size: var(--ds-theme-toggle-size);
line-height: var(--ds-theme-toggle-leading);
--ds-theme-toggle-tier: var(--ds-size-1);
min-block-size: var(--ds-theme-toggle-tier);
}
.ds-theme-toggle--small {
--ds-theme-toggle-face: var(--ds-font-label-face);
--ds-theme-toggle-size: var(--ds-font-label-size);
--ds-theme-toggle-leading: var(--ds-font-label-leading);
font-family: var(--ds-theme-toggle-face);
font-size: var(--ds-theme-toggle-size);
line-height: var(--ds-theme-toggle-leading);
--ds-theme-toggle-tier: var(--ds-size-2);
min-block-size: var(--ds-theme-toggle-tier);
}
.ds-theme-toggle--medium {
--ds-theme-toggle-face: var(--ds-font-body-face);
--ds-theme-toggle-size: var(--ds-font-body-size);
--ds-theme-toggle-leading: var(--ds-font-body-leading);
font-family: var(--ds-theme-toggle-face);
font-size: var(--ds-theme-toggle-size);
line-height: var(--ds-theme-toggle-leading);
--ds-theme-toggle-tier: var(--ds-size-3);
min-block-size: var(--ds-theme-toggle-tier);
}
.ds-theme-toggle--large {
--ds-theme-toggle-face: var(--ds-font-body-face);
--ds-theme-toggle-size: var(--ds-font-body-size);
--ds-theme-toggle-leading: var(--ds-font-body-leading);
font-family: var(--ds-theme-toggle-face);
font-size: var(--ds-theme-toggle-size);
line-height: var(--ds-theme-toggle-leading);
--ds-theme-toggle-tier: var(--ds-size-4);
min-block-size: var(--ds-theme-toggle-tier);
}
.ds-theme-toggle--xlarge {
--ds-theme-toggle-face: var(--ds-font-body-face);
--ds-theme-toggle-size: var(--ds-font-body-size);
--ds-theme-toggle-leading: var(--ds-font-body-leading);
font-family: var(--ds-theme-toggle-face);
font-size: var(--ds-theme-toggle-size);
line-height: var(--ds-theme-toggle-leading);
--ds-theme-toggle-tier: var(--ds-size-5);
min-block-size: var(--ds-theme-toggle-tier);
}
.ds-theme-toggle--xxlarge {
--ds-theme-toggle-face: var(--ds-font-body-face);
--ds-theme-toggle-size: var(--ds-font-body-size);
--ds-theme-toggle-leading: var(--ds-font-body-leading);
font-family: var(--ds-theme-toggle-face);
font-size: var(--ds-theme-toggle-size);
line-height: var(--ds-theme-toggle-leading);
--ds-theme-toggle-tier: var(--ds-size-6);
min-block-size: var(--ds-theme-toggle-tier);
}
.ds-theme-toggle__mark {
display: inline-flex;
inline-size: 1lh;
block-size: 1lh;
}
.ds-theme-toggle__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-theme-toggle--switch .ds-theme-toggle__mark--sun {
color: var(--ds-theme-toggle-ink-current);
}
[data-theme="dark"] .ds-theme-toggle--switch .ds-theme-toggle__mark--sun {
color: var(--ds-theme-toggle-ink);
}
[data-theme="dark"] .ds-theme-toggle--switch .ds-theme-toggle__mark--moon {
color: var(--ds-theme-toggle-ink-current);
}
.ds-theme-toggle__track {
position: relative;
display: grid;
inline-size: calc(1lh * 1.75);
block-size: 1lh;
border-radius: var(--ds-radius-full);
background-color: var(--ds-theme-toggle-rail);
transition: background-color var(--ds-duration) var(--ds-ease);
}
[data-theme="dark"] .ds-theme-toggle__track {
background-color: var(--ds-inverse);
}
.ds-theme-toggle__track::before {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: calc(1lh * 0.1);
inline-size: calc(1lh * 0.8);
block-size: calc(1lh * 0.8);
border-radius: 50%;
background-color: var(--ds-theme-toggle-knob);
translate: 0 -50%;
transition: translate var(--ds-duration) var(--ds-ease);
}
[data-theme="dark"] .ds-theme-toggle__track::before {
translate: calc(1lh * 0.75) -50%;
}
.ds-theme-toggle--pill {
position: relative;
gap: 0;
padding-inline: var(--ds-space-1);
border-radius: var(--ds-radius-full);
background-color: var(--ds-theme-toggle-rail);
}
.ds-theme-toggle--pill:hover {
background-color: var(--ds-surface-hover);
}
.ds-theme-toggle--pill::before {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--ds-space-1);
inline-size: calc(var(--ds-theme-toggle-tier) - var(--ds-space-1) * 2);
block-size: calc(var(--ds-theme-toggle-tier) - var(--ds-space-1) * 2);
border-radius: var(--ds-radius-full);
background-color: var(--ds-theme-toggle-knob);
translate: 0 -50%;
transition: translate var(--ds-duration) var(--ds-ease);
}
[data-theme="dark"] .ds-theme-toggle--pill::before {
translate: calc(var(--ds-theme-toggle-tier) - var(--ds-space-1) * 2) -50%;
}
.ds-theme-toggle--pill .ds-theme-toggle__mark {
position: relative;
align-items: center;
justify-content: center;
inline-size: calc(var(--ds-theme-toggle-tier) - var(--ds-space-1) * 2);
block-size: calc(var(--ds-theme-toggle-tier) - var(--ds-space-1) * 2);
}
.ds-theme-toggle--pill .ds-theme-toggle__mark > svg {
inline-size: 1em;
block-size: 1em;
}
.ds-theme-toggle--pill .ds-theme-toggle__mark--sun {
color: var(--ds-theme-toggle-ink-current);
}
[data-theme="dark"] .ds-theme-toggle--pill .ds-theme-toggle__mark--sun {
color: var(--ds-theme-toggle-ink);
}
[data-theme="dark"] .ds-theme-toggle--pill .ds-theme-toggle__mark--moon {
color: var(--ds-theme-toggle-ink-current);
}
.ds-theme-toggle--icon {
padding-inline: 0;
}
.ds-theme-toggle--icon.ds-theme-toggle--xsmall { inline-size: var(--ds-size-1); }
.ds-theme-toggle--icon.ds-theme-toggle--small { inline-size: var(--ds-size-2); }
.ds-theme-toggle--icon.ds-theme-toggle--medium { inline-size: var(--ds-size-3); }
.ds-theme-toggle--icon.ds-theme-toggle--large { inline-size: var(--ds-size-4); }
.ds-theme-toggle--icon.ds-theme-toggle--xlarge { inline-size: var(--ds-size-5); }
.ds-theme-toggle--icon.ds-theme-toggle--xxlarge { inline-size: var(--ds-size-6); }
.ds-theme-toggle--icon .ds-theme-toggle__mark--sun {
display: none;
}
[data-theme="dark"] .ds-theme-toggle--icon .ds-theme-toggle__mark--sun {
display: inline-flex;
}
[data-theme="dark"] .ds-theme-toggle--icon .ds-theme-toggle__mark--moon {
display: none;
}
.ds-theme-toggle--panel {
display: grid;
grid-template-columns: auto minmax(11rem, max-content);
align-items: center;
gap: var(--ds-space-4);
}
.ds-theme-toggle__label {
grid-column: 1 / -1;
margin: 0;
text-align: center;
}
.ds-theme-toggle__row {
display: contents;
}
.ds-theme-toggle__name {
--ds-theme-toggle-name-size: var(--ds-font-label-size);
font: inherit;
font-size: var(--ds-theme-toggle-name-size);
}
.ds-theme-toggle__control {
justify-self: stretch;
}
.ds-theme-toggle__control > .ds-select {
inline-size: 100%;
}
.ds-blog-card__category {
position: absolute;
inset-block-end: var(--ds-space-2);
inset-inline-start: var(--ds-space-2);
}
.ds-blog-card__meta {
--ds-blog-card-meta-face: var(--ds-font-label-face);
--ds-blog-card-meta-size: var(--ds-font-label-size);
--ds-blog-card-meta-weight: var(--ds-font-label-weight);
--ds-blog-card-meta-leading: var(--ds-font-label-leading);
--ds-blog-card-meta-tracking: var(--ds-font-label-tracking);
--ds-blog-card-meta-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-blog-card-meta-face);
font-size: var(--ds-blog-card-meta-size);
font-weight: var(--ds-blog-card-meta-weight);
line-height: var(--ds-blog-card-meta-leading);
letter-spacing: var(--ds-blog-card-meta-tracking);
color: var(--ds-blog-card-meta-ink);
}
.ds-blog-index__lead {
--ds-blog-index-lead-face: var(--ds-font-overline-face);
--ds-blog-index-lead-size: var(--ds-font-overline-size);
--ds-blog-index-lead-weight: var(--ds-font-overline-weight);
--ds-blog-index-lead-leading: var(--ds-font-overline-leading);
--ds-blog-index-lead-tracking: var(--ds-font-overline-tracking);
--ds-blog-index-lead-ink: var(--ds-text-secondary-neutral);
margin: 0;
font-family: var(--ds-blog-index-lead-face);
font-size: var(--ds-blog-index-lead-size);
font-weight: var(--ds-blog-index-lead-weight);
line-height: var(--ds-blog-index-lead-leading);
letter-spacing: var(--ds-blog-index-lead-tracking);
text-transform: uppercase;
color: var(--ds-blog-index-lead-ink);
}
.ds-filter-bar {
display: flex;
align-items: center;
gap: var(--ds-space-2);
overflow-x: auto;
position: relative;
padding-block: var(--ds-space-1);
}
.ds-filter-bar--wrap {
flex-wrap: wrap;
overflow-x: visible;
}
.ds-filter-bar__chip {
--ds-filter-bar-chip-ink: var(--ds-text-secondary-neutral);
box-sizing: border-box;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
flex: none;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-full);
background-color: transparent;
color: var(--ds-filter-bar-chip-ink);
font-family: var(--ds-filter-bar-chip-face);
font-size: var(--ds-filter-bar-chip-size);
font-weight: var(--ds-filter-bar-chip-weight);
line-height: var(--ds-filter-bar-chip-leading);
letter-spacing: var(--ds-filter-bar-chip-tracking);
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-filter-bar--xsmall .ds-filter-bar__chip {
--ds-filter-bar-chip-face: var(--ds-font-small-face);
--ds-filter-bar-chip-size: var(--ds-font-small-size);
--ds-filter-bar-chip-weight: var(--ds-font-small-weight);
--ds-filter-bar-chip-leading: var(--ds-font-small-leading);
--ds-filter-bar-chip-tracking: var(--ds-font-small-tracking);
min-block-size: var(--ds-size-1);
padding-inline: var(--ds-space-2);
}
.ds-filter-bar--small .ds-filter-bar__chip {
--ds-filter-bar-chip-face: var(--ds-font-label-face);
--ds-filter-bar-chip-size: var(--ds-font-label-size);
--ds-filter-bar-chip-weight: var(--ds-font-label-weight);
--ds-filter-bar-chip-leading: var(--ds-font-label-leading);
--ds-filter-bar-chip-tracking: var(--ds-font-label-tracking);
min-block-size: var(--ds-size-2);
padding-inline: var(--ds-space-3);
}
.ds-filter-bar--medium .ds-filter-bar__chip {
--ds-filter-bar-chip-face: var(--ds-font-body-face);
--ds-filter-bar-chip-size: var(--ds-font-body-size);
--ds-filter-bar-chip-weight: var(--ds-font-body-weight);
--ds-filter-bar-chip-leading: var(--ds-font-body-leading);
--ds-filter-bar-chip-tracking: var(--ds-font-body-tracking);
min-block-size: var(--ds-size-3);
padding-inline: var(--ds-space-4);
}
.ds-filter-bar--large .ds-filter-bar__chip {
--ds-filter-bar-chip-face: var(--ds-font-body-face);
--ds-filter-bar-chip-size: var(--ds-font-body-size);
--ds-filter-bar-chip-weight: var(--ds-font-body-weight);
--ds-filter-bar-chip-leading: var(--ds-font-body-leading);
--ds-filter-bar-chip-tracking: var(--ds-font-body-tracking);
min-block-size: var(--ds-size-4);
padding-inline: var(--ds-space-5);
}
.ds-filter-bar--xlarge .ds-filter-bar__chip {
--ds-filter-bar-chip-face: var(--ds-font-body-face);
--ds-filter-bar-chip-size: var(--ds-font-body-size);
--ds-filter-bar-chip-weight: var(--ds-font-body-weight);
--ds-filter-bar-chip-leading: var(--ds-font-body-leading);
--ds-filter-bar-chip-tracking: var(--ds-font-body-tracking);
min-block-size: var(--ds-size-5);
padding-inline: var(--ds-space-6);
}
.ds-filter-bar--xxlarge .ds-filter-bar__chip {
--ds-filter-bar-chip-face: var(--ds-font-body-face);
--ds-filter-bar-chip-size: var(--ds-font-body-size);
--ds-filter-bar-chip-weight: var(--ds-font-body-weight);
--ds-filter-bar-chip-leading: var(--ds-font-body-leading);
--ds-filter-bar-chip-tracking: var(--ds-font-body-tracking);
min-block-size: var(--ds-size-6);
padding-inline: var(--ds-space-8);
}
.ds-filter-bar__chip:hover {
--ds-filter-bar-chip-ink: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-hover);
}
.ds-filter-bar__chip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-filter-bar__chip[aria-checked="true"],
.ds-filter-bar__chip[aria-current="page"] {
--ds-filter-bar-chip-ink: var(--ds-on-inverse);
border-color: var(--ds-inverse);
background-color: var(--ds-inverse);
}
.ds-filter-bar__count {
--ds-filter-bar-count-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-filter-bar-count-ink);
}
.ds-filter-bar__chip[aria-checked="true"] .ds-filter-bar__count,
.ds-filter-bar__chip[aria-current="page"] .ds-filter-bar__count {
--ds-filter-bar-count-ink: var(--ds-secondary-on-inverse);
color: var(--ds-filter-bar-count-ink);
}
.ds-blog-article__kicker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-3);
}
.ds-blog-article__byline {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-3);
margin-block-start: calc(var(--ds-rhythm-element) - var(--ds-rhythm-line));
}
.ds-blog-article__attachment {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
padding: var(--ds-space-4);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
}
.ds-blog-article__head,
.ds-blog-article__row {
--ds-blog-article-measure: calc(var(--ds-site-measure, 44rem) - 2 * var(--ds-site-gutter, var(--ds-space-6)));
inline-size: 100%;
max-inline-size: var(--ds-blog-article-measure);
margin-inline: auto;
}
.ds-blog-article__row {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
}
.ds-blog-article__column,
.ds-blog-article__aside {
min-inline-size: 0;
}
@container ds-band (width >= 80rem) {
.ds-blog-article__row {
display: grid;
grid-template-columns: minmax(0, 1fr) min(100%, var(--ds-blog-article-measure)) minmax(0, 1fr);
align-items: start;
max-inline-size: none;
}
.ds-blog-article__column {
grid-column: 2;
}
.ds-blog-article__aside {
grid-column: 3;
}
}
.ds-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--ds-space-2) var(--ds-space-6);
}
.ds-section-head--ruled {
--ds-section-head-rule: var(--ds-border);
border-block-start: 2px solid var(--ds-section-head-rule);
padding-block-start: var(--ds-space-4);
}
.ds-section-head__title {
--ds-section-head-title-face: var(--ds-font-heading-3-face);
--ds-section-head-title-size: var(--ds-font-heading-3-size);
--ds-section-head-title-weight: var(--ds-font-heading-3-weight);
--ds-section-head-title-leading: var(--ds-font-heading-3-leading);
--ds-section-head-title-tracking: var(--ds-font-heading-3-tracking);
margin: 0;
font-family: var(--ds-section-head-title-face);
font-size: var(--ds-section-head-title-size);
font-weight: var(--ds-section-head-title-weight);
line-height: var(--ds-section-head-title-leading);
letter-spacing: var(--ds-section-head-title-tracking);
}
.ds-section-head__action {
--ds-section-head-action-face: var(--ds-font-label-face);
--ds-section-head-action-size: var(--ds-font-label-size);
--ds-section-head-action-weight: var(--ds-font-label-weight);
--ds-section-head-action-leading: var(--ds-font-label-leading);
--ds-section-head-action-tracking: var(--ds-font-label-tracking);
--ds-section-head-action-ink: var(--ds-brand-ink);
color: var(--ds-section-head-action-ink);
font-family: var(--ds-section-head-action-face);
font-size: var(--ds-section-head-action-size);
font-weight: var(--ds-section-head-action-weight);
line-height: var(--ds-section-head-action-leading);
letter-spacing: var(--ds-section-head-action-tracking);
transition: color var(--ds-duration) var(--ds-ease);
white-space: nowrap;
}
.ds-section-head__action a:not([class^="ds-"]) {
color: var(--ds-section-head-action-ink);
text-decoration: none;
padding-block: var(--ds-space-1);
margin-block: calc(var(--ds-space-1) * -1);
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-section-head__action a:not([class^="ds-"]):hover,
.ds-section-head__action:has(> .ds-link:hover) {
--ds-section-head-action-ink: var(--ds-text-primary-neutral);
}
.ds-event-card__status {
position: absolute;
inset-block-end: var(--ds-space-2);
inset-inline-start: var(--ds-space-2);
}
.ds-event-card__buy {
display: inline-flex;
align-items: center;
gap: var(--ds-space-3);
margin-inline-start: auto;
}
.ds-event-card__price {
--ds-event-card-price-face: var(--ds-font-label-face);
--ds-event-card-price-size: var(--ds-font-label-size);
--ds-event-card-price-weight: var(--ds-emphasis-weight);
--ds-event-card-price-leading: var(--ds-font-label-leading);
--ds-event-card-price-tracking: var(--ds-font-label-tracking);
--ds-event-card-price-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-event-card-price-face);
font-size: var(--ds-event-card-price-size);
font-weight: var(--ds-event-card-price-weight);
line-height: var(--ds-event-card-price-leading);
letter-spacing: var(--ds-event-card-price-tracking);
color: var(--ds-event-card-price-ink);
}
.ds-event-card__date {
--ds-event-card-date-ground: var(--ds-surface-1);
--ds-event-card-date-edge: var(--ds-border);
position: absolute;
inset-block-start: var(--ds-space-2);
inset-inline-start: var(--ds-space-2);
display: grid;
justify-items: center;
min-inline-size: var(--ds-size-4);
padding: var(--ds-space-1) var(--ds-space-2);
border: 1px solid var(--ds-event-card-date-edge);
border-radius: var(--ds-radius-2);
background-color: var(--ds-event-card-date-ground);
}
.ds-event-card__month {
--ds-event-card-month-face: var(--ds-font-overline-face);
--ds-event-card-month-size: var(--ds-font-overline-size);
--ds-event-card-month-weight: var(--ds-emphasis-weight);
--ds-event-card-month-leading: var(--ds-font-overline-leading);
--ds-event-card-month-tracking: var(--ds-font-overline-tracking);
--ds-event-card-month-ink: var(--ds-hue-red);
font-family: var(--ds-event-card-month-face);
font-size: var(--ds-event-card-month-size);
font-weight: var(--ds-event-card-month-weight);
line-height: var(--ds-event-card-month-leading);
letter-spacing: var(--ds-event-card-month-tracking);
text-transform: uppercase;
color: var(--ds-event-card-month-ink);
}
.ds-event-card__day {
--ds-event-card-day-face: var(--ds-font-heading-4-face);
--ds-event-card-day-size: var(--ds-font-heading-4-size);
--ds-event-card-day-weight: var(--ds-emphasis-weight);
--ds-event-card-day-leading: var(--ds-font-heading-4-leading);
--ds-event-card-day-tracking: var(--ds-font-heading-4-tracking);
--ds-event-card-day-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-event-card-day-face);
font-size: var(--ds-event-card-day-size);
font-weight: var(--ds-event-card-day-weight);
line-height: var(--ds-event-card-day-leading);
letter-spacing: var(--ds-event-card-day-tracking);
font-variant-numeric: tabular-nums;
color: var(--ds-event-card-day-ink);
}
.ds-event-card__details {
--ds-event-card-details-face: var(--ds-font-small-face);
--ds-event-card-details-size: var(--ds-font-small-size);
--ds-event-card-details-weight: var(--ds-font-small-weight);
--ds-event-card-details-leading: var(--ds-font-small-leading);
--ds-event-card-details-tracking: var(--ds-font-small-tracking);
--ds-event-card-details-ink: var(--ds-text-secondary-neutral);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1) var(--ds-space-3);
font-family: var(--ds-event-card-details-face);
font-size: var(--ds-event-card-details-size);
font-weight: var(--ds-event-card-details-weight);
line-height: var(--ds-event-card-details-leading);
letter-spacing: var(--ds-event-card-details-tracking);
color: var(--ds-event-card-details-ink);
}
.ds-event-card__rating {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
}
.ds-event-card__star {
--ds-event-card-star-ink: var(--ds-hue-amber);
color: var(--ds-event-card-star-ink);
}
.ds-event-card__value {
--ds-event-card-value-weight: var(--ds-emphasis-weight);
--ds-event-card-value-ink: var(--ds-text-primary-neutral);
font-weight: var(--ds-event-card-value-weight);
color: var(--ds-event-card-value-ink);
}
.ds-event-card__going {
--ds-event-card-going-face: var(--ds-font-small-face);
--ds-event-card-going-size: var(--ds-font-small-size);
--ds-event-card-going-weight: var(--ds-font-small-weight);
--ds-event-card-going-leading: var(--ds-font-small-leading);
--ds-event-card-going-tracking: var(--ds-font-small-tracking);
--ds-event-card-going-ink: var(--ds-text-secondary-neutral);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
min-inline-size: 0;
font-family: var(--ds-event-card-going-face);
font-size: var(--ds-event-card-going-size);
font-weight: var(--ds-event-card-going-weight);
line-height: var(--ds-event-card-going-leading);
letter-spacing: var(--ds-event-card-going-tracking);
color: var(--ds-event-card-going-ink);
}
.ds-product-card__price {
--ds-product-card-price-face: var(--ds-font-label-face);
--ds-product-card-price-size: var(--ds-font-label-size);
--ds-product-card-price-weight: var(--ds-emphasis-weight);
--ds-product-card-price-leading: var(--ds-font-label-leading);
--ds-product-card-price-tracking: var(--ds-font-label-tracking);
--ds-product-card-price-ink: var(--ds-text-primary-neutral);
flex: none;
align-self: center;
font-family: var(--ds-product-card-price-face);
font-size: var(--ds-product-card-price-size);
font-weight: var(--ds-product-card-price-weight);
line-height: var(--ds-product-card-price-leading);
letter-spacing: var(--ds-product-card-price-tracking);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--ds-product-card-price-ink);
}
.ds-product-page {
container-type: inline-size;
}
.ds-product-page__main {
--ds-product-page-gap: var(--ds-rhythm-block);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--ds-product-page-gap);
}
.ds-product-page__main--bare {
grid-template-columns: minmax(0, 1fr);
}
.ds-product-page__price {
--ds-product-page-price-face: var(--ds-font-heading-4-face);
--ds-product-page-price-size: var(--ds-font-heading-4-size);
--ds-product-page-price-weight: var(--ds-font-heading-4-weight);
--ds-product-page-price-leading: var(--ds-font-heading-4-leading);
--ds-product-page-price-tracking: var(--ds-font-heading-4-tracking);
--ds-product-page-price-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-product-page-price-face);
font-size: var(--ds-product-page-price-size);
font-weight: var(--ds-product-page-price-weight);
line-height: var(--ds-product-page-price-leading);
letter-spacing: var(--ds-product-page-price-tracking);
font-variant-numeric: tabular-nums;
color: var(--ds-product-page-price-ink);
}
@container (width <= 40rem) {
.ds-product-page__main {
grid-template-columns: minmax(0, 1fr);
}
}
.ds-pricing {
container-type: inline-size;
container-name: ds-pricing;
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
}
.ds-pricing__tiers-label,
.ds-pricing__unit,
.ds-pricing__was,
.ds-pricing__inherits,
.ds-pricing__feature,
.ds-pricing__head,
.ds-pricing__corner,
.ds-pricing__group,
.ds-pricing__row,
.ds-pricing__cell {
--ds-pricing-label-face: var(--ds-font-label-face);
--ds-pricing-label-size: var(--ds-font-label-size);
--ds-pricing-label-weight: var(--ds-font-label-weight);
--ds-pricing-label-leading: var(--ds-font-label-leading);
--ds-pricing-label-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-pricing-label-face);
font-size: var(--ds-pricing-label-size);
font-weight: var(--ds-pricing-label-weight);
line-height: var(--ds-pricing-label-leading);
letter-spacing: var(--ds-pricing-label-tracking);
}
.ds-pricing__note,
.ds-pricing__detail,
.ds-pricing__closing {
--ds-pricing-small-face: var(--ds-font-small-face);
--ds-pricing-small-size: var(--ds-font-small-size);
--ds-pricing-small-weight: var(--ds-font-small-weight);
--ds-pricing-small-leading: var(--ds-font-small-leading);
--ds-pricing-small-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-pricing-small-face);
font-size: var(--ds-pricing-small-size);
font-weight: var(--ds-pricing-small-weight);
line-height: var(--ds-pricing-small-leading);
letter-spacing: var(--ds-pricing-small-tracking);
}
.ds-pricing__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--ds-space-4) var(--ds-space-8);
}
.ds-pricing__periods,
.ds-pricing__tiers,
.ds-pricing__currencies {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--ds-space-3);
}
.ds-pricing__tiers-label {
--ds-pricing-tiers-ink: var(--ds-text-secondary-neutral);
color: var(--ds-pricing-tiers-ink);
}
.ds-pricing__plans {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-rhythm-element);
}
@container ds-pricing (width >= 40rem) {
.ds-pricing--plans-2 .ds-pricing__plans,
.ds-pricing--plans-4 .ds-pricing__plans {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container ds-pricing (width >= 60rem) {
.ds-pricing--plans-3 .ds-pricing__plans {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container ds-pricing (width >= 64rem) {
.ds-pricing--plans-4 .ds-pricing__plans {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ds-pricing__plans > .ds-pricing__plan {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
}
.ds-pricing__plan--featured {
--ds-card-edge: var(--ds-brand);
}
.ds-pricing__body {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
}
.ds-pricing__price {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
}
.ds-pricing__figure {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--ds-space-2);
}
.ds-pricing__amount {
--ds-pricing-amount-face: var(--ds-font-heading-2-face);
--ds-pricing-amount-size: var(--ds-font-heading-2-size);
--ds-pricing-amount-weight: var(--ds-font-heading-2-weight);
--ds-pricing-amount-leading: var(--ds-font-heading-2-leading);
--ds-pricing-amount-tracking: var(--ds-font-heading-2-tracking);
--ds-pricing-amount-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-pricing-amount-face);
font-size: var(--ds-pricing-amount-size);
font-weight: var(--ds-pricing-amount-weight);
line-height: var(--ds-pricing-amount-leading);
letter-spacing: var(--ds-pricing-amount-tracking);
color: var(--ds-pricing-amount-ink);
font-variant-numeric: tabular-nums;
}
.ds-pricing__unit,
.ds-pricing__was {
--ds-pricing-unit-ink: var(--ds-text-secondary-neutral);
color: var(--ds-pricing-unit-ink);
}
.ds-pricing__was {
--ds-pricing-unit-ink: var(--ds-text-tertiary-neutral);
}
.ds-pricing__note {
--ds-pricing-note-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-pricing-note-ink);
}
.ds-pricing:has(.ds-pricing__periods .ds-segmented__option:nth-child(1 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-period]:not([data-period="1"]),
.ds-pricing:has(.ds-pricing__periods .ds-segmented__option:nth-child(2 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-period]:not([data-period="2"]),
.ds-pricing:has(.ds-pricing__periods .ds-segmented__option:nth-child(3 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-period]:not([data-period="3"]),
.ds-pricing:has(.ds-pricing__periods .ds-segmented__option:nth-child(4 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-period]:not([data-period="4"]),
.ds-pricing:has(.ds-pricing__tiers .ds-segmented__option:nth-child(1 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-tier]:not([data-tier="1"]),
.ds-pricing:has(.ds-pricing__tiers .ds-segmented__option:nth-child(2 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-tier]:not([data-tier="2"]),
.ds-pricing:has(.ds-pricing__tiers .ds-segmented__option:nth-child(3 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-tier]:not([data-tier="3"]),
.ds-pricing:has(.ds-pricing__tiers .ds-segmented__option:nth-child(4 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-tier]:not([data-tier="4"]),
.ds-pricing:has(.ds-pricing__tiers .ds-segmented__option:nth-child(5 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-tier]:not([data-tier="5"]),
.ds-pricing:has(.ds-pricing__tiers .ds-segmented__option:nth-child(6 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-tier]:not([data-tier="6"]),
.ds-pricing:has(.ds-pricing__currencies .ds-segmented__option:nth-child(1 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-currency]:not([data-currency="1"]),
.ds-pricing:has(.ds-pricing__currencies .ds-segmented__option:nth-child(2 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-currency]:not([data-currency="2"]),
.ds-pricing:has(.ds-pricing__currencies .ds-segmented__option:nth-child(3 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-currency]:not([data-currency="3"]),
.ds-pricing:has(.ds-pricing__currencies .ds-segmented__option:nth-child(4 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__price[data-currency]:not([data-currency="4"]) {
display: none;
}
.ds-pricing__holds {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
}
.ds-pricing__inherits {
--ds-pricing-label-weight: var(--ds-emphasis-weight);
--ds-pricing-inherits-ink: var(--ds-text-primary-neutral);
color: var(--ds-pricing-inherits-ink);
}
.ds-pricing__features {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.ds-pricing__feature {
--ds-pricing-feature-ink: var(--ds-text-primary-neutral);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
column-gap: var(--ds-space-2);
color: var(--ds-pricing-feature-ink);
}
.ds-pricing__feature--out {
--ds-pricing-feature-ink: var(--ds-text-tertiary-neutral);
}
.ds-pricing__mark {
--ds-pricing-mark-ink: var(--ds-brand-ink);
display: inline-flex;
inline-size: 1lh;
block-size: 1lh;
color: var(--ds-pricing-mark-ink);
}
.ds-pricing__feature--out .ds-pricing__mark {
--ds-pricing-mark-ink: var(--ds-text-tertiary-neutral);
}
.ds-pricing__mark > svg,
.ds-pricing__hint > svg,
.ds-pricing__yes > svg,
.ds-pricing__no > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-pricing__detail {
--ds-pricing-detail-ink: var(--ds-text-secondary-neutral);
display: block;
color: var(--ds-pricing-detail-ink);
}
.ds-pricing__hint {
--ds-pricing-hint-ink: var(--ds-text-tertiary-neutral);
display: inline-flex;
box-sizing: border-box;
inline-size: 1lh;
block-size: 1lh;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--ds-radius-1);
background: none;
font: inherit;
color: var(--ds-pricing-hint-ink);
cursor: help;
}
.ds-pricing__hint:hover {
--ds-pricing-hint-ink: var(--ds-text-primary-neutral);
}
.ds-pricing__hint:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-pricing__closing {
--ds-pricing-closing-ink: var(--ds-text-secondary-neutral);
margin: 0;
text-align: center;
color: var(--ds-pricing-closing-ink);
}
.ds-pricing__compare {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
}
.ds-pricing__compared {
display: none;
}
.ds-pricing__table {
--ds-pricing-first: 36%;
inline-size: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.ds-pricing__corner {
inline-size: var(--ds-pricing-first);
}
.ds-pricing__head,
.ds-pricing__corner {
--ds-pricing-label-weight: var(--ds-emphasis-weight);
--ds-pricing-head-ink: var(--ds-text-primary-neutral);
position: sticky;
inset-block-start: 0;
z-index: 1;
padding: var(--ds-space-3) var(--ds-space-2);
background-color: var(--ds-surface-0);
border-block-end: 1px solid var(--ds-border);
color: var(--ds-pricing-head-ink);
text-align: center;
}
.ds-site:has(.ds-header--sticky) .ds-pricing__head,
.ds-site:has(.ds-header--sticky) .ds-pricing__corner {
inset-block-start: var(--ds-site-anchor, var(--ds-size-6));
}
.ds-pricing__group {
--ds-pricing-label-weight: var(--ds-emphasis-weight);
--ds-pricing-group-ink: var(--ds-text-primary-neutral);
padding: var(--ds-space-8) var(--ds-space-2) var(--ds-space-3);
border-block-end: 1px solid var(--ds-border);
color: var(--ds-pricing-group-ink);
text-align: start;
}
.ds-pricing__row,
.ds-pricing__cell {
--ds-pricing-cell-ink: var(--ds-text-primary-neutral);
padding: var(--ds-space-3) var(--ds-space-2);
border-block-end: 1px solid var(--ds-border-subtle);
color: var(--ds-pricing-cell-ink);
vertical-align: top;
}
.ds-pricing__row {
--ds-pricing-cell-ink: var(--ds-text-secondary-neutral);
text-align: start;
}
.ds-pricing__cell {
text-align: center;
}
.ds-pricing__row-label {
display: inline-flex;
align-items: start;
gap: var(--ds-space-1);
}
.ds-pricing__yes,
.ds-pricing__no {
display: inline-flex;
inline-size: 1lh;
block-size: 1lh;
vertical-align: top;
}
.ds-pricing__yes {
--ds-pricing-yes-ink: var(--ds-brand-ink);
color: var(--ds-pricing-yes-ink);
}
.ds-pricing__no {
--ds-pricing-no-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-pricing-no-ink);
}
@container ds-pricing (width < 40rem) {
.ds-pricing__compared {
display: block;
}
.ds-pricing__table {
--ds-pricing-first: 60%;
}
.ds-pricing:has(.ds-pricing__compared .ds-segmented__option:nth-child(1 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__table [data-plan]:not([data-plan="1"]),
.ds-pricing:has(.ds-pricing__compared .ds-segmented__option:nth-child(2 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__table [data-plan]:not([data-plan="2"]),
.ds-pricing:has(.ds-pricing__compared .ds-segmented__option:nth-child(3 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__table [data-plan]:not([data-plan="3"]),
.ds-pricing:has(.ds-pricing__compared .ds-segmented__option:nth-child(4 of .ds-segmented__option)[aria-checked="true"]) .ds-pricing__table [data-plan]:not([data-plan="4"]) {
display: none;
}
}
.ds-features {
container-type: inline-size;
container-name: ds-features;
}
.ds-features__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-rhythm-block);
}
@container ds-features (width >= 64rem) {
.ds-features--intro:is(.ds-features--grid, .ds-features--ruled) .ds-features__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: start;
}
}
.ds-features__room {
container-type: inline-size;
container-name: ds-features-room;
}
.ds-features__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-space-12) var(--ds-space-8);
}
:is(.ds-features--grid, .ds-features--ruled) .ds-features__grid {
max-inline-size: var(--ds-site-measure, 44rem);
}
@container ds-features-room (width >= 40rem) {
.ds-features--pairs .ds-features__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-inline-size: none;
}
}
@container ds-features-room (width >= 60rem) {
.ds-features--cols-3 .ds-features__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-inline-size: none;
}
}
@container ds-features-room (width >= 64rem) {
.ds-features--cols-4 .ds-features__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
max-inline-size: none;
}
}
.ds-features__item {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
min-inline-size: 0;
}
.ds-features__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-features__mark {
--ds-features-mark-ground: var(--ds-surface-2);
--ds-features-mark-edge: var(--ds-border-subtle);
--ds-features-mark-ink: var(--ds-text-primary-neutral);
display: inline-grid;
place-items: center;
inline-size: var(--ds-size-3);
block-size: var(--ds-size-3);
margin-block-end: var(--ds-space-3);
border-radius: var(--ds-radius-2);
background-color: var(--ds-features-mark-ground);
box-shadow: inset 0 0 0 1px var(--ds-features-mark-edge);
line-height: var(--ds-space-5);
color: var(--ds-features-mark-ink);
}
.ds-features__mark[data-hue="red"] { --ds-features-mark-ground: var(--ds-hue-red-tint); --ds-features-mark-edge: var(--ds-hue-red-edge); }
.ds-features__mark[data-hue="orange"] { --ds-features-mark-ground: var(--ds-hue-orange-tint); --ds-features-mark-edge: var(--ds-hue-orange-edge); }
.ds-features__mark[data-hue="amber"] { --ds-features-mark-ground: var(--ds-hue-amber-tint); --ds-features-mark-edge: var(--ds-hue-amber-edge); }
.ds-features__mark[data-hue="yellow"] { --ds-features-mark-ground: var(--ds-hue-yellow-tint); --ds-features-mark-edge: var(--ds-hue-yellow-edge); }
.ds-features__mark[data-hue="lime"] { --ds-features-mark-ground: var(--ds-hue-lime-tint); --ds-features-mark-edge: var(--ds-hue-lime-edge); }
.ds-features__mark[data-hue="green"] { --ds-features-mark-ground: var(--ds-hue-green-tint); --ds-features-mark-edge: var(--ds-hue-green-edge); }
.ds-features__mark[data-hue="teal"] { --ds-features-mark-ground: var(--ds-hue-teal-tint); --ds-features-mark-edge: var(--ds-hue-teal-edge); }
.ds-features__mark[data-hue="cyan"] { --ds-features-mark-ground: var(--ds-hue-cyan-tint); --ds-features-mark-edge: var(--ds-hue-cyan-edge); }
.ds-features__mark[data-hue="blue"] { --ds-features-mark-ground: var(--ds-hue-blue-tint); --ds-features-mark-edge: var(--ds-hue-blue-edge); }
.ds-features__mark[data-hue="indigo"] { --ds-features-mark-ground: var(--ds-hue-indigo-tint); --ds-features-mark-edge: var(--ds-hue-indigo-edge); }
.ds-features__mark[data-hue="violet"] { --ds-features-mark-ground: var(--ds-hue-violet-tint); --ds-features-mark-edge: var(--ds-hue-violet-edge); }
.ds-features__mark[data-hue="pink"] { --ds-features-mark-ground: var(--ds-hue-pink-tint); --ds-features-mark-edge: var(--ds-hue-pink-edge); }
.ds-features__name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-features__title {
--ds-features-title-face: var(--ds-font-heading-6-face);
--ds-features-title-size: var(--ds-font-heading-6-size);
--ds-features-title-weight: var(--ds-font-heading-6-weight);
--ds-features-title-leading: var(--ds-font-heading-6-leading);
--ds-features-title-tracking: var(--ds-font-heading-6-tracking);
--ds-features-title-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-features-title-face);
font-size: var(--ds-features-title-size);
font-weight: var(--ds-features-title-weight);
line-height: var(--ds-features-title-leading);
letter-spacing: var(--ds-features-title-tracking);
color: var(--ds-features-title-ink);
}
.ds-features--bento .ds-features__title {
--ds-features-title-face: var(--ds-font-heading-5-face);
--ds-features-title-size: var(--ds-font-heading-5-size);
--ds-features-title-weight: var(--ds-font-heading-5-weight);
--ds-features-title-leading: var(--ds-font-heading-5-leading);
--ds-features-title-tracking: var(--ds-font-heading-5-tracking);
}
.ds-features--rows .ds-features__title {
--ds-features-title-face: var(--ds-font-heading-3-face);
--ds-features-title-size: var(--ds-font-heading-3-size);
--ds-features-title-weight: var(--ds-font-heading-3-weight);
--ds-features-title-leading: var(--ds-font-heading-3-leading);
--ds-features-title-tracking: var(--ds-font-heading-3-tracking);
}
.ds-features__description {
--ds-features-description-face: var(--ds-font-body-face);
--ds-features-description-size: var(--ds-font-body-size);
--ds-features-description-weight: var(--ds-font-body-weight);
--ds-features-description-leading: var(--ds-font-body-leading);
--ds-features-description-tracking: var(--ds-font-body-tracking);
--ds-features-description-ink: var(--ds-text-secondary-neutral);
margin: 0;
max-inline-size: 48ch;
font-family: var(--ds-features-description-face);
font-size: var(--ds-features-description-size);
font-weight: var(--ds-features-description-weight);
line-height: var(--ds-features-description-leading);
letter-spacing: var(--ds-features-description-tracking);
color: var(--ds-features-description-ink);
}
.ds-features--rows .ds-features__description {
--ds-features-description-face: var(--ds-font-copy-face);
--ds-features-description-size: var(--ds-font-copy-size);
--ds-features-description-weight: var(--ds-font-copy-weight);
--ds-features-description-leading: var(--ds-font-copy-leading);
--ds-features-description-tracking: var(--ds-font-copy-tracking);
}
.ds-features__more {
margin-block-start: var(--ds-space-2);
}
.ds-features__media {
position: relative;
overflow: hidden;
aspect-ratio: var(--ds-features-ratio, 16 / 9);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-2);
}
.ds-features__media :is(img, video, iframe) {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border: 0;
}
.ds-features--ruled {
--ds-features-rule-pad: var(--ds-space-8);
}
.ds-features--ruled .ds-features__room {
overflow: hidden;
}
.ds-features--ruled .ds-features__grid {
gap: 0;
margin-block: calc(-1 * var(--ds-features-rule-pad) - 1px) calc(-1 * var(--ds-features-rule-pad));
margin-inline: calc(-1 * var(--ds-features-rule-pad) - 1px) calc(-1 * var(--ds-features-rule-pad));
}
.ds-features--ruled .ds-features__item {
padding: var(--ds-features-rule-pad);
border-block-start: 1px solid var(--ds-border-subtle);
border-inline-start: 1px solid var(--ds-border-subtle);
}
.ds-features--bento .ds-features__grid {
gap: var(--ds-rhythm-element);
}
.ds-features__tile {
min-inline-size: 0;
}
.ds-features__tile .ds-features__copy {
padding: var(--ds-space-6);
}
.ds-features__tile .ds-features__media {
flex: 1;
border-radius: 0;
}
@container ds-features-room (width >= 40rem) {
.ds-features--bento .ds-features__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(var(--ds-features-tile, 24rem), auto);
}
.ds-features__tile--wide {
grid-column: span 2;
}
.ds-features__tile--tall {
grid-row: span 2;
}
.ds-features__tile .ds-features__media {
aspect-ratio: auto;
min-block-size: var(--ds-size-6);
}
}
@container ds-features-room (width >= 60rem) {
.ds-features--bento .ds-features__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ds-features--rows .ds-features__grid {
gap: var(--ds-space-16);
}
.ds-features--rows .ds-features__item {
gap: var(--ds-space-8);
}
.ds-features--rows .ds-features__media {
aspect-ratio: var(--ds-features-ratio, 16 / 9);
}
@container ds-features-room (width >= 60rem) {
.ds-features--rows .ds-features__grid {
gap: var(--ds-space-24);
}
.ds-features--rows .ds-features__item {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--ds-space-16);
}
.ds-features--rows .ds-features__item:nth-child(even) .ds-features__media {
order: -1;
}
.ds-features--rows .ds-features__media {
aspect-ratio: var(--ds-features-ratio, 4 / 3);
}
}
.ds-how-it-works {
--ds-how-it-works-number-face: var(--ds-font-heading-6-face);
--ds-how-it-works-number-size: var(--ds-font-heading-6-size);
--ds-how-it-works-number-weight: var(--ds-font-heading-6-weight);
--ds-how-it-works-number-leading: var(--ds-font-heading-6-leading);
--ds-how-it-works-title-face: var(--ds-font-heading-5-face);
--ds-how-it-works-title-size: var(--ds-font-heading-5-size);
--ds-how-it-works-title-weight: var(--ds-font-heading-5-weight);
--ds-how-it-works-title-leading: var(--ds-font-heading-5-leading);
--ds-how-it-works-title-tracking: var(--ds-font-heading-5-tracking);
--ds-how-it-works-text-face: var(--ds-font-body-face);
--ds-how-it-works-text-size: var(--ds-font-body-size);
--ds-how-it-works-text-weight: var(--ds-font-body-weight);
--ds-how-it-works-text-leading: var(--ds-font-body-leading);
--ds-how-it-works-meta-face: var(--ds-font-overline-face);
--ds-how-it-works-meta-size: var(--ds-font-overline-size);
--ds-how-it-works-meta-weight: var(--ds-font-overline-weight);
--ds-how-it-works-meta-leading: var(--ds-font-overline-leading);
--ds-how-it-works-meta-tracking: var(--ds-font-overline-tracking);
--ds-how-it-works-number-ink: var(--ds-text-primary-neutral);
--ds-how-it-works-title-ink: var(--ds-text-primary-neutral);
--ds-how-it-works-text-ink: var(--ds-text-secondary-neutral);
--ds-how-it-works-meta-ink: var(--ds-text-secondary-neutral);
--ds-how-it-works-gap: var(--ds-space-10);
container-type: inline-size;
container-name: ds-how-it-works;
}
.ds-how-it-works__steps {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.ds-how-it-works__step {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "marker meta" "marker copy" "marker media";
column-gap: var(--ds-space-5);
padding-block-end: var(--ds-how-it-works-gap);
}
.ds-how-it-works__step:last-child {
padding-block-end: 0;
}
.ds-how-it-works__marker {
grid-area: marker;
display: flex;
flex-direction: column;
align-items: center;
}
.ds-how-it-works__marker::after {
content: "";
flex: 1;
inline-size: 1px;
margin-block: var(--ds-space-2) calc(var(--ds-space-2) - var(--ds-how-it-works-gap));
background-color: var(--ds-border);
}
.ds-how-it-works__step:last-child .ds-how-it-works__marker::after {
content: none;
}
.ds-how-it-works__number {
display: grid;
flex: none;
place-items: center;
inline-size: var(--ds-size-3);
block-size: var(--ds-size-3);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-full);
background-color: var(--ds-surface-1);
font-family: var(--ds-how-it-works-number-face);
font-size: var(--ds-how-it-works-number-size);
font-weight: var(--ds-how-it-works-number-weight);
line-height: var(--ds-how-it-works-number-leading);
font-variant-numeric: tabular-nums;
color: var(--ds-how-it-works-number-ink);
}
.ds-how-it-works__copy {
grid-area: copy;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
min-inline-size: 0;
padding-block-start: calc((var(--ds-size-3) - var(--ds-how-it-works-title-leading)) / 2);
}
.ds-how-it-works__meta + .ds-how-it-works__copy {
padding-block-start: 0;
}
.ds-how-it-works__meta {
grid-area: meta;
margin: 0;
padding-block: calc((var(--ds-size-3) - var(--ds-how-it-works-meta-leading)) / 2) var(--ds-space-2);
font-family: var(--ds-how-it-works-meta-face);
font-size: var(--ds-how-it-works-meta-size);
font-weight: var(--ds-how-it-works-meta-weight);
line-height: var(--ds-how-it-works-meta-leading);
letter-spacing: var(--ds-how-it-works-meta-tracking);
text-transform: uppercase;
color: var(--ds-how-it-works-meta-ink);
}
.ds-how-it-works__title {
margin: 0;
font-family: var(--ds-how-it-works-title-face);
font-size: var(--ds-how-it-works-title-size);
font-weight: var(--ds-how-it-works-title-weight);
line-height: var(--ds-how-it-works-title-leading);
letter-spacing: var(--ds-how-it-works-title-tracking);
color: var(--ds-how-it-works-title-ink);
}
.ds-how-it-works__description {
margin: 0;
max-inline-size: 48ch;
font-family: var(--ds-how-it-works-text-face);
font-size: var(--ds-how-it-works-text-size);
font-weight: var(--ds-how-it-works-text-weight);
line-height: var(--ds-how-it-works-text-leading);
color: var(--ds-how-it-works-text-ink);
}
.ds-how-it-works__media {
grid-area: media;
position: relative;
overflow: hidden;
margin-block-start: var(--ds-space-5);
aspect-ratio: var(--ds-how-it-works-ratio, 16 / 9);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-2);
}
.ds-how-it-works__media :is(img, video, iframe) {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border: 0;
}
@container ds-how-it-works (width >= 60rem) {
.ds-how-it-works--rail .ds-how-it-works__step:has(> .ds-how-it-works__media) {
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas: "marker meta media" "marker copy media";
}
.ds-how-it-works--rail .ds-how-it-works__media {
margin-block-start: 0;
margin-inline-start: var(--ds-space-8);
}
}
.ds-how-it-works--steps-2 .ds-how-it-works__steps { --ds-how-it-works-across: 2; }
.ds-how-it-works--steps-3 .ds-how-it-works__steps { --ds-how-it-works-across: 3; }
.ds-how-it-works--steps-4 .ds-how-it-works__steps { --ds-how-it-works-across: 2; }
@container ds-how-it-works (width >= 40rem) {
.ds-how-it-works--across .ds-how-it-works__steps {
grid-template-columns: repeat(var(--ds-how-it-works-across), minmax(0, 1fr));
column-gap: var(--ds-space-8);
}
.ds-how-it-works--across .ds-how-it-works__step {
grid-row: span 4;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-template-areas: "media" "marker" "meta" "copy";
padding-block-end: 0;
}
.ds-how-it-works--across .ds-how-it-works__marker {
flex-direction: row;
margin-block-end: var(--ds-space-5);
}
.ds-how-it-works--across .ds-how-it-works__meta {
padding-block-start: 0;
}
.ds-how-it-works--across .ds-how-it-works__marker::after {
inline-size: auto;
block-size: 1px;
margin-block: 0;
margin-inline: var(--ds-space-3) calc(var(--ds-space-3) - var(--ds-space-8));
}
.ds-how-it-works--across .ds-how-it-works__copy {
padding-block-start: 0;
}
.ds-how-it-works--across .ds-how-it-works__media {
margin-block: 0 var(--ds-space-5);
}
}
@container ds-how-it-works (40rem <= width < 60rem) {
.ds-how-it-works--steps-4 .ds-how-it-works__step:nth-child(2) .ds-how-it-works__marker::after {
content: none;
}
.ds-how-it-works--steps-4 .ds-how-it-works__step:nth-child(n + 3) {
margin-block-start: var(--ds-space-8);
}
}
@container ds-how-it-works (width >= 60rem) {
.ds-how-it-works--steps-4 .ds-how-it-works__steps {
--ds-how-it-works-across: 4;
}
}
.ds-how-it-works__switch {
display: none;
}
@container ds-how-it-works (width >= 40rem) {
.ds-how-it-works--switch .ds-how-it-works__steps {
--ds-how-it-works-title-face: var(--ds-font-heading-4-face);
--ds-how-it-works-title-size: var(--ds-font-heading-4-size);
--ds-how-it-works-title-weight: var(--ds-font-heading-4-weight);
--ds-how-it-works-title-leading: var(--ds-font-heading-4-leading);
--ds-how-it-works-title-tracking: var(--ds-font-heading-4-tracking);
--ds-how-it-works-text-face: var(--ds-font-copy-face);
--ds-how-it-works-text-size: var(--ds-font-copy-size);
--ds-how-it-works-text-weight: var(--ds-font-copy-weight);
--ds-how-it-works-text-leading: var(--ds-font-copy-leading);
}
.ds-how-it-works--switch .ds-how-it-works__switch {
display: flex;
margin-block-end: var(--ds-space-8);
}
.ds-how-it-works--switch .ds-how-it-works__step {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "marker" "meta" "copy" "media";
padding-block-end: 0;
}
.ds-how-it-works--switch .ds-how-it-works__marker {
margin-block-end: var(--ds-space-4);
}
.ds-how-it-works--switch .ds-how-it-works__meta {
padding-block-start: 0;
}
.ds-how-it-works--switch .ds-how-it-works__marker {
align-items: flex-start;
}
.ds-how-it-works--switch .ds-how-it-works__marker::after {
content: none;
}
.ds-how-it-works--switch .ds-how-it-works__copy {
padding-block-start: 0;
}
.ds-how-it-works--switch:has(.ds-segmented__option:nth-child(1 of .ds-segmented__option)[aria-checked="true"]) .ds-how-it-works__step:not([data-step="1"]),
.ds-how-it-works--switch:has(.ds-segmented__option:nth-child(2 of .ds-segmented__option)[aria-checked="true"]) .ds-how-it-works__step:not([data-step="2"]),
.ds-how-it-works--switch:has(.ds-segmented__option:nth-child(3 of .ds-segmented__option)[aria-checked="true"]) .ds-how-it-works__step:not([data-step="3"]),
.ds-how-it-works--switch:has(.ds-segmented__option:nth-child(4 of .ds-segmented__option)[aria-checked="true"]) .ds-how-it-works__step:not([data-step="4"]),
.ds-how-it-works--switch:has(.ds-segmented__option:nth-child(5 of .ds-segmented__option)[aria-checked="true"]) .ds-how-it-works__step:not([data-step="5"]),
.ds-how-it-works--switch:has(.ds-segmented__option:nth-child(6 of .ds-segmented__option)[aria-checked="true"]) .ds-how-it-works__step:not([data-step="6"]) {
display: none;
}
}
@container ds-how-it-works (width >= 60rem) {
.ds-how-it-works--switch .ds-how-it-works__step:has(> .ds-how-it-works__media) {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
grid-template-rows: auto auto auto 1fr;
grid-template-areas: "marker media" "meta media" "copy media" ". media";
column-gap: var(--ds-space-12);
}
.ds-how-it-works--switch .ds-how-it-works__media {
margin-block-start: 0;
aspect-ratio: var(--ds-how-it-works-ratio, 4 / 3);
}
}
.ds-team {
container-type: inline-size;
container-name: ds-team;
}
.ds-team__people {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-space-12) var(--ds-space-8);
margin: 0;
padding: 0;
list-style: none;
}
.ds-team--faces .ds-team__people {
row-gap: var(--ds-space-6);
}
.ds-team--names .ds-team__people {
row-gap: var(--ds-space-3);
}
.ds-team--names.ds-team--pairs .ds-team__people {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container ds-team (width >= 40rem) {
.ds-team--pairs .ds-team__people {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container ds-team (width >= 60rem) {
.ds-team--cols-3 .ds-team__people {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container ds-team (width >= 64rem) {
.ds-team--cols-4 .ds-team__people {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ds-team__person {
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
min-inline-size: 0;
}
.ds-team--faces .ds-team__person {
flex-direction: row;
align-items: center;
}
.ds-team__portrait {
position: relative;
overflow: hidden;
aspect-ratio: var(--ds-team-ratio, 1);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-2);
}
.ds-team__portrait img {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ds-team__initials {
--ds-team-initials-face: var(--ds-font-heading-3-face);
--ds-team-initials-size: var(--ds-font-heading-3-size);
--ds-team-initials-weight: var(--ds-font-heading-3-weight);
--ds-team-initials-leading: var(--ds-font-heading-3-leading);
--ds-team-initials-ink: var(--ds-text-tertiary-neutral);
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ds-team-initials-face);
font-size: var(--ds-team-initials-size);
font-weight: var(--ds-team-initials-weight);
line-height: var(--ds-team-initials-leading);
color: var(--ds-team-initials-ink);
}
.ds-team__face {
display: flex;
flex: none;
}
.ds-team--monochrome :is(.ds-team__portrait, .ds-team__face) {
filter: grayscale(1);
}
.ds-team__words {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-team__name {
--ds-team-name-face: var(--ds-font-heading-6-face);
--ds-team-name-size: var(--ds-font-heading-6-size);
--ds-team-name-weight: var(--ds-font-heading-6-weight);
--ds-team-name-leading: var(--ds-font-heading-6-leading);
--ds-team-name-tracking: var(--ds-font-heading-6-tracking);
--ds-team-name-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-team-name-face);
font-size: var(--ds-team-name-size);
font-weight: var(--ds-team-name-weight);
line-height: var(--ds-team-name-leading);
letter-spacing: var(--ds-team-name-tracking);
color: var(--ds-team-name-ink);
}
:is(.ds-team--faces, .ds-team--names) .ds-team__name {
--ds-team-name-face: var(--ds-font-body-face);
--ds-team-name-size: var(--ds-font-body-size);
--ds-team-name-weight: var(--ds-emphasis-weight);
--ds-team-name-leading: var(--ds-font-body-leading);
--ds-team-name-tracking: var(--ds-font-body-tracking);
}
.ds-team--names .ds-team__name {
--ds-team-name-weight: var(--ds-font-body-weight);
}
.ds-team__role,
.ds-team__bio {
margin: 0;
}
.ds-team__role {
--ds-team-role-face: var(--ds-font-label-face);
--ds-team-role-size: var(--ds-font-label-size);
--ds-team-role-weight: var(--ds-font-label-weight);
--ds-team-role-leading: var(--ds-font-label-leading);
--ds-team-role-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-team-role-face);
font-size: var(--ds-team-role-size);
font-weight: var(--ds-team-role-weight);
line-height: var(--ds-team-role-leading);
color: var(--ds-team-role-ink);
}
.ds-team__bio {
--ds-team-bio-face: var(--ds-font-body-face);
--ds-team-bio-size: var(--ds-font-body-size);
--ds-team-bio-weight: var(--ds-font-body-weight);
--ds-team-bio-leading: var(--ds-font-body-leading);
--ds-team-bio-ink: var(--ds-text-secondary-neutral);
margin-block-start: var(--ds-space-2);
font-family: var(--ds-team-bio-face);
font-size: var(--ds-team-bio-size);
font-weight: var(--ds-team-bio-weight);
line-height: var(--ds-team-bio-leading);
color: var(--ds-team-bio-ink);
}
.ds-team__links {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2);
margin-block-start: var(--ds-space-2);
}
.ds-testimonial {
container-type: inline-size;
container-name: ds-testimonial;
}
.ds-testimonial__quotes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-rhythm-element);
margin: 0;
padding: 0;
list-style: none;
}
.ds-testimonial__item {
display: flex;
min-inline-size: 0;
}
.ds-testimonial__item > * {
flex: 1;
}
.ds-testimonial__quote {
display: flex;
flex-direction: column;
gap: var(--ds-space-6);
margin: 0;
}
.ds-testimonial__body {
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
min-inline-size: 0;
}
.ds-testimonial__words {
--ds-testimonial-words-face: var(--ds-font-heading-3-face);
--ds-testimonial-words-size: var(--ds-font-heading-3-size);
--ds-testimonial-words-weight: var(--ds-font-heading-3-weight);
--ds-testimonial-words-leading: var(--ds-font-heading-3-leading);
--ds-testimonial-words-tracking: var(--ds-font-heading-3-tracking);
--ds-testimonial-words-ink: var(--ds-text-primary-neutral);
position: relative;
margin: 0;
max-inline-size: 32em;
quotes: auto;
font-family: var(--ds-testimonial-words-face);
font-size: var(--ds-testimonial-words-size);
font-weight: var(--ds-testimonial-words-weight);
line-height: var(--ds-testimonial-words-leading);
letter-spacing: var(--ds-testimonial-words-tracking);
text-wrap-style: pretty;
color: var(--ds-testimonial-words-ink);
}
.ds-testimonial__words::before {
content: open-quote;
position: absolute;
inset-inline-end: 100%;
}
.ds-testimonial__words::after {
content: close-quote;
}
.ds-testimonial--cards .ds-testimonial__words {
--ds-testimonial-words-face: var(--ds-font-heading-4-face);
--ds-testimonial-words-size: var(--ds-font-heading-4-size);
--ds-testimonial-words-weight: var(--ds-font-heading-4-weight);
--ds-testimonial-words-leading: var(--ds-font-heading-4-leading);
--ds-testimonial-words-tracking: var(--ds-font-heading-4-tracking);
}
.ds-testimonial--wall .ds-testimonial__words {
--ds-testimonial-words-face: var(--ds-font-body-face);
--ds-testimonial-words-size: var(--ds-font-body-size);
--ds-testimonial-words-weight: var(--ds-font-body-weight);
--ds-testimonial-words-leading: var(--ds-font-body-leading);
--ds-testimonial-words-tracking: var(--ds-font-body-tracking);
quotes: none;
}
.ds-testimonial__outcome {
--ds-testimonial-outcome-face: var(--ds-font-heading-5-face);
--ds-testimonial-outcome-size: var(--ds-font-heading-5-size);
--ds-testimonial-outcome-weight: var(--ds-font-heading-5-weight);
--ds-testimonial-outcome-leading: var(--ds-font-heading-5-leading);
--ds-testimonial-outcome-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-testimonial-outcome-face);
font-size: var(--ds-testimonial-outcome-size);
font-weight: var(--ds-testimonial-outcome-weight);
line-height: var(--ds-testimonial-outcome-leading);
color: var(--ds-testimonial-outcome-ink);
}
.ds-testimonial__by {
display: flex;
align-items: center;
gap: var(--ds-space-3);
min-inline-size: 0;
}
.ds-testimonial__logo {
--ds-testimonial-logo-ink: var(--ds-text-primary-neutral);
display: flex;
flex: none;
align-items: center;
block-size: var(--ds-size-3);
color: var(--ds-testimonial-logo-ink);
}
.ds-testimonial__logo > :is(svg, img) {
block-size: 100%;
inline-size: auto;
}
.ds-testimonial__who {
display: flex;
flex: 1;
flex-direction: column;
min-inline-size: 0;
}
.ds-testimonial__name {
--ds-testimonial-name-face: var(--ds-font-body-face);
--ds-testimonial-name-size: var(--ds-font-body-size);
--ds-testimonial-name-weight: var(--ds-emphasis-weight);
--ds-testimonial-name-leading: var(--ds-font-body-leading);
--ds-testimonial-name-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-testimonial-name-face);
font-size: var(--ds-testimonial-name-size);
font-weight: var(--ds-testimonial-name-weight);
line-height: var(--ds-testimonial-name-leading);
color: var(--ds-testimonial-name-ink);
}
.ds-testimonial__role {
--ds-testimonial-role-face: var(--ds-font-label-face);
--ds-testimonial-role-size: var(--ds-font-label-size);
--ds-testimonial-role-weight: var(--ds-font-label-weight);
--ds-testimonial-role-leading: var(--ds-font-label-leading);
--ds-testimonial-role-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-testimonial-role-face);
font-size: var(--ds-testimonial-role-size);
font-weight: var(--ds-testimonial-role-weight);
line-height: var(--ds-testimonial-role-leading);
color: var(--ds-testimonial-role-ink);
}
.ds-testimonial__source {
--ds-testimonial-source-ink: var(--ds-text-tertiary-neutral);
display: flex;
flex: none;
align-self: flex-start;
font-size: var(--ds-space-5);
color: var(--ds-testimonial-source-ink);
}
.ds-testimonial__portrait {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--ds-testimonial-ratio, 4 / 5);
max-inline-size: 28rem;
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-2);
}
.ds-testimonial__portrait img {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
@container ds-testimonial (width >= 60rem) {
.ds-testimonial--spotlight .ds-testimonial__quote:has(> .ds-testimonial__portrait) {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
grid-template-rows: auto auto 1fr;
grid-template-areas: "body portrait" "by portrait" ". portrait";
column-gap: var(--ds-space-16);
row-gap: 0;
}
.ds-testimonial--spotlight .ds-testimonial__portrait {
grid-area: portrait;
}
.ds-testimonial--spotlight .ds-testimonial__body {
grid-area: body;
margin-block-end: var(--ds-space-6);
}
.ds-testimonial--spotlight .ds-testimonial__by {
grid-area: by;
}
}
.ds-testimonial__card .ds-testimonial__quote {
flex: 1;
padding: var(--ds-space-8);
}
.ds-testimonial--cards .ds-testimonial__quote {
min-block-size: var(--ds-testimonial-card, 18rem);
}
.ds-testimonial--cards .ds-testimonial__by {
margin-block-start: auto;
}
@container ds-testimonial (width >= 40rem) {
.ds-testimonial--pairs .ds-testimonial__quotes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container ds-testimonial (width >= 60rem) {
.ds-testimonial--cols-3 .ds-testimonial__quotes {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds-testimonial--duo .ds-testimonial__quotes {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
.ds-testimonial--wall .ds-testimonial__quotes {
display: block;
columns: 1;
column-gap: var(--ds-rhythm-element);
}
.ds-testimonial--wall .ds-testimonial__item {
margin-block-end: var(--ds-rhythm-element);
break-inside: avoid;
}
.ds-testimonial--wall .ds-testimonial__quote {
gap: var(--ds-space-4);
padding: var(--ds-space-5);
}
@container ds-testimonial (width >= 40rem) {
.ds-testimonial--wall .ds-testimonial__quotes {
columns: 2;
}
}
@container ds-testimonial (width >= 60rem) {
.ds-testimonial--wall .ds-testimonial__quotes {
columns: 3;
}
}
.ds-logo-cloud {
container-type: inline-size;
container-name: ds-logo-cloud;
display: flex;
flex-direction: column;
gap: var(--ds-space-8);
}
.ds-logo-cloud__caption {
--ds-logo-cloud-caption-face: var(--ds-font-label-face);
--ds-logo-cloud-caption-size: var(--ds-font-label-size);
--ds-logo-cloud-caption-weight: var(--ds-font-label-weight);
--ds-logo-cloud-caption-leading: var(--ds-font-label-leading);
--ds-logo-cloud-caption-ink: var(--ds-text-secondary-neutral);
margin: 0;
text-align: center;
font-family: var(--ds-logo-cloud-caption-face);
font-size: var(--ds-logo-cloud-caption-size);
font-weight: var(--ds-logo-cloud-caption-weight);
line-height: var(--ds-logo-cloud-caption-leading);
color: var(--ds-logo-cloud-caption-ink);
}
.ds-logo-cloud--grid .ds-logo-cloud__caption {
text-align: start;
}
.ds-logo-cloud__logos {
--ds-logo-cloud-across: 2;
display: grid;
grid-template-columns: repeat(var(--ds-logo-cloud-across), minmax(0, 1fr));
align-items: center;
gap: var(--ds-space-8) var(--ds-space-6);
margin: 0;
padding: 0;
list-style: none;
}
.ds-logo-cloud--narrow-1 .ds-logo-cloud__logos { --ds-logo-cloud-across: 1; }
@container ds-logo-cloud (width >= 40rem) {
.ds-logo-cloud--mid-1 .ds-logo-cloud__logos { --ds-logo-cloud-across: 1; }
.ds-logo-cloud--mid-2 .ds-logo-cloud__logos { --ds-logo-cloud-across: 2; }
.ds-logo-cloud--mid-3 .ds-logo-cloud__logos { --ds-logo-cloud-across: 3; }
.ds-logo-cloud--mid-4 .ds-logo-cloud__logos { --ds-logo-cloud-across: 4; }
}
@container ds-logo-cloud (width >= 64rem) {
.ds-logo-cloud--wide-1 .ds-logo-cloud__logos { --ds-logo-cloud-across: 1; }
.ds-logo-cloud--wide-2 .ds-logo-cloud__logos { --ds-logo-cloud-across: 2; }
.ds-logo-cloud--wide-3 .ds-logo-cloud__logos { --ds-logo-cloud-across: 3; }
.ds-logo-cloud--wide-4 .ds-logo-cloud__logos { --ds-logo-cloud-across: 4; }
.ds-logo-cloud--wide-5 .ds-logo-cloud__logos { --ds-logo-cloud-across: 5; }
.ds-logo-cloud--wide-6 .ds-logo-cloud__logos { --ds-logo-cloud-across: 6; }
.ds-logo-cloud--wide-7 .ds-logo-cloud__logos { --ds-logo-cloud-across: 7; }
.ds-logo-cloud--wide-8 .ds-logo-cloud__logos { --ds-logo-cloud-across: 8; }
}
.ds-logo-cloud__logo {
display: flex;
align-items: center;
justify-content: center;
min-inline-size: 0;
}
.ds-logo-cloud__mark {
--ds-logo-cloud-ink: var(--ds-text-secondary-neutral);
--ds-logo-cloud-ink-hover: var(--ds-text-primary-neutral);
display: flex;
align-items: center;
block-size: var(--ds-logo-cloud-mark, var(--ds-size-1));
max-inline-size: 100%;
color: var(--ds-logo-cloud-ink);
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-logo-cloud__mark > :is(svg, img) {
display: block;
block-size: 100%;
inline-size: auto;
max-inline-size: 100%;
}
.ds-logo-cloud__mark > img {
filter: grayscale(1);
opacity: 0.8;
}
.ds-logo-cloud__mark--file {
background-color: currentColor;
mask: var(--ds-logo-cloud-file) center / contain no-repeat;
print-color-adjust: exact;
}
.ds-logo-cloud__mark--file > img {
visibility: hidden;
}
.ds-logo-cloud__link {
display: flex;
border-radius: var(--ds-radius-1);
color: inherit;
text-decoration: none;
}
.ds-logo-cloud__link:hover > .ds-logo-cloud__mark {
color: var(--ds-logo-cloud-ink-hover);
}
.ds-logo-cloud__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: var(--ds-space-1);
}
.ds-logo-cloud--grid .ds-logo-cloud__room {
overflow: hidden;
}
.ds-logo-cloud--grid .ds-logo-cloud__logos {
gap: 0;
margin-block-start: -1px;
margin-inline-start: -1px;
}
.ds-logo-cloud--grid .ds-logo-cloud__logo {
padding: var(--ds-space-8) var(--ds-space-6);
border-block-start: 1px solid var(--ds-border-subtle);
border-inline-start: 1px solid var(--ds-border-subtle);
}
.ds-logo-cloud__again {
display: flex;
}
.ds-logo-cloud__run {
mask-image: linear-gradient(
to right,
transparent,
currentcolor var(--ds-space-16),
currentcolor calc(100% - var(--ds-space-16)),
transparent
);
}
.ds-agenda {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
container-type: inline-size;
container-name: ds-agenda;
}
.ds-agenda__day {
--ds-agenda-rail: 10rem;
display: grid;
grid-template-columns: var(--ds-agenda-rail) 1fr;
gap: var(--ds-space-4) var(--ds-space-6);
align-items: start;
}
.ds-agenda__date {
--ds-agenda-date-face: var(--ds-font-copy-face);
--ds-agenda-date-size: var(--ds-font-copy-size);
--ds-agenda-date-weight: var(--ds-emphasis-weight);
--ds-agenda-date-leading: var(--ds-font-copy-leading);
--ds-agenda-date-tracking: var(--ds-font-copy-tracking);
margin: 0;
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
font-family: var(--ds-agenda-date-face);
font-size: var(--ds-agenda-date-size);
font-weight: var(--ds-agenda-date-weight);
line-height: var(--ds-agenda-date-leading);
letter-spacing: var(--ds-agenda-date-tracking);
}
.ds-agenda__date-name {
--ds-agenda-date-name-face: var(--ds-font-micro-face);
--ds-agenda-date-name-size: var(--ds-font-micro-size);
--ds-agenda-date-name-weight: var(--ds-font-micro-weight);
--ds-agenda-date-name-leading: var(--ds-font-micro-leading);
--ds-agenda-date-name-tracking: var(--ds-font-micro-tracking);
--ds-agenda-date-name-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-agenda-date-name-face);
font-size: var(--ds-agenda-date-name-size);
font-weight: var(--ds-agenda-date-name-weight);
line-height: var(--ds-agenda-date-name-leading);
letter-spacing: var(--ds-agenda-date-name-tracking);
text-transform: uppercase;
color: var(--ds-agenda-date-name-ink);
}
.ds-agenda__events {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.ds-agenda__slot + .ds-agenda__slot {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-agenda__event {
display: flex;
align-items: baseline;
gap: var(--ds-space-4);
padding-block: var(--ds-space-3);
padding-inline: var(--ds-space-2);
border-radius: var(--ds-radius-2);
color: inherit;
text-decoration: none;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-agenda__event:hover {
background-color: var(--ds-surface-hover);
}
.ds-agenda__event:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-agenda__time {
--ds-agenda-time-face: var(--ds-font-label-face);
--ds-agenda-time-size: var(--ds-font-label-size);
--ds-agenda-time-weight: var(--ds-font-label-weight);
--ds-agenda-time-leading: var(--ds-font-label-leading);
--ds-agenda-time-tracking: var(--ds-font-label-tracking);
--ds-agenda-time-ink: var(--ds-text-secondary-neutral);
flex: none;
inline-size: var(--ds-space-10);
font-family: var(--ds-agenda-time-face);
font-size: var(--ds-agenda-time-size);
font-weight: var(--ds-agenda-time-weight);
line-height: var(--ds-agenda-time-leading);
letter-spacing: var(--ds-agenda-time-tracking);
color: var(--ds-agenda-time-ink);
font-variant-numeric: tabular-nums;
}
.ds-agenda__what {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
flex: 1;
min-inline-size: 0;
}
.ds-agenda__title {
--ds-agenda-title-face: var(--ds-font-body-face);
--ds-agenda-title-size: var(--ds-font-body-size);
--ds-agenda-title-weight: var(--ds-emphasis-weight);
--ds-agenda-title-leading: var(--ds-font-body-leading);
--ds-agenda-title-tracking: var(--ds-font-body-tracking);
font-family: var(--ds-agenda-title-face);
font-size: var(--ds-agenda-title-size);
font-weight: var(--ds-agenda-title-weight);
line-height: var(--ds-agenda-title-leading);
letter-spacing: var(--ds-agenda-title-tracking);
}
.ds-agenda__detail {
--ds-agenda-detail-face: var(--ds-font-small-face);
--ds-agenda-detail-size: var(--ds-font-small-size);
--ds-agenda-detail-weight: var(--ds-font-small-weight);
--ds-agenda-detail-leading: var(--ds-font-small-leading);
--ds-agenda-detail-tracking: var(--ds-font-small-tracking);
--ds-agenda-detail-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-agenda-detail-face);
font-size: var(--ds-agenda-detail-size);
font-weight: var(--ds-agenda-detail-weight);
line-height: var(--ds-agenda-detail-leading);
letter-spacing: var(--ds-agenda-detail-tracking);
color: var(--ds-agenda-detail-ink);
}
.ds-agenda__note {
--ds-agenda-note-face: var(--ds-font-label-face);
--ds-agenda-note-size: var(--ds-font-label-size);
--ds-agenda-note-weight: var(--ds-emphasis-weight);
--ds-agenda-note-leading: var(--ds-font-label-leading);
--ds-agenda-note-tracking: var(--ds-font-label-tracking);
--ds-agenda-note-ink: var(--ds-text-primary-neutral);
flex: none;
margin-inline-start: auto;
font-family: var(--ds-agenda-note-face);
font-size: var(--ds-agenda-note-size);
font-weight: var(--ds-agenda-note-weight);
line-height: var(--ds-agenda-note-leading);
letter-spacing: var(--ds-agenda-note-tracking);
color: var(--ds-agenda-note-ink);
white-space: nowrap;
}
@container ds-agenda (width <= 40rem) {
.ds-agenda__day {
grid-template-columns: 100%;
gap: var(--ds-space-2);
}
}
.ds-tooltip {
position: relative;
display: inline-flex;
}
.ds-tooltip__bubble {
--ds-tooltip-bubble-face: var(--ds-font-small-face);
--ds-tooltip-bubble-tracking: var(--ds-font-small-tracking);
--ds-tooltip-bubble-size: var(--ds-font-small-size);
--ds-tooltip-bubble-weight: var(--ds-font-small-weight);
--ds-tooltip-bubble-leading: var(--ds-font-small-leading);
position: absolute;
z-index: 2;
visibility: hidden;
opacity: 0;
pointer-events: none;
inline-size: max-content;
max-inline-size: 16rem;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-2);
background-color: var(--ds-inverse);
--ds-tooltip-bubble-ink: var(--ds-on-inverse);
color: var(--ds-tooltip-bubble-ink);
font-family: var(--ds-tooltip-bubble-face);
font-size: var(--ds-tooltip-bubble-size);
letter-spacing: var(--ds-tooltip-bubble-tracking);
font-weight: var(--ds-tooltip-bubble-weight);
line-height: var(--ds-tooltip-bubble-leading);
text-wrap-mode: wrap;
text-wrap-style: pretty;
transition:
opacity var(--ds-duration) var(--ds-ease),
visibility var(--ds-duration) var(--ds-ease);
}
.ds-tooltip:hover .ds-tooltip__bubble,
.ds-tooltip:focus-within .ds-tooltip__bubble {
visibility: visible;
opacity: 1;
}
.ds-tooltip--top:not([data-flip]) .ds-tooltip__bubble,
.ds-tooltip--bottom[data-flip] .ds-tooltip__bubble {
inset-block-end: calc(100% + var(--ds-space-2));
inset-inline-start: 50%;
translate: -50% 0;
}
.ds-tooltip--bottom:not([data-flip]) .ds-tooltip__bubble,
.ds-tooltip--top[data-flip] .ds-tooltip__bubble {
inset-block-start: calc(100% + var(--ds-space-2));
inset-inline-start: 50%;
translate: -50% 0;
}
.ds-tooltip--start:not([data-flip]) .ds-tooltip__bubble,
.ds-tooltip--end[data-flip] .ds-tooltip__bubble {
inset-inline-end: calc(100% + var(--ds-space-2));
inset-block-start: 50%;
translate: 0 -50%;
}
.ds-tooltip--end:not([data-flip]) .ds-tooltip__bubble,
.ds-tooltip--start[data-flip] .ds-tooltip__bubble {
inset-inline-start: calc(100% + var(--ds-space-2));
inset-block-start: 50%;
translate: 0 -50%;
}
.ds-selection-bar {
position: sticky;
inset-block-end: var(--ds-space-4);
z-index: 10;
display: flex;
align-items: center;
gap: var(--ds-space-4);
flex-wrap: wrap;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-4);
background-color: var(--ds-inverse);
--ds-selection-bar-ink: var(--ds-on-inverse);
color: var(--ds-selection-bar-ink);
animation: ds-selection-in var(--ds-duration) var(--ds-ease-out);
}
@keyframes ds-selection-in {
from {
opacity: 0;
translate: 0 var(--ds-space-3);
}
}
.ds-selection-bar__count {
--ds-selection-bar-count-weight: var(--ds-emphasis-weight);
--ds-selection-bar-count-face: var(--ds-font-label-face);
--ds-selection-bar-count-tracking: var(--ds-font-label-tracking);
--ds-selection-bar-count-size: var(--ds-font-label-size);
--ds-selection-bar-count-leading: var(--ds-font-label-leading);
display: flex;
align-items: center;
gap: var(--ds-space-2);
font-family: var(--ds-selection-bar-count-face);
font-size: var(--ds-selection-bar-count-size);
letter-spacing: var(--ds-selection-bar-count-tracking);
line-height: var(--ds-selection-bar-count-leading);
font-weight: var(--ds-selection-bar-count-weight);
}
.ds-selection-bar__actions {
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin-inline-start: auto;
}
.ds-drawer:not(.ds-drawer--inline):not([open]) {
display: none;
}
.ds-drawer {
position: fixed;
inset-block: 0;
margin: 0;
margin-inline-start: auto;
max-block-size: 100dvh;
block-size: 100dvh;
inline-size: min(var(--ds-drawer-width), 100vw);
max-inline-size: 100vw;
display: flex;
flex-direction: column;
padding: 0;
border: 0;
border-inline-start: 1px solid var(--ds-border);
background-color: var(--ds-surface-1);
--ds-drawer-ink: var(--ds-text-primary-neutral);
color: var(--ds-drawer-ink);
overflow: hidden;
}
.ds-drawer--start {
margin-inline: 0 auto;
border-inline: 0 1px solid var(--ds-border);
}
.ds-drawer--small { --ds-drawer-width: 20rem; }
.ds-drawer--medium { --ds-drawer-width: 26rem; }
.ds-drawer--large { --ds-drawer-width: 34rem; }
.ds-drawer::backdrop {
background-color: var(--ds-scrim);
}
.ds-drawer__head {
display: flex;
align-items: center;
gap: var(--ds-space-3);
flex: none;
padding: var(--ds-space-4);
border-block-end: 1px solid var(--ds-border);
}
.ds-drawer__title {
--ds-drawer-title-face: var(--ds-font-heading-5-face);
--ds-drawer-title-tracking: var(--ds-font-heading-5-tracking);
--ds-drawer-title-size: var(--ds-font-heading-5-size);
--ds-drawer-title-leading: var(--ds-font-heading-5-leading);
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: 1;
min-inline-size: 0;
font-family: var(--ds-drawer-title-face);
font-size: var(--ds-drawer-title-size);
letter-spacing: var(--ds-drawer-title-tracking);
font-weight: var(--ds-font-heading-5-weight);
line-height: var(--ds-drawer-title-leading);
}
.ds-drawer__body {
flex: 1;
min-block-size: 0;
position: relative;
overflow-y: auto;
padding: var(--ds-space-4);
}
.ds-drawer__foot {
display: flex;
align-items: center;
gap: var(--ds-space-3);
flex: none;
padding: var(--ds-space-4);
border-block-start: 1px solid var(--ds-border);
}
.ds-drawer--inline {
position: static;
margin-inline: 0;
flex: none;
inline-size: var(--ds-drawer-width);
max-inline-size: 100%;
block-size: auto;
max-block-size: none;
align-self: stretch;
border-radius: var(--ds-radius-3);
border: 1px solid var(--ds-border);
transition:
inline-size var(--ds-duration) var(--ds-ease-out),
opacity var(--ds-duration) var(--ds-ease-out),
border-width var(--ds-duration) var(--ds-ease-out);
}
.ds-row:has(> .ds-drawer--inline) > :not(.ds-drawer) {
flex: 1;
min-inline-size: 0;
}
.ds-drawer--inline ~ :not(.ds-drawer--inline) {
flex: 1 1 auto;
min-inline-size: 0;
}
.ds-card .ds-drawer--inline {
--ds-drawer-inset: var(--ds-space-4);
margin-inline-start: var(--ds-drawer-inset);
}
.ds-card .ds-drawer--inline.ds-drawer--end {
margin-inline: 0 var(--ds-drawer-inset);
}
.ds-drawer--inline[data-open="false"] {
flex-basis: 0;
flex-grow: 0;
inline-size: 0;
min-inline-size: 0;
border-inline-width: 0;
padding-inline: 0;
margin-inline: 0 calc(var(--ds-grid-gap, 0px) * -1);
block-size: 0;
min-block-size: 0;
padding-block: 0;
border-block-width: 0;
opacity: 0;
overflow: hidden;
}
.ds-drawer--inline.ds-drawer--end[data-open="false"],
.ds-card .ds-drawer--inline.ds-drawer--end[data-open="false"] {
margin-inline: calc(var(--ds-grid-gap, 0px) * -1) 0;
}
@container ds-app-shell (width <= 40rem) {
.ds-drawer:not(.ds-drawer--inline) {
--ds-drawer-ceiling: 85dvh;
inset: auto 0 0;
margin: 0;
inline-size: 100%;
max-inline-size: 100%;
block-size: auto;
max-block-size: var(--ds-drawer-ceiling);
border: 0;
border-block-start: 1px solid var(--ds-border);
border-start-start-radius: var(--ds-radius-4);
border-start-end-radius: var(--ds-radius-4);
}
}
dialog.ds-dialog:not([open]) {
display: none;
}
.ds-dialog {
text-align: start;
display: flex;
flex-direction: column;
inline-size: var(--ds-dialog-width);
max-inline-size: calc(100vw - var(--ds-space-8));
max-block-size: calc(100dvh - var(--ds-space-8));
padding: 0;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-4);
background-color: var(--ds-surface-1);
--ds-dialog-ink: var(--ds-text-primary-neutral);
color: var(--ds-dialog-ink);
}
.ds-dialog--small { --ds-dialog-width: 20rem; }
.ds-dialog--medium { --ds-dialog-width: 28rem; }
.ds-dialog--large { --ds-dialog-width: 36rem; }
.ds-dialog[open] {
animation: ds-dialog-in var(--ds-duration) var(--ds-ease-out);
}
@keyframes ds-dialog-in {
from {
opacity: 0;
translate: 0 var(--ds-space-2);
}
}
.ds-dialog::backdrop {
background-color: var(--ds-scrim);
}
.ds-dialog--inline {
position: static;
max-inline-size: 100%;
animation: none;
}
.ds-dialog__head {
display: flex;
align-items: start;
justify-content: space-between;
gap: var(--ds-space-3);
flex: none;
padding: var(--ds-space-4);
padding-block-end: 0;
}
.ds-dialog__title {
--ds-dialog-title-weight: var(--ds-emphasis-weight);
--ds-dialog-title-face: var(--ds-font-body-face);
--ds-dialog-title-tracking: var(--ds-font-body-tracking);
--ds-dialog-title-size: var(--ds-font-body-size);
--ds-dialog-title-leading: var(--ds-font-body-leading);
margin: 0;
font-family: var(--ds-dialog-title-face);
font-size: var(--ds-dialog-title-size);
letter-spacing: var(--ds-dialog-title-tracking);
line-height: var(--ds-dialog-title-leading);
font-weight: var(--ds-dialog-title-weight);
--ds-dialog-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-dialog-title-ink);
}
.ds-dialog__body {
flex: 1;
min-block-size: 0;
position: relative;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
padding: var(--ds-space-4);
}
.ds-dialog__lede {
--ds-dialog-lede-face: var(--ds-font-label-face);
--ds-dialog-lede-tracking: var(--ds-font-label-tracking);
--ds-dialog-lede-size: var(--ds-font-label-size);
--ds-dialog-lede-weight: var(--ds-font-label-weight);
--ds-dialog-lede-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-dialog-lede-face);
font-size: var(--ds-dialog-lede-size);
letter-spacing: var(--ds-dialog-lede-tracking);
font-weight: var(--ds-dialog-lede-weight);
line-height: var(--ds-dialog-lede-leading);
--ds-dialog-lede-ink: var(--ds-text-secondary-neutral);
color: var(--ds-dialog-lede-ink);
}
.ds-dialog__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ds-space-2);
flex: none;
flex-wrap: wrap;
padding: var(--ds-space-4);
padding-block-start: 0;
}
.ds-dialog__answer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ds-space-2);
flex-wrap: wrap;
margin: 0;
}
.ds-link {
--ds-link-weight-current: var(--ds-current-weight);
--ds-link-intent: gap;
--ds-link-gap: 0.35em;
display: inline-flex;
align-items: baseline;
gap: var(--ds-link-gap);
border-radius: var(--ds-radius-1);
}
.ds-link--hover {
text-decoration-color: transparent;
}
.ds-link--hover:hover {
text-decoration-color: currentColor;
}
.ds-link--none {
text-decoration: none;
}
.ds-link--brand {
color: var(--ds-brand-ink);
}
.ds-link--brand:hover {
color: var(--ds-brand);
}
.ds-link[aria-current] {
font-weight: var(--ds-link-weight-current);
--ds-link-ink: var(--ds-text-primary-neutral);
color: var(--ds-link-ink);
}
.ds-link__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
align-self: center;
}
.ds-link__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-link__away {
inline-size: 0.75em;
block-size: 0.75em;
opacity: 0.7;
}
.ds-link__note {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-link--standalone {
position: relative;
}
.ds-link--standalone::after {
content: "";
position: absolute;
inset-block: calc((100% - max(24px, 100%)) / 2);
inset-inline: -0.35em;
}
.ds-link--mark {
--ds-link-mark-face: var(--ds-font-label-face);
--ds-link-mark-tracking: var(--ds-font-label-tracking);
--ds-link-mark-size: var(--ds-font-label-size);
--ds-link-mark-weight: var(--ds-font-label-weight);
--ds-link-mark-leading: var(--ds-font-label-leading);
--ds-link-mark-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-link-mark-face);
font-size: var(--ds-link-mark-size);
letter-spacing: var(--ds-link-mark-tracking);
font-weight: var(--ds-link-mark-weight);
line-height: var(--ds-link-mark-leading);
box-sizing: border-box;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-2);
block-size: var(--ds-size-2);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-full);
color: var(--ds-link-mark-ink);
text-decoration: none;
transition:
color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-link--mark > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-link--mark:hover {
--ds-link-mark-ink: var(--ds-text-primary-neutral);
color: var(--ds-link-mark-ink);
border-color: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-hover);
}
.ds-link--mark:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-credential-card__line {
position: relative;
padding-block: var(--ds-space-2);
}
.ds-credential-card__line + .ds-credential-card__line {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-credential-card__copy::after {
content: "";
position: absolute;
inset: 0;
}
.ds-credential-card__ring,
.ds-credential-card__said a,
.ds-credential-card__line:has(.ds-credential-card__copy) .ds-credential-card__eye {
position: relative;
z-index: 1;
}
.ds-credential-card__line:not(:has(.ds-credential-card__copy)) .ds-credential-card__eye::after {
content: "";
position: absolute;
inset: 0;
}
.ds-credential-card__label {
--ds-credential-card-label-face: var(--ds-font-small-face);
--ds-credential-card-label-size: var(--ds-font-small-size);
--ds-credential-card-label-weight: var(--ds-font-small-weight);
--ds-credential-card-label-leading: var(--ds-font-small-leading);
--ds-credential-card-label-tracking: var(--ds-font-small-tracking);
--ds-credential-card-label-ink: var(--ds-text-secondary-neutral);
display: block;
font-family: var(--ds-credential-card-label-face);
font-size: var(--ds-credential-card-label-size);
font-weight: var(--ds-credential-card-label-weight);
line-height: var(--ds-credential-card-label-leading);
letter-spacing: var(--ds-credential-card-label-tracking);
color: var(--ds-credential-card-label-ink);
}
.ds-credential-card__said {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-credential-card__secret,
.ds-credential-card__code {
--ds-credential-card-code-face: var(--ds-font-mono-face);
font-family: var(--ds-credential-card-code-face);
}
.ds-credential-card__ring {
--ds-credential-card-ring-ink: var(--ds-text-tertiary-neutral);
--ds-credential-card-ring-track: var(--ds-border-subtle);
display: inline-grid;
place-items: center;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
border-radius: var(--ds-radius-full);
background: conic-gradient(
var(--ds-credential-card-ring-ink) calc(var(--ds-credential-card-left, 1) * 360deg),
var(--ds-credential-card-ring-track) 0
);
}
.ds-credential-card__seconds {
--ds-credential-card-seconds-face: var(--ds-font-micro-face);
--ds-credential-card-seconds-size: var(--ds-font-micro-size);
--ds-credential-card-seconds-weight: var(--ds-font-micro-weight);
--ds-credential-card-seconds-leading: var(--ds-font-micro-leading);
--ds-credential-card-seconds-tracking: var(--ds-font-micro-tracking);
--ds-credential-card-seconds-ink: var(--ds-text-primary-neutral);
display: grid;
place-items: center;
inline-size: calc(100% - 4px);
block-size: calc(100% - 4px);
border-radius: var(--ds-radius-full);
background-color: var(--ds-surface-1);
font-family: var(--ds-credential-card-seconds-face);
font-size: var(--ds-credential-card-seconds-size);
font-weight: var(--ds-credential-card-seconds-weight);
line-height: var(--ds-credential-card-seconds-leading);
letter-spacing: var(--ds-credential-card-seconds-tracking);
color: var(--ds-credential-card-seconds-ink);
}
.ds-file-card__stand-in {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
block-size: 100%;
--ds-file-card-stand-in-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-file-card-stand-in-ink);
}
.ds-file-card__stand-in > svg {
inline-size: var(--ds-size-3);
block-size: var(--ds-size-3);
vector-effect: non-scaling-stroke;
}
.ds-files__rows {
list-style: none;
margin: 0;
padding: 0;
}
.ds-files__row {
padding: var(--ds-space-3) var(--ds-space-4);
}
.ds-files__row + .ds-files__row {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-files__row .ds-card__media {
display: none;
}
.ds-kbd {
--ds-kbd-face: var(--ds-font-mono-face);
--ds-kbd-size: var(--ds-font-mono-size);
--ds-kbd-tracking: var(--ds-font-mono-tracking);
--ds-kbd-leading: var(--ds-font-mono-leading);
--ds-kbd-weight: var(--ds-font-mono-weight);
--ds-kbd-floor: var(--ds-kbd-leading);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-inline-size: var(--ds-kbd-floor);
min-block-size: var(--ds-kbd-floor);
block-size: var(--ds-kbd-floor);
padding-block: 0;
padding-inline: var(--ds-space-0-5);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-1);
background-color: var(--ds-surface-2);
font-family: var(--ds-kbd-face);
font-size: var(--ds-kbd-size);
font-weight: var(--ds-kbd-weight);
letter-spacing: var(--ds-kbd-tracking);
line-height: 1;
--ds-kbd-ink: var(--ds-text-secondary-neutral);
color: var(--ds-kbd-ink);
text-transform: none;
white-space: nowrap;
}
.ds-logo {
--ds-logo-size: var(--ds-size-2);
display: block;
block-size: var(--ds-logo-size);
inline-size: auto;
fill: var(--ds-logo-word-1);
}
.ds-logo__word-2 { fill: var(--ds-logo-word-2); }
.ds-logo__dot-2 { fill: var(--ds-logo-dot-2); }
.ds-logo__dot-3 { fill: var(--ds-logo-dot-3); }
.ds-logo--symbol .ds-logo__dot-2,
.ds-logo--symbol .ds-logo__dot-3 {
fill: var(--ds-logo-symbol-dot);
}
.ds-logo--image {
inline-size: fit-content;
}
.ds-logo__image {
display: block;
block-size: 100%;
inline-size: auto;
}
.ds-logo__image--dark {
display: none;
}
[data-theme="dark"] .ds-logo__image--light {
display: none;
}
[data-theme="dark"] .ds-logo__image--dark {
display: block;
}
.ds-logo--ink {
background-color: currentColor;
mask: var(--ds-logo-file) center / contain no-repeat;
print-color-adjust: exact;
}
.ds-logo--ink .ds-logo__image {
visibility: hidden;
}
.ds-highlight__hit {
--ds-highlight-hit-weight: var(--ds-bold-weight);
font-weight: var(--ds-highlight-hit-weight);
background: none;
--ds-highlight-hit-ink: var(--ds-text-primary-neutral);
color: var(--ds-highlight-hit-ink);
}
.ds-emblem {
--ds-emblem-ink: currentcolor;
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
color: var(--ds-emblem-ink);
}
.ds-emblem > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-emblem--hue-red { --ds-emblem-ink: var(--ds-hue-red-ink); }
.ds-emblem--hue-orange { --ds-emblem-ink: var(--ds-hue-orange-ink); }
.ds-emblem--hue-amber { --ds-emblem-ink: var(--ds-hue-amber-ink); }
.ds-emblem--hue-yellow { --ds-emblem-ink: var(--ds-hue-yellow-ink); }
.ds-emblem--hue-lime { --ds-emblem-ink: var(--ds-hue-lime-ink); }
.ds-emblem--hue-green { --ds-emblem-ink: var(--ds-hue-green-ink); }
.ds-emblem--hue-teal { --ds-emblem-ink: var(--ds-hue-teal-ink); }
.ds-emblem--hue-cyan { --ds-emblem-ink: var(--ds-hue-cyan-ink); }
.ds-emblem--hue-blue { --ds-emblem-ink: var(--ds-hue-blue-ink); }
.ds-emblem--hue-indigo { --ds-emblem-ink: var(--ds-hue-indigo-ink); }
.ds-emblem--hue-violet { --ds-emblem-ink: var(--ds-hue-violet-ink); }
.ds-emblem--hue-pink { --ds-emblem-ink: var(--ds-hue-pink-ink); }
dialog.ds-bottom-sheet:not([open]) {
display: none;
}
.ds-bottom-sheet {
--ds-bottom-sheet-ceiling: 85dvh;
position: fixed;
inset: 0;
margin: auto auto 0;
inline-size: 100%;
max-inline-size: 100%;
max-block-size: var(--ds-bottom-sheet-ceiling);
display: flex;
flex-direction: column;
padding: 0;
border: 0;
border-start-start-radius: var(--ds-radius-4);
border-start-end-radius: var(--ds-radius-4);
border-block-start: 1px solid var(--ds-border);
background-color: var(--ds-surface-1);
--ds-bottom-sheet-ink: var(--ds-text-primary-neutral);
color: var(--ds-bottom-sheet-ink);
overflow: hidden;
translate: 0 0;
}
.ds-bottom-sheet::backdrop {
background-color: var(--ds-scrim);
}
.ds-bottom-sheet__grip {
display: flex;
align-items: center;
justify-content: center;
flex: none;
min-block-size: var(--ds-size-1);
touch-action: none;
cursor: grab;
}
.ds-bottom-sheet__grip-bar {
display: block;
inline-size: var(--ds-space-8);
block-size: var(--ds-space-1);
border-radius: var(--ds-radius-full);
background-color: var(--ds-surface-3);
}
.ds-bottom-sheet__head {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
flex: none;
padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-4);
}
.ds-bottom-sheet__title {
--ds-bottom-sheet-title-face: var(--ds-font-heading-5-face);
--ds-bottom-sheet-title-size: var(--ds-font-heading-5-size);
--ds-bottom-sheet-title-tracking: var(--ds-font-heading-5-tracking);
--ds-bottom-sheet-title-leading: var(--ds-font-heading-5-leading);
--ds-bottom-sheet-title-weight: var(--ds-font-heading-5-weight);
margin: 0;
font-family: var(--ds-bottom-sheet-title-face);
font-size: var(--ds-bottom-sheet-title-size);
letter-spacing: var(--ds-bottom-sheet-title-tracking);
line-height: var(--ds-bottom-sheet-title-leading);
font-weight: var(--ds-bottom-sheet-title-weight);
}
.ds-bottom-sheet__description {
--ds-bottom-sheet-description-face: var(--ds-font-body-face);
--ds-bottom-sheet-description-size: var(--ds-font-body-size);
--ds-bottom-sheet-description-tracking: var(--ds-font-body-tracking);
--ds-bottom-sheet-description-leading: var(--ds-font-body-leading);
margin: 0;
font-family: var(--ds-bottom-sheet-description-face);
font-size: var(--ds-bottom-sheet-description-size);
letter-spacing: var(--ds-bottom-sheet-description-tracking);
line-height: var(--ds-bottom-sheet-description-leading);
--ds-bottom-sheet-description-ink: var(--ds-text-secondary-neutral);
color: var(--ds-bottom-sheet-description-ink);
}
.ds-bottom-sheet__body {
flex: 1;
min-block-size: 0;
position: relative;
overflow-y: auto;
padding-inline: var(--ds-space-4);
padding-block-end: var(--ds-space-4);
}
.ds-bottom-sheet__foot {
display: flex;
align-items: center;
gap: var(--ds-space-3);
flex: none;
padding: var(--ds-space-4);
border-block-start: 1px solid var(--ds-border-subtle);
padding-block-end: calc(var(--ds-space-4) + env(safe-area-inset-bottom, 0px));
}
.ds-bottom-sheet__foot > * {
flex: 1;
min-inline-size: 0;
}
dialog.ds-palette:not([open]) {
display: none;
}
.ds-palette {
--ds-palette-top: var(--ds-space-16);
--ds-palette-width: 36rem;
--ds-palette-left: auto;
box-sizing: border-box;
position: fixed;
inset: 0;
margin: var(--ds-palette-top) auto auto;
inline-size: min(var(--ds-palette-width), calc(100vw - var(--ds-space-8)));
max-inline-size: calc(100vw - var(--ds-space-8));
max-block-size: calc(100dvh - var(--ds-palette-top) - var(--ds-space-8));
display: flex;
flex-direction: column;
padding: 0;
--ds-palette-edge: 1px;
border: var(--ds-palette-edge) solid var(--ds-border);
border-radius: var(--ds-radius-4);
background-color: var(--ds-surface-1);
--ds-palette-ink: var(--ds-text-primary-neutral);
color: var(--ds-palette-ink);
overflow: hidden;
}
.ds-palette::backdrop {
background-color: var(--ds-scrim);
}
.ds-palette__box {
flex: none;
padding: var(--ds-space-3);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-palette__lines {
flex: 1;
min-block-size: 0;
position: relative;
overflow-y: auto;
margin: 0;
padding: var(--ds-space-2);
list-style: none;
}
.ds-palette__line {
--ds-palette-line-face: var(--ds-font-body-face);
--ds-palette-line-size: var(--ds-font-body-size);
--ds-palette-line-tracking: var(--ds-font-body-tracking);
--ds-palette-line-leading: var(--ds-font-body-leading);
display: flex;
align-items: center;
gap: var(--ds-space-3);
inline-size: 100%;
min-block-size: var(--ds-size-3);
padding-block: 0;
padding-inline: var(--ds-space-3);
border: 0;
border-radius: var(--ds-radius-2);
background: none;
font-family: var(--ds-palette-line-face);
font-size: var(--ds-palette-line-size);
letter-spacing: var(--ds-palette-line-tracking);
line-height: var(--ds-palette-line-leading);
--ds-palette-line-ink: var(--ds-text-primary-neutral);
color: var(--ds-palette-line-ink);
text-align: start;
cursor: pointer;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-palette__line--here {
background-color: var(--ds-surface-hover);
}
.ds-palette__line:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-palette__line:disabled {
--ds-palette-line-ink: var(--ds-text-disabled);
color: var(--ds-palette-line-ink);
cursor: not-allowed;
}
.ds-palette__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-palette__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-palette__label {
flex: 1;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-palette__text {
display: grid;
flex: 1;
min-inline-size: 0;
}
.ds-palette__detail {
--ds-palette-detail-face: var(--ds-font-small-face);
--ds-palette-detail-size: var(--ds-font-small-size);
--ds-palette-detail-leading: var(--ds-font-small-leading);
--ds-palette-detail-tracking: var(--ds-font-small-tracking);
--ds-palette-detail-weight: var(--ds-font-small-weight);
--ds-palette-detail-ink: var(--ds-text-tertiary-neutral);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--ds-palette-detail-face);
font-size: var(--ds-palette-detail-size);
line-height: var(--ds-palette-detail-leading);
letter-spacing: var(--ds-palette-detail-tracking);
font-weight: var(--ds-palette-detail-weight);
color: var(--ds-palette-detail-ink);
}
.ds-palette__keys {
--ds-palette-keys-face: var(--ds-font-mono-face);
--ds-palette-keys-size: var(--ds-font-mono-size);
--ds-palette-keys-tracking: var(--ds-font-mono-tracking);
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
flex: none;
font-family: var(--ds-palette-keys-face);
font-size: var(--ds-palette-keys-size);
letter-spacing: var(--ds-palette-keys-tracking);
--ds-palette-keys-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-palette-keys-ink);
}
.ds-palette__heading {
--ds-palette-heading-face: var(--ds-font-overline-face);
--ds-palette-heading-size: var(--ds-font-overline-size);
--ds-palette-heading-tracking: var(--ds-font-overline-tracking);
--ds-palette-heading-leading: var(--ds-font-overline-leading);
--ds-palette-heading-weight: var(--ds-font-overline-weight);
padding-block: var(--ds-space-3) var(--ds-space-1);
padding-inline: var(--ds-space-3);
font-family: var(--ds-palette-heading-face);
font-size: var(--ds-palette-heading-size);
letter-spacing: var(--ds-palette-heading-tracking);
line-height: var(--ds-palette-heading-leading);
font-weight: var(--ds-palette-heading-weight);
text-transform: uppercase;
--ds-palette-heading-ink: var(--ds-text-secondary-neutral);
color: var(--ds-palette-heading-ink);
}
.ds-palette__rule {
display: block;
block-size: 1px;
margin-block: var(--ds-space-2);
background-color: var(--ds-border-subtle);
}
.ds-palette__empty {
padding: var(--ds-space-4);
}
.ds-palette--anchored {
margin: 0;
inset-block-start: var(--ds-palette-top);
inset-block-end: auto;
inset-inline-start: var(--ds-palette-left);
inset-inline-end: auto;
inline-size: max(var(--ds-palette-width), 24rem);
max-block-size: calc(100dvh - var(--ds-palette-top) - var(--ds-space-8));
}
.ds-palette--anchored .ds-palette__box {
padding: 0;
border-block-end: 0;
}
.ds-palette--anchored {
border-radius: var(--ds-radius-2);
}
.ds-palette--anchored .ds-field__frame {
border-width: 0;
border-radius: 0;
background-color: transparent;
}
.ds-palette--anchored .ds-field__frame {
min-block-size: calc(var(--ds-size-3) - 2 * var(--ds-palette-edge));
}
.ds-palette--anchored .ds-palette__line,
.ds-palette--anchored .ds-palette__heading {
padding-inline: calc(var(--ds-space-3) - var(--ds-space-2));
}
.ds-palette--anchored .ds-palette__line {
gap: var(--ds-space-2);
}
dialog.ds-palette--anchored .ds-field__frame:hover {
background-image: none;
}
.ds-palette--anchored .ds-palette__lines,
.ds-palette--anchored .ds-palette__empty {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-collapsible__row {
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.ds-collapsible__row > * {
flex: 1;
min-inline-size: 0;
}
.ds-collapsible__count {
display: flex;
flex: none;
justify-content: center;
min-inline-size: var(--ds-size-1);
}
.ds-collapsible__end {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
}
.ds-collapsible__head {
--ds-collapsible-head-weight: var(--ds-emphasis-weight);
--ds-collapsible-head-face: var(--ds-font-body-face);
display: flex;
align-items: center;
gap: var(--ds-space-3);
inline-size: 100%;
min-block-size: var(--ds-collapsible-tier);
padding-block: var(--ds-space-1);
border: 0;
background: none;
font-family: var(--ds-collapsible-head-face);
font-weight: var(--ds-collapsible-head-weight);
--ds-collapsible-head-ink: var(--ds-text-primary-neutral);
color: var(--ds-collapsible-head-ink);
text-align: start;
cursor: pointer;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-collapsible--xsmall { --ds-collapsible-tier: var(--ds-size-1); }
.ds-collapsible--small { --ds-collapsible-tier: var(--ds-size-2); }
.ds-collapsible--medium { --ds-collapsible-tier: var(--ds-size-3); }
.ds-collapsible--large { --ds-collapsible-tier: var(--ds-size-4); }
.ds-collapsible--xlarge { --ds-collapsible-tier: var(--ds-size-5); }
.ds-collapsible--xxlarge { --ds-collapsible-tier: var(--ds-size-6); }
.ds-collapsible--xsmall .ds-collapsible__head {
--ds-collapsible-head-face: var(--ds-font-small-face);
--ds-collapsible-head-tracking: var(--ds-font-small-tracking);
--ds-collapsible-head-size: var(--ds-font-small-size);
--ds-collapsible-head-leading: var(--ds-font-small-leading);
font-family: var(--ds-collapsible-head-face);
font-size: var(--ds-collapsible-head-size);
letter-spacing: var(--ds-collapsible-head-tracking);
line-height: var(--ds-collapsible-head-leading);
padding-block: 0;
}
.ds-collapsible--small .ds-collapsible__head {
--ds-collapsible-head-face: var(--ds-font-label-face);
--ds-collapsible-head-tracking: var(--ds-font-label-tracking);
--ds-collapsible-head-size: var(--ds-font-label-size);
--ds-collapsible-head-leading: var(--ds-font-label-leading);
font-family: var(--ds-collapsible-head-face);
font-size: var(--ds-collapsible-head-size);
letter-spacing: var(--ds-collapsible-head-tracking);
line-height: var(--ds-collapsible-head-leading); }
.ds-collapsible--medium .ds-collapsible__head {
--ds-collapsible-head-face: var(--ds-font-body-face);
--ds-collapsible-head-tracking: var(--ds-font-body-tracking);
--ds-collapsible-head-size: var(--ds-font-body-size);
--ds-collapsible-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-collapsible-head-face);
font-size: var(--ds-collapsible-head-size);
letter-spacing: var(--ds-collapsible-head-tracking);
line-height: var(--ds-collapsible-head-leading); }
.ds-collapsible--large .ds-collapsible__head {
--ds-collapsible-head-face: var(--ds-font-body-face);
--ds-collapsible-head-tracking: var(--ds-font-body-tracking);
--ds-collapsible-head-size: var(--ds-font-body-size);
--ds-collapsible-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-collapsible-head-face);
font-size: var(--ds-collapsible-head-size);
letter-spacing: var(--ds-collapsible-head-tracking);
line-height: var(--ds-collapsible-head-leading); }
.ds-collapsible--xlarge .ds-collapsible__head {
--ds-collapsible-head-face: var(--ds-font-body-face);
--ds-collapsible-head-tracking: var(--ds-font-body-tracking);
--ds-collapsible-head-size: var(--ds-font-body-size);
--ds-collapsible-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-collapsible-head-face);
font-size: var(--ds-collapsible-head-size);
letter-spacing: var(--ds-collapsible-head-tracking);
line-height: var(--ds-collapsible-head-leading); }
.ds-collapsible--xxlarge .ds-collapsible__head {
--ds-collapsible-head-face: var(--ds-font-body-face);
--ds-collapsible-head-tracking: var(--ds-font-body-tracking);
--ds-collapsible-head-size: var(--ds-font-body-size);
--ds-collapsible-head-leading: var(--ds-font-body-leading);
font-family: var(--ds-collapsible-head-face);
font-size: var(--ds-collapsible-head-size);
letter-spacing: var(--ds-collapsible-head-tracking);
line-height: var(--ds-collapsible-head-leading); }
.ds-collapsible__head:hover:not(:disabled) {
--ds-collapsible-head-ink: var(--ds-text-primary-neutral);
color: var(--ds-collapsible-head-ink);
}
.ds-collapsible__heading {
margin: 0;
font: inherit;
}
.ds-collapsible__head:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
border-radius: var(--ds-radius-2);
}
.ds-collapsible__head:disabled {
--ds-collapsible-head-ink: var(--ds-text-disabled);
color: var(--ds-collapsible-head-ink);
cursor: not-allowed;
}
.ds-collapsible__text {
display: flex;
flex: 1;
flex-direction: column;
min-inline-size: 0;
}
.ds-collapsible__label {
min-inline-size: 0;
}
.ds-collapsible__summary {
--ds-collapsible-summary-face: var(--ds-font-small-face);
--ds-collapsible-summary-tracking: var(--ds-font-small-tracking);
--ds-collapsible-summary-size: var(--ds-font-small-size);
--ds-collapsible-summary-leading: var(--ds-font-small-leading);
font-family: var(--ds-collapsible-summary-face);
font-size: var(--ds-collapsible-summary-size);
letter-spacing: var(--ds-collapsible-summary-tracking);
line-height: var(--ds-collapsible-summary-leading);
font-weight: var(--ds-font-small-weight);
--ds-collapsible-summary-ink: var(--ds-text-secondary-neutral);
color: var(--ds-collapsible-summary-ink);
}
.ds-collapsible__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-collapsible__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-collapsible__chevron {
--ds-collapsible-chevron-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-collapsible-chevron-ink);
transition: transform var(--ds-duration-fast) var(--ds-ease);
}
.ds-collapsible__head[aria-expanded="true"] .ds-collapsible__chevron {
transform: rotate(180deg);
}
.ds-collapsible__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--ds-duration) var(--ds-ease-out);
}
.ds-collapsible__panel[data-open="true"] {
grid-template-rows: 1fr;
}
.ds-collapsible__inner {
overflow: hidden;
}
.ds-collapsible__content {
padding-block: var(--ds-space-3) var(--ds-space-5);
}
.ds-accordion {
display: flex;
flex-direction: column;
}
.ds-accordion__item {
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-accordion__item:last-child {
border-block-end: 0;
}
.ds-accordion__all {
display: flex;
justify-content: flex-end;
padding-block-end: var(--ds-space-2);
}
.ds-two-line {
display: flex;
align-items: center;
gap: var(--ds-space-3);
min-inline-size: 0;
}
.ds-two-line__start,
.ds-two-line__end {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
}
.ds-two-line__text {
display: flex;
flex: 1;
flex-direction: column;
min-inline-size: 0;
}
.ds-two-line__title {
--ds-two-line-title-weight: var(--ds-emphasis-weight);
--ds-two-line-title-face: var(--ds-font-label-face);
--ds-two-line-title-size: var(--ds-font-label-size);
--ds-two-line-title-leading: var(--ds-font-label-leading);
--ds-two-line-title-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-two-line-title-face);
font-size: var(--ds-two-line-title-size);
line-height: var(--ds-two-line-title-leading);
letter-spacing: var(--ds-two-line-title-tracking);
font-weight: var(--ds-two-line-title-weight);
--ds-two-line-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-two-line-title-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-two-line__sub {
--ds-two-line-sub-face: var(--ds-font-small-face);
--ds-two-line-sub-size: var(--ds-font-small-size);
--ds-two-line-sub-weight: var(--ds-font-small-weight);
--ds-two-line-sub-leading: var(--ds-font-small-leading);
--ds-two-line-sub-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-two-line-sub-face);
font-size: var(--ds-two-line-sub-size);
font-weight: var(--ds-two-line-sub-weight);
line-height: var(--ds-two-line-sub-leading);
letter-spacing: var(--ds-two-line-sub-tracking);
--ds-two-line-sub-ink: var(--ds-text-secondary-neutral);
color: var(--ds-two-line-sub-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-two-line__link {
text-decoration: none;
}
.ds-two-line__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-list {
display: block;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
--ds-list-pad-block: var(--ds-space-2);
--ds-list-pad-inline: var(--ds-space-4);
}
.ds-list--bare {
background-color: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.ds-list__rows {
list-style: none;
margin: 0;
padding: 0;
}
.ds-list__row {
padding: var(--ds-list-pad-block) var(--ds-list-pad-inline);
transition:
background-color var(--ds-duration) var(--ds-ease),
box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-list--lines-rows .ds-list__row + .ds-list__row {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-list__row {
position: relative;
display: flex;
align-items: center;
gap: var(--ds-space-3);
}
.ds-list__select {
display: flex;
flex: none;
align-items: center;
}
.ds-list__row--selected,
.ds-list__row--selected:hover {
background-color: var(--ds-surface-active);
}
.ds-list__row--current,
.ds-list__row--current:hover {
background-color: var(--ds-surface-active);
--ds-list-row-hue: var(--ds-brand);
box-shadow: inset var(--ds-space-1) 0 0 0 var(--ds-list-row-hue);
}
.ds-list__row > .ds-two-line {
flex: 1;
min-inline-size: 0;
}
.ds-list__row--done .ds-two-line__title {
--ds-list-done-ink: var(--ds-text-secondary-neutral);
color: var(--ds-list-done-ink);
text-decoration: line-through;
}
.ds-list__row--dragging,
.ds-list__row.ds-sortable__item--dragging {
opacity: 0.4;
}
.ds-list__row--link {
cursor: pointer;
}
.ds-list__row:hover {
background-color: var(--ds-surface-hover);
}
.ds-list__row:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-list__group + .ds-list__group {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-list__group .ds-collapsible__row {
padding-inline: var(--ds-list-pad-inline);
}
.ds-list__group .ds-list__rows,
.ds-list__group .ds-list__add {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-list__add {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-list-pad-block) var(--ds-list-pad-inline);
--ds-list-add-ink: var(--ds-text-secondary-neutral);
color: var(--ds-list-add-ink);
}
.ds-list__add-mark {
display: inline-flex;
flex: none;
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
}
.ds-list__pick {
display: inline-flex;
flex: none;
margin-inline-start: auto;
}
.ds-list--lines-rows .ds-list__rows + .ds-list__add {
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-list__state {
padding: var(--ds-list-pad-inline);
}
.ds-list__foot {
padding: var(--ds-space-3) var(--ds-space-4);
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-list__row[data-hue] {
box-shadow: inset var(--ds-space-1) 0 0 0 var(--ds-list-row-hue);
}
.ds-list__row[data-hue="red"] { --ds-list-row-hue: var(--ds-hue-red-edge); }
.ds-list__row[data-hue="orange"] { --ds-list-row-hue: var(--ds-hue-orange-edge); }
.ds-list__row[data-hue="amber"] { --ds-list-row-hue: var(--ds-hue-amber-edge); }
.ds-list__row[data-hue="yellow"] { --ds-list-row-hue: var(--ds-hue-yellow-edge); }
.ds-list__row[data-hue="lime"] { --ds-list-row-hue: var(--ds-hue-lime-edge); }
.ds-list__row[data-hue="green"] { --ds-list-row-hue: var(--ds-hue-green-edge); }
.ds-list__row[data-hue="teal"] { --ds-list-row-hue: var(--ds-hue-teal-edge); }
.ds-list__row[data-hue="cyan"] { --ds-list-row-hue: var(--ds-hue-cyan-edge); }
.ds-list__row[data-hue="blue"] { --ds-list-row-hue: var(--ds-hue-blue-edge); }
.ds-list__row[data-hue="indigo"] { --ds-list-row-hue: var(--ds-hue-indigo-edge); }
.ds-list__row[data-hue="violet"] { --ds-list-row-hue: var(--ds-hue-violet-edge); }
.ds-list__row[data-hue="pink"] { --ds-list-row-hue: var(--ds-hue-pink-edge); }
.ds-list__grip {
touch-action: none;
position: relative;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
--ds-list-grip-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-list-grip-ink);
cursor: grab;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-list__grip:active {
cursor: grabbing;
}
.ds-list__grip:hover,
.ds-list__grip:focus-visible {
--ds-list-grip-ink: var(--ds-text-primary-neutral);
color: var(--ds-list-grip-ink);
}
.ds-list__row--over::before,
.ds-list__row.ds-sortable__item--over::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: -1px;
block-size: 0;
border-block-start: 2px solid var(--ds-border-active);
}
.ds-list__row--over-end::before,
.ds-list__row.ds-sortable__item--over-end::before {
inset-block-start: auto;
inset-block-end: -1px;
}
.ds-list__caret {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
font: inherit;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
--ds-list-caret-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-list-caret-ink);
cursor: pointer;
transition:
color var(--ds-duration) var(--ds-ease),
rotate var(--ds-duration) var(--ds-ease);
}
.ds-list__caret:hover,
.ds-list__caret:focus-visible {
--ds-list-caret-ink: var(--ds-text-primary-neutral);
color: var(--ds-list-caret-ink);
}
.ds-list__caret[aria-expanded="true"] {
rotate: 90deg;
}
.ds-list__detail {
padding: 0 var(--ds-list-pad-inline) var(--ds-list-pad-block);
}
.ds-project-card {
--ds-project-card-pad: var(--ds-space-4);
position: relative;
display: flex;
flex-direction: column;
min-inline-size: 0;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
}
.ds-project-card__row {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-2) var(--ds-project-card-pad) 0;
}
.ds-project-card__row > * {
flex: 1;
min-inline-size: 0;
}
.ds-project-card__heading {
margin: 0;
font: inherit;
}
.ds-project-card__head {
--ds-project-card-head-face: var(--ds-font-body-face);
--ds-project-card-head-size: var(--ds-font-body-size);
--ds-project-card-head-leading: var(--ds-font-body-leading);
--ds-project-card-head-tracking: var(--ds-font-body-tracking);
--ds-project-card-head-weight: var(--ds-emphasis-weight);
--ds-project-card-tier: var(--ds-size-3);
display: flex;
align-items: center;
gap: var(--ds-space-3);
inline-size: 100%;
min-block-size: var(--ds-project-card-tier);
padding: var(--ds-space-1) 0;
border: 0;
background: none;
font-family: var(--ds-project-card-head-face);
font-size: var(--ds-project-card-head-size);
line-height: var(--ds-project-card-head-leading);
letter-spacing: var(--ds-project-card-head-tracking);
font-weight: var(--ds-project-card-head-weight);
--ds-project-card-head-ink: var(--ds-text-primary-neutral);
color: var(--ds-project-card-head-ink);
text-align: start;
cursor: pointer;
}
.ds-project-card__head:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-project-card__title {
flex: 1;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-project-card__count {
display: flex;
flex: none;
justify-content: center;
min-inline-size: var(--ds-size-1);
}
.ds-project-card__chevron {
display: flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
--ds-project-card-chevron-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-project-card-chevron-ink);
transition: transform var(--ds-duration-fast) var(--ds-ease);
}
.ds-project-card__chevron > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-project-card__head[aria-expanded="true"] .ds-project-card__chevron {
transform: rotate(180deg);
}
.ds-project-card__end {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
}
.ds-project-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
padding: 0 var(--ds-project-card-pad);
}
.ds-project-card__progress {
display: block;
padding: var(--ds-space-2) var(--ds-project-card-pad) var(--ds-space-3);
}
.ds-project-card__row:last-of-type {
padding-block-end: var(--ds-space-2);
}
.ds-project-card__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--ds-duration) var(--ds-ease-out);
}
.ds-project-card__panel[data-open="true"] {
grid-template-rows: 1fr;
}
.ds-project-card__inner {
overflow: hidden;
}
.ds-project-card__content {
display: block;
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-roadmap {
--ds-roadmap-gap: var(--ds-space-6);
--ds-roadmap-column: 16rem;
--ds-roadmap-pad: var(--ds-space-4);
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.ds-roadmap--sheet {
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
}
.ds-roadmap__header {
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-roadmap-pad) var(--ds-roadmap-pad) 0;
}
.ds-roadmap__name {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-roadmap__name-title {
--ds-roadmap-name-face: var(--ds-font-body-face);
--ds-roadmap-name-size: var(--ds-font-body-size);
--ds-roadmap-name-leading: var(--ds-font-body-leading);
--ds-roadmap-name-tracking: var(--ds-font-body-tracking);
--ds-roadmap-name-weight: var(--ds-emphasis-weight);
--ds-roadmap-name-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-roadmap-name-face);
font-size: var(--ds-roadmap-name-size);
line-height: var(--ds-roadmap-name-leading);
letter-spacing: var(--ds-roadmap-name-tracking);
font-weight: var(--ds-roadmap-name-weight);
color: var(--ds-roadmap-name-ink);
}
.ds-roadmap__description {
--ds-roadmap-description-face: var(--ds-font-small-face);
--ds-roadmap-description-size: var(--ds-font-small-size);
--ds-roadmap-description-leading: var(--ds-font-small-leading);
--ds-roadmap-description-tracking: var(--ds-font-small-tracking);
--ds-roadmap-description-weight: var(--ds-font-small-weight);
--ds-roadmap-description-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-roadmap-description-face);
font-size: var(--ds-roadmap-description-size);
line-height: var(--ds-roadmap-description-leading);
letter-spacing: var(--ds-roadmap-description-tracking);
font-weight: var(--ds-roadmap-description-weight);
color: var(--ds-roadmap-description-ink);
}
.ds-roadmap__end {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
}
.ds-roadmap__fields {
display: block;
padding: var(--ds-space-4) var(--ds-roadmap-pad) 0;
}
.ds-roadmap__phases {
position: relative;
overflow-x: auto;
padding-block: var(--ds-space-5);
}
.ds-roadmap__phases {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(var(--ds-roadmap-column), 1fr);
gap: var(--ds-roadmap-gap);
margin: 0;
padding: var(--ds-roadmap-pad);
list-style: none;
}
.ds-roadmap__phase {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
min-inline-size: 0;
}
.ds-roadmap__phase[data-over="true"] {
outline: 2px solid var(--ds-border-active);
outline-offset: var(--ds-space-2);
border-radius: var(--ds-radius-2);
}
.ds-roadmap__stop {
position: relative;
display: flex;
align-items: center;
block-size: var(--ds-size-2);
}
.ds-roadmap__stop::before,
.ds-roadmap__stop::after {
content: "";
position: absolute;
inset-block-start: 50%;
block-size: 2px;
transform: translateY(-50%);
--ds-roadmap-line: var(--ds-border);
background-color: var(--ds-roadmap-line);
}
.ds-roadmap__stop::before {
inset-inline: calc(var(--ds-roadmap-gap) * -1) 100%;
}
.ds-roadmap__stop::after {
inset-inline: var(--ds-size-2) calc(var(--ds-roadmap-gap) * -1);
}
.ds-roadmap__phase:first-child .ds-roadmap__stop::before,
.ds-roadmap__phase:last-child .ds-roadmap__stop::after {
display: none;
}
.ds-roadmap__phase[data-state="done"] .ds-roadmap__stop::before,
.ds-roadmap__phase[data-state="done"] .ds-roadmap__stop::after,
.ds-roadmap__phase[data-state="current"] .ds-roadmap__stop::before {
--ds-roadmap-line: var(--ds-success);
}
.ds-roadmap__node {
--ds-roadmap-node-face: var(--ds-font-label-face);
--ds-roadmap-node-size: var(--ds-font-label-size);
--ds-roadmap-node-leading: var(--ds-font-label-leading);
--ds-roadmap-node-tracking: var(--ds-font-label-tracking);
--ds-roadmap-node-weight: var(--ds-emphasis-weight);
--ds-roadmap-node-ink: var(--ds-text-secondary-neutral);
--ds-roadmap-node-edge: var(--ds-border-strong);
--ds-roadmap-node-fill: var(--ds-surface-1);
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-2);
block-size: var(--ds-size-2);
border-radius: var(--ds-radius-full);
border: 2px solid var(--ds-roadmap-node-edge);
background-color: var(--ds-roadmap-node-fill);
color: var(--ds-roadmap-node-ink);
font-family: var(--ds-roadmap-node-face);
font-size: var(--ds-roadmap-node-size);
line-height: var(--ds-roadmap-node-leading);
letter-spacing: var(--ds-roadmap-node-tracking);
font-weight: var(--ds-roadmap-node-weight);
font-variant-numeric: tabular-nums;
}
.ds-roadmap__node > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-roadmap__phase[data-state="done"] .ds-roadmap__node {
--ds-roadmap-node-edge: var(--ds-success);
--ds-roadmap-node-fill: var(--ds-success);
--ds-roadmap-node-ink: var(--ds-on-success);
}
.ds-roadmap__phase[data-state="current"] .ds-roadmap__node {
--ds-roadmap-node-edge: var(--ds-text-primary-neutral);
--ds-roadmap-node-ink: var(--ds-text-primary-neutral);
box-shadow:
0 0 0 4px var(--ds-surface-1),
0 0 0 5px var(--ds-border);
}
.ds-roadmap__head {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-roadmap__title {
--ds-roadmap-title-face: var(--ds-font-body-face);
--ds-roadmap-title-size: var(--ds-font-body-size);
--ds-roadmap-title-leading: var(--ds-font-body-leading);
--ds-roadmap-title-tracking: var(--ds-font-body-tracking);
--ds-roadmap-title-weight: var(--ds-emphasis-weight);
--ds-roadmap-title-ink: var(--ds-text-primary-neutral);
margin: 0;
font-family: var(--ds-roadmap-title-face);
font-size: var(--ds-roadmap-title-size);
line-height: var(--ds-roadmap-title-leading);
letter-spacing: var(--ds-roadmap-title-tracking);
font-weight: var(--ds-roadmap-title-weight);
color: var(--ds-roadmap-title-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-roadmap__meta {
--ds-roadmap-meta-face: var(--ds-font-small-face);
--ds-roadmap-meta-size: var(--ds-font-small-size);
--ds-roadmap-meta-leading: var(--ds-font-small-leading);
--ds-roadmap-meta-tracking: var(--ds-font-small-tracking);
--ds-roadmap-meta-weight: var(--ds-font-small-weight);
--ds-roadmap-meta-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-roadmap-meta-face);
font-size: var(--ds-roadmap-meta-size);
line-height: var(--ds-roadmap-meta-leading);
letter-spacing: var(--ds-roadmap-meta-tracking);
font-weight: var(--ds-roadmap-meta-weight);
color: var(--ds-roadmap-meta-ink);
}
.ds-roadmap__phase[data-state="upcoming"] .ds-roadmap__title {
--ds-roadmap-title-ink: var(--ds-text-secondary-neutral);
}
.ds-roadmap__progress {
display: block;
}
.ds-roadmap__items {
display: block;
margin-inline: calc(var(--ds-list-pad-inline, var(--ds-space-4)) * -1);
}
.ds-tag-field .ds-field__frame {
flex-wrap: wrap;
row-gap: var(--ds-space-2);
--ds-tag-field-tier: var(--ds-size-3);
padding-block: calc((var(--ds-tag-field-tier) - var(--ds-size-1)) / 2 - 1px);
}
.ds-tag-field.ds-field--xsmall .ds-field__frame { --ds-tag-field-tier: var(--ds-size-1); }
.ds-tag-field.ds-field--small .ds-field__frame { --ds-tag-field-tier: var(--ds-size-2); }
.ds-tag-field.ds-field--large .ds-field__frame { --ds-tag-field-tier: var(--ds-size-4); }
.ds-tag-field.ds-field--xlarge .ds-field__frame { --ds-tag-field-tier: var(--ds-size-5); }
.ds-tag-field.ds-field--xxlarge .ds-field__frame { --ds-tag-field-tier: var(--ds-size-6); }
.ds-tag-field__pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
margin: 0;
padding: 0;
list-style: none;
min-inline-size: 0;
}
.ds-tag-field__pills:empty {
display: none;
}
.ds-tag-field__pill {
display: inline-flex;
cursor: grab;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.ds-tag-field__pill--carried,
.ds-tag-field__pill.ds-sortable__item--dragging {
opacity: 0.5;
}
.ds-tag-field__pill--over,
.ds-tag-field__pill.ds-sortable__item--over {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-full);
}
.ds-tag-field.ds-field--bare .ds-field__frame {
padding-inline: 0;
}
.ds-tag-field__input {
flex: 1 1 8ch;
min-inline-size: 8ch;
align-self: center;
block-size: var(--ds-size-1);
}
.ds-combobox .ds-field__frame {
flex-wrap: wrap;
row-gap: var(--ds-space-2);
}
.ds-combobox.ds-field--multiline .ds-field__frame {
--ds-combobox-tier: var(--ds-size-3);
padding-block: calc((var(--ds-combobox-tier) - var(--ds-size-1)) / 2 - 1px);
}
.ds-combobox.ds-field--small.ds-field--multiline .ds-field__frame { --ds-combobox-tier: var(--ds-size-2); }
.ds-combobox.ds-field--large.ds-field--multiline .ds-field__frame { --ds-combobox-tier: var(--ds-size-4); }
.ds-combobox__pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
margin: 0;
padding: 0;
list-style: none;
min-inline-size: 0;
}
.ds-combobox__pill {
display: inline-flex;
}
.ds-combobox__input {
flex: 1 1 8ch;
min-inline-size: 8ch;
align-self: center;
}
.ds-combobox.ds-field--multiline .ds-combobox__input {
block-size: var(--ds-size-1);
}
.ds-combobox__arrow {
--ds-combobox-arrow-ink: var(--ds-text-tertiary-neutral);
display: inline-flex;
flex: none;
align-self: center;
inline-size: 1lh;
block-size: 1lh;
color: var(--ds-combobox-arrow-ink);
pointer-events: none;
}
.ds-combobox__arrow > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-editor {
container-type: inline-size;
container-name: ds-editor;
}
.ds-editor__sheet {
display: flex;
flex-direction: column;
min-inline-size: 0;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
}
.ds-field--invalid .ds-editor__sheet {
border-color: var(--ds-danger);
}
.ds-editor__bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ds-space-1);
padding: var(--ds-space-2) var(--ds-space-3);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-editor__group {
display: inline-flex;
gap: var(--ds-space-1);
}
.ds-editor__rule {
display: inline-block;
inline-size: 1px;
block-size: var(--ds-size-1);
background-color: var(--ds-border-subtle);
margin-inline: var(--ds-space-1);
}
.ds-editor__space {
flex: 1;
}
.ds-editor__type-word {
display: inline-block;
min-inline-size: 6ch;
text-align: start;
}
.ds-editor__main {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--ds-editor-rail-width);
--ds-editor-rail-width: 15.5rem;
}
.ds-editor__main:has(> .ds-editor__rail[hidden]) {
grid-template-columns: minmax(0, 1fr);
}
.ds-editor__body {
--ds-editor-body-gutter: var(--ds-space-6);
--ds-editor-body-min: 12rem;
display: block;
min-inline-size: 0;
min-block-size: var(--ds-editor-body-min);
max-inline-size: none;
padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-6) calc(var(--ds-editor-body-gutter) + var(--ds-space-4));
outline: none;
cursor: text;
}
.ds-editor__body:focus-visible {
outline: none;
}
.ds-editor__sheet:has(.ds-editor__body:focus-visible) {
border-color: var(--ds-focus);
}
.ds-editor__body[contenteditable="false"] {
cursor: default;
}
.ds-editor__body[data-placeholder] > p:only-child:has(> br:only-child)::before {
--ds-editor-placeholder-ink: var(--ds-text-tertiary-neutral);
content: attr(data-placeholder);
color: var(--ds-editor-placeholder-ink);
pointer-events: none;
}
.ds-editor__body figcaption[data-placeholder]:has(> br:only-child)::before {
--ds-editor-placeholder-ink: var(--ds-text-tertiary-neutral);
content: attr(data-placeholder);
color: var(--ds-editor-placeholder-ink);
pointer-events: none;
}
.ds-editor__figure-shot {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2);
}
.ds-editor__figure-shot img {
max-block-size: 5rem;
max-inline-size: 100%;
border-radius: var(--ds-radius-2);
}
.ds-editor__figure-acts {
display: flex;
gap: var(--ds-space-2);
}
.ds-editor__body figure[data-here] {
outline: 2px solid var(--ds-focus);
outline-offset: 3px;
border-radius: var(--ds-radius-1);
}
.ds-editor__body figure img {
-webkit-user-drag: none;
}
.ds-editor__body > [data-dragging] {
opacity: 0.4;
}
.ds-editor__body > [data-over="before"] {
box-shadow: 0 -2px 0 0 var(--ds-focus);
}
.ds-editor__body > [data-over="after"] {
box-shadow: 0 2px 0 0 var(--ds-focus);
}
.ds-editor__handle {
--ds-editor-handle-ink: var(--ds-text-tertiary-neutral);
position: absolute;
display: flex;
gap: 0;
transform: translateX(calc(-100% - var(--ds-space-1)));
color: var(--ds-editor-handle-ink);
}
.ds-editor__handle[hidden] {
display: none;
}
.ds-editor__handle-add,
.ds-editor__handle-grip {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
padding: 0;
border: 0;
border-radius: var(--ds-radius-1);
background: none;
color: inherit;
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-editor__handle-grip {
cursor: grab;
touch-action: none;
}
.ds-editor__handle-add:hover,
.ds-editor__handle-grip:hover {
--ds-editor-handle-hover-ink: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-hover);
color: var(--ds-editor-handle-hover-ink);
}
.ds-editor__handle-add:focus-visible,
.ds-editor__handle-grip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
.ds-editor__handle svg {
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
}
.ds-editor__rail {
display: grid;
align-content: start;
gap: var(--ds-space-6);
padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-6);
border-inline-start: 1px solid var(--ds-border-subtle);
min-inline-size: 0;
}
.ds-editor__rail[hidden] {
display: none;
}
.ds-editor__rail-title {
--ds-editor-rail-title-face: var(--ds-font-overline-face);
--ds-editor-rail-title-size: var(--ds-font-overline-size);
--ds-editor-rail-title-leading: var(--ds-font-overline-leading);
--ds-editor-rail-title-tracking: var(--ds-font-overline-tracking);
--ds-editor-rail-title-weight: var(--ds-font-overline-weight);
--ds-editor-rail-title-ink: var(--ds-text-tertiary-neutral);
margin: 0 0 var(--ds-space-3);
font-family: var(--ds-editor-rail-title-face);
font-size: var(--ds-editor-rail-title-size);
line-height: var(--ds-editor-rail-title-leading);
letter-spacing: var(--ds-editor-rail-title-tracking);
font-weight: var(--ds-editor-rail-title-weight);
text-transform: uppercase;
color: var(--ds-editor-rail-title-ink);
}
.ds-editor__tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-space-2);
}
.ds-editor__tile {
--ds-editor-tile-face: var(--ds-font-small-face);
--ds-editor-tile-size: var(--ds-font-small-size);
--ds-editor-tile-leading: var(--ds-font-small-leading);
--ds-editor-tile-tracking: var(--ds-font-small-tracking);
--ds-editor-tile-weight: var(--ds-font-small-weight);
--ds-editor-tile-ink: var(--ds-text-primary-neutral);
--ds-editor-tile-mark: var(--ds-text-secondary-neutral);
display: grid;
justify-items: start;
gap: var(--ds-space-2);
padding: var(--ds-space-3);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-2);
background: none;
font-family: var(--ds-editor-tile-face);
font-size: var(--ds-editor-tile-size);
line-height: var(--ds-editor-tile-leading);
letter-spacing: var(--ds-editor-tile-tracking);
font-weight: var(--ds-editor-tile-weight);
color: var(--ds-editor-tile-ink);
text-align: start;
cursor: pointer;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-editor__tile:hover {
background-color: var(--ds-surface-hover);
}
.ds-editor__tile:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
.ds-editor__tile > svg {
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
color: var(--ds-editor-tile-mark);
}
.ds-editor__outline {
display: grid;
gap: var(--ds-space-1);
}
.ds-editor__outline-line {
--ds-editor-outline-face: var(--ds-font-small-face);
--ds-editor-outline-size: var(--ds-font-small-size);
--ds-editor-outline-leading: var(--ds-font-small-leading);
--ds-editor-outline-tracking: var(--ds-font-small-tracking);
--ds-editor-outline-weight: var(--ds-font-small-weight);
--ds-editor-outline-ink: var(--ds-text-secondary-neutral);
--ds-editor-outline-mark: var(--ds-text-tertiary-neutral);
--ds-editor-outline-tier: var(--ds-size-1);
display: flex;
align-items: center;
gap: var(--ds-space-2);
min-block-size: var(--ds-editor-outline-tier);
padding: 0 var(--ds-space-2);
border: 0;
border-radius: var(--ds-radius-1);
background: none;
font-family: var(--ds-editor-outline-face);
font-size: var(--ds-editor-outline-size);
line-height: var(--ds-editor-outline-leading);
letter-spacing: var(--ds-editor-outline-tracking);
font-weight: var(--ds-editor-outline-weight);
color: var(--ds-editor-outline-ink);
text-align: start;
cursor: pointer;
min-inline-size: 0;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-editor__outline-line:hover {
background-color: var(--ds-surface-hover);
}
.ds-editor__outline-line:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
.ds-editor__outline-line[aria-current="true"] {
--ds-editor-outline-current-ink: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-2);
color: var(--ds-editor-outline-current-ink);
}
.ds-editor__outline-line > svg {
flex: none;
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
color: var(--ds-editor-outline-mark);
}
.ds-editor__outline-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-editor__rail-hint {
--ds-editor-rail-hint-face: var(--ds-font-small-face);
--ds-editor-rail-hint-size: var(--ds-font-small-size);
--ds-editor-rail-hint-leading: var(--ds-font-small-leading);
--ds-editor-rail-hint-tracking: var(--ds-font-small-tracking);
--ds-editor-rail-hint-weight: var(--ds-font-small-weight);
--ds-editor-rail-hint-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-editor-rail-hint-face);
font-size: var(--ds-editor-rail-hint-size);
line-height: var(--ds-editor-rail-hint-leading);
letter-spacing: var(--ds-editor-rail-hint-tracking);
font-weight: var(--ds-editor-rail-hint-weight);
color: var(--ds-editor-rail-hint-ink);
}
.ds-editor__menu {
min-inline-size: 16rem;
}
.ds-editor__pick {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
padding: var(--ds-space-2);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-editor__pick-note {
--ds-editor-note-size: var(--ds-font-label-size);
--ds-editor-note-leading: var(--ds-font-label-leading);
--ds-editor-note-ink: var(--ds-danger-ink);
margin: 0;
font-size: var(--ds-editor-note-size);
line-height: var(--ds-editor-note-leading);
color: var(--ds-editor-note-ink);
}
.ds-editor__pick [data-busy] {
cursor: progress;
}
.ds-editor__url {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-2);
}
.ds-editor__url-field {
--ds-editor-url-face: var(--ds-font-body-face);
--ds-editor-url-size: var(--ds-font-body-size);
--ds-editor-url-leading: var(--ds-font-body-leading);
--ds-editor-url-tracking: var(--ds-font-body-tracking);
--ds-editor-url-weight: var(--ds-font-body-weight);
--ds-editor-url-tier: var(--ds-size-2);
--ds-editor-url-ink: var(--ds-text-primary-neutral);
flex: 1;
min-inline-size: 12rem;
min-block-size: var(--ds-editor-url-tier);
padding: 0 var(--ds-space-3);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-0);
font-family: var(--ds-editor-url-face);
font-size: var(--ds-editor-url-size);
line-height: var(--ds-editor-url-leading);
letter-spacing: var(--ds-editor-url-tracking);
font-weight: var(--ds-editor-url-weight);
color: var(--ds-editor-url-ink);
}
.ds-editor__url-field:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
}
@container ds-editor (width <= 40rem) {
.ds-editor__main {
grid-template-columns: minmax(0, 1fr);
}
.ds-editor__rail {
display: none;
}
}
.ds-editor--fullscreen {
position: fixed;
inset: 0;
z-index: 60;
padding: var(--ds-space-4);
background-color: var(--ds-surface-0);
}
.ds-editor--fullscreen .ds-editor__sheet {
display: flex;
flex-direction: column;
block-size: 100%;
}
.ds-editor--fullscreen .ds-editor__main {
flex: 1;
min-block-size: 0;
overflow-y: auto;
}
:root[data-ds-editor-fullscreen] {
overflow: hidden;
}
.ds-editor__outline-line {
cursor: grab;
}
.ds-editor__outline-line[data-carried] {
opacity: 0.5;
}
.ds-chat {
position: relative;
display: flex;
flex-direction: column;
min-block-size: 0;
block-size: 100%;
min-inline-size: 0;
}
.ds-chat__head {
display: block;
padding: var(--ds-space-3) var(--ds-space-4) 0;
}
.ds-chat__thread {
flex: 1 1 auto;
min-block-size: 0;
position: relative;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-2);
scroll-behavior: smooth;
}
.ds-chat__empty {
--ds-chat-empty-face: var(--ds-font-body-face);
--ds-chat-empty-size: var(--ds-font-body-size);
--ds-chat-empty-leading: var(--ds-font-body-leading);
--ds-chat-empty-tracking: var(--ds-font-body-tracking);
--ds-chat-empty-weight: var(--ds-font-body-weight);
--ds-chat-empty-ink: var(--ds-text-tertiary-neutral);
display: block;
margin: auto;
padding: var(--ds-space-6) var(--ds-space-4);
max-inline-size: 32ch;
text-align: center;
font-family: var(--ds-chat-empty-face);
font-size: var(--ds-chat-empty-size);
line-height: var(--ds-chat-empty-leading);
letter-spacing: var(--ds-chat-empty-tracking);
font-weight: var(--ds-chat-empty-weight);
color: var(--ds-chat-empty-ink);
}
.ds-chat__message {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
max-inline-size: 90%;
}
.ds-chat__message--user {
align-self: flex-end;
}
.ds-chat__message--assistant {
align-self: stretch;
max-inline-size: 100%;
}
.ds-chat__body {
--ds-chat-body-face: var(--ds-font-body-face);
--ds-chat-body-size: var(--ds-font-body-size);
--ds-chat-body-leading: var(--ds-font-body-leading);
--ds-chat-body-tracking: var(--ds-font-body-tracking);
--ds-chat-body-weight: var(--ds-font-body-weight);
--ds-chat-body-ink: var(--ds-text-primary-neutral);
display: block;
min-inline-size: 0;
max-inline-size: none;
font-family: var(--ds-chat-body-face);
font-size: var(--ds-chat-body-size);
line-height: var(--ds-chat-body-leading);
letter-spacing: var(--ds-chat-body-tracking);
font-weight: var(--ds-chat-body-weight);
color: var(--ds-chat-body-ink);
overflow-wrap: break-word;
}
.ds-chat__message--user .ds-chat__body {
display: block;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-3);
border-end-end-radius: var(--ds-radius-1);
background-color: var(--ds-surface-2);
}
.ds-chat__steps {
display: grid;
gap: var(--ds-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.ds-chat__step {
--ds-chat-step-face: var(--ds-font-small-face);
--ds-chat-step-size: var(--ds-font-small-size);
--ds-chat-step-leading: var(--ds-font-small-leading);
--ds-chat-step-tracking: var(--ds-font-small-tracking);
--ds-chat-step-weight: var(--ds-font-small-weight);
--ds-chat-step-ink: var(--ds-text-secondary-neutral);
--ds-chat-step-mark: var(--ds-success);
display: flex;
align-items: center;
gap: var(--ds-space-2);
font-family: var(--ds-chat-step-face);
font-size: var(--ds-chat-step-size);
line-height: var(--ds-chat-step-leading);
letter-spacing: var(--ds-chat-step-tracking);
font-weight: var(--ds-chat-step-weight);
color: var(--ds-chat-step-ink);
}
.ds-chat__step-mark {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
color: var(--ds-chat-step-mark);
}
.ds-chat__step[data-state="running"] .ds-chat__step-mark {
--ds-chat-step-mark: var(--ds-text-tertiary-neutral);
}
.ds-chat__step-mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-chat__step a:not([class^="ds-"]) {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.ds-chat__files {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.ds-chat__message--user > .ds-chat__files {
justify-content: flex-end;
}
.ds-chat__file {
position: relative;
display: flex;
align-items: center;
gap: var(--ds-space-2);
min-inline-size: 0;
max-inline-size: 100%;
padding: var(--ds-space-1) var(--ds-space-3) var(--ds-space-1) var(--ds-space-1);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-0);
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-chat__file[data-state="failed"] {
border-color: var(--ds-danger-ink);
}
.ds-chat__file-mark {
--ds-chat-file-mark-ink: var(--ds-text-secondary-neutral);
display: grid;
place-items: center;
flex: none;
inline-size: var(--ds-size-3);
block-size: var(--ds-size-3);
overflow: hidden;
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-2);
color: var(--ds-chat-file-mark-ink);
}
.ds-chat__file-mark > svg {
inline-size: var(--ds-space-5);
block-size: var(--ds-space-5);
}
.ds-chat__file-mark > img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ds-chat__file-text {
display: grid;
min-inline-size: 0;
max-inline-size: 24ch;
}
.ds-chat__file-name {
--ds-chat-file-name-face: var(--ds-font-label-face);
--ds-chat-file-name-size: var(--ds-font-label-size);
--ds-chat-file-name-leading: var(--ds-font-label-leading);
--ds-chat-file-name-tracking: var(--ds-font-label-tracking);
--ds-chat-file-name-weight: var(--ds-font-label-weight);
--ds-chat-file-name-ink: var(--ds-text-primary-neutral);
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--ds-chat-file-name-face);
font-size: var(--ds-chat-file-name-size);
line-height: var(--ds-chat-file-name-leading);
letter-spacing: var(--ds-chat-file-name-tracking);
font-weight: var(--ds-chat-file-name-weight);
color: var(--ds-chat-file-name-ink);
}
.ds-chat__file-meta {
--ds-chat-file-meta-face: var(--ds-font-small-face);
--ds-chat-file-meta-size: var(--ds-font-small-size);
--ds-chat-file-meta-leading: var(--ds-font-small-leading);
--ds-chat-file-meta-tracking: var(--ds-font-small-tracking);
--ds-chat-file-meta-weight: var(--ds-font-small-weight);
--ds-chat-file-meta-ink: var(--ds-text-tertiary-neutral);
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--ds-chat-file-meta-face);
font-size: var(--ds-chat-file-meta-size);
line-height: var(--ds-chat-file-meta-leading);
letter-spacing: var(--ds-chat-file-meta-tracking);
font-weight: var(--ds-chat-file-meta-weight);
color: var(--ds-chat-file-meta-ink);
}
.ds-chat__file[data-state="failed"] .ds-chat__file-meta {
--ds-chat-file-meta-ink: var(--ds-danger-ink);
}
.ds-chat__file-open {
padding: 0;
border: 0;
background: none;
text-align: start;
text-decoration: none;
cursor: pointer;
}
.ds-chat__file-open::after {
content: "";
position: absolute;
inset: 0;
}
.ds-chat__file:has(.ds-chat__file-open):hover {
background-color: var(--ds-surface-1);
}
.ds-chat__file-open:focus-visible {
outline: none;
}
.ds-chat__file:has(.ds-chat__file-open:focus-visible) {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-chat__sources {
--ds-chat-sources-face: var(--ds-font-small-face);
--ds-chat-sources-size: var(--ds-font-small-size);
--ds-chat-sources-leading: var(--ds-font-small-leading);
--ds-chat-sources-tracking: var(--ds-font-small-tracking);
--ds-chat-sources-weight: var(--ds-font-small-weight);
--ds-chat-sources-ink: var(--ds-text-tertiary-neutral);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--ds-chat-sources-face);
font-size: var(--ds-chat-sources-size);
line-height: var(--ds-chat-sources-leading);
letter-spacing: var(--ds-chat-sources-tracking);
font-weight: var(--ds-chat-sources-weight);
color: var(--ds-chat-sources-ink);
}
.ds-chat__sources-label {
margin-inline-end: var(--ds-space-1);
}
.ds-chat__source {
--ds-chat-source-ink: var(--ds-text-secondary-neutral);
display: inline-block;
max-inline-size: 24ch;
padding: calc((var(--ds-size-1) - var(--ds-chat-sources-leading) - 2px) / 2) var(--ds-space-2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-full);
color: var(--ds-chat-source-ink);
text-decoration: none;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-chat__source:hover {
background-color: var(--ds-surface-1);
}
.ds-chat__source:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-chat__error {
--ds-chat-error-face: var(--ds-font-label-face);
--ds-chat-error-size: var(--ds-font-label-size);
--ds-chat-error-leading: var(--ds-font-label-leading);
--ds-chat-error-tracking: var(--ds-font-label-tracking);
--ds-chat-error-weight: var(--ds-font-label-weight);
--ds-chat-error-ink: var(--ds-danger-ink);
display: flex;
align-items: flex-start;
gap: var(--ds-space-2);
margin: 0;
font-family: var(--ds-chat-error-face);
font-size: var(--ds-chat-error-size);
line-height: var(--ds-chat-error-leading);
letter-spacing: var(--ds-chat-error-tracking);
font-weight: var(--ds-chat-error-weight);
color: var(--ds-chat-error-ink);
}
.ds-chat__error-mark {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-chat__error-mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-chat__unfinished {
--ds-chat-unfinished-face: var(--ds-font-small-face);
--ds-chat-unfinished-size: var(--ds-font-small-size);
--ds-chat-unfinished-leading: var(--ds-font-small-leading);
--ds-chat-unfinished-tracking: var(--ds-font-small-tracking);
--ds-chat-unfinished-weight: var(--ds-font-small-weight);
--ds-chat-unfinished-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-chat-unfinished-face);
font-size: var(--ds-chat-unfinished-size);
line-height: var(--ds-chat-unfinished-leading);
letter-spacing: var(--ds-chat-unfinished-tracking);
font-weight: var(--ds-chat-unfinished-weight);
color: var(--ds-chat-unfinished-ink);
}
.ds-chat__actions {
display: flex;
gap: var(--ds-space-1);
}
.ds-chat__message--assistant > .ds-chat__actions {
margin-inline-start: calc((var(--ds-size-2) - var(--ds-font-label-leading)) / -2);
}
.ds-chat__message--user > .ds-chat__actions {
align-self: flex-end;
}
.ds-chat__reasoning {
--ds-chat-reasoning-face: var(--ds-font-label-face);
--ds-chat-reasoning-size: var(--ds-font-label-size);
--ds-chat-reasoning-leading: var(--ds-font-label-leading);
--ds-chat-reasoning-tracking: var(--ds-font-label-tracking);
--ds-chat-reasoning-weight: var(--ds-font-label-weight);
--ds-chat-reasoning-ink: var(--ds-text-secondary-neutral);
display: block;
margin: 0;
font-family: var(--ds-chat-reasoning-face);
font-size: var(--ds-chat-reasoning-size);
line-height: var(--ds-chat-reasoning-leading);
letter-spacing: var(--ds-chat-reasoning-tracking);
font-weight: var(--ds-chat-reasoning-weight);
color: var(--ds-chat-reasoning-ink);
}
.ds-chat__reasoning-head {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
min-block-size: var(--ds-size-1);
cursor: pointer;
list-style: none;
}
.ds-chat__reasoning-head::-webkit-details-marker {
display: none;
}
.ds-chat__reasoning-head:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-chat__reasoning-chev {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
transition: transform var(--ds-duration) var(--ds-ease);
}
.ds-chat__reasoning-chev > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-chat__reasoning[open] > .ds-chat__reasoning-head .ds-chat__reasoning-chev {
transform: rotate(180deg);
}
.ds-chat__reasoning[data-state="running"] .ds-chat__reasoning-label {
animation: ds-chat-dot var(--ds-duration-loop) var(--ds-ease-in-out) infinite;
}
.ds-chat__reasoning-body {
--ds-chat-reasoning-body-face: var(--ds-font-body-face);
--ds-chat-reasoning-body-size: var(--ds-font-body-size);
--ds-chat-reasoning-body-leading: var(--ds-font-body-leading);
--ds-chat-reasoning-body-tracking: var(--ds-font-body-tracking);
--ds-chat-reasoning-body-weight: var(--ds-font-body-weight);
--ds-chat-reasoning-body-ink: var(--ds-text-secondary-neutral);
display: grid;
gap: var(--ds-space-2);
margin-block-start: var(--ds-space-2);
padding-inline-start: var(--ds-space-3);
border-inline-start: 2px solid var(--ds-border-subtle);
font-family: var(--ds-chat-reasoning-body-face);
font-size: var(--ds-chat-reasoning-body-size);
line-height: var(--ds-chat-reasoning-body-leading);
letter-spacing: var(--ds-chat-reasoning-body-tracking);
font-weight: var(--ds-chat-reasoning-body-weight);
color: var(--ds-chat-reasoning-body-ink);
overflow-wrap: anywhere;
}
.ds-chat__reasoning-body > * {
margin: 0;
}
.ds-chat__thinking {
--ds-chat-thinking-ink: var(--ds-text-tertiary-neutral);
--ds-chat-status-face: var(--ds-font-label-face);
--ds-chat-status-size: var(--ds-font-label-size);
--ds-chat-status-leading: var(--ds-font-label-leading);
--ds-chat-status-tracking: var(--ds-font-label-tracking);
--ds-chat-status-weight: var(--ds-font-label-weight);
--ds-chat-status-ink: var(--ds-text-secondary-neutral);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
align-self: flex-start;
padding: var(--ds-space-2) 0;
color: var(--ds-chat-thinking-ink);
}
.ds-chat__dots {
display: inline-flex;
gap: var(--ds-space-1);
}
.ds-chat__dots > span {
display: block;
inline-size: var(--ds-space-2);
block-size: var(--ds-space-2);
border-radius: var(--ds-radius-full);
background-color: currentColor;
animation: ds-chat-dot var(--ds-duration-loop) var(--ds-ease-in-out) infinite;
}
.ds-chat__dots > span:nth-child(2) {
animation-delay: calc(var(--ds-duration-loop) / 6);
}
.ds-chat__dots > span:nth-child(3) {
animation-delay: calc(var(--ds-duration-loop) / 3);
}
.ds-chat__status {
font-family: var(--ds-chat-status-face);
font-size: var(--ds-chat-status-size);
line-height: var(--ds-chat-status-leading);
letter-spacing: var(--ds-chat-status-tracking);
font-weight: var(--ds-chat-status-weight);
color: var(--ds-chat-status-ink);
}
@keyframes ds-chat-dot {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
.ds-chat__composer {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--ds-space-2);
padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4);
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-chat__input {
--ds-chat-input-face: var(--ds-font-body-face);
--ds-chat-input-size: var(--ds-font-body-size);
--ds-chat-input-leading: var(--ds-font-body-leading);
--ds-chat-input-tracking: var(--ds-font-body-tracking);
--ds-chat-input-weight: var(--ds-font-body-weight);
--ds-chat-input-ink: var(--ds-text-primary-neutral);
--ds-chat-input-tier: var(--ds-size-3);
--ds-chat-input-ceiling: calc(var(--ds-chat-input-leading) * 5 + var(--ds-chat-input-tier));
box-sizing: border-box;
flex: 1;
min-inline-size: 0;
min-block-size: var(--ds-chat-input-tier);
max-block-size: var(--ds-chat-input-ceiling);
padding: calc((var(--ds-chat-input-tier) - var(--ds-chat-input-leading) - 2px) / 2) var(--ds-space-3);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-0);
font-family: var(--ds-chat-input-face);
font-size: var(--ds-chat-input-size);
line-height: var(--ds-chat-input-leading);
letter-spacing: var(--ds-chat-input-tracking);
font-weight: var(--ds-chat-input-weight);
color: var(--ds-chat-input-ink);
resize: none;
field-sizing: content;
transition: border-color var(--ds-duration) var(--ds-ease);
}
.ds-chat__input::placeholder {
--ds-chat-input-placeholder-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-chat-input-placeholder-ink);
}
.ds-chat__input:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 1px;
border-color: var(--ds-border);
}
.ds-chat__composer > .ds-chat__files {
flex: 1 0 100%;
}
.ds-chat__editing:not([hidden]) {
flex: 1 0 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-2);
}
.ds-chat__editing-label {
--ds-chat-editing-face: var(--ds-font-label-face);
--ds-chat-editing-size: var(--ds-font-label-size);
--ds-chat-editing-leading: var(--ds-font-label-leading);
--ds-chat-editing-tracking: var(--ds-font-label-tracking);
--ds-chat-editing-weight: var(--ds-font-label-weight);
--ds-chat-editing-ink: var(--ds-text-secondary-neutral);
font-family: var(--ds-chat-editing-face);
font-size: var(--ds-chat-editing-size);
line-height: var(--ds-chat-editing-leading);
letter-spacing: var(--ds-chat-editing-tracking);
font-weight: var(--ds-chat-editing-weight);
color: var(--ds-chat-editing-ink);
}
.ds-chat__drop {
display: none;
}
.ds-chat[data-over] > .ds-chat__drop {
--ds-chat-drop-face: var(--ds-font-label-face);
--ds-chat-drop-size: var(--ds-font-label-size);
--ds-chat-drop-leading: var(--ds-font-label-leading);
--ds-chat-drop-tracking: var(--ds-font-label-tracking);
--ds-chat-drop-weight: var(--ds-font-label-weight);
--ds-chat-drop-ink: var(--ds-text-secondary-neutral);
display: grid;
place-items: center;
position: absolute;
inset: var(--ds-space-2);
z-index: 1;
border: 2px solid var(--ds-border-active);
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-1);
pointer-events: none;
font-family: var(--ds-chat-drop-face);
font-size: var(--ds-chat-drop-size);
line-height: var(--ds-chat-drop-leading);
letter-spacing: var(--ds-chat-drop-tracking);
font-weight: var(--ds-chat-drop-weight);
color: var(--ds-chat-drop-ink);
}
.ds-board {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
--ds-board-column-width: 18rem;
}
.ds-board__lanes {
display: flex;
align-items: flex-start;
gap: var(--ds-space-4);
position: relative;
overflow-x: auto;
overscroll-behavior-x: contain;
padding-block-end: var(--ds-space-2);
}
.ds-board__column {
display: flex;
flex: 0 0 var(--ds-board-column-width);
flex-direction: column;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-board__head {
display: flex;
align-items: center;
gap: var(--ds-space-2);
min-block-size: var(--ds-size-2);
}
.ds-board__head > * {
flex: none;
}
.ds-board__head > :first-child {
flex-shrink: 1;
min-inline-size: 0;
}
.ds-board__label {
--ds-board-label-face: var(--ds-font-label-face);
--ds-board-label-size: var(--ds-font-label-size);
--ds-board-label-leading: var(--ds-font-label-leading);
--ds-board-label-tracking: var(--ds-font-label-tracking);
--ds-board-label-weight: var(--ds-emphasis-weight);
font-family: var(--ds-board-label-face);
font-size: var(--ds-board-label-size);
line-height: var(--ds-board-label-leading);
letter-spacing: var(--ds-board-label-tracking);
font-weight: var(--ds-board-label-weight);
--ds-board-label-ink: var(--ds-text-primary-neutral);
color: var(--ds-board-label-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-board__end {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
margin-inline-start: auto;
}
.ds-board__cards {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
min-block-size: var(--ds-size-4);
margin: 0;
padding: 0;
list-style: none;
}
.ds-board__cards--over::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: calc(var(--ds-space-2) / -2 - 1px);
block-size: 0;
border-block-start: 2px solid var(--ds-border-active);
}
.ds-board__card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
padding: var(--ds-space-3);
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
transition: opacity var(--ds-duration) var(--ds-ease), background-color var(--ds-duration) var(--ds-ease);
}
.ds-board__card--link {
cursor: pointer;
}
.ds-board__card:hover {
background-color: var(--ds-surface-hover);
}
.ds-board__card--dragging {
opacity: 0.4;
}
.ds-board__card--over::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: calc(var(--ds-space-2) / -2 - 1px);
block-size: 0;
border-block-start: 2px solid var(--ds-border-active);
}
.ds-board__select {
display: flex;
flex: none;
align-items: center;
}
.ds-board__card--selected,
.ds-board__card--selected:hover {
background-color: var(--ds-surface-active);
}
.ds-board__card-head {
display: flex;
align-items: center;
gap: var(--ds-space-1);
}
.ds-board__actions {
display: inline-flex;
flex: none;
margin-inline-start: auto;
}
.ds-board__grip {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: var(--ds-radius-1);
--ds-board-grip-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-board-grip-ink);
cursor: grab;
}
.ds-board__grip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-board__title {
--ds-board-title-face: var(--ds-font-body-face);
--ds-board-title-size: var(--ds-font-body-size);
--ds-board-title-leading: var(--ds-font-body-leading);
--ds-board-title-tracking: var(--ds-font-body-tracking);
--ds-board-title-weight: var(--ds-emphasis-weight);
overflow-wrap: anywhere;
font-family: var(--ds-board-title-face);
font-size: var(--ds-board-title-size);
line-height: var(--ds-board-title-leading);
letter-spacing: var(--ds-board-title-tracking);
font-weight: var(--ds-board-title-weight);
--ds-board-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-board-title-ink);
}
.ds-board__link {
text-decoration: none;
}
.ds-board__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-board__card-body {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1);
--ds-board-body-face: var(--ds-font-small-face);
--ds-board-body-size: var(--ds-font-small-size);
--ds-board-body-weight: var(--ds-font-small-weight);
--ds-board-body-leading: var(--ds-font-small-leading);
--ds-board-body-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-board-body-face);
font-size: var(--ds-board-body-size);
font-weight: var(--ds-board-body-weight);
line-height: var(--ds-board-body-leading);
letter-spacing: var(--ds-board-body-tracking);
--ds-board-body-ink: var(--ds-text-secondary-neutral);
color: var(--ds-board-body-ink);
}
.ds-board__empty {
--ds-board-empty-face: var(--ds-font-small-face);
--ds-board-empty-size: var(--ds-font-small-size);
--ds-board-empty-weight: var(--ds-font-small-weight);
--ds-board-empty-leading: var(--ds-font-small-leading);
--ds-board-empty-tracking: var(--ds-font-small-tracking);
padding: var(--ds-space-3);
font-family: var(--ds-board-empty-face);
font-size: var(--ds-board-empty-size);
font-weight: var(--ds-board-empty-weight);
line-height: var(--ds-board-empty-leading);
letter-spacing: var(--ds-board-empty-tracking);
--ds-board-empty-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-board-empty-ink);
}
.ds-board__add {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding-inline: var(--ds-space-3);
--ds-board-add-ink: var(--ds-text-secondary-neutral);
color: var(--ds-board-add-ink);
}
.ds-board__add-mark {
display: inline-flex;
flex: none;
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
}
.ds-board__said {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-board__card[data-hue] {
background-image: linear-gradient(var(--ds-board-card-hue-tint), var(--ds-board-card-hue-tint));
box-shadow: inset var(--ds-space-1) 0 0 0 var(--ds-board-card-hue-edge);
}
.ds-board__card[data-hue="red"] { --ds-board-card-hue-tint: var(--ds-hue-red-tint); --ds-board-card-hue-edge: var(--ds-hue-red-edge); }
.ds-board__card[data-hue="orange"] { --ds-board-card-hue-tint: var(--ds-hue-orange-tint); --ds-board-card-hue-edge: var(--ds-hue-orange-edge); }
.ds-board__card[data-hue="amber"] { --ds-board-card-hue-tint: var(--ds-hue-amber-tint); --ds-board-card-hue-edge: var(--ds-hue-amber-edge); }
.ds-board__card[data-hue="yellow"] { --ds-board-card-hue-tint: var(--ds-hue-yellow-tint); --ds-board-card-hue-edge: var(--ds-hue-yellow-edge); }
.ds-board__card[data-hue="lime"] { --ds-board-card-hue-tint: var(--ds-hue-lime-tint); --ds-board-card-hue-edge: var(--ds-hue-lime-edge); }
.ds-board__card[data-hue="green"] { --ds-board-card-hue-tint: var(--ds-hue-green-tint); --ds-board-card-hue-edge: var(--ds-hue-green-edge); }
.ds-board__card[data-hue="teal"] { --ds-board-card-hue-tint: var(--ds-hue-teal-tint); --ds-board-card-hue-edge: var(--ds-hue-teal-edge); }
.ds-board__card[data-hue="cyan"] { --ds-board-card-hue-tint: var(--ds-hue-cyan-tint); --ds-board-card-hue-edge: var(--ds-hue-cyan-edge); }
.ds-board__card[data-hue="blue"] { --ds-board-card-hue-tint: var(--ds-hue-blue-tint); --ds-board-card-hue-edge: var(--ds-hue-blue-edge); }
.ds-board__card[data-hue="indigo"] { --ds-board-card-hue-tint: var(--ds-hue-indigo-tint); --ds-board-card-hue-edge: var(--ds-hue-indigo-edge); }
.ds-board__card[data-hue="violet"] { --ds-board-card-hue-tint: var(--ds-hue-violet-tint); --ds-board-card-hue-edge: var(--ds-hue-violet-edge); }
.ds-board__card[data-hue="pink"] { --ds-board-card-hue-tint: var(--ds-hue-pink-tint); --ds-board-card-hue-edge: var(--ds-hue-pink-edge); }
.ds-calendar {
display: flex;
flex-direction: column;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
overflow: hidden;
--ds-calendar-day-size: 7rem;
}
.ds-calendar__head {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-3) var(--ds-space-4);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-calendar__title {
--ds-calendar-title-face: var(--ds-font-label-face);
--ds-calendar-title-size: var(--ds-font-label-size);
--ds-calendar-title-leading: var(--ds-font-label-leading);
--ds-calendar-title-tracking: var(--ds-font-label-tracking);
--ds-calendar-title-weight: var(--ds-emphasis-weight);
min-inline-size: 10rem;
margin: 0;
font-family: var(--ds-calendar-title-face);
font-size: var(--ds-calendar-title-size);
line-height: var(--ds-calendar-title-leading);
letter-spacing: var(--ds-calendar-title-tracking);
font-weight: var(--ds-calendar-title-weight);
text-align: center;
--ds-calendar-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-calendar-title-ink);
}
.ds-calendar__page,
.ds-calendar__today,
.ds-calendar__add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-1);
min-inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: var(--ds-radius-1);
--ds-calendar-page-ink: var(--ds-text-secondary-neutral);
color: var(--ds-calendar-page-ink);
text-decoration: none;
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease),
opacity var(--ds-duration) var(--ds-ease);
}
.ds-calendar__page:hover,
.ds-calendar__today:hover,
.ds-calendar__add:hover {
background-color: var(--ds-surface-hover);
--ds-calendar-page-ink: var(--ds-text-primary-neutral);
color: var(--ds-calendar-page-ink);
}
.ds-calendar__page:focus-visible,
.ds-calendar__today:focus-visible,
.ds-calendar__add:focus-visible,
.ds-calendar__pill:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-calendar__today {
--ds-calendar-today-face: var(--ds-font-small-face);
--ds-calendar-today-size: var(--ds-font-small-size);
--ds-calendar-today-weight: var(--ds-emphasis-weight);
--ds-calendar-today-leading: var(--ds-font-small-leading);
--ds-calendar-today-tracking: var(--ds-font-small-tracking);
margin-inline-start: auto;
padding-inline: var(--ds-space-2);
font-family: var(--ds-calendar-today-face);
font-size: var(--ds-calendar-today-size);
font-weight: var(--ds-calendar-today-weight);
line-height: var(--ds-calendar-today-leading);
letter-spacing: var(--ds-calendar-today-tracking);
}
.ds-calendar__count {
--ds-calendar-count-face: var(--ds-font-small-face);
--ds-calendar-count-size: var(--ds-font-small-size);
--ds-calendar-count-weight: var(--ds-font-small-weight);
--ds-calendar-count-leading: var(--ds-font-small-leading);
--ds-calendar-count-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-calendar-count-face);
font-size: var(--ds-calendar-count-size);
font-weight: var(--ds-calendar-count-weight);
line-height: var(--ds-calendar-count-leading);
letter-spacing: var(--ds-calendar-count-tracking);
--ds-calendar-count-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-calendar-count-ink);
}
.ds-calendar__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ds-calendar__weekday {
--ds-calendar-weekday-face: var(--ds-font-small-face);
--ds-calendar-weekday-size: var(--ds-font-small-size);
--ds-calendar-weekday-weight: var(--ds-font-small-weight);
--ds-calendar-weekday-leading: var(--ds-font-small-leading);
--ds-calendar-weekday-tracking: var(--ds-font-small-tracking);
padding: var(--ds-space-2);
font-family: var(--ds-calendar-weekday-face);
font-size: var(--ds-calendar-weekday-size);
font-weight: var(--ds-calendar-weekday-weight);
line-height: var(--ds-calendar-weekday-leading);
letter-spacing: var(--ds-calendar-weekday-tracking);
text-align: center;
--ds-calendar-weekday-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-calendar-weekday-ink);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-calendar__day {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-block-size: var(--ds-calendar-day-size);
padding: var(--ds-space-1) var(--ds-space-2);
border-block-end: 1px solid var(--ds-border-subtle);
border-inline-end: 1px solid var(--ds-border-subtle);
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-calendar__day:nth-child(7n + 7) {
border-inline-end: 0;
}
.ds-calendar__day:nth-last-child(-n + 7) {
border-block-end: 0;
}
.ds-calendar__day--weekend {
background-color: var(--ds-surface-2);
}
.ds-calendar__day--over {
background-color: var(--ds-surface-active);
}
.ds-calendar__number {
display: flex;
align-items: center;
justify-content: space-between;
min-block-size: var(--ds-size-1);
}
.ds-calendar__figure {
--ds-calendar-figure-face: var(--ds-font-small-face);
--ds-calendar-figure-size: var(--ds-font-small-size);
--ds-calendar-figure-weight: var(--ds-emphasis-weight);
--ds-calendar-figure-leading: var(--ds-font-small-leading);
--ds-calendar-figure-tracking: var(--ds-font-small-tracking);
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
border: 1px solid transparent;
border-radius: var(--ds-radius-full);
font-family: var(--ds-calendar-figure-face);
font-size: var(--ds-calendar-figure-size);
font-weight: var(--ds-calendar-figure-weight);
line-height: var(--ds-calendar-figure-leading);
letter-spacing: var(--ds-calendar-figure-tracking);
font-variant-numeric: tabular-nums;
--ds-calendar-figure-ink: var(--ds-text-primary-neutral);
color: var(--ds-calendar-figure-ink);
}
.ds-calendar__day--outside .ds-calendar__figure {
--ds-calendar-figure-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-calendar-figure-ink);
}
.ds-calendar__day--today .ds-calendar__figure {
border-color: var(--ds-border-active);
}
.ds-calendar__add {
opacity: 0;
}
.ds-calendar__day:hover .ds-calendar__add,
.ds-calendar__add:focus-visible {
opacity: 1;
}
@media (hover: none) {
.ds-calendar__add {
opacity: 1;
}
}
.ds-calendar__items {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
margin: 0;
padding: 0;
list-style: none;
min-inline-size: 0;
}
.ds-calendar__item {
--ds-calendar-item-tint: var(--ds-surface-3);
--ds-calendar-item-ink: var(--ds-text-primary-neutral);
display: flex;
min-inline-size: 0;
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-calendar__item--dragging {
opacity: 0.4;
}
.ds-calendar__pill {
--ds-calendar-pill-face: var(--ds-font-small-face);
--ds-calendar-pill-size: var(--ds-font-small-size);
--ds-calendar-pill-weight: var(--ds-emphasis-weight);
--ds-calendar-pill-leading: var(--ds-font-small-leading);
--ds-calendar-pill-tracking: var(--ds-font-small-tracking);
display: block;
flex: 1;
min-inline-size: 0;
padding: var(--ds-space-1) var(--ds-space-2);
border-radius: var(--ds-radius-1);
background-color: var(--ds-calendar-item-tint);
font-family: var(--ds-calendar-pill-face);
font-size: var(--ds-calendar-pill-size);
font-weight: var(--ds-calendar-pill-weight);
line-height: var(--ds-calendar-pill-leading);
letter-spacing: var(--ds-calendar-pill-tracking);
color: var(--ds-calendar-item-ink);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-calendar__item[draggable] .ds-calendar__pill {
cursor: grab;
}
.ds-calendar__pill:hover {
box-shadow: inset 0 0 0 100px color-mix(in srgb, currentColor 12%, transparent);
}
.ds-calendar__item--hue-red {
--ds-calendar-item-tint: var(--ds-hue-red-tint);
--ds-calendar-item-ink: var(--ds-hue-red-ink);
}
.ds-calendar__item--hue-orange {
--ds-calendar-item-tint: var(--ds-hue-orange-tint);
--ds-calendar-item-ink: var(--ds-hue-orange-ink);
}
.ds-calendar__item--hue-amber {
--ds-calendar-item-tint: var(--ds-hue-amber-tint);
--ds-calendar-item-ink: var(--ds-hue-amber-ink);
}
.ds-calendar__item--hue-yellow {
--ds-calendar-item-tint: var(--ds-hue-yellow-tint);
--ds-calendar-item-ink: var(--ds-hue-yellow-ink);
}
.ds-calendar__item--hue-lime {
--ds-calendar-item-tint: var(--ds-hue-lime-tint);
--ds-calendar-item-ink: var(--ds-hue-lime-ink);
}
.ds-calendar__item--hue-green {
--ds-calendar-item-tint: var(--ds-hue-green-tint);
--ds-calendar-item-ink: var(--ds-hue-green-ink);
}
.ds-calendar__item--hue-teal {
--ds-calendar-item-tint: var(--ds-hue-teal-tint);
--ds-calendar-item-ink: var(--ds-hue-teal-ink);
}
.ds-calendar__item--hue-cyan {
--ds-calendar-item-tint: var(--ds-hue-cyan-tint);
--ds-calendar-item-ink: var(--ds-hue-cyan-ink);
}
.ds-calendar__item--hue-blue {
--ds-calendar-item-tint: var(--ds-hue-blue-tint);
--ds-calendar-item-ink: var(--ds-hue-blue-ink);
}
.ds-calendar__item--hue-indigo {
--ds-calendar-item-tint: var(--ds-hue-indigo-tint);
--ds-calendar-item-ink: var(--ds-hue-indigo-ink);
}
.ds-calendar__item--hue-violet {
--ds-calendar-item-tint: var(--ds-hue-violet-tint);
--ds-calendar-item-ink: var(--ds-hue-violet-ink);
}
.ds-calendar__item--hue-pink {
--ds-calendar-item-tint: var(--ds-hue-pink-tint);
--ds-calendar-item-ink: var(--ds-hue-pink-ink);
}
.ds-calendar__more {
--ds-calendar-more-face: var(--ds-font-small-face);
--ds-calendar-more-size: var(--ds-font-small-size);
--ds-calendar-more-weight: var(--ds-font-small-weight);
--ds-calendar-more-leading: var(--ds-font-small-leading);
--ds-calendar-more-tracking: var(--ds-font-small-tracking);
padding-inline: var(--ds-space-2);
font-family: var(--ds-calendar-more-face);
font-size: var(--ds-calendar-more-size);
font-weight: var(--ds-calendar-more-weight);
line-height: var(--ds-calendar-more-leading);
letter-spacing: var(--ds-calendar-more-tracking);
--ds-calendar-more-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-calendar-more-ink);
}
.ds-calendar__said {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-time-bars {
--ds-time-bars-names: 12rem;
--ds-time-bars-row: var(--ds-size-3);
--ds-time-bars-bar: var(--ds-size-1);
--ds-time-bars-least: var(--ds-size-4);
--ds-time-bars-gap: var(--ds-space-1);
--ds-time-bars-pad: var(--ds-space-4);
--ds-time-bars-arrow: var(--ds-space-2);
--ds-time-bars-turn: var(--ds-space-4);
--ds-time-bars-fill: var(--ds-surface-2);
--ds-time-bars-ink: var(--ds-text-primary-neutral);
--ds-time-bars-link: var(--ds-border-strong);
--ds-time-bars-cord-live: var(--ds-interactive);
--ds-time-bars-cord-halo: var(--ds-interactive-tint);
--ds-time-bars-cut: var(--ds-danger);
--ds-time-bars-cut-ink: var(--ds-danger-on-inverse);
--ds-time-bars-edge: var(--ds-border);
--ds-time-bars-today: var(--ds-danger);
--ds-time-bars-title-ink: var(--ds-text-primary-neutral);
--ds-time-bars-description-ink: var(--ds-text-secondary-neutral);
--ds-time-bars-name-ink: var(--ds-text-primary-neutral);
--ds-time-bars-tick-ink: var(--ds-text-tertiary-neutral);
--ds-time-bars-rule: var(--ds-border-subtle);
--ds-time-bars-title-face: var(--ds-font-heading-4-face);
--ds-time-bars-title-size: var(--ds-font-heading-4-size);
--ds-time-bars-title-leading: var(--ds-font-heading-4-leading);
--ds-time-bars-title-weight: var(--ds-font-heading-4-weight);
--ds-time-bars-title-tracking: var(--ds-font-heading-4-tracking);
--ds-time-bars-description-face: var(--ds-font-copy-face);
--ds-time-bars-description-size: var(--ds-font-copy-size);
--ds-time-bars-description-leading: var(--ds-font-copy-leading);
--ds-time-bars-description-weight: var(--ds-font-copy-weight);
--ds-time-bars-description-tracking: var(--ds-font-copy-tracking);
--ds-time-bars-name-face: var(--ds-font-body-face);
--ds-time-bars-name-size: var(--ds-font-body-size);
--ds-time-bars-name-leading: var(--ds-font-body-leading);
--ds-time-bars-name-weight: var(--ds-font-body-weight);
--ds-time-bars-name-tracking: var(--ds-font-body-tracking);
--ds-time-bars-label-face: var(--ds-font-small-face);
--ds-time-bars-label-size: var(--ds-font-small-size);
--ds-time-bars-label-leading: var(--ds-font-small-leading);
--ds-time-bars-label-weight: var(--ds-font-small-weight);
--ds-time-bars-label-tracking: var(--ds-font-small-tracking);
--ds-time-bars-tick-face: var(--ds-font-small-face);
--ds-time-bars-tick-size: var(--ds-font-small-size);
--ds-time-bars-tick-leading: var(--ds-font-small-leading);
--ds-time-bars-tick-weight: var(--ds-font-small-weight);
--ds-time-bars-tick-tracking: var(--ds-font-small-tracking);
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.ds-time-bars--sheet {
background: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
padding: var(--ds-time-bars-pad);
gap: var(--ds-space-3);
}
.ds-time-bars--bare {
gap: var(--ds-space-3);
}
.ds-time-bars__scroller {
position: relative;
overflow-x: auto;
overflow-y: hidden;
min-inline-size: 0;
}
.ds-time-bars__grid {
position: relative;
display: grid;
grid-template-columns: var(--ds-time-bars-names) minmax(24rem, 1fr);
align-items: center;
row-gap: var(--ds-time-bars-gap);
min-inline-size: max-content;
}
.ds-time-bars__ticks {
grid-column: 2;
position: relative;
display: block;
block-size: var(--ds-size-3);
border-block-end: 1px solid var(--ds-border);
}
.ds-time-bars__tick {
position: absolute;
inset-block: 0;
display: flex;
align-items: center;
font-family: var(--ds-time-bars-tick-face);
font-size: var(--ds-time-bars-tick-size);
line-height: var(--ds-time-bars-tick-leading);
font-weight: var(--ds-time-bars-tick-weight);
letter-spacing: var(--ds-time-bars-tick-tracking);
color: var(--ds-time-bars-tick-ink);
white-space: nowrap;
padding-inline-start: var(--ds-space-2);
border-inline-start: 1px solid var(--ds-border-subtle);
}
.ds-time-bars__floor {
grid-column: 1 / -1;
block-size: 0;
border-block-start: 1px solid var(--ds-border);
}
.ds-time-bars__layer {
position: absolute;
inset-block-start: calc(var(--ds-size-3) + var(--ds-time-bars-gap));
inset-block-end: 0;
inset-inline-start: var(--ds-time-bars-names);
inset-inline-end: 0;
pointer-events: none;
}
.ds-time-bars__rule {
position: absolute;
inset-block: 0;
inline-size: 0;
border-inline-start: 1px solid var(--ds-time-bars-rule);
pointer-events: none;
}
.ds-time-bars__closed {
position: absolute;
inset-block: 0;
background: color-mix(in srgb, var(--ds-surface-3) 18%, transparent);
pointer-events: none;
}
.ds-time-bars__row {
display: contents;
}
.ds-time-bars__name {
grid-column: 1;
display: flex;
align-items: center;
gap: var(--ds-space-2);
min-inline-size: 0;
block-size: var(--ds-time-bars-row);
padding-inline-end: var(--ds-space-3);
font-family: var(--ds-time-bars-name-face);
font-size: var(--ds-time-bars-name-size);
line-height: var(--ds-time-bars-name-leading);
font-weight: var(--ds-time-bars-name-weight);
letter-spacing: var(--ds-time-bars-name-tracking);
color: var(--ds-time-bars-name-ink);
}
.ds-time-bars__name > * {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-time-bars__track {
grid-column: 2;
position: relative;
block-size: var(--ds-time-bars-row);
}
.ds-time-bars__bar {
position: absolute;
inset-block-start: calc((var(--ds-time-bars-row) - var(--ds-time-bars-bar)) / 2);
block-size: var(--ds-time-bars-bar);
border-radius: var(--ds-radius-1);
background: var(--ds-time-bars-fill);
border: 1px solid var(--ds-time-bars-edge);
display: flex;
align-items: center;
padding-inline: var(--ds-space-2);
gap: var(--ds-space-1);
font-family: var(--ds-time-bars-label-face);
font-size: var(--ds-time-bars-label-size);
line-height: var(--ds-time-bars-label-leading);
font-weight: var(--ds-time-bars-label-weight);
letter-spacing: var(--ds-time-bars-label-tracking);
color: var(--ds-time-bars-ink);
box-sizing: border-box;
}
.ds-time-bars__bar > .ds-time-bars__label-wrap {
flex: 1;
min-inline-size: 0;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a.ds-time-bars__bar,
button.ds-time-bars__bar {
border: 0;
cursor: pointer;
text-decoration: none;
font: inherit;
font-family: var(--ds-time-bars-label-face);
font-size: var(--ds-time-bars-label-size);
font-weight: var(--ds-time-bars-label-weight);
letter-spacing: var(--ds-time-bars-label-tracking);
color: var(--ds-time-bars-ink);
}
a.ds-time-bars__bar,
button.ds-time-bars__bar {
transition: box-shadow var(--ds-duration) var(--ds-ease);
}
a.ds-time-bars__bar:hover,
button.ds-time-bars__bar:hover {
box-shadow: inset 0 0 0 100px color-mix(in srgb, currentColor 12%, transparent);
}
.ds-time-bars__bar:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-time-bars__bar {
min-inline-size: var(--ds-time-bars-least);
}
.ds-time-bars__links {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.ds-time-bars__link {
fill: none;
stroke: var(--ds-time-bars-link);
stroke-width: 1;
vector-effect: non-scaling-stroke;
transition:
stroke var(--ds-duration) var(--ds-ease),
stroke-width var(--ds-duration) var(--ds-ease);
}
.ds-time-bars__cord--cuttable {
pointer-events: auto;
cursor: pointer;
}
.ds-time-bars__grab {
fill: none;
stroke: transparent;
stroke-width: var(--ds-size-1);
vector-effect: non-scaling-stroke;
}
.ds-time-bars__cord--cuttable[data-ds-time-bars-near] .ds-time-bars__link,
.ds-time-bars__cord--cuttable:focus-visible .ds-time-bars__link {
stroke: var(--ds-time-bars-cord-live);
stroke-width: 2;
}
.ds-time-bars__cord--cuttable:focus,
.ds-time-bars__cord--cuttable:focus-visible {
outline: none;
}
.ds-time-bars__cord--cuttable:focus-visible .ds-time-bars__grab {
stroke: var(--ds-time-bars-cord-halo);
stroke-width: var(--ds-space-3);
}
.ds-time-bars__cut {
position: absolute;
translate: -50% -50%;
z-index: 3;
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
display: grid;
place-items: center;
padding: 0;
border: var(--ds-space-px) solid var(--ds-time-bars-cord-live);
border-radius: var(--ds-radius-full);
background: var(--ds-surface-1);
color: var(--ds-time-bars-cord-live);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--ds-duration) var(--ds-ease),
background var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-time-bars__cut[data-ds-time-bars-near],
.ds-time-bars__cut:focus-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ds-time-bars__cut svg {
inline-size: 100%;
block-size: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
pointer-events: none;
}
.ds-time-bars__cut:hover,
.ds-time-bars__cut:focus-visible {
background: var(--ds-time-bars-cut);
border-color: var(--ds-time-bars-cut);
color: var(--ds-time-bars-cut-ink);
}
.ds-time-bars__cut:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-time-bars__head-mark {
stroke: var(--ds-time-bars-link);
stroke-width: 4;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
transition: stroke var(--ds-duration) var(--ds-ease);
}
.ds-time-bars__now {
position: absolute;
inset-block-end: calc(var(--ds-space-2) / -2 - 0.5px);
inline-size: var(--ds-space-2);
block-size: var(--ds-space-2);
translate: calc(-50% + 0.5px) 0;
border-radius: var(--ds-radius-full);
background: var(--ds-time-bars-today);
pointer-events: none;
}
.ds-time-bars__today {
position: absolute;
inset-block-start: calc((var(--ds-time-bars-gap) + 1px) * -1);
inset-block-end: 0;
inline-size: 0;
border-inline-start: 1px solid var(--ds-time-bars-today);
pointer-events: none;
}
.ds-time-bars__add {
position: absolute;
inset-block-start: 50%;
translate: -50% -50%;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
display: grid;
place-items: center;
padding: 0;
border: var(--ds-space-px) dashed var(--ds-time-bars-edge);
border-radius: var(--ds-radius-1);
background: var(--ds-surface-1);
color: var(--ds-time-bars-tick-ink);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
opacity: 0;
visibility: hidden;
transition:
opacity var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-time-bars__add svg {
pointer-events: none;
}
.ds-time-bars__add[data-ds-time-bars-at] {
opacity: 1;
visibility: visible;
}
.ds-time-bars__add:hover,
.ds-time-bars__add:focus-visible {
border-style: solid;
border-color: var(--ds-time-bars-cord-live);
color: var(--ds-time-bars-ink);
}
.ds-time-bars__add:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
opacity: 1;
visibility: visible;
}
.ds-time-bars__pick {
flex: none;
}
.ds-time-bars__empty {
grid-column: 1 / -1;
}
.ds-time-bars__grid--grabbable {
user-select: none;
-webkit-user-select: none;
}
.ds-time-bars__grid--grabbable .ds-time-bars__name {
user-select: text;
-webkit-user-select: text;
}
.ds-time-bars__grid--grabbable .ds-time-bars__bar {
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-drag: none;
}
.ds-time-bars__grid--grabbable .ds-time-bars__bar:active {
cursor: grabbing;
}
.ds-time-bars__grip {
position: absolute;
inset-block: 0;
inline-size: var(--ds-size-1);
cursor: ew-resize;
display: flex;
align-items: center;
justify-content: center;
}
.ds-time-bars__grip::after {
content: "";
display: block;
inline-size: var(--ds-space-px);
block-size: 50%;
border-radius: var(--ds-radius-full);
background: var(--ds-time-bars-ink);
outline: var(--ds-space-px) solid var(--ds-time-bars-ink);
opacity: 0;
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-time-bars__bar:hover .ds-time-bars__grip::after,
.ds-time-bars__bar:focus-visible .ds-time-bars__grip::after,
.ds-time-bars__bar[data-ds-time-bars-held] .ds-time-bars__grip::after {
opacity: 1;
}
.ds-time-bars__grip--start {
inset-inline-start: 0;
}
.ds-time-bars__grip--end {
inset-inline-end: 0;
}
.ds-time-bars__link-grip {
position: absolute;
inset-block-start: 50%;
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
display: grid;
place-items: center;
cursor: grab;
z-index: 2;
}
.ds-time-bars__link-grip::after {
content: "";
display: block;
inline-size: var(--ds-space-2);
block-size: var(--ds-space-2);
box-sizing: border-box;
border-radius: var(--ds-radius-full);
background: var(--ds-surface-1);
border: var(--ds-space-px) solid var(--ds-time-bars-link);
transition:
background var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease),
scale var(--ds-duration) var(--ds-ease);
}
.ds-time-bars__link-grip--start {
inset-inline-start: 0;
translate: -50% -50%;
}
.ds-time-bars__link-grip--end {
inset-inline-end: 0;
translate: 50% -50%;
}
.ds-time-bars__bar[data-ds-time-bars-held] .ds-time-bars__link-grip,
.ds-time-bars__link-grip:active {
cursor: grabbing;
}
.ds-time-bars__rope {
fill: none;
stroke: var(--ds-time-bars-cord-live);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 4 4;
vector-effect: non-scaling-stroke;
pointer-events: none;
opacity: 0;
}
.ds-time-bars__rope[data-ds-time-bars-drawn] {
opacity: 1;
}
.ds-time-bars__link-grip:hover::after,
.ds-time-bars__link-grip:focus-visible::after {
background: var(--ds-time-bars-cord-live);
border-color: var(--ds-time-bars-cord-live);
scale: 1.5;
}
.ds-time-bars__bar[data-ds-time-bars-held] {
--ds-time-bars-edge: var(--ds-border-active);
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
cursor: grabbing;
}
.ds-time-bars__bar[data-ds-time-bars-over] {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.ds-time-bars__link-grip,
.ds-time-bars__grip::after,
.ds-time-bars__link-grip::after,
.ds-time-bars__cut,
.ds-time-bars__head-mark,
.ds-time-bars__link,
a.ds-time-bars__bar,
button.ds-time-bars__bar {
transition: none;
}
}
.ds-capture {
display: block;
container-type: inline-size;
--ds-capture-notes-width: 20rem;
}
.ds-capture__panes {
display: grid;
grid-template-columns: minmax(0, var(--ds-capture-notes-width)) minmax(0, 1fr);
gap: var(--ds-space-4);
align-items: start;
}
@container (width <= 40rem) {
.ds-capture__panes {
grid-template-columns: minmax(0, 1fr);
}
}
.ds-capture__notes {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-capture__note-list {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.ds-capture__note {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--ds-space-3);
inline-size: 100%;
padding: var(--ds-space-3);
font: inherit;
text-align: start;
text-decoration: none;
color: inherit;
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
border-color var(--ds-duration) var(--ds-ease);
}
.ds-capture__note:hover {
background-color: var(--ds-surface-2);
}
.ds-capture__note:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-capture__note--current,
.ds-capture__note--current:hover {
border-color: var(--ds-border-active);
background-color: var(--ds-surface-active);
}
.ds-capture__preview {
--ds-capture-preview-face: var(--ds-font-label-face);
--ds-capture-preview-size: var(--ds-font-label-size);
--ds-capture-preview-weight: var(--ds-font-label-weight);
--ds-capture-preview-leading: var(--ds-font-label-leading);
--ds-capture-preview-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-capture-preview-face);
font-size: var(--ds-capture-preview-size);
font-weight: var(--ds-capture-preview-weight);
line-height: var(--ds-capture-preview-leading);
letter-spacing: var(--ds-capture-preview-tracking);
--ds-capture-preview-ink: var(--ds-text-primary-neutral);
color: var(--ds-capture-preview-ink);
--ds-capture-preview-lines: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ds-capture-preview-lines);
line-clamp: var(--ds-capture-preview-lines);
overflow: hidden;
flex: 1;
min-inline-size: 0;
}
.ds-capture__thumb {
display: block;
flex: none;
inline-size: var(--ds-size-3);
block-size: var(--ds-size-3);
object-fit: cover;
border-radius: var(--ds-radius-1);
}
.ds-capture__editor {
display: block;
}
.ds-capture__pictures {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--ds-size-6), 1fr));
gap: var(--ds-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.ds-capture__picture {
position: relative;
display: block;
aspect-ratio: 1;
overflow: hidden;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-2);
}
.ds-capture__picture img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ds-capture__picture-act {
position: absolute;
inset-block-start: var(--ds-space-1);
inset-inline-end: var(--ds-space-1);
}
.ds-card {
position: relative;
display: flex;
flex-direction: column;
min-inline-size: 0;
--ds-card-pad: var(--ds-space-4);
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-card-edge, var(--ds-border));
border-radius: var(--ds-radius-3);
overflow: hidden;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-card--tight {
--ds-card-pad: var(--ds-space-3);
}
.ds-card--bare {
--ds-card-pad: 0;
gap: var(--ds-space-4);
background-color: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.ds-card--bare .ds-card__media {
border-radius: var(--ds-radius-2);
overflow: hidden;
}
.ds-card--none {
--ds-card-pad: 0;
}
.ds-card__head,
.ds-card__body,
.ds-card__footer {
padding: var(--ds-card-pad);
}
.ds-card__head + .ds-card__body,
.ds-card__head + .ds-card__footer,
.ds-card__body + .ds-card__footer {
padding-block-start: 0;
}
.ds-card__head {
display: flex;
align-items: flex-start;
gap: var(--ds-space-3);
}
.ds-card__avatar {
display: flex;
flex: none;
align-self: center;
}
.ds-card__heading {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-card__eyebrow {
--ds-card-eyebrow-face: var(--ds-font-micro-face);
--ds-card-eyebrow-size: var(--ds-font-micro-size);
--ds-card-eyebrow-weight: var(--ds-font-micro-weight);
--ds-card-eyebrow-leading: var(--ds-font-micro-leading);
--ds-card-eyebrow-tracking: var(--ds-font-micro-tracking);
--ds-card-eyebrow-ink: var(--ds-text-secondary-neutral);
margin: 0;
font-family: var(--ds-card-eyebrow-face);
font-size: var(--ds-card-eyebrow-size);
font-weight: var(--ds-card-eyebrow-weight);
line-height: var(--ds-card-eyebrow-leading);
letter-spacing: var(--ds-card-eyebrow-tracking);
text-transform: uppercase;
color: var(--ds-card-eyebrow-ink);
}
.ds-card__name {
display: flex;
align-items: flex-start;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-card__icon {
--ds-card-icon-size: var(--ds-font-body-size);
--ds-card-icon-leading: var(--ds-font-body-leading);
--ds-card-icon-ink: var(--ds-text-primary-neutral);
display: inline-flex;
flex: none;
font-size: var(--ds-card-icon-size);
line-height: var(--ds-card-icon-leading);
inline-size: 1lh;
block-size: 1lh;
color: var(--ds-card-icon-ink);
}
.ds-card__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-card__title {
--ds-card-title-weight: var(--ds-emphasis-weight);
--ds-card-title-face: var(--ds-font-body-face);
--ds-card-title-tracking: var(--ds-font-body-tracking);
--ds-card-title-size: var(--ds-font-body-size);
--ds-card-title-leading: var(--ds-font-body-leading);
margin: 0;
font-family: var(--ds-card-title-face);
font-size: var(--ds-card-title-size);
letter-spacing: var(--ds-card-title-tracking);
line-height: var(--ds-card-title-leading);
font-weight: var(--ds-card-title-weight);
--ds-card-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-card-title-ink);
}
.ds-card__description {
--ds-card-description-face: var(--ds-font-label-face);
--ds-card-description-tracking: var(--ds-font-label-tracking);
--ds-card-description-size: var(--ds-font-label-size);
--ds-card-description-weight: var(--ds-font-label-weight);
--ds-card-description-leading: var(--ds-font-label-leading);
font-family: var(--ds-card-description-face);
font-size: var(--ds-card-description-size);
letter-spacing: var(--ds-card-description-tracking);
font-weight: var(--ds-card-description-weight);
line-height: var(--ds-card-description-leading);
--ds-card-description-ink: var(--ds-text-secondary-neutral);
color: var(--ds-card-description-ink);
}
.ds-card__description[data-lines] {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ds-card-lines);
line-clamp: var(--ds-card-lines);
overflow: hidden;
}
.ds-card__title[data-lines],
.ds-card__title[data-lines] .ds-card__words {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ds-card-title-lines);
line-clamp: var(--ds-card-title-lines);
overflow: hidden;
overflow-wrap: anywhere;
}
.ds-card__title[data-lines] > .ds-card__link {
max-inline-size: 100%;
}
.ds-card__body {
flex: 1;
min-inline-size: 0;
--ds-card-body-ink: var(--ds-text-primary-neutral);
color: var(--ds-card-body-ink);
}
.ds-card__footer {
margin-block-start: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
}
.ds-card--beside {
padding-inline-start: var(--ds-card-aside, 33%);
}
.ds-card--beside .ds-card__media {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: var(--ds-card-aside, 33%);
aspect-ratio: auto;
}
.ds-card--chosen {
border-color: var(--ds-border-active);
background-color: var(--ds-surface-active);
}
.ds-card--selectable {
--ds-card-select-inset: var(--ds-card-pad);
--ds-card-select-room: var(--ds-size-3);
}
.ds-card__select {
position: absolute;
inset-block-start: var(--ds-card-select-inset);
inset-inline-start: var(--ds-card-select-inset);
z-index: 2;
}
.ds-card__select + .ds-card__head {
padding-inline-start: var(--ds-card-select-room);
}
.ds-card__media {
position: relative;
flex: none;
inline-size: 100%;
aspect-ratio: var(--ds-card-ratio, 16 / 9);
background-color: var(--ds-surface-2);
}
.ds-card__media iframe,
.ds-card__media img,
.ds-card__media video {
position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ds-card__media video[controls] {
object-fit: contain;
}
.ds-card__media > svg {
--ds-card-mark-ink: var(--ds-text-tertiary-neutral);
position: absolute;
inset: 0;
margin: auto;
inline-size: var(--ds-card-mark, 33%);
block-size: auto;
max-block-size: 60%;
color: var(--ds-card-mark-ink);
}
.ds-card__media iframe {
border: 0;
}
.ds-card__link {
color: inherit;
text-decoration: none;
}
.ds-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.ds-card__button {
font: inherit;
color: inherit;
text-align: start;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.ds-card:has(.ds-card__link) :is(a:not(.ds-card__link), button, label, [tabindex]:not([tabindex="-1"])) {
position: relative;
z-index: 2;
}
.ds-card:has(.ds-card__link:hover) {
background-color: var(--ds-surface-2);
}
.ds-card:focus-visible,
.ds-card:has(.ds-card__link:focus-visible) {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-card__link:focus-visible {
outline: none;
}
.ds-card[data-hue] {
background-image: linear-gradient(var(--ds-card-hue-tint), var(--ds-card-hue-tint));
box-shadow: inset var(--ds-space-1) 0 0 0 var(--ds-card-hue-edge);
}
.ds-card[data-hue="red"] { --ds-card-hue-tint: var(--ds-hue-red-tint); --ds-card-hue-edge: var(--ds-hue-red-edge); }
.ds-card[data-hue="orange"] { --ds-card-hue-tint: var(--ds-hue-orange-tint); --ds-card-hue-edge: var(--ds-hue-orange-edge); }
.ds-card[data-hue="amber"] { --ds-card-hue-tint: var(--ds-hue-amber-tint); --ds-card-hue-edge: var(--ds-hue-amber-edge); }
.ds-card[data-hue="yellow"] { --ds-card-hue-tint: var(--ds-hue-yellow-tint); --ds-card-hue-edge: var(--ds-hue-yellow-edge); }
.ds-card[data-hue="lime"] { --ds-card-hue-tint: var(--ds-hue-lime-tint); --ds-card-hue-edge: var(--ds-hue-lime-edge); }
.ds-card[data-hue="green"] { --ds-card-hue-tint: var(--ds-hue-green-tint); --ds-card-hue-edge: var(--ds-hue-green-edge); }
.ds-card[data-hue="teal"] { --ds-card-hue-tint: var(--ds-hue-teal-tint); --ds-card-hue-edge: var(--ds-hue-teal-edge); }
.ds-card[data-hue="cyan"] { --ds-card-hue-tint: var(--ds-hue-cyan-tint); --ds-card-hue-edge: var(--ds-hue-cyan-edge); }
.ds-card[data-hue="blue"] { --ds-card-hue-tint: var(--ds-hue-blue-tint); --ds-card-hue-edge: var(--ds-hue-blue-edge); }
.ds-card[data-hue="indigo"] { --ds-card-hue-tint: var(--ds-hue-indigo-tint); --ds-card-hue-edge: var(--ds-hue-indigo-edge); }
.ds-card[data-hue="violet"] { --ds-card-hue-tint: var(--ds-hue-violet-tint); --ds-card-hue-edge: var(--ds-hue-violet-edge); }
.ds-card[data-hue="pink"] { --ds-card-hue-tint: var(--ds-hue-pink-tint); --ds-card-hue-edge: var(--ds-hue-pink-edge); }
.ds-carousel {
--ds-carousel-height: min(24rem, 56cqi);
--ds-carousel-gap: var(--ds-space-4);
--ds-carousel-radius: var(--ds-radius-3);
--ds-carousel-track: var(--ds-border-subtle);
--ds-carousel-fill: var(--ds-text-primary-neutral);
--ds-carousel-count-ink: var(--ds-text-tertiary-neutral);
--ds-carousel-n: 1;
--ds-carousel-total: 1;
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
margin: 0;
min-inline-size: 0;
container-type: inline-size;
}
.ds-carousel__track {
display: flex;
gap: var(--ds-carousel-gap);
position: relative;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
outline-offset: calc(var(--ds-space-1) * -1);
border-radius: var(--ds-carousel-radius);
}
.ds-carousel__track::-webkit-scrollbar {
display: none;
}
.ds-carousel__slide {
display: flex;
flex: none;
flex-direction: column;
gap: var(--ds-space-2);
margin: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.ds-carousel__slide img {
display: block;
block-size: var(--ds-carousel-height);
inline-size: auto;
max-inline-size: none;
object-fit: cover;
border-radius: var(--ds-carousel-radius);
background: var(--ds-surface-2);
}
.ds-carousel__caption {
--ds-carousel-caption-face: var(--ds-font-small-face);
--ds-carousel-caption-size: var(--ds-font-small-size);
--ds-carousel-caption-weight: var(--ds-font-small-weight);
--ds-carousel-caption-leading: var(--ds-font-small-leading);
--ds-carousel-caption-tracking: var(--ds-font-small-tracking);
inline-size: 0;
min-inline-size: 100%;
color: var(--ds-carousel-count-ink);
font-family: var(--ds-carousel-caption-face);
font-size: var(--ds-carousel-caption-size);
font-weight: var(--ds-carousel-caption-weight);
line-height: var(--ds-carousel-caption-leading);
letter-spacing: var(--ds-carousel-caption-tracking);
}
.ds-carousel__bar {
display: flex;
align-items: center;
gap: var(--ds-space-4);
}
.ds-carousel__count {
--ds-carousel-count-face: var(--ds-font-small-face);
--ds-carousel-count-size: var(--ds-font-small-size);
--ds-carousel-count-leading: var(--ds-font-small-leading);
flex: none;
color: var(--ds-carousel-count-ink);
font-family: var(--ds-carousel-count-face);
font-size: var(--ds-carousel-count-size);
line-height: var(--ds-carousel-count-leading);
font-variant-numeric: tabular-nums;
}
.ds-carousel__progress {
position: relative;
flex: 1 1 auto;
block-size: 1px;
overflow: hidden;
background: var(--ds-carousel-track);
}
.ds-carousel__progress-fill {
position: absolute;
inset: 0;
background: var(--ds-carousel-fill);
transform-origin: left center;
scale: calc(var(--ds-carousel-n) / var(--ds-carousel-total)) 1;
transition: scale var(--ds-duration) var(--ds-ease-out);
}
.ds-carousel__arrows {
display: flex;
flex: none;
gap: var(--ds-space-2);
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.ds-carousel__slide {
animation: ds-carousel-arrive linear both;
animation-timeline: view(inline);
}
}
}
@keyframes ds-carousel-arrive {
0% {
opacity: 0.35;
scale: 0.94;
}
22%,
78% {
opacity: 1;
scale: 1;
}
100% {
opacity: 0.35;
scale: 0.94;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-carousel__track {
scroll-behavior: auto;
}
}
.ds-gallery {
--ds-gallery-gap: var(--ds-space-3);
--ds-gallery-radius: var(--ds-radius-3);
--ds-gallery-tile: var(--ds-surface-2);
--ds-gallery-ratio: 1 / 1;
--ds-gallery-row: min(14rem, 40cqi);
--ds-gallery-mosaic-ratio: 2 / 1;
--ds-gallery-lead-ratio: 4 / 3;
--ds-gallery-caption-ink: var(--ds-text-secondary-neutral);
--ds-gallery-more-ground: var(--ds-inverse);
--ds-gallery-more-ink: var(--ds-on-inverse);
container-type: inline-size;
container-name: ds-gallery;
}
.ds-gallery__items {
display: grid;
gap: var(--ds-gallery-gap);
margin: 0;
padding: 0;
list-style: none;
}
.ds-gallery__item {
min-inline-size: 0;
}
.ds-gallery__figure {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
block-size: 100%;
margin: 0;
}
.ds-gallery__open {
position: relative;
display: block;
box-sizing: border-box;
inline-size: 100%;
block-size: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--ds-gallery-radius);
background: var(--ds-gallery-tile);
color: inherit;
font: inherit;
cursor: zoom-in;
}
.ds-gallery__image {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--ds-gallery-focus, 50% 50%);
}
.ds-gallery__caption {
--ds-gallery-caption-face: var(--ds-font-small-face);
--ds-gallery-caption-size: var(--ds-font-small-size);
--ds-gallery-caption-weight: var(--ds-font-small-weight);
--ds-gallery-caption-leading: var(--ds-font-small-leading);
--ds-gallery-caption-tracking: var(--ds-font-small-tracking);
color: var(--ds-gallery-caption-ink);
font-family: var(--ds-gallery-caption-face);
font-size: var(--ds-gallery-caption-size);
font-weight: var(--ds-gallery-caption-weight);
line-height: var(--ds-gallery-caption-leading);
letter-spacing: var(--ds-gallery-caption-tracking);
}
.ds-gallery--grid .ds-gallery__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.ds-gallery--grid .ds-gallery__open {
block-size: auto;
aspect-ratio: var(--ds-gallery-ratio);
}
@container ds-gallery (width >= 40rem) {
.ds-gallery--cols-3 .ds-gallery__items,
.ds-gallery--cols-4 .ds-gallery__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container ds-gallery (width >= 60rem) {
.ds-gallery--cols-4 .ds-gallery__items {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ds-gallery--strips .ds-gallery__items {
display: flex;
flex-wrap: wrap;
}
.ds-gallery--strips .ds-gallery__items::after {
content: "";
flex: 999 1 0;
}
.ds-gallery--strips .ds-gallery__item {
--ds-gallery-own-ratio: var(--ds-gallery-w, 4) / var(--ds-gallery-h, 3);
--ds-gallery-shape: calc(var(--ds-gallery-w, 4) / var(--ds-gallery-h, 3));
flex: var(--ds-gallery-shape) 1 calc(var(--ds-gallery-shape) * var(--ds-gallery-row));
}
.ds-gallery--strips .ds-gallery__open {
block-size: auto;
aspect-ratio: var(--ds-gallery-own-ratio);
}
.ds-gallery--mosaic .ds-gallery__items {
grid-template-columns: minmax(0, 1fr);
aspect-ratio: var(--ds-gallery-lead-ratio);
}
.ds-gallery--mosaic .ds-gallery__item:not(:first-child) {
display: none;
}
.ds-gallery__more {
--ds-gallery-more-face: var(--ds-font-label-face);
--ds-gallery-more-size: var(--ds-font-label-size);
--ds-gallery-more-weight: var(--ds-emphasis-weight);
--ds-gallery-more-leading: var(--ds-font-label-leading);
--ds-gallery-more-tracking: var(--ds-font-label-tracking);
position: absolute;
inset-block-end: var(--ds-space-3);
inset-inline-end: var(--ds-space-3);
display: flex;
align-items: center;
padding: var(--ds-space-1) var(--ds-space-3);
border-radius: var(--ds-radius-full);
background: var(--ds-gallery-more-ground);
color: var(--ds-gallery-more-ink);
font-family: var(--ds-gallery-more-face);
font-size: var(--ds-gallery-more-size);
font-weight: var(--ds-gallery-more-weight);
line-height: var(--ds-gallery-more-leading);
letter-spacing: var(--ds-gallery-more-tracking);
font-variant-numeric: tabular-nums;
}
.ds-gallery__more--wide {
display: none;
}
@container ds-gallery (width >= 40rem) {
.ds-gallery--mosaic .ds-gallery__items {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
aspect-ratio: var(--ds-gallery-mosaic-ratio);
}
.ds-gallery--mosaic .ds-gallery__item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.ds-gallery--mosaic .ds-gallery__item:nth-child(-n + 5) {
display: block;
}
.ds-gallery--mosaic-1 .ds-gallery__item:first-child {
grid-column: span 4;
}
.ds-gallery--mosaic-2 .ds-gallery__item:nth-child(2) {
grid-column: span 2;
grid-row: span 2;
}
.ds-gallery--mosaic-3 .ds-gallery__item:nth-child(n + 2) {
grid-column: span 2;
}
.ds-gallery--mosaic-4 .ds-gallery__item:nth-child(4) {
grid-column: span 2;
}
.ds-gallery__more--narrow {
display: none;
}
.ds-gallery__more--wide {
display: flex;
}
}
.ds-gallery__viewer {
--ds-gallery-viewer-ground: var(--ds-surface-0);
--ds-gallery-viewer-pad: var(--ds-space-6);
--ds-gallery-viewer-ink: var(--ds-text-primary-neutral);
--ds-gallery-count-ink: var(--ds-text-secondary-neutral);
--ds-gallery-caption-measure: 40rem;
position: fixed;
inset: 0;
box-sizing: border-box;
inline-size: 100%;
block-size: 100%;
max-inline-size: none;
max-block-size: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
background: var(--ds-gallery-viewer-ground);
color: var(--ds-gallery-viewer-ink);
overscroll-behavior: contain;
}
.ds-gallery__viewer:not([open]) {
display: none;
}
.ds-gallery__viewer[open] {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.ds-gallery__viewer::backdrop {
background: var(--ds-gallery-viewer-ground);
}
.ds-gallery__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
padding: var(--ds-space-4) var(--ds-gallery-viewer-pad);
}
.ds-gallery__count {
--ds-gallery-count-face: var(--ds-font-small-face);
--ds-gallery-count-size: var(--ds-font-small-size);
--ds-gallery-count-leading: var(--ds-font-small-leading);
color: var(--ds-gallery-count-ink);
font-family: var(--ds-gallery-count-face);
font-size: var(--ds-gallery-count-size);
line-height: var(--ds-gallery-count-leading);
font-variant-numeric: tabular-nums;
}
.ds-gallery__stage {
position: relative;
min-block-size: 0;
}
.ds-gallery__track {
position: relative;
display: flex;
block-size: 100%;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
outline-offset: calc(var(--ds-space-1) * -1);
}
.ds-gallery__track::-webkit-scrollbar {
display: none;
}
.ds-gallery__slide {
display: flex;
flex: 0 0 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ds-space-3);
box-sizing: border-box;
min-inline-size: 0;
margin: 0;
padding: 0 var(--ds-gallery-viewer-pad) var(--ds-gallery-viewer-pad);
scroll-snap-align: start;
scroll-snap-stop: always;
}
.ds-gallery__full {
display: block;
flex: 0 1 auto;
min-block-size: 0;
max-inline-size: 100%;
max-block-size: 100%;
inline-size: auto;
block-size: auto;
object-fit: contain;
}
.ds-gallery__slide-caption {
--ds-gallery-slide-caption-face: var(--ds-font-small-face);
--ds-gallery-slide-caption-size: var(--ds-font-small-size);
--ds-gallery-slide-caption-weight: var(--ds-font-small-weight);
--ds-gallery-slide-caption-leading: var(--ds-font-small-leading);
--ds-gallery-slide-caption-tracking: var(--ds-font-small-tracking);
flex: none;
max-inline-size: var(--ds-gallery-caption-measure);
color: var(--ds-gallery-count-ink);
font-family: var(--ds-gallery-slide-caption-face);
font-size: var(--ds-gallery-slide-caption-size);
font-weight: var(--ds-gallery-slide-caption-weight);
line-height: var(--ds-gallery-slide-caption-leading);
letter-spacing: var(--ds-gallery-slide-caption-tracking);
text-align: center;
}
.ds-gallery__go {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
}
.ds-gallery__go--previous {
inset-inline-start: var(--ds-space-3);
}
.ds-gallery__go--next {
inset-inline-end: var(--ds-space-3);
}
@media (prefers-reduced-motion: reduce) {
.ds-gallery__track {
scroll-behavior: auto;
}
}
.ds-inbox {
display: block;
}
.ds-inbox__body {
flex: 1;
min-inline-size: 0;
}
.ds-inbox__strip {
--ds-toolbar-gutter: 0;
}
.ds-inbox__days {
display: flex;
flex-direction: column;
gap: var(--ds-space-6);
container-type: inline-size;
container-name: ds-inbox;
}
.ds-inbox__day {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-inbox__heading {
--ds-inbox-heading-face: var(--ds-font-overline-face);
--ds-inbox-heading-size: var(--ds-font-overline-size);
--ds-inbox-heading-weight: var(--ds-font-overline-weight);
--ds-inbox-heading-leading: var(--ds-font-overline-leading);
--ds-inbox-heading-tracking: var(--ds-font-overline-tracking);
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin: 0;
font-family: var(--ds-inbox-heading-face);
font-size: var(--ds-inbox-heading-size);
font-weight: var(--ds-inbox-heading-weight);
line-height: var(--ds-inbox-heading-leading);
letter-spacing: var(--ds-inbox-heading-tracking);
text-transform: uppercase;
--ds-inbox-heading-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-inbox-heading-ink);
}
.ds-inbox__count {
--ds-inbox-count-face: var(--ds-font-small-face);
--ds-inbox-count-size: var(--ds-font-small-size);
--ds-inbox-count-weight: var(--ds-font-small-weight);
--ds-inbox-count-leading: var(--ds-font-small-leading);
--ds-inbox-count-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-inbox-count-face);
font-size: var(--ds-inbox-count-size);
font-weight: var(--ds-inbox-count-weight);
line-height: var(--ds-inbox-count-leading);
letter-spacing: var(--ds-inbox-count-tracking);
font-variant-numeric: tabular-nums;
--ds-inbox-count-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-inbox-count-ink);
}
.ds-inbox__cards {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.ds-inbox__line {
display: flex;
align-items: center;
gap: var(--ds-space-3);
min-inline-size: 0;
}
.ds-inbox__box {
display: flex;
flex: none;
align-items: center;
}
.ds-inbox__words {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--ds-space-1);
min-inline-size: 0;
}
.ds-inbox__meta {
display: flex;
align-items: center;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-inbox__end {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
}
.ds-inbox__parent {
--ds-inbox-parent-face: var(--ds-font-small-face);
--ds-inbox-parent-size: var(--ds-font-small-size);
--ds-inbox-parent-weight: var(--ds-font-small-weight);
--ds-inbox-parent-leading: var(--ds-font-small-leading);
--ds-inbox-parent-tracking: var(--ds-font-small-tracking);
display: block;
font-family: var(--ds-inbox-parent-face);
font-size: var(--ds-inbox-parent-size);
font-weight: var(--ds-inbox-parent-weight);
line-height: var(--ds-inbox-parent-leading);
letter-spacing: var(--ds-inbox-parent-tracking);
--ds-inbox-parent-ink: var(--ds-text-secondary-neutral);
color: var(--ds-inbox-parent-ink);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-inbox__title {
--ds-inbox-title-face: var(--ds-font-label-face);
--ds-inbox-title-size: var(--ds-font-label-size);
--ds-inbox-title-weight: var(--ds-emphasis-weight);
--ds-inbox-title-leading: var(--ds-font-label-leading);
--ds-inbox-title-tracking: var(--ds-font-label-tracking);
display: block;
font-family: var(--ds-inbox-title-face);
font-size: var(--ds-inbox-title-size);
font-weight: var(--ds-inbox-title-weight);
line-height: var(--ds-inbox-title-leading);
letter-spacing: var(--ds-inbox-title-tracking);
--ds-inbox-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-inbox-title-ink);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-inbox__when {
--ds-inbox-when-face: var(--ds-font-small-face);
--ds-inbox-when-size: var(--ds-font-small-size);
--ds-inbox-when-weight: var(--ds-font-small-weight);
--ds-inbox-when-leading: var(--ds-font-small-leading);
--ds-inbox-when-tracking: var(--ds-font-small-tracking);
flex: none;
font-family: var(--ds-inbox-when-face);
font-size: var(--ds-inbox-when-size);
font-weight: var(--ds-inbox-when-weight);
line-height: var(--ds-inbox-when-leading);
letter-spacing: var(--ds-inbox-when-tracking);
font-variant-numeric: tabular-nums;
--ds-inbox-when-ink: var(--ds-text-secondary-neutral);
color: var(--ds-inbox-when-ink);
}
.ds-inbox__when--overdue {
--ds-inbox-when-ink: var(--ds-danger-ink);
}
.ds-inbox__card--done .ds-inbox__title {
--ds-inbox-title-ink: var(--ds-text-secondary-neutral);
color: var(--ds-inbox-title-ink);
text-decoration: line-through;
}
@container ds-inbox (width <= 30rem) {
.ds-inbox__line {
flex-wrap: wrap;
}
.ds-inbox__end {
inline-size: 100%;
}
}
.ds-header {
--ds-header-weight-current: var(--ds-current-weight);
container-type: inline-size;
background-color: var(--ds-surface-0);
border-block-end: 1px solid var(--ds-border-subtle);
}
.ds-header__bar {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--ds-space-5);
flex-wrap: wrap;
row-gap: var(--ds-space-2);
inline-size: 100%;
max-inline-size: var(--ds-header-width, 72rem);
margin-inline: auto;
padding-block: var(--ds-space-3);
padding-inline: var(--ds-header-gutter, var(--ds-space-4));
}
.ds-header--app .ds-header__bar {
max-inline-size: none;
padding-inline: var(--ds-header-gutter, var(--ds-space-3));
}
.ds-header__search {
flex: 1 1 12rem;
min-inline-size: 0;
max-inline-size: var(--ds-header-search-max, 32rem);
margin-inline: auto;
}
.ds-header--sticky {
position: sticky;
inset-block-start: 0;
z-index: 20;
background-color: var(--ds-surface-0);
}
.ds-header__start {
display: flex;
align-items: center;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-header__brand {
--ds-header-brand-weight: var(--ds-emphasis-weight);
display: inline-flex;
flex: none;
align-items: center;
gap: var(--ds-space-2);
font-weight: var(--ds-header-brand-weight);
--ds-header-brand-ink: var(--ds-text-primary-neutral);
color: var(--ds-header-brand-ink);
text-decoration: none;
border-radius: var(--ds-radius-2);
}
.ds-header__brand:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-header__logo {
display: flex;
}
.ds-header__symbol {
display: none;
}
.ds-header__nav {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-1);
min-inline-size: 0;
}
@container (width <= 40rem) {
.ds-header__nav {
display: none;
}
}
.ds-header__sheet {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
}
.ds-header__row {
--ds-header-row-face: var(--ds-font-body-face);
--ds-header-row-size: var(--ds-font-body-size);
--ds-header-row-weight: var(--ds-font-body-weight);
--ds-header-row-leading: var(--ds-font-body-leading);
--ds-header-row-tracking: var(--ds-font-body-tracking);
display: flex;
align-items: center;
min-block-size: var(--ds-size-3);
padding-inline: var(--ds-space-3);
border-radius: var(--ds-radius-2);
font-family: var(--ds-header-row-face);
font-size: var(--ds-header-row-size);
font-weight: var(--ds-header-row-weight);
line-height: var(--ds-header-row-leading);
letter-spacing: var(--ds-header-row-tracking);
--ds-header-row-ink: var(--ds-text-secondary-neutral);
color: var(--ds-header-row-ink);
text-decoration: none;
transition:
color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-header__row:hover {
--ds-header-row-ink: var(--ds-text-primary-neutral);
background-color: var(--ds-surface-hover);
}
.ds-header__row[aria-current] {
--ds-header-row-ink: var(--ds-text-primary-neutral);
--ds-header-row-weight: var(--ds-current-weight);
}
.ds-header__caption {
--ds-header-caption-face: var(--ds-font-overline-face);
--ds-header-caption-size: var(--ds-font-overline-size);
--ds-header-caption-weight: var(--ds-font-overline-weight);
--ds-header-caption-leading: var(--ds-font-overline-leading);
--ds-header-caption-tracking: var(--ds-font-overline-tracking);
--ds-header-caption-ink: var(--ds-text-tertiary-neutral);
margin: 0;
padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-1);
font-family: var(--ds-header-caption-face);
font-size: var(--ds-header-caption-size);
font-weight: var(--ds-header-caption-weight);
line-height: var(--ds-header-caption-leading);
letter-spacing: var(--ds-header-caption-tracking);
text-transform: uppercase;
color: var(--ds-header-caption-ink);
}
.ds-header__pane:popover-open {
display: grid;
gap: 1px;
min-inline-size: 16rem;
}
.ds-header__pane--two:popover-open {
grid-template-columns: repeat(2, minmax(0, 1fr));
min-inline-size: 32rem;
}
.ds-header__link {
--ds-header-link-ink: var(--ds-text-primary-neutral);
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-2);
color: var(--ds-header-link-ink);
text-decoration: none;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-header__link:hover {
background-color: var(--ds-surface-hover);
}
.ds-header__link:focus {
outline: none;
background-color: var(--ds-surface-active);
}
.ds-header__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-header__link-label {
--ds-header-link-label-face: var(--ds-font-label-face);
--ds-header-link-label-size: var(--ds-font-label-size);
--ds-header-link-label-weight: var(--ds-font-label-weight);
--ds-header-link-label-leading: var(--ds-font-label-leading);
--ds-header-link-label-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-header-link-label-face);
font-size: var(--ds-header-link-label-size);
font-weight: var(--ds-header-link-label-weight);
line-height: var(--ds-header-link-label-leading);
letter-spacing: var(--ds-header-link-label-tracking);
}
.ds-header__link[aria-current] .ds-header__link-label {
--ds-header-link-label-weight: var(--ds-current-weight);
}
.ds-header__link-note {
--ds-header-link-note-face: var(--ds-font-small-face);
--ds-header-link-note-size: var(--ds-font-small-size);
--ds-header-link-note-weight: var(--ds-font-small-weight);
--ds-header-link-note-leading: var(--ds-font-small-leading);
--ds-header-link-note-tracking: var(--ds-font-small-tracking);
--ds-header-link-note-ink: var(--ds-text-tertiary-neutral);
font-family: var(--ds-header-link-note-face);
font-size: var(--ds-header-link-note-size);
font-weight: var(--ds-header-link-note-weight);
line-height: var(--ds-header-link-note-leading);
letter-spacing: var(--ds-header-link-note-tracking);
color: var(--ds-header-link-note-ink);
}
.ds-header__more {
gap: var(--ds-space-1);
}
.ds-header__chevron {
display: inline-flex;
flex: none;
--ds-header-chevron-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-header-chevron-ink);
}
.ds-header__chevron > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-header__item {
font: inherit;
background-color: transparent;
border: 0;
display: inline-flex;
align-items: center;
min-block-size: var(--ds-size-2);
padding-inline: var(--ds-space-3);
border-radius: var(--ds-radius-2);
--ds-header-item-ink: var(--ds-text-secondary-neutral);
color: var(--ds-header-item-ink);
text-decoration: none;
transition:
color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-header__item:hover {
background-color: var(--ds-surface-hover);
--ds-header-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-header-item-ink);
}
.ds-header__item[aria-current="page"] {
--ds-header-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-header-item-ink);
font-weight: var(--ds-header-weight-current);
}
.ds-header__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
margin-inline-start: auto;
min-inline-size: 0;
}
.ds-header__mark {
box-sizing: border-box;
display: none;
flex: none;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-3);
block-size: var(--ds-size-3);
padding: 0;
border: 0;
border-radius: var(--ds-radius-2);
background: none;
--ds-header-mark-ink: var(--ds-text-primary-neutral);
color: var(--ds-header-mark-ink);
font: inherit;
cursor: pointer;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-header__mark > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-header__mark:hover {
background-color: var(--ds-surface-hover);
}
.ds-header__mark:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-header__mark--sidebar {
display: inline-flex;
}
@container (width <= 40rem) {
.ds-header__mark--menu {
display: inline-flex;
}
}
.ds-header__mark--always {
display: inline-flex;
}
.ds-header__field {
display: contents;
}
@container (width <= 40rem) {
.ds-header__bar {
flex-wrap: nowrap;
}
.ds-header__actions {
flex: none;
flex-wrap: nowrap;
}
.ds-header__bar:has(.ds-header__search) .ds-header__actions {
margin-inline-start: 0;
}
.ds-header__brand {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@container (width <= 40rem) {
.ds-header__bar {
padding-inline: var(--ds-space-4);
}
}
@container (width <= 30rem) {
.ds-header__bar {
column-gap: var(--ds-space-2);
}
.ds-header__logo {
display: none;
}
.ds-header__symbol {
display: flex;
}
}
@container (width <= 40rem) {
.ds-header__search:not([data-searching]) .ds-header__field {
display: none;
}
.ds-header__search:not([data-searching]) {
flex: none;
inline-size: var(--ds-size-3);
margin-inline: auto 0;
}
.ds-header__mark--search {
display: inline-flex;
}
.ds-header__bar:has(.ds-header__search[data-searching]) > :not(.ds-header__search) {
display: none;
}
.ds-header__search[data-searching] {
flex: 1 1 0;
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.ds-header__search[data-searching] .ds-header__field {
display: block;
flex: 1 1 0;
min-inline-size: 0;
}
.ds-header__search[data-searching] .ds-header__mark--search {
display: none;
}
.ds-header__search[data-searching] .ds-header__mark--close {
display: inline-flex;
}
}
.ds-header__mark--menu[aria-expanded="true"] .ds-swap__off {
display: none;
}
.ds-header__mark--menu[aria-expanded="true"] .ds-swap__on {
display: inline-flex;
}
.ds-sidebar {
--ds-sidebar-weight-current: var(--ds-current-weight);
--ds-sidebar-width: 16rem;
--ds-sidebar-inset: var(--ds-space-4);
background-color: var(--ds-surface-0);
--ds-sidebar-tier: var(--ds-size-3);
display: flex;
flex-direction: column;
inline-size: var(--ds-sidebar-width);
max-block-size: 100%;
min-block-size: 0;
transition: inline-size var(--ds-duration) var(--ds-ease);
}
.ds-sidebar--collapsed {
--ds-sidebar-width: calc(var(--ds-sidebar-tier) + var(--ds-sidebar-inset) * 2);
}
.ds-sidebar__head {
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: none;
min-block-size: var(--ds-size-4);
padding: var(--ds-sidebar-inset);
}
.ds-sidebar--collapsed .ds-sidebar__head,
.ds-sidebar--collapsed .ds-sidebar__foot {
justify-content: center;
}
.ds-sidebar__search {
flex: none;
padding: 0 var(--ds-sidebar-inset) var(--ds-space-2);
}
.ds-sidebar--collapsed .ds-sidebar__search {
display: none;
}
.ds-sidebar__list {
flex: 1;
min-block-size: 0;
position: relative;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
padding: var(--ds-sidebar-inset);
scrollbar-width: thin;
}
.ds-sidebar__group {
display: flex;
flex-direction: column;
gap: var(--ds-space-0-5);
}
.ds-sidebar__fold {
display: block;
}
.ds-sidebar__summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
}
.ds-sidebar__summary::-webkit-details-marker {
display: none;
}
.ds-sidebar__chev {
display: inline-flex;
--ds-sidebar-chev-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-sidebar-chev-ink);
transition: rotate var(--ds-duration) var(--ds-ease);
rotate: -90deg;
}
.ds-sidebar__fold[open] > .ds-sidebar__summary .ds-sidebar__chev {
rotate: 0deg;
}
.ds-sidebar--collapsed .ds-sidebar__summary {
display: none;
}
.ds-sidebar__heading {
--ds-sidebar-heading-face: var(--ds-font-overline-face);
--ds-sidebar-heading-size: var(--ds-font-overline-size);
--ds-sidebar-heading-leading: var(--ds-font-overline-leading);
--ds-sidebar-heading-tracking: var(--ds-font-overline-tracking);
margin: 0;
padding: var(--ds-space-1) var(--ds-space-2);
font-family: var(--ds-sidebar-heading-face);
font-size: var(--ds-sidebar-heading-size);
line-height: var(--ds-sidebar-heading-leading);
font-weight: var(--ds-font-overline-weight);
letter-spacing: var(--ds-sidebar-heading-tracking);
text-transform: uppercase;
--ds-sidebar-heading-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-sidebar-heading-ink);
}
.ds-sidebar--collapsed .ds-sidebar__heading {
display: block;
block-size: 0;
padding: 0;
margin-block: var(--ds-space-2);
overflow: hidden;
text-indent: -100vw;
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-sidebar__item {
--ds-sidebar-item-face: var(--ds-font-label-face);
--ds-sidebar-item-tracking: var(--ds-font-label-tracking);
--ds-sidebar-item-size: var(--ds-font-label-size);
--ds-sidebar-item-leading: var(--ds-font-label-leading);
display: flex;
align-items: center;
gap: var(--ds-space-2);
box-sizing: border-box;
min-block-size: var(--ds-sidebar-tier);
padding: var(--ds-space-1) var(--ds-space-2);
border-radius: var(--ds-radius-2);
font-family: var(--ds-sidebar-item-face);
font-size: var(--ds-sidebar-item-size);
letter-spacing: var(--ds-sidebar-item-tracking);
line-height: var(--ds-sidebar-item-leading);
--ds-sidebar-item-ink: var(--ds-text-secondary-neutral);
color: var(--ds-sidebar-item-ink);
text-decoration: none;
cursor: pointer;
transition:
background-color var(--ds-duration) var(--ds-ease),
color var(--ds-duration) var(--ds-ease);
}
.ds-sidebar__item:hover {
background-color: var(--ds-surface-hover);
--ds-sidebar-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-sidebar-item-ink);
}
.ds-sidebar__item:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -1px;
}
.ds-sidebar__item[aria-current] {
background-color: var(--ds-surface-active);
--ds-sidebar-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-sidebar-item-ink);
font-weight: var(--ds-sidebar-weight-current);
}
.ds-sidebar__rows {
display: block;
}
.ds-sidebar__row {
position: relative;
display: flex;
align-items: center;
min-inline-size: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.ds-sidebar__row > .ds-sidebar__item {
flex: 1;
min-inline-size: 0;
}
.ds-sidebar__grip {
--ds-sidebar-grip-ink: var(--ds-text-tertiary-neutral);
opacity: 0;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
margin-inline-end: var(--ds-space-1);
padding: 0;
border: 0;
border-radius: var(--ds-radius-1);
background: none;
color: var(--ds-sidebar-grip-ink);
font: inherit;
cursor: grab;
transition:
color var(--ds-duration) var(--ds-ease),
opacity var(--ds-duration) var(--ds-ease);
}
.ds-sidebar__grip > svg {
inline-size: var(--ds-space-4);
block-size: var(--ds-space-4);
}
.ds-sidebar__row:hover .ds-sidebar__grip,
.ds-sidebar__row:focus-within .ds-sidebar__grip,
.ds-sidebar__row--dragging .ds-sidebar__grip {
opacity: 1;
}
.ds-sidebar__row:hover .ds-sidebar__grip,
.ds-sidebar__grip:focus-visible {
--ds-sidebar-grip-ink: var(--ds-text-primary-neutral);
}
.ds-sidebar__grip:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -1px;
}
.ds-sidebar__row--dragging,
.ds-sidebar__row.ds-sortable__item--dragging {
opacity: 0.4;
}
.ds-sidebar__row--over::before,
.ds-sidebar__row.ds-sortable__item--over::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: -1px;
block-size: 0;
border-block-start: 2px solid var(--ds-border-active);
}
.ds-sidebar__row--over-end::before,
.ds-sidebar__row.ds-sortable__item--over-end::before {
inset-block-start: auto;
inset-block-end: -1px;
}
.ds-sidebar__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-sidebar__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-sidebar__label {
flex: 0 1 auto;
min-inline-size: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-sidebar--index .ds-sidebar__label {
flex: 0 1 auto;
min-inline-size: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.ds-sidebar__note {
--ds-sidebar-note-face: var(--ds-font-small-face);
--ds-sidebar-note-tracking: var(--ds-font-small-tracking);
--ds-sidebar-note-size: var(--ds-font-small-size);
--ds-sidebar-note-leading: var(--ds-font-small-leading);
flex: 1 1 0;
min-inline-size: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--ds-sidebar-note-face);
font-size: var(--ds-sidebar-note-size);
letter-spacing: var(--ds-sidebar-note-tracking);
line-height: var(--ds-sidebar-note-leading);
--ds-sidebar-note-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-sidebar-note-ink);
}
.ds-sidebar__end {
flex: none;
margin-inline-start: auto;
}
.ds-sidebar--collapsed .ds-sidebar__label,
.ds-sidebar--collapsed .ds-sidebar__note,
.ds-sidebar--collapsed .ds-sidebar__end,
.ds-sidebar--collapsed .ds-sidebar__sub {
display: none;
}
.ds-sidebar--collapsed .ds-sidebar__item {
justify-content: flex-start;
}
.ds-sidebar__sub {
display: flex;
flex-direction: column;
gap: var(--ds-space-0-5);
margin-inline-start: calc(var(--ds-space-4) + var(--ds-space-1));
padding-inline-start: var(--ds-space-3);
border-inline-start: 1px solid var(--ds-border-subtle);
}
.ds-sidebar__foot {
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: none;
padding: var(--ds-sidebar-inset);
border-block-start: 1px solid var(--ds-border-subtle);
}
.ds-mobile {
box-sizing: border-box;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto auto;
block-size: 100%;
min-block-size: 0;
overflow: hidden;
background-color: var(--ds-surface-0);
--ds-mobile-ink: var(--ds-text-primary-neutral);
color: var(--ds-mobile-ink);
}
.ds-mobile__screen {
min-block-size: 0;
position: relative;
overflow-y: auto;
padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}
.ds-mobile__dock {
border-block-start: 1px solid var(--ds-border-subtle);
background-color: var(--ds-surface-0);
padding: var(--ds-space-3);
}
.ds-mobile__dock:last-child {
padding-block-end: calc(var(--ds-space-3) + env(safe-area-inset-bottom, 0px));
}
.ds-site-menu {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--ds-rhythm-section);
min-block-size: 100%;
padding: var(--ds-site-gutter);
}
.ds-site-menu__places {
display: flex;
flex-direction: column;
}
.ds-site-menu__place {
--ds-site-menu-place-face: var(--ds-font-heading-2-face);
--ds-site-menu-place-size: var(--ds-font-heading-2-size);
--ds-site-menu-place-weight: var(--ds-font-heading-2-weight);
--ds-site-menu-place-leading: var(--ds-font-heading-2-leading);
--ds-site-menu-place-tracking: var(--ds-font-heading-2-tracking);
display: block;
padding-block: var(--ds-rhythm-line);
font-family: var(--ds-site-menu-place-face);
font-size: var(--ds-site-menu-place-size);
font-weight: var(--ds-site-menu-place-weight);
line-height: var(--ds-site-menu-place-leading);
letter-spacing: var(--ds-site-menu-place-tracking);
--ds-site-menu-place-ink: var(--ds-text-secondary-neutral);
color: var(--ds-site-menu-place-ink);
text-decoration: none;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-site-menu__place:hover {
--ds-site-menu-place-ink: var(--ds-text-primary-neutral);
}
.ds-site-menu__place[aria-current] {
--ds-site-menu-place-ink: var(--ds-text-primary-neutral);
}
.ds-site-menu__place:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-2);
}
.ds-site-menu__foot {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
}
.ds-site-menu__more {
display: flex;
flex-wrap: wrap;
gap: var(--ds-rhythm-element);
}
.ds-site-menu__link {
--ds-site-menu-link-face: var(--ds-font-label-face);
--ds-site-menu-link-size: var(--ds-font-label-size);
--ds-site-menu-link-weight: var(--ds-font-label-weight);
--ds-site-menu-link-leading: var(--ds-font-label-leading);
--ds-site-menu-link-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-site-menu-link-face);
font-size: var(--ds-site-menu-link-size);
font-weight: var(--ds-site-menu-link-weight);
line-height: var(--ds-site-menu-link-leading);
letter-spacing: var(--ds-site-menu-link-tracking);
--ds-site-menu-link-ink: var(--ds-text-secondary-neutral);
color: var(--ds-site-menu-link-ink);
text-decoration: none;
}
.ds-site-menu__link:hover {
--ds-site-menu-link-ink: var(--ds-text-primary-neutral);
}
.ds-site-menu__social {
display: flex;
gap: var(--ds-rhythm-element);
}
.ds-site-menu__extra {
display: flex;
align-items: center;
gap: var(--ds-rhythm-element);
}
.ds-site-menu__say {
--ds-site-menu-say-face: var(--ds-font-label-face);
--ds-site-menu-say-size: var(--ds-font-label-size);
--ds-site-menu-say-weight: var(--ds-font-label-weight);
--ds-site-menu-say-leading: var(--ds-font-label-leading);
--ds-site-menu-say-tracking: var(--ds-font-label-tracking);
margin: 0;
font-family: var(--ds-site-menu-say-face);
font-size: var(--ds-site-menu-say-size);
font-weight: var(--ds-site-menu-say-weight);
line-height: var(--ds-site-menu-say-leading);
letter-spacing: var(--ds-site-menu-say-tracking);
--ds-site-menu-say-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-site-menu-say-ink);
text-wrap-style: pretty;
}
.ds-site,
.ds-site__section {
--ds-site-gutter: var(--ds-space-6);
}
.ds-site {
position: relative;
display: flex;
flex-direction: column;
min-block-size: 100dvh;
background-color: var(--ds-surface-0);
--ds-site-ink: var(--ds-text-primary-neutral);
color: var(--ds-site-ink);
}
.ds-site__main {
flex: 1 0 auto;
min-inline-size: 0;
}
.ds-site .ds-header,
.ds-site .ds-footer {
--ds-header-width: var(--ds-site-band);
--ds-header-gutter: var(--ds-site-gutter);
--ds-footer-width: var(--ds-site-band);
--ds-footer-gutter: var(--ds-site-gutter);
}
.ds-site--full {
--ds-site-band: 100%;
}
.ds-site--boxed {
--ds-site-band: var(--ds-site-container, 75rem);
}
.ds-site__section {
--ds-site-section-start: var(--ds-rhythm-section);
display: grid;
justify-content: center;
grid-template-columns: min(100%, var(--ds-site-band, 100%));
background-color: var(--ds-surface-0);
padding-block: var(--ds-site-section-start) var(--ds-rhythm-section);
}
.ds-site__main > .ds-site__section:first-child:not(.ds-site__section--raised, .ds-site__section--inverse) {
--ds-site-section-start: calc(var(--ds-rhythm-section) / 2);
}
.ds-site__section--raised {
background-color: var(--ds-surface-1);
}
.ds-site__section--inverse {
background-color: var(--ds-site-section-ground, var(--ds-inverse));
color: var(--ds-site-section-ink, var(--ds-on-inverse));
}
.ds-site__section--flush {
padding-block: 0;
}
.ds-site__section:has(> .ds-site__band > .ds-hero) {
padding-block: 0;
}
[data-block][data-current] {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
}
.ds-site__band {
box-sizing: border-box;
min-inline-size: 0;
padding-inline: var(--ds-site-gutter);
}
.ds-site__band--reading {
inline-size: 100%;
max-inline-size: var(--ds-site-measure, 44rem);
justify-self: center;
}
.ds-site__section:has(> .ds-site__band > :is(.ds-page-head, .ds-hero--bare):only-child):has(+ .ds-site__section > .ds-site__band--reading) > .ds-site__band {
inline-size: 100%;
max-inline-size: var(--ds-site-measure, 44rem);
justify-self: center;
}
.ds-site__section:has(.ds-site__band--full) {
grid-template-columns: 100%;
}
.ds-site__band--full {
padding-inline: 0;
}
.ds-site__skip {
--ds-site-skip-face: var(--ds-font-label-face);
--ds-site-skip-tracking: var(--ds-font-label-tracking);
--ds-site-skip-size: var(--ds-font-label-size);
--ds-site-skip-weight: var(--ds-font-label-weight);
--ds-site-skip-leading: var(--ds-font-label-leading);
position: absolute;
inset-inline-start: var(--ds-space-3);
inset-block-start: calc(var(--ds-space-3) * -1);
z-index: 2;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-1);
--ds-site-skip-ink: var(--ds-text-primary-neutral);
color: var(--ds-site-skip-ink);
font-family: var(--ds-site-skip-face);
font-size: var(--ds-site-skip-size);
letter-spacing: var(--ds-site-skip-tracking);
font-weight: var(--ds-site-skip-weight);
line-height: var(--ds-site-skip-leading);
text-decoration: none;
transform: translateY(-100%);
}
.ds-site__skip:focus-visible {
inset-block-start: var(--ds-space-3);
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
transform: none;
}
.ds-site__section {
container-type: inline-size;
container-name: ds-band;
}
@container ds-band (width <= 40rem) {
.ds-site__band {
--ds-site-gutter: var(--ds-space-4);
}
}
.ds-site:has(.ds-header--sticky) :target {
scroll-margin-block-start: var(--ds-site-anchor, var(--ds-size-6));
}
.ds-site > .ds-drawer--inline {
position: fixed;
inset: 0;
inline-size: 100%;
max-inline-size: none;
max-block-size: none;
transition: none;
border-radius: 0;
border-width: 0;
background-color: var(--ds-surface-0);
}
.ds-hero {
container-type: inline-size;
display: grid;
gap: var(--ds-rhythm-block);
align-items: center;
min-block-size: var(--ds-hero-height, 80svh);
align-content: center;
--ds-hero-pad: calc(var(--ds-rhythm-section) / 2);
box-sizing: border-box;
padding-block: var(--ds-hero-pad);
}
.ds-hero--split {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.ds-hero--stacked {
justify-items: center;
text-align: center;
}
.ds-hero--bare .ds-hero__media {
display: none;
}
.ds-hero__text {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
max-inline-size: var(--ds-hero-measure, 40rem);
}
.ds-hero--stacked .ds-hero__text {
align-items: center;
}
.ds-hero__eyebrow {
display: flex;
}
.ds-hero__title {
--ds-hero-title-face: var(--ds-font-heading-1-face);
--ds-hero-title-size: var(--ds-font-heading-1-size);
--ds-hero-title-weight: var(--ds-font-heading-1-weight);
--ds-hero-title-leading: var(--ds-font-heading-1-leading);
--ds-hero-title-tracking: var(--ds-font-heading-1-tracking);
--ds-hero-title-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-hero-title-face);
font-size: var(--ds-hero-title-size);
font-weight: var(--ds-hero-title-weight);
line-height: var(--ds-hero-title-leading);
letter-spacing: var(--ds-hero-title-tracking);
color: var(--ds-hero-title-ink);
text-wrap-style: balance;
}
.ds-hero__description {
--ds-hero-description-face: var(--ds-font-copy-face);
--ds-hero-description-tracking: var(--ds-font-copy-tracking);
--ds-hero-description-size: var(--ds-font-copy-size);
--ds-hero-description-weight: var(--ds-font-copy-weight);
--ds-hero-description-leading: var(--ds-font-copy-leading);
font-family: var(--ds-hero-description-face);
font-size: var(--ds-hero-description-size);
letter-spacing: var(--ds-hero-description-tracking);
font-weight: var(--ds-hero-description-weight);
line-height: var(--ds-hero-description-leading);
--ds-hero-description-ink: var(--ds-text-secondary-neutral);
color: var(--ds-hero-description-ink);
text-wrap-style: pretty;
}
.ds-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-3);
padding-block-start: var(--ds-space-2);
}
.ds-hero--stacked .ds-hero__actions {
justify-content: center;
}
.ds-hero__note {
--ds-hero-note-face: var(--ds-font-label-face);
--ds-hero-note-tracking: var(--ds-font-label-tracking);
--ds-hero-note-size: var(--ds-font-label-size);
--ds-hero-note-weight: var(--ds-font-label-weight);
--ds-hero-note-leading: var(--ds-font-label-leading);
font-family: var(--ds-hero-note-face);
font-size: var(--ds-hero-note-size);
letter-spacing: var(--ds-hero-note-tracking);
font-weight: var(--ds-hero-note-weight);
line-height: var(--ds-hero-note-leading);
--ds-hero-note-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-hero-note-ink);
}
.ds-hero__media {
display: block;
inline-size: 100%;
aspect-ratio: var(--ds-hero-ratio, 4 / 3);
overflow: hidden;
border-radius: var(--ds-radius-3);
background-color: var(--ds-surface-2);
}
.ds-hero--stacked .ds-hero__media {
--ds-hero-ratio: 16 / 9;
max-inline-size: var(--ds-hero-shot, 60rem);
}
.ds-hero__media > img,
.ds-hero__media > video {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--ds-hero-focus, 50% 50%);
}
@container (width <= 40rem) {
.ds-hero--split > * {
grid-column: 1 / -1;
}
}
.ds-tab-bar {
--ds-tab-bar-weight-current: var(--ds-current-weight);
box-sizing: border-box;
display: flex;
align-items: stretch;
inline-size: 100%;
border-block-start: 1px solid var(--ds-border-subtle);
background-color: var(--ds-surface-0);
padding-block-end: env(safe-area-inset-bottom, 0px);
}
.ds-tab-bar__item {
box-sizing: border-box;
display: flex;
flex: 1 1 0;
min-inline-size: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ds-space-1);
padding-block: var(--ds-space-2);
--ds-tab-bar-item-ink: var(--ds-text-secondary-neutral);
color: var(--ds-tab-bar-item-ink);
text-decoration: none;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-tab-bar__item {
min-block-size: var(--ds-size-6);
}
.ds-tab-bar__mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--ds-size-1);
block-size: var(--ds-size-1);
}
.ds-tab-bar__mark > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-tab-bar__badge {
position: absolute;
inset-block-start: 0;
inset-inline-start: 50%;
transform: translate(-25%, -50%);
}
.ds-tab-bar__label {
--ds-tab-bar-label-face: var(--ds-font-small-face);
--ds-tab-bar-label-tracking: var(--ds-font-small-tracking);
--ds-tab-bar-label-size: var(--ds-font-small-size);
--ds-tab-bar-label-leading: var(--ds-font-small-leading);
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--ds-tab-bar-label-face);
font-size: var(--ds-tab-bar-label-size);
letter-spacing: var(--ds-tab-bar-label-tracking);
line-height: var(--ds-tab-bar-label-leading);
}
.ds-tab-bar__item:hover {
--ds-tab-bar-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-tab-bar-item-ink);
}
.ds-tab-bar__item:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: -2px;
border-radius: var(--ds-radius-1);
}
.ds-tab-bar__item[aria-current] {
--ds-tab-bar-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-tab-bar-item-ink);
}
.ds-tab-bar__item[aria-current] .ds-tab-bar__label {
font-weight: var(--ds-tab-bar-weight-current);
}
.ds-tab-bar--marks .ds-tab-bar__item {
min-block-size: var(--ds-size-4);
}
.ds-app-shell {
--ds-app-shell-gutter: var(--ds-space-6);
--ds-app-shell-head-room: env(safe-area-inset-top, 0px);
--ds-app-shell-end-room: env(safe-area-inset-bottom, 0px);
container-type: inline-size;
container-name: ds-app-shell;
position: relative;
display: flex;
flex-direction: column;
block-size: var(--ds-app-shell-size, 100dvh);
min-block-size: 0;
}
.ds-app-shell--reading {
block-size: auto;
min-block-size: var(--ds-app-shell-size, 100dvh);
}
.ds-app-shell__head {
flex: none;
display: flex;
align-items: center;
min-inline-size: 0;
}
.ds-app-shell__head > .ds-header {
flex: 1;
min-inline-size: 0;
padding-block-start: var(--ds-app-shell-head-room);
}
.ds-app-shell__body {
box-sizing: border-box;
flex: 1;
display: flex;
min-inline-size: 0;
position: relative;
z-index: 0;
min-block-size: 0;
}
.ds-app-shell__aside {
flex: none;
display: flex;
min-inline-size: 0;
min-block-size: 0;
}
.ds-app-shell__skip {
--ds-app-shell-skip-face: var(--ds-font-label-face);
--ds-app-shell-skip-tracking: var(--ds-font-label-tracking);
--ds-app-shell-skip-size: var(--ds-font-label-size);
--ds-app-shell-skip-weight: var(--ds-font-label-weight);
--ds-app-shell-skip-leading: var(--ds-font-label-leading);
--ds-app-shell-skip-ink: var(--ds-text-primary-neutral);
position: absolute;
inset-inline-start: var(--ds-space-3);
inset-block-start: calc(var(--ds-space-3) * -1);
z-index: 2;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-1);
color: var(--ds-app-shell-skip-ink);
font-family: var(--ds-app-shell-skip-face);
font-size: var(--ds-app-shell-skip-size);
letter-spacing: var(--ds-app-shell-skip-tracking);
font-weight: var(--ds-app-shell-skip-weight);
line-height: var(--ds-app-shell-skip-leading);
text-decoration: none;
transform: translateY(-100%);
}
.ds-app-shell__skip:focus-visible {
inset-block-start: var(--ds-space-3);
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
transform: none;
}
.ds-app-shell__main {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-inline-size: 0;
min-block-size: 0;
}
.ds-app-shell__foot {
flex: none;
min-inline-size: 0;
}
.ds-app-shell:has(> .ds-app-shell__foot .ds-tab-bar) {
--ds-app-shell-foot-room: calc(var(--ds-size-6) + 1px + env(safe-area-inset-bottom, 0px));
}
.ds-app-shell--app .ds-app-shell__aside {
border-inline-end: 1px solid var(--ds-border-subtle);
}
.ds-app-shell--app .ds-app-shell__main {
overflow-y: auto;
padding: var(--ds-app-shell-gutter);
padding-inline:
calc(var(--ds-app-shell-gutter) + env(safe-area-inset-left, 0px))
calc(var(--ds-app-shell-gutter) + env(safe-area-inset-right, 0px));
}
.ds-app-shell--app:not(:has(> .ds-app-shell__foot)) .ds-app-shell__main {
padding-block-end: calc(var(--ds-app-shell-gutter) + var(--ds-app-shell-end-room));
}
.ds-app-shell--app .ds-app-shell__main > *:not(dialog, [popover], .ds-toasts) {
max-inline-size: var(--ds-app-shell-measure, none);
margin-inline: auto;
inline-size: 100%;
}
.ds-app-shell--reading {
block-size: auto;
overflow-y: auto;
}
.ds-app-shell--reading .ds-header {
--ds-header-width: var(--ds-app-shell-measure, 76rem);
--ds-header-gutter: var(--ds-app-shell-gutter);
}
.ds-app-shell--reading .ds-app-shell__body {
max-inline-size: var(--ds-app-shell-measure, 76rem);
margin-inline: auto;
inline-size: 100%;
}
.ds-app-shell--reading .ds-app-shell__body {
padding-inline: var(--ds-app-shell-gutter);
}
.ds-app-shell--reading .ds-app-shell__body {
column-gap: var(--ds-rhythm-block);
}
.ds-app-shell--reading .ds-app-shell__aside {
align-items: start;
}
.ds-app-shell--reading .ds-app-shell__main {
padding-block: var(--ds-rhythm-block);
}
@container (width <= 64rem) {
.ds-app-shell--tablet .ds-app-shell__aside {
display: none;
}
.ds-app-shell--tablet .ds-header__mark--sidebar {
display: none;
}
.ds-app-shell--tablet .ds-header__mark--menu {
display: inline-flex;
}
.ds-app-shell--tablet {
--ds-app-shell-gutter: var(--ds-space-4);
}
}
@container (width <= 80rem) {
.ds-app-shell--desktop .ds-app-shell__aside {
display: none;
}
.ds-app-shell--desktop .ds-header__mark--sidebar {
display: none;
}
.ds-app-shell--desktop .ds-header__mark--menu {
display: inline-flex;
}
.ds-app-shell--desktop {
--ds-app-shell-gutter: var(--ds-space-4);
}
}
@container (width > 40rem) {
.ds-app-shell__head:has(.ds-header__nav) ~ .ds-app-shell__foot {
display: none;
}
}
@container (width > 64rem) {
.ds-app-shell--tablet .ds-app-shell__body:has(.ds-app-shell__aside) ~ .ds-app-shell__foot {
display: none;
}
.ds-app-shell--tablet:has(> .ds-app-shell__foot .ds-tab-bar):has(.ds-app-shell__aside) {
--ds-app-shell-foot-room: 0px;
}
.ds-app-shell--tablet > .ds-drawer {
display: none;
}
}
@container (width > 80rem) {
.ds-app-shell--desktop .ds-app-shell__body:has(.ds-app-shell__aside) ~ .ds-app-shell__foot {
display: none;
}
.ds-app-shell--desktop:has(> .ds-app-shell__foot .ds-tab-bar):has(.ds-app-shell__aside) {
--ds-app-shell-foot-room: 0px;
}
.ds-app-shell--desktop > .ds-drawer {
display: none;
}
}
.ds-app-shell > .ds-drawer--inline {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
max-block-size: none;
transition: none;
border-radius: 0;
border-block-width: 0;
border-inline-start-width: 0;
}
.ds-app-shell:has(> .ds-drawer--inline[data-open="true"])::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--ds-scrim);
}
.ds-app-shell > .ds-drawer--inline .ds-drawer__body {
padding: 0;
}
.ds-app-shell > .ds-drawer--inline .ds-sidebar {
background-color: transparent;
}
.ds-app-shell > .ds-drawer--inline .ds-sidebar {
inline-size: 100%;
}
.ds-auth {
container-type: inline-size;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-block-size: var(--ds-auth-size, 100dvh);
background-color: var(--ds-surface-0);
--ds-auth-ink: var(--ds-text-primary-neutral);
color: var(--ds-auth-ink);
}
.ds-auth__grid {
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"panel"
"stage";
flex: 1;
min-block-size: 0;
}
.ds-auth__panel {
grid-area: panel;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--ds-rhythm-element);
padding: var(--ds-rhythm-block);
background-color: var(--ds-auth-panel, var(--ds-inverse));
color: var(--ds-auth-panel-ink, var(--ds-on-inverse));
}
.ds-auth__brand {
--ds-auth-brand-face: var(--ds-font-heading-5-face);
--ds-auth-brand-size: var(--ds-font-heading-5-size);
--ds-auth-brand-weight: var(--ds-font-heading-5-weight);
--ds-auth-brand-leading: var(--ds-font-heading-5-leading);
--ds-auth-brand-tracking: var(--ds-font-heading-5-tracking);
display: flex;
align-items: center;
gap: var(--ds-space-3);
font-family: var(--ds-auth-brand-face);
font-size: var(--ds-auth-brand-size);
font-weight: var(--ds-auth-brand-weight);
line-height: var(--ds-auth-brand-leading);
letter-spacing: var(--ds-auth-brand-tracking);
}
.ds-auth__stage {
grid-area: stage;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow-y: auto;
padding: var(--ds-rhythm-block) var(--ds-space-6);
}
.ds-auth__card {
inline-size: 100%;
max-inline-size: var(--ds-auth-measure, 24rem);
}
.ds-auth__panel {
padding: var(--ds-rhythm-element) var(--ds-space-6);
}
@container (min-width: 60rem) {
.ds-auth--split .ds-auth__grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "panel stage";
}
.ds-auth--split.ds-auth--end .ds-auth__grid {
grid-template-areas: "stage panel";
}
.ds-auth--split .ds-auth__panel {
padding: var(--ds-rhythm-block);
}
}
.ds-auth--bare .ds-auth__grid {
grid-template-rows: 1fr;
grid-template-areas: "stage";
}
.ds-auth--bare .ds-auth__stage {
flex-direction: column;
gap: var(--ds-rhythm-block);
}
.ds-auth--bare .ds-auth__card {
box-sizing: border-box;
padding: var(--ds-space-8);
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-3);
}
.ds-auth--bare .ds-auth__brand {
justify-content: center;
}
.ds-auth__foot {
--ds-auth-foot-face: var(--ds-font-small-face);
--ds-auth-foot-size: var(--ds-font-small-size);
--ds-auth-foot-weight: var(--ds-font-small-weight);
--ds-auth-foot-leading: var(--ds-font-small-leading);
--ds-auth-foot-tracking: var(--ds-font-small-tracking);
margin: 0;
font-family: var(--ds-auth-foot-face);
font-size: var(--ds-auth-foot-size);
font-weight: var(--ds-auth-foot-weight);
line-height: var(--ds-auth-foot-leading);
letter-spacing: var(--ds-auth-foot-tracking);
--ds-auth-foot-ink: var(--ds-text-secondary-neutral);
color: var(--ds-auth-foot-ink);
}
.ds-truncated-text {
--ds-truncated-text-gap: var(--ds-rhythm-line);
display: flex;
flex-direction: column;
align-items: start;
gap: var(--ds-truncated-text-gap);
}
.ds-truncated-text__body {
--ds-truncated-text-lines: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ds-truncated-text-lines);
line-clamp: var(--ds-truncated-text-lines);
overflow: hidden;
}
.ds-truncated-text[data-open="true"] .ds-truncated-text__body {
display: block;
-webkit-line-clamp: none;
line-clamp: none;
}
.ds-truncated-text[data-open="true"] .ds-swap__off {
display: none;
}
.ds-truncated-text[data-open="true"] .ds-swap__on {
display: inline-flex;
}
.ds-page-head {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
}
.ds-page-head__name {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--ds-rhythm-element);
row-gap: var(--ds-rhythm-line);
align-items: center;
}
.ds-page-head__name:has(> .ds-button):has(> .ds-page-head__icon) {
grid-template-columns: auto auto minmax(0, 1fr);
}
.ds-page-head__name > :not(.ds-button, .ds-page-head__icon) {
grid-column: -2;
}
.ds-page-head__name > .ds-button {
grid-column: 1;
grid-row: 1;
}
.ds-page-head__name > .ds-page-head__icon {
grid-column: -3;
grid-row: 1;
}
.ds-page-head__icon {
--ds-page-head-icon-size: var(--ds-font-heading-2-size);
--ds-page-head-icon-leading: var(--ds-font-heading-2-leading);
display: inline-flex;
flex: none;
font-size: var(--ds-page-head-icon-size);
line-height: var(--ds-page-head-icon-leading);
inline-size: 1lh;
block-size: 1lh;
}
.ds-page-head__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-page-head__eyebrow {
--ds-page-head-eyebrow-face: var(--ds-font-overline-face);
--ds-page-head-eyebrow-size: var(--ds-font-overline-size);
--ds-page-head-eyebrow-weight: var(--ds-font-overline-weight);
--ds-page-head-eyebrow-leading: var(--ds-font-overline-leading);
--ds-page-head-eyebrow-tracking: var(--ds-font-overline-tracking);
--ds-page-head-eyebrow-ink: var(--ds-text-secondary-neutral);
margin: 0;
font-family: var(--ds-page-head-eyebrow-face);
font-size: var(--ds-page-head-eyebrow-size);
font-weight: var(--ds-page-head-eyebrow-weight);
line-height: var(--ds-page-head-eyebrow-leading);
letter-spacing: var(--ds-page-head-eyebrow-tracking);
text-transform: uppercase;
color: var(--ds-page-head-eyebrow-ink);
}
.ds-page-head__title {
--ds-page-head-title-face: var(--ds-font-heading-2-face);
--ds-page-head-title-size: var(--ds-font-heading-2-size);
--ds-page-head-title-weight: var(--ds-font-heading-2-weight);
--ds-page-head-title-leading: var(--ds-font-heading-2-leading);
--ds-page-head-title-tracking: var(--ds-font-heading-2-tracking);
margin: 0;
font-family: var(--ds-page-head-title-face);
font-size: var(--ds-page-head-title-size);
font-weight: var(--ds-page-head-title-weight);
line-height: var(--ds-page-head-title-leading);
letter-spacing: var(--ds-page-head-title-tracking);
text-wrap-style: balance;
}
.ds-page-head__lede {
--ds-page-head-lede-face: var(--ds-font-copy-prose-face);
--ds-page-head-lede-size: var(--ds-font-copy-prose-size);
--ds-page-head-lede-weight: var(--ds-font-copy-prose-weight);
--ds-page-head-lede-leading: var(--ds-font-copy-prose-leading);
--ds-page-head-lede-tracking: var(--ds-font-copy-prose-tracking);
--ds-page-head-lede-ink: var(--ds-text-secondary-neutral);
margin: 0;
font-family: var(--ds-page-head-lede-face);
font-size: var(--ds-page-head-lede-size);
font-weight: var(--ds-page-head-lede-weight);
line-height: var(--ds-page-head-lede-leading);
letter-spacing: var(--ds-page-head-lede-tracking);
color: var(--ds-page-head-lede-ink);
text-wrap-style: pretty;
}
.ds-page-head--site .ds-page-head__lede {
--ds-page-head-lede-measure: calc(var(--ds-site-measure, 44rem) - 2 * var(--ds-site-gutter, var(--ds-space-6)));
max-inline-size: var(--ds-page-head-lede-measure);
}
.ds-page-head--site .ds-page-head__title + .ds-page-head__lede,
.ds-page-head--site :is(.ds-page-head__title, .ds-page-head__lede) + .ds-page-head__meta {
margin-block-start: calc(var(--ds-rhythm-element) - var(--ds-rhythm-line));
}
.ds-page-head--large .ds-page-head__title {
--ds-page-head-title-face: var(--ds-font-heading-1-face);
--ds-page-head-title-size: var(--ds-font-heading-1-size);
--ds-page-head-title-weight: var(--ds-font-heading-1-weight);
--ds-page-head-title-leading: var(--ds-font-heading-1-leading);
--ds-page-head-title-tracking: var(--ds-font-heading-1-tracking);
}
.ds-page-head--large .ds-page-head__eyebrow + .ds-page-head__title,
.ds-page-head--large .ds-page-head__title + .ds-page-head__lede,
.ds-page-head--large :is(.ds-page-head__title, .ds-page-head__lede) + .ds-page-head__meta {
margin-block-start: calc(var(--ds-space-6) - var(--ds-rhythm-line));
}
.ds-page-head--screen .ds-page-head__lede,
.ds-page-head--door .ds-page-head__lede {
--ds-page-head-lede-face: var(--ds-font-body-face);
--ds-page-head-lede-size: var(--ds-font-body-size);
--ds-page-head-lede-weight: var(--ds-font-body-weight);
--ds-page-head-lede-leading: var(--ds-font-body-leading);
--ds-page-head-lede-tracking: var(--ds-font-body-tracking);
}
.ds-page-head--door .ds-page-head__title {
--ds-page-head-title-face: var(--ds-font-heading-4-face);
--ds-page-head-title-size: var(--ds-font-heading-4-size);
--ds-page-head-title-weight: var(--ds-font-heading-4-weight);
--ds-page-head-title-leading: var(--ds-font-heading-4-leading);
--ds-page-head-title-tracking: var(--ds-font-heading-4-tracking);
}
.ds-page-head__meta {
--ds-page-head-meta-face: var(--ds-font-label-face);
--ds-page-head-meta-size: var(--ds-font-label-size);
--ds-page-head-meta-weight: var(--ds-font-label-weight);
--ds-page-head-meta-leading: var(--ds-font-label-leading);
--ds-page-head-meta-tracking: var(--ds-font-label-tracking);
--ds-page-head-meta-ink: var(--ds-text-tertiary-neutral);
margin: 0;
font-family: var(--ds-page-head-meta-face);
font-size: var(--ds-page-head-meta-size);
font-weight: var(--ds-page-head-meta-weight);
line-height: var(--ds-page-head-meta-leading);
letter-spacing: var(--ds-page-head-meta-tracking);
color: var(--ds-page-head-meta-ink);
}
.ds-admin-form {
--ds-admin-form-measure: none;
--ds-admin-form-rail: 20rem;
max-inline-size: var(--ds-admin-form-measure);
margin-inline: auto;
inline-size: 100%;
container-type: inline-size;
}
.ds-admin-form__body {
max-inline-size: var(--ds-admin-form-measure);
}
.ds-admin-form__cols {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-rhythm-block);
align-items: start;
}
@container (min-width: 60rem) {
.ds-admin-form__cols {
grid-template-columns: minmax(0, 1fr) var(--ds-admin-form-rail);
}
.ds-admin-form__fields {
grid-column: 1;
grid-row: 1;
}
.ds-admin-form__aside {
grid-column: 2;
grid-row: 1;
position: sticky;
inset-block-start: var(--ds-rhythm-block);
align-self: start;
}
.ds-admin-form__acts {
grid-column: 1;
grid-row: 2;
}
}
.ds-admin-form__fields {
min-inline-size: 0;
}
.ds-admin-form__aside {
min-inline-size: 0;
}
.ds-admin-list--fill {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-block-size: 0;
}
.ds-admin-list--fill > .ds-stack,
.ds-admin-list--fill > .ds-stack > .ds-stack:last-child {
flex: 1 1 auto;
min-block-size: 0;
}
.ds-admin-list--fill > .ds-stack > .ds-stack > * {
flex: 1 1 auto;
min-block-size: 0;
}
.ds-admin-list--fill > .ds-stack > .ds-stack > .ds-pagination {
flex: none;
}
.ds-admin-list--fill .ds-table {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-block-size: 0;
}
.ds-admin-list--fill .ds-table__scroll {
flex: 1 1 auto;
min-block-size: 0;
}
.ds-admin-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--ds-rhythm-element);
}
.ds-admin-section__name {
--ds-admin-section-face: var(--ds-font-heading-4-face);
--ds-admin-section-size: var(--ds-font-heading-4-size);
--ds-admin-section-weight: var(--ds-font-heading-4-weight);
--ds-admin-section-leading: var(--ds-font-heading-4-leading);
--ds-admin-section-tracking: var(--ds-font-heading-4-tracking);
margin: 0;
font-family: var(--ds-admin-section-face);
font-size: var(--ds-admin-section-size);
font-weight: var(--ds-admin-section-weight);
line-height: var(--ds-admin-section-leading);
letter-spacing: var(--ds-admin-section-tracking);
text-wrap-style: balance;
}
.ds-admin-section__name:has(> .ds-admin-section__icon) {
display: flex;
align-items: flex-start;
gap: var(--ds-space-2);
}
.ds-admin-section__icon {
display: inline-flex;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-admin-section__icon > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-admin-section__action {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-rhythm-line);
}
.ds-security__factor {
--ds-security-factor-face: var(--ds-font-body-face);
--ds-security-factor-size: var(--ds-font-body-size);
--ds-security-factor-weight: var(--ds-font-body-weight);
--ds-security-factor-leading: var(--ds-font-body-leading);
--ds-security-factor-tracking: var(--ds-font-body-tracking);
--ds-security-factor-ink: var(--ds-text-secondary-neutral);
margin: 0;
font-family: var(--ds-security-factor-face);
font-size: var(--ds-security-factor-size);
font-weight: var(--ds-security-factor-weight);
line-height: var(--ds-security-factor-leading);
letter-spacing: var(--ds-security-factor-tracking);
color: var(--ds-security-factor-ink);
}
.ds-dashboard__go {
--ds-dashboard-go-ink: var(--ds-text-tertiary-neutral);
display: inline-flex;
flex: none;
color: var(--ds-dashboard-go-ink);
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-card:has(.ds-card__link:hover) .ds-dashboard__go,
.ds-card:has(.ds-card__link:focus-visible) .ds-dashboard__go {
--ds-dashboard-go-ink: var(--ds-text-primary-neutral);
}
.ds-dashboard__feature {
--ds-dashboard-feature-ratio: 4 / 1;
container-type: inline-size;
}
@container (width > 40rem) {
.ds-dashboard__feature .ds-chart {
--ds-chart-ratio: var(--ds-dashboard-feature-ratio);
}
}
.ds-site-page__cover {
--ds-site-page-cover-radius: var(--ds-radius-3);
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--ds-site-page-cover-radius);
}
.ds-chart {
--ds-chart-chase: 0.4s;
--ds-chart-chase-ease: ease;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-chart__frame {
display: flex;
gap: var(--ds-space-2);
align-items: stretch;
min-inline-size: 0;
}
.ds-chart__frame:has(> .ds-chart__axis-x) {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.ds-chart__frame:has(> .ds-chart__axis-y):has(> .ds-chart__axis-x) {
grid-template-columns: auto minmax(0, 1fr);
}
.ds-chart__frame > .ds-chart__axis-x {
grid-column: -2;
}
.ds-chart__plot {
position: relative;
flex: 1;
min-inline-size: 0;
aspect-ratio: var(--ds-chart-ratio, 2 / 1);
}
.ds-chart--round {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--ds-space-6);
}
.ds-chart--round .ds-chart__legend {
flex-direction: column;
align-items: flex-start;
gap: var(--ds-space-2);
}
.ds-chart--round .ds-chart__table {
flex-basis: 100%;
}
.ds-chart__plot--round {
aspect-ratio: 1;
align-self: center;
inline-size: min(100%, var(--ds-chart-wheel, 20rem));
flex: none;
}
.ds-chart__svg {
display: block;
inline-size: 100%;
block-size: 100%;
overflow: visible;
}
.ds-chart__grid {
stroke: var(--ds-chart-grid, var(--ds-border));
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}
.ds-chart__line {
fill: none;
stroke: var(--ds-chart-series);
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.ds-chart__area {
fill: var(--ds-chart-series);
fill-opacity: var(--ds-chart-wash, 0.4);
}
.ds-chart__area--gradient {
fill-opacity: 1;
}
.ds-chart__stop-top {
stop-color: var(--ds-chart-series);
stop-opacity: 0.8;
}
.ds-chart__stop-bottom {
stop-color: var(--ds-chart-series);
stop-opacity: 0.1;
}
.ds-chart__zero {
stroke: var(--ds-chart-zero, var(--ds-border-strong));
vector-effect: non-scaling-stroke;
}
.ds-chart__value {
position: absolute;
transform: translate(-50%, calc(-100% - var(--ds-space-1)));
--ds-chart-value-face: var(--ds-font-small-face);
--ds-chart-value-size: var(--ds-font-small-size);
--ds-chart-value-weight: var(--ds-font-small-weight);
--ds-chart-value-leading: var(--ds-font-small-leading);
--ds-chart-value-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-chart-value-face);
font-size: var(--ds-chart-value-size);
font-weight: var(--ds-chart-value-weight);
line-height: var(--ds-chart-value-leading);
letter-spacing: var(--ds-chart-value-tracking);
--ds-chart-value-ink: var(--ds-text-secondary-neutral);
color: var(--ds-chart-value-ink);
pointer-events: none;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ds-chart__value--under {
transform: translate(-50%, var(--ds-space-1));
}
.ds-chart__value--beside {
transform: translate(var(--ds-space-1), -50%);
}
.ds-chart__frame:has(.ds-chart__value--beside) {
--ds-chart-value-room: var(--ds-space-12);
padding-inline-end: var(--ds-chart-value-room);
}
.ds-chart__value--beside.ds-chart__value--under {
transform: translate(calc(-100% - var(--ds-space-1)), -50%);
}
.ds-chart__value--in {
transform: translate(-50%, -50%);
--ds-chart-value-ink: var(--ds-static-white);
}
.ds-chart__bar {
fill: var(--ds-chart-series);
}
.ds-chart__slice {
fill: var(--ds-chart-series);
}
.ds-chart__middle {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
pointer-events: none;
}
.ds-chart__point {
fill: none;
stroke: var(--ds-chart-series);
stroke-width: 6px;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.ds-chart__ring {
fill: none;
stroke: var(--ds-chart-series);
stroke-linecap: round;
}
.ds-chart__track {
fill: none;
stroke: var(--ds-chart-track, var(--ds-surface-2));
}
.ds-chart__plot--matrix {
aspect-ratio: auto;
}
.ds-chart__matrix {
display: grid;
grid-template-columns: repeat(var(--ds-chart-cols, 1), minmax(0, var(--ds-chart-cell, 1.25rem)));
justify-content: start;
gap: var(--ds-space-1);
}
.ds-chart__matrix--values {
--ds-chart-cell: 3.5rem;
justify-content: center;
}
.ds-chart__matrix-axis {
display: grid;
grid-template-columns: repeat(var(--ds-chart-cols, 1), minmax(0, var(--ds-chart-cell, 1.25rem)));
justify-content: start;
gap: var(--ds-space-1);
margin-block-end: var(--ds-space-1);
}
.ds-chart__matrix-axis:has(+ .ds-chart__matrix--values) {
--ds-chart-cell: 3.5rem;
justify-content: center;
}
.ds-chart__matrix-tick {
grid-row: 1;
text-align: start;
white-space: nowrap;
overflow: visible;
}
.ds-chart__cell {
aspect-ratio: 1;
border-radius: var(--ds-radius-1);
background-color: color-mix(in oklab, var(--ds-chart-series) var(--ds-chart-heat, 100%), var(--ds-surface-2));
display: grid;
place-items: center;
overflow: hidden;
--ds-chart-cell-face: var(--ds-font-label-face);
--ds-chart-cell-size: var(--ds-font-label-size);
--ds-chart-cell-weight: var(--ds-font-label-weight);
--ds-chart-cell-leading: var(--ds-font-label-leading);
--ds-chart-cell-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-chart-cell-face);
font-size: var(--ds-chart-cell-size);
font-weight: var(--ds-chart-cell-weight);
line-height: var(--ds-chart-cell-leading);
letter-spacing: var(--ds-chart-cell-tracking);
--ds-chart-cell-ink: var(--ds-text-primary-neutral);
color: var(--ds-chart-cell-ink);
font-variant-numeric: tabular-nums;
}
.ds-chart__cell--void {
background-color: transparent;
}
.ds-chart__matrix--rowed {
grid-template-columns: max-content repeat(var(--ds-chart-cols, 1), minmax(0, var(--ds-chart-cell, 1.25rem)));
}
.ds-chart__matrix-row {
align-self: center;
text-align: end;
padding-inline-end: var(--ds-space-2);
white-space: nowrap;
}
.ds-chart__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
--ds-chart-empty-face: var(--ds-font-small-face);
--ds-chart-empty-size: var(--ds-font-small-size);
--ds-chart-empty-weight: var(--ds-font-small-weight);
--ds-chart-empty-leading: var(--ds-font-small-leading);
--ds-chart-empty-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-chart-empty-face);
font-size: var(--ds-chart-empty-size);
font-weight: var(--ds-chart-empty-weight);
line-height: var(--ds-chart-empty-leading);
letter-spacing: var(--ds-chart-empty-tracking);
--ds-chart-empty-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-chart-empty-ink);
}
.ds-chart__matrix--dots {
grid-template-columns: repeat(var(--ds-chart-cols, 1), minmax(0, 1fr));
gap: var(--ds-space-0-5);
}
.ds-chart__cell--dot {
display: grid;
place-items: center;
}
.ds-chart__cell--dot {
background-color: transparent;
}
.ds-chart__pip {
display: block;
inline-size: min(var(--ds-chart-dot, 100%), var(--ds-chart-pip, 0.625rem));
aspect-ratio: 1;
border-radius: var(--ds-radius-full);
background-color: color-mix(in oklab, var(--ds-chart-series) var(--ds-chart-heat, 100%), transparent);
}
.ds-chart__wheel-label {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
}
.ds-chart__cursor {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 1px;
background-color: var(--ds-chart-cursor, var(--ds-border-strong));
pointer-events: none;
will-change: transform;
}
.ds-chart__cursor--band {
background-color: var(--ds-chart-cursor-band, var(--ds-surface-hover));
}
.ds-chart__cursor--hband {
inset-inline: 0;
inset-block-start: 0;
inset-block-end: auto;
inline-size: auto;
}
.ds-chart__axis-x {
display: flex;
justify-content: space-between;
}
.ds-chart__axis-y {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
text-align: end;
}
.ds-chart__axis-y--bands {
flex-direction: column;
justify-content: space-around;
}
.ds-chart__tick {
--ds-chart-tick-face: var(--ds-font-small-face);
--ds-chart-tick-size: var(--ds-font-small-size);
--ds-chart-tick-weight: var(--ds-font-small-weight);
--ds-chart-tick-leading: var(--ds-font-small-leading);
--ds-chart-tick-tracking: var(--ds-font-small-tracking);
font-family: var(--ds-chart-tick-face);
font-size: var(--ds-chart-tick-size);
font-weight: var(--ds-chart-tick-weight);
line-height: var(--ds-chart-tick-leading);
letter-spacing: var(--ds-chart-tick-tracking);
--ds-chart-tick-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-chart-tick-ink);
white-space: nowrap;
}
.ds-chart__legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ds-space-4);
}
.ds-chart__key {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
border: 0;
padding: 0;
background: none;
cursor: pointer;
font: inherit;
--ds-chart-key-face: var(--ds-font-label-face);
--ds-chart-key-size: var(--ds-font-label-size);
--ds-chart-key-weight: var(--ds-font-label-weight);
--ds-chart-key-leading: var(--ds-font-label-leading);
--ds-chart-key-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-chart-key-face);
font-size: var(--ds-chart-key-size);
font-weight: var(--ds-chart-key-weight);
line-height: var(--ds-chart-key-leading);
letter-spacing: var(--ds-chart-key-tracking);
--ds-chart-key-ink: var(--ds-text-secondary-neutral);
color: var(--ds-chart-key-ink);
}
.ds-chart__dot {
inline-size: var(--ds-space-2);
block-size: var(--ds-space-2);
border-radius: var(--ds-radius-1);
background-color: var(--ds-chart-series);
flex: none;
}
.ds-chart__key--off {
opacity: 0.45;
}
.ds-chart__key--off .ds-chart__dot {
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--ds-chart-series);
}
.ds-chart__dim {
opacity: 0.3;
transition: opacity var(--ds-duration) var(--ds-ease);
}
.ds-chart__tip {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
will-change: transform;
transition: transform var(--ds-chart-chase) var(--ds-chart-chase-ease);
display: none;
flex-direction: column;
gap: var(--ds-space-1);
padding: var(--ds-space-2) var(--ds-space-3);
background-color: var(--ds-surface-1);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
pointer-events: none;
white-space: nowrap;
z-index: 1;
}
.ds-chart__tip[data-open] {
display: flex;
}
.ds-chart__axis-x--bands {
display: grid;
grid-template-columns: repeat(var(--ds-chart-cols, 1), minmax(0, 1fr));
container-type: inline-size;
}
.ds-chart__axis-x--bands > .ds-chart__tick {
grid-row: 1;
justify-self: center;
}
.ds-chart__axis-x--points {
display: grid;
grid-template-columns: minmax(0, 1fr);
container-type: inline-size;
}
.ds-chart__axis-x--points > .ds-chart__tick {
grid-area: 1 / 1;
justify-self: start;
position: relative;
inset-inline-start: var(--ds-chart-at, 0%);
translate: -50% 0;
}
.ds-chart__axis-x--points > .ds-chart__tick:first-child {
translate: none;
}
.ds-chart__axis-x--points > .ds-chart__tick:last-child {
translate: -100% 0;
}
.ds-chart__axis-x--points > .ds-chart__tick:only-child {
translate: -50% 0;
}
@container (width < 60rem) {
.ds-chart__tick--wide {
display: none;
}
}
@container (width < 30rem) {
.ds-chart__tick--roomy {
display: none;
}
}
.ds-chart__tip-title {
--ds-chart-tip-title-face: var(--ds-font-label-face);
--ds-chart-tip-title-size: var(--ds-font-label-size);
--ds-chart-tip-title-weight: var(--ds-emphasis-weight);
--ds-chart-tip-title-leading: var(--ds-font-label-leading);
--ds-chart-tip-title-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-chart-tip-title-face);
font-size: var(--ds-chart-tip-title-size);
font-weight: var(--ds-chart-tip-title-weight);
line-height: var(--ds-chart-tip-title-leading);
letter-spacing: var(--ds-chart-tip-title-tracking);
--ds-chart-tip-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-chart-tip-title-ink);
}
.ds-chart__tip-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
--ds-chart-tip-row-face: var(--ds-font-label-face);
--ds-chart-tip-row-size: var(--ds-font-label-size);
--ds-chart-tip-row-weight: var(--ds-font-label-weight);
--ds-chart-tip-row-leading: var(--ds-font-label-leading);
--ds-chart-tip-row-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-chart-tip-row-face);
font-size: var(--ds-chart-tip-row-size);
font-weight: var(--ds-chart-tip-row-weight);
line-height: var(--ds-chart-tip-row-leading);
letter-spacing: var(--ds-chart-tip-row-tracking);
--ds-chart-tip-row-ink: var(--ds-text-secondary-neutral);
color: var(--ds-chart-tip-row-ink);
}
.ds-chart__table-summary {
--ds-chart-table-summary-face: var(--ds-font-label-face);
--ds-chart-table-summary-size: var(--ds-font-label-size);
--ds-chart-table-summary-weight: var(--ds-font-label-weight);
--ds-chart-table-summary-leading: var(--ds-font-label-leading);
--ds-chart-table-summary-tracking: var(--ds-font-label-tracking);
font-family: var(--ds-chart-table-summary-face);
font-size: var(--ds-chart-table-summary-size);
font-weight: var(--ds-chart-table-summary-weight);
line-height: var(--ds-chart-table-summary-leading);
letter-spacing: var(--ds-chart-table-summary-tracking);
--ds-chart-table-summary-ink: var(--ds-text-secondary-neutral);
color: var(--ds-chart-table-summary-ink);
cursor: pointer;
inline-size: fit-content;
}
.ds-chart__table[open] .ds-chart__table-summary {
margin-block-end: var(--ds-space-2);
}
.ds-chart__tip-value {
--ds-chart-tip-value-ink: var(--ds-text-primary-neutral);
color: var(--ds-chart-tip-value-ink);
font-variant-numeric: tabular-nums;
}
.ds-code-field {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-code-field__boxes {
display: flex;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-code-field__box {
box-sizing: border-box;
flex: 1 1 auto;
min-inline-size: 0;
block-size: var(--ds-code-field-tier);
max-inline-size: var(--ds-code-field-tier);
padding: 0;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-1);
--ds-code-field-box-ink: var(--ds-text-primary-neutral);
color: var(--ds-code-field-box-ink);
--ds-code-field-box-face: var(--ds-font-mono-face);
font-family: var(--ds-code-field-box-face);
text-align: center;
transition:
border-color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-code-field--xsmall { --ds-code-field-tier: var(--ds-size-1); }
.ds-code-field--small { --ds-code-field-tier: var(--ds-size-2); }
.ds-code-field--medium { --ds-code-field-tier: var(--ds-size-3); }
.ds-code-field--large { --ds-code-field-tier: var(--ds-size-4); }
.ds-code-field--xlarge { --ds-code-field-tier: var(--ds-size-5); }
.ds-code-field--xxlarge { --ds-code-field-tier: var(--ds-size-6); }
.ds-code-field--xsmall .ds-code-field__box {
--ds-code-field-box-face: var(--ds-font-small-face);
--ds-code-field-box-tracking: var(--ds-font-small-tracking);
--ds-code-field-box-size: var(--ds-font-small-size);
--ds-code-field-box-weight: var(--ds-font-small-weight);
font-family: var(--ds-code-field-box-face);
font-size: var(--ds-code-field-box-size);
letter-spacing: var(--ds-code-field-box-tracking);
font-weight: var(--ds-code-field-box-weight);}
.ds-code-field--small .ds-code-field__box {
--ds-code-field-box-face: var(--ds-font-label-face);
--ds-code-field-box-tracking: var(--ds-font-label-tracking);
--ds-code-field-box-size: var(--ds-font-label-size);
--ds-code-field-box-weight: var(--ds-font-label-weight);
font-family: var(--ds-code-field-box-face);
font-size: var(--ds-code-field-box-size);
letter-spacing: var(--ds-code-field-box-tracking);
font-weight: var(--ds-code-field-box-weight);}
.ds-code-field--medium .ds-code-field__box,
.ds-code-field--large .ds-code-field__box,
.ds-code-field--xlarge .ds-code-field__box,
.ds-code-field--xxlarge .ds-code-field__box {
--ds-code-field-box-face: var(--ds-font-body-face);
--ds-code-field-box-tracking: var(--ds-font-body-tracking);
--ds-code-field-box-size: var(--ds-font-body-size);
--ds-code-field-box-weight: var(--ds-font-body-weight);
font-family: var(--ds-code-field-box-face);
font-size: var(--ds-code-field-box-size);
letter-spacing: var(--ds-code-field-box-tracking);
font-weight: var(--ds-code-field-box-weight);}
.ds-code-field__box:hover:not(:disabled) {
background-image: linear-gradient(var(--ds-surface-hover), var(--ds-surface-hover));
}
.ds-code-field__box:focus {
outline: none;
border-color: var(--ds-border-active);
box-shadow: 0 0 0 1px var(--ds-border-active);
}
.ds-code-field--invalid .ds-code-field__box {
border-color: var(--ds-danger);
}
.ds-code-field--invalid .ds-code-field__box:focus {
border-color: var(--ds-danger);
box-shadow: 0 0 0 1px var(--ds-danger);
}
.ds-code-field__box:disabled {
background-color: var(--ds-surface-disabled);
--ds-code-field-box-ink: var(--ds-text-disabled);
color: var(--ds-code-field-box-ink);
cursor: not-allowed;
}
.ds-docs-page {
--ds-docs-page-rail: 16rem;
container-type: inline-size;
}
.ds-docs-page__cols {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-rhythm-block);
align-items: start;
}
.ds-docs-page__rail {
grid-row: 1;
min-inline-size: 0;
}
.ds-docs-page__body {
grid-row: 2;
min-inline-size: 0;
}
.ds-docs-page__tail {
grid-row: 3;
}
.ds-docs-page__title {
--ds-docs-page-title-face: var(--ds-font-heading-2-face);
--ds-docs-page-title-size: var(--ds-font-heading-2-size);
--ds-docs-page-title-weight: var(--ds-font-heading-2-weight);
--ds-docs-page-title-leading: var(--ds-font-heading-2-leading);
--ds-docs-page-title-tracking: var(--ds-font-heading-2-tracking);
display: block;
margin: 0;
font-family: var(--ds-docs-page-title-face);
font-size: var(--ds-docs-page-title-size);
font-weight: var(--ds-docs-page-title-weight);
line-height: var(--ds-docs-page-title-leading);
letter-spacing: var(--ds-docs-page-title-tracking);
}
.ds-docs-page__lede {
--ds-docs-page-lede-face: var(--ds-font-copy-prose-face);
--ds-docs-page-lede-size: var(--ds-font-copy-prose-size);
--ds-docs-page-lede-weight: var(--ds-font-copy-prose-weight);
--ds-docs-page-lede-leading: var(--ds-font-copy-prose-leading);
--ds-docs-page-lede-tracking: var(--ds-font-copy-prose-tracking);
--ds-docs-page-lede-ink: var(--ds-text-secondary-neutral);
display: block;
margin: 0;
font-family: var(--ds-docs-page-lede-face);
font-size: var(--ds-docs-page-lede-size);
font-weight: var(--ds-docs-page-lede-weight);
line-height: var(--ds-docs-page-lede-leading);
letter-spacing: var(--ds-docs-page-lede-tracking);
color: var(--ds-docs-page-lede-ink);
}
.ds-docs-page__meta {
--ds-docs-page-meta-face: var(--ds-font-small-face);
--ds-docs-page-meta-size: var(--ds-font-small-size);
--ds-docs-page-meta-weight: var(--ds-font-small-weight);
--ds-docs-page-meta-leading: var(--ds-font-small-leading);
--ds-docs-page-meta-tracking: var(--ds-font-small-tracking);
--ds-docs-page-meta-ink: var(--ds-text-tertiary-neutral);
display: block;
margin: 0;
font-family: var(--ds-docs-page-meta-face);
font-size: var(--ds-docs-page-meta-size);
font-weight: var(--ds-docs-page-meta-weight);
line-height: var(--ds-docs-page-meta-leading);
letter-spacing: var(--ds-docs-page-meta-tracking);
color: var(--ds-docs-page-meta-ink);
}
.ds-docs-page__title + .ds-docs-page__lede,
:is(.ds-docs-page__title, .ds-docs-page__lede) + .ds-docs-page__meta {
margin-block-start: calc(var(--ds-rhythm-element) - var(--ds-rhythm-line));
}
.ds-docs-page__tail {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-element);
padding-block-start: var(--ds-rhythm-element);
border-block-start: 1px solid var(--ds-border-subtle);
}
@container (min-width: 60rem) {
.ds-docs-page__cols {
grid-template-columns: minmax(0, 1fr) var(--ds-docs-page-rail);
}
.ds-docs-page__body {
grid-column: 1;
grid-row: 1;
}
.ds-docs-page__rail {
grid-column: 2;
grid-row: 1;
position: sticky;
inset-block-start: var(--ds-rhythm-block);
align-self: start;
}
.ds-docs-page__tail {
grid-column: 1;
grid-row: 2;
}
}
.ds-divider {
--ds-divider-face: var(--ds-font-small-face);
--ds-divider-tracking: var(--ds-font-small-tracking);
--ds-divider-size: var(--ds-font-small-size);
--ds-divider-weight: var(--ds-font-small-weight);
--ds-divider-leading: var(--ds-font-small-leading);
display: flex;
align-items: center;
gap: var(--ds-space-3);
border: 0;
margin: 0;
--ds-divider-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-divider-ink);
font-family: var(--ds-divider-face);
font-size: var(--ds-divider-size);
letter-spacing: var(--ds-divider-tracking);
font-weight: var(--ds-divider-weight);
line-height: var(--ds-divider-leading);
}
.ds-divider::before,
.ds-divider::after {
content: "";
flex: 1;
block-size: 1px;
background-color: var(--ds-border-subtle);
}
.ds-divider:empty {
gap: 0;
}
.ds-divider__label {
--ds-divider-label-tracking: var(--ds-font-overline-tracking);
font-variant-caps: all-small-caps;
letter-spacing: var(--ds-divider-label-tracking);
}
.ds-footer {
background-color: var(--ds-surface-0);
border-block-start: 1px solid var(--ds-border-subtle);
--ds-footer-ink: var(--ds-text-secondary-neutral);
color: var(--ds-footer-ink);
}
.ds-footer__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-block);
inline-size: 100%;
max-inline-size: var(--ds-footer-width, 72rem);
margin-inline: auto;
padding-block: var(--ds-rhythm-block);
padding-inline: var(--ds-footer-gutter, var(--ds-space-6));
}
.ds-footer--full .ds-footer__inner {
max-inline-size: none;
}
.ds-footer__newsletter {
--ds-footer-newsletter-width: 32rem;
--ds-footer-newsletter-space: 0px;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
max-inline-size: var(--ds-footer-newsletter-width);
min-inline-size: 0;
padding-block: var(--ds-footer-newsletter-space);
}
.ds-footer__newsletter-head {
display: flex;
flex-direction: column;
gap: var(--ds-rhythm-line);
}
.ds-footer__newsletter-title {
--ds-footer-newsletter-title-face: var(--ds-font-heading-6-face);
--ds-footer-newsletter-title-size: var(--ds-font-heading-6-size);
--ds-footer-newsletter-title-leading: var(--ds-font-heading-6-leading);
--ds-footer-newsletter-title-tracking: var(--ds-font-heading-6-tracking);
margin: 0;
font-family: var(--ds-footer-newsletter-title-face);
font-size: var(--ds-footer-newsletter-title-size);
line-height: var(--ds-footer-newsletter-title-leading);
font-weight: var(--ds-font-heading-6-weight);
letter-spacing: var(--ds-footer-newsletter-title-tracking);
--ds-footer-newsletter-title-ink: var(--ds-text-primary-neutral);
color: var(--ds-footer-newsletter-title-ink);
}
.ds-footer__newsletter-text {
--ds-footer-newsletter-text-face: var(--ds-font-label-face);
--ds-footer-newsletter-text-tracking: var(--ds-font-label-tracking);
--ds-footer-newsletter-text-size: var(--ds-font-label-size);
--ds-footer-newsletter-text-weight: var(--ds-font-label-weight);
--ds-footer-newsletter-text-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-footer-newsletter-text-face);
font-size: var(--ds-footer-newsletter-text-size);
letter-spacing: var(--ds-footer-newsletter-text-tracking);
font-weight: var(--ds-footer-newsletter-text-weight);
line-height: var(--ds-footer-newsletter-text-leading);
text-wrap-style: pretty;
}
.ds-footer__newsletter-form {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--ds-space-2);
margin-block-start: var(--ds-space-2);
}
.ds-footer__newsletter-form > .ds-field {
flex: 1 1 14rem;
min-inline-size: 0;
}
.ds-footer__newsletter-note {
--ds-footer-newsletter-note-face: var(--ds-font-small-face);
--ds-footer-newsletter-note-tracking: var(--ds-font-small-tracking);
--ds-footer-newsletter-note-size: var(--ds-font-small-size);
--ds-footer-newsletter-note-weight: var(--ds-font-small-weight);
--ds-footer-newsletter-note-leading: var(--ds-font-small-leading);
margin: 0;
font-family: var(--ds-footer-newsletter-note-face);
font-size: var(--ds-footer-newsletter-note-size);
letter-spacing: var(--ds-footer-newsletter-note-tracking);
font-weight: var(--ds-footer-newsletter-note-weight);
line-height: var(--ds-footer-newsletter-note-leading);
--ds-footer-newsletter-note-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-footer-newsletter-note-ink);
}
.ds-footer__top {
display: flex;
flex-wrap: wrap;
gap: var(--ds-rhythm-block);
align-items: start;
}
.ds-footer__brand {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
flex: 1 1 16rem;
max-inline-size: 28rem;
min-inline-size: 0;
--ds-footer-brand-face: var(--ds-font-body-face);
--ds-footer-brand-tracking: var(--ds-font-body-tracking);
--ds-footer-brand-size: var(--ds-font-body-size);
--ds-footer-brand-weight: var(--ds-font-body-weight);
--ds-footer-brand-leading: var(--ds-font-body-leading);
--ds-footer-brand-ink: var(--ds-text-primary-neutral);
font-family: var(--ds-footer-brand-face);
font-size: var(--ds-footer-brand-size);
font-weight: var(--ds-footer-brand-weight);
line-height: var(--ds-footer-brand-leading);
letter-spacing: var(--ds-footer-brand-tracking);
color: var(--ds-footer-brand-ink);
}
.ds-footer__tagline {
--ds-footer-tagline-face: var(--ds-font-label-face);
--ds-footer-tagline-tracking: var(--ds-font-label-tracking);
--ds-footer-tagline-size: var(--ds-font-label-size);
--ds-footer-tagline-weight: var(--ds-font-label-weight);
--ds-footer-tagline-leading: var(--ds-font-label-leading);
margin: 0;
font-family: var(--ds-footer-tagline-face);
font-size: var(--ds-footer-tagline-size);
letter-spacing: var(--ds-footer-tagline-tracking);
font-weight: var(--ds-footer-tagline-weight);
line-height: var(--ds-footer-tagline-leading);
--ds-footer-tagline-ink: var(--ds-text-secondary-neutral);
color: var(--ds-footer-tagline-ink);
text-wrap-style: pretty;
}
.ds-footer__details {
--ds-footer-details-face: var(--ds-font-small-face);
--ds-footer-details-tracking: var(--ds-font-small-tracking);
--ds-footer-details-size: var(--ds-font-small-size);
--ds-footer-details-weight: var(--ds-font-small-weight);
--ds-footer-details-leading: var(--ds-font-small-leading);
margin: 0;
font-family: var(--ds-footer-details-face);
font-size: var(--ds-footer-details-size);
letter-spacing: var(--ds-footer-details-tracking);
font-weight: var(--ds-footer-details-weight);
line-height: var(--ds-footer-details-leading);
--ds-footer-details-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-footer-details-ink);
text-wrap-style: pretty;
}
.ds-footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2);
}
.ds-footer__groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--ds-rhythm-block);
flex: 2 1 24rem;
min-inline-size: 0;
}
.ds-footer__group {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
min-inline-size: 0;
}
.ds-footer__heading {
--ds-footer-heading-face: var(--ds-font-overline-face);
--ds-footer-heading-size: var(--ds-font-overline-size);
--ds-footer-heading-leading: var(--ds-font-overline-leading);
--ds-footer-heading-tracking: var(--ds-font-overline-tracking);
margin: 0;
font-family: var(--ds-footer-heading-face);
font-size: var(--ds-footer-heading-size);
line-height: var(--ds-footer-heading-leading);
font-weight: var(--ds-font-overline-weight);
letter-spacing: var(--ds-footer-heading-tracking);
text-transform: uppercase;
--ds-footer-heading-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-footer-heading-ink);
}
.ds-footer__link {
--ds-footer-link-face: var(--ds-font-label-face);
--ds-footer-link-tracking: var(--ds-font-label-tracking);
--ds-footer-link-size: var(--ds-font-label-size);
--ds-footer-link-weight: var(--ds-font-label-weight);
--ds-footer-link-leading: var(--ds-font-label-leading);
font-family: var(--ds-footer-link-face);
font-size: var(--ds-footer-link-size);
letter-spacing: var(--ds-footer-link-tracking);
font-weight: var(--ds-footer-link-weight);
line-height: var(--ds-footer-link-leading);
--ds-footer-link-ink: var(--ds-text-secondary-neutral);
color: var(--ds-footer-link-ink);
text-decoration: none;
padding-block: var(--ds-space-1);
min-inline-size: 0;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-footer__link:hover {
--ds-footer-link-ink: var(--ds-text-primary-neutral);
color: var(--ds-footer-link-ink);
}
.ds-footer__link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-footer__bottom {
--ds-footer-bottom-face: var(--ds-font-small-face);
--ds-footer-bottom-tracking: var(--ds-font-small-tracking);
--ds-footer-bottom-size: var(--ds-font-small-size);
--ds-footer-bottom-weight: var(--ds-font-small-weight);
--ds-footer-bottom-leading: var(--ds-font-small-leading);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
padding-block-start: var(--ds-rhythm-element);
border-block-start: 1px solid var(--ds-border-subtle);
font-family: var(--ds-footer-bottom-face);
font-size: var(--ds-footer-bottom-size);
letter-spacing: var(--ds-footer-bottom-tracking);
font-weight: var(--ds-footer-bottom-weight);
line-height: var(--ds-footer-bottom-leading);
--ds-footer-bottom-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-footer-bottom-ink);
}
.ds-footer__bottom:first-child {
padding-block-start: 0;
border-block-start: none;
}
.ds-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-4);
}
.ds-footer__aside {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-2);
}
.ds-footer__credits {
padding-block-start: var(--ds-rhythm-element);
}
.ds-footer__credits-link {
--ds-footer-credits-face: var(--ds-font-small-face);
--ds-footer-credits-size: var(--ds-font-small-size);
--ds-footer-credits-tracking: var(--ds-font-small-tracking);
--ds-footer-credits-weight: var(--ds-font-small-weight);
--ds-footer-credits-leading: var(--ds-font-small-leading);
--ds-footer-credits-ink: var(--ds-text-tertiary-neutral);
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ds-space-2);
font-family: var(--ds-footer-credits-face);
font-size: var(--ds-footer-credits-size);
letter-spacing: var(--ds-footer-credits-tracking);
font-weight: var(--ds-footer-credits-weight);
line-height: var(--ds-footer-credits-leading);
color: var(--ds-footer-credits-ink);
text-decoration: none;
}
.ds-footer__credits-link:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-lang {
--ds-lang-weight-current: var(--ds-current-weight);
display: inline-flex;
}
.ds-lang__code {
--ds-lang-code-tracking: var(--ds-font-overline-tracking);
font-variant-caps: all-small-caps;
letter-spacing: var(--ds-lang-code-tracking);
}
.ds-lang__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1);
}
.ds-lang__item {
--ds-lang-item-face: var(--ds-font-small-face);
--ds-lang-item-tracking: var(--ds-font-small-tracking);
--ds-lang-item-size: var(--ds-font-small-size);
--ds-lang-item-weight: var(--ds-font-small-weight);
--ds-lang-item-leading: var(--ds-font-small-leading);
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
min-block-size: var(--ds-size-1);
padding-inline: var(--ds-space-2);
border-radius: var(--ds-radius-1);
font-family: var(--ds-lang-item-face);
font-size: var(--ds-lang-item-size);
letter-spacing: var(--ds-lang-item-tracking);
font-weight: var(--ds-lang-item-weight);
line-height: var(--ds-lang-item-leading);
--ds-lang-item-ink: var(--ds-text-secondary-neutral);
color: var(--ds-lang-item-ink);
text-decoration: none;
transition:
color var(--ds-duration) var(--ds-ease),
background-color var(--ds-duration) var(--ds-ease);
}
.ds-lang__item > svg {
inline-size: 1lh;
block-size: 1lh;
}
.ds-lang__item:hover {
--ds-lang-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-lang-item-ink);
background-color: var(--ds-surface-hover);
}
.ds-lang__item:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
.ds-lang__item[aria-current] {
--ds-lang-item-ink: var(--ds-text-primary-neutral);
color: var(--ds-lang-item-ink);
font-weight: var(--ds-lang-weight-current);
}
.ds-input-field__copy {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
font: inherit;
--ds-input-field-copy-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-input-field-copy-ink);
cursor: pointer;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-input-field__copy:hover,
.ds-input-field__copy[data-copied="true"] {
--ds-input-field-copy-ink: var(--ds-text-primary-neutral);
color: var(--ds-input-field-copy-ink);
}
.ds-input-field__copy:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-password-field__reveal {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 1lh;
block-size: 1lh;
padding: 0;
border: 0;
background: none;
font: inherit;
--ds-password-field-reveal-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-password-field-reveal-ink);
cursor: pointer;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-password-field__reveal > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-password-field__reveal:hover {
--ds-password-field-reveal-ink: var(--ds-text-primary-neutral);
color: var(--ds-password-field-reveal-ink);
}
.ds-password-field__reveal:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
border-radius: var(--ds-radius-1);
}
.ds-password-field__reveal[aria-pressed="true"] {
--ds-password-field-reveal-ink: var(--ds-text-primary-neutral);
color: var(--ds-password-field-reveal-ink);
}
.ds-field__frame:has(:disabled) .ds-password-field__reveal {
--ds-password-field-reveal-ink: var(--ds-text-disabled);
color: var(--ds-password-field-reveal-ink);
cursor: not-allowed;
}
.ds-password-field__reveal[aria-pressed="true"] .ds-swap__off {
display: none;
}
.ds-password-field__reveal[aria-pressed="true"] .ds-swap__on {
display: inline-flex;
}
.ds-password-rules {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
margin: 0;
padding: var(--ds-space-3);
border-radius: var(--ds-radius-2);
background-color: var(--ds-surface-2);
list-style: none;
}
.ds-password-rules__rule {
--ds-password-rules-rule-face: var(--ds-font-label-face);
--ds-password-rules-rule-tracking: var(--ds-font-label-tracking);
--ds-password-rules-rule-size: var(--ds-font-label-size);
--ds-password-rules-rule-weight: var(--ds-font-label-weight);
--ds-password-rules-rule-leading: var(--ds-font-label-leading);
display: flex;
align-items: center;
gap: var(--ds-space-2);
font-family: var(--ds-password-rules-rule-face);
font-size: var(--ds-password-rules-rule-size);
letter-spacing: var(--ds-password-rules-rule-tracking);
font-weight: var(--ds-password-rules-rule-weight);
line-height: var(--ds-password-rules-rule-leading);
--ds-password-rules-rule-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-password-rules-rule-ink);
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-password-rules__mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 1lh;
block-size: 1lh;
}
.ds-password-rules__tick,
.ds-password-rules__cross {
display: none;
inline-size: 100%;
block-size: 100%;
}
.ds-password-rules__tick > svg,
.ds-password-rules__cross > svg {
inline-size: 100%;
block-size: 100%;
}
.ds-password-rules__rule--met .ds-password-rules__tick,
.ds-password-rules__rule--missing .ds-password-rules__cross {
display: inline-flex;
}
.ds-password-rules__mark--waiting::before {
content: "";
inline-size: 0.75lh;
block-size: 0.75lh;
border: 2px solid currentColor;
border-radius: var(--ds-radius-full);
}
.ds-password-rules__rule--met {
color: var(--ds-success-ink);
}
.ds-password-rules__rule--missing {
color: var(--ds-danger-ink);
}
.ds-password-rules__said {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ds-image {
--ds-image-gap: var(--ds-space-3);
--ds-image-radius: var(--ds-radius-3);
display: flex;
flex-direction: column;
gap: var(--ds-image-gap);
margin: 0;
}
.ds-image > :not(.ds-image__caption) {
display: block;
max-inline-size: 100%;
block-size: auto;
border-radius: var(--ds-image-radius);
}
.ds-image > iframe {
border: 0;
}
.ds-image--cut > :not(.ds-image__caption) {
inline-size: 100%;
aspect-ratio: var(--ds-image-ratio, 16 / 9);
object-fit: cover;
object-position: var(--ds-image-focus, 50% 50%);
}
.ds-image__caption {
--ds-image-caption-face: var(--ds-font-small-face);
--ds-image-caption-size: var(--ds-font-small-size);
--ds-image-caption-weight: var(--ds-font-small-weight);
--ds-image-caption-leading: var(--ds-font-small-leading);
--ds-image-caption-tracking: var(--ds-font-small-tracking);
--ds-image-caption-ink: var(--ds-text-tertiary-neutral);
margin: 0;
color: var(--ds-image-caption-ink);
font-family: var(--ds-image-caption-face);
font-size: var(--ds-image-caption-size);
font-weight: var(--ds-image-caption-weight);
line-height: var(--ds-image-caption-leading);
letter-spacing: var(--ds-image-caption-tracking);
}
.ds-ticker {
--ds-ticker-gap: var(--ds-space-8);
--ds-ticker-duration: 40s;
display: flex;
gap: var(--ds-ticker-gap);
overflow: hidden;
inline-size: 100%;
}
.ds-ticker--slow {
--ds-ticker-duration: 60s;
}
.ds-ticker--fast {
--ds-ticker-duration: 24s;
}
.ds-ticker__track {
display: flex;
flex: 0 0 auto;
gap: var(--ds-ticker-gap);
align-items: center;
min-inline-size: 100%;
animation: ds-ticker var(--ds-ticker-duration) linear infinite;
}
.ds-ticker__word {
--ds-ticker-word-face: var(--ds-font-heading-3-face);
--ds-ticker-word-size: var(--ds-font-heading-3-size);
--ds-ticker-word-weight: var(--ds-font-heading-3-weight);
--ds-ticker-word-leading: var(--ds-font-heading-3-leading);
--ds-ticker-word-tracking: var(--ds-font-heading-3-tracking);
--ds-ticker-word-ink: var(--ds-text-primary-neutral);
color: var(--ds-ticker-word-ink);
font-family: var(--ds-ticker-word-face);
font-size: var(--ds-ticker-word-size);
font-weight: var(--ds-ticker-word-weight);
line-height: var(--ds-ticker-word-leading);
letter-spacing: var(--ds-ticker-word-tracking);
white-space: nowrap;
}
.ds-ticker__mark {
--ds-ticker-mark-ink: var(--ds-text-tertiary-neutral);
color: var(--ds-ticker-mark-ink);
font-size: var(--ds-ticker-word-size);
line-height: var(--ds-ticker-word-leading);
}
@keyframes ds-ticker {
from {
translate: 0;
}
to {
translate: calc(-100% - var(--ds-ticker-gap));
}
}
@media (prefers-reduced-motion: reduce) {
.ds-ticker__track {
animation: none;
}
.ds-ticker__track + .ds-ticker__track {
display: none;
}
}
}
@layer utilities {
.ds-sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
}