/* BUNDLED from public/ds/index.css by site/scripts/bundle-ds.mjs: do not edit; re-vendor with design-system loop.mjs sync. */ :root, [data-mode="light"] { color-scheme: light; --ds-ground: #fafafa; --ds-ground-2: #f4f4f4; --ds-surface: #ffffff; --ds-surface-2: #f3f3f3; --ds-surface-3: #ececec; --ds-skeleton: #e2e2e2; --ds-surface-raised: #ffffff; --ds-surface-hover: #f0f0f0; --ds-surface-pressed: #ebebeb; --ds-surface-selected: #e6e6e6; --ds-surface-inverse: #111111; --ds-surface-inverse-hover: #262626; --ds-surface-polarity: 1; --ds-scrim: rgba(0, 0, 0, .40); --ds-scrim-filter: none; --ds-ink: #111111; --ds-ink-2: #3d3d3d; --ds-ink-muted: #6b6b6b; --ds-ink-faint: #a3a3a3; --ds-ink-inverse: #fafafa; --ds-ink-on-primary: #ffffff; --ds-ink-on-accent: #ffffff; --ds-rule-soft: #ededed; --ds-rule-faint: #f4f4f4; --ds-rule: #e5e5e5; --ds-rule-strong: #d4d4d4; --ds-border: #d9d9d9; --ds-border-strong: #bdbdbd; --ds-primary-fill: #111111; --ds-primary-fill-hover: #2a2a2a; --ds-primary-border: transparent; --ds-primary-highlight: transparent; --ds-accent: #2563eb; --ds-accent-hover: #1d4fd8; --ds-accent-ink: #1e40af; --ds-accent-tint: #e9effd; --ds-accent-soft: #93b4f5; --ds-accent-2: #7c5ee4; --ds-accent-2-ink: #5b3fc4; --ds-accent-2-tint: #eee9fb; --ds-success: #15803d; --ds-success-tint: #e3f0e8; --ds-success-ink: #14703a; --ds-danger: #dc2626; --ds-danger-tint: #fbe5e5; --ds-danger-ink: #b91c1c; --ds-warning: #d97706; --ds-warning-tint: #faefe1; --ds-warning-ink: #9a4f00; --ds-info: #0369a1; --ds-info-tint: #e1edf4; --ds-info-ink: #075985; --ds-success-line: color-mix(in srgb, var(--ds-success) 35%, transparent); --ds-danger-line: color-mix(in srgb, var(--ds-danger) 35%, transparent); --ds-warning-line: color-mix(in srgb, var(--ds-warning) 35%, transparent); --ds-info-line: color-mix(in srgb, var(--ds-info) 35%, transparent); --ds-ink-on-semantic: #ffffff; --ds-ink-on-warning: #1a1200; --ds-data-1: #2f6fed; --ds-data-1-tint: #e2ebfc; --ds-data-1-ink: #2455bd; --ds-data-2: #7c5ee4; --ds-data-2-tint: #ede8fb; --ds-data-2-ink: #6248b8; --ds-data-3: #0f9d6b; --ds-data-3-tint: #ddf1ea; --ds-data-3-ink: #0b7751; --ds-data-4: #da6c36; --ds-data-4-tint: #fbebe4; --ds-data-4-ink: #a6542c; --ds-data-5: #d23f7a; --ds-data-5-tint: #f9e4ec; --ds-data-5-ink: #b53669; --ds-data-6: #ad861b; --ds-data-6-tint: #f7f2e1; --ds-data-6-ink: #7d6218; --ds-data-7: #0e9aa7; --ds-data-7-tint: #ddf1f3; --ds-data-7-ink: #0b757f; --ds-data-8: #8a6a4b; --ds-data-8-tint: #efeae6; --ds-data-8-ink: #7f6245; --ds-chart-ramp-1: #1e40af; --ds-chart-ramp-2: #2f6fed; --ds-chart-ramp-3: #93b4f5; --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .05); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .08); --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04); --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .12); --ds-overlay-fill: rgba(0, 0, 0, .60); --ds-ink-on-overlay: #ffffff; --ds-glass-fill: rgba(255, 255, 255, .35); --ds-glass-border: rgba(255, 255, 255, .55); --ds-texture-color: rgba(0, 0, 0, .06); --ds-illustration-ground: #eef2f7; } :root { --ds-border-width: 1px; --ds-ring-width: 2px; --ds-ring-offset: 2px; --ds-ring-outset: 0px; --ds-control-lip: 0px; --ds-radius-scale: 1; --ds-radius-pill: 9999px; --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-serif: ui-serif, Georgia, "Times New Roman", serif; --ds-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --ds-font-display: var(--ds-font-sans); --ds-font-label: var(--ds-font-sans); --ds-font-body-alt: var(--ds-font-sans); --ds-font-sign: var(--ds-font-display); --ds-text-base: 14px; --ds-scale-xs: .786; --ds-scale-sm: .857; --ds-scale-lg: 1.143; --ds-scale-xl: 1.429; --ds-scale-2xl: 1.714; --ds-scale-3xl: 2.286; --ds-scale-display: 3.429; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-display-weight: 600; --ds-heading-weight: 600; --ds-display-tracking: -0.02em; --ds-heading-tracking: -0.01em; --ds-label-tracking: 0; --ds-label-tracking-upper: .08em; --ds-label-case: none; --ds-control-case: none; --ds-lh-tight: 1.05; --ds-lh-heading: 1.2; --ds-lh-body: 1.45; --ds-lh-prose: 1.6; --ds-lh-list: 1.25; --ds-numeric: tabular-nums; --ds-measure: 65ch; --ds-space-unit: 4px; --ds-density-scale: 1; --ds-control-h-base: 36px; --ds-field-gap: 8px; --ds-gutter-page: clamp(16px, 4vw, 72px); --ds-container-max: 1152px; --ds-container-narrow: 640px; --ds-container-prose: 720px; --ds-container-content: 1088px; --ds-section-gap-units: 12; --ds-rail-inset: 24px; --ds-rail-w: 64px; --ds-sidebar-w: 256px; --ds-inspector-w: 320px; --ds-topbar-h: 56px; --ds-sheet-inset: 12px; --ds-icon-size: 16px; --ds-icon-size-row: 20px; --ds-icon-size-rail: 24px; --ds-icon-stroke: 1.5px; --ds-tap-target-min: 40px; --ds-motion-scale: 1; --ds-ease-standard: cubic-bezier(.2, 0, 0, 1); --ds-ease-out: cubic-bezier(0, 0, .2, 1); --ds-ease-in: cubic-bezier(.4, 0, 1, 1); --ds-ambient-play: running; --ds-ambient-motion: 1; --ds-glass-blur: 12px; --ds-media-aspect: 16 / 9; --ds-mock-fade: 96px; --ds-z-sticky: 100; --ds-z-scrim: 200; --ds-z-modal: 210; --ds-z-dropdown: 300; --ds-z-popover: 310; --ds-z-toast: 500; --ds-z-tooltip: 600; } :root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band] { --ds-ink-link: var(--ds-accent); --ds-ink-code: var(--ds-ink-2); --ds-ring: var(--ds-accent); --ds-border-selected: var(--ds-accent); --ds-accent-line: var(--ds-accent); --ds-live: var(--ds-danger); --ds-presence: var(--ds-success); --ds-selection-graph: var(--ds-accent); --ds-data-primary: var(--ds-data-1); --ds-chart-grid: var(--ds-rule-soft); --ds-chart-comparison: var(--ds-ink-faint); --ds-line-art: var(--ds-rule-strong); --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; --ds-shadow-lip: inset 0 calc(-1 * var(--ds-control-lip)) 0 0 var(--ds-border-strong); --ds-hover-bg: var(--ds-surface-hover); --ds-hover-shadow: 0 0 0 0 transparent; --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); --ds-radius-xs: calc(4px * var(--ds-radius-scale)); --ds-radius-sm: calc(6px * var(--ds-radius-scale)); --ds-radius-md: calc(8px * var(--ds-radius-scale)); --ds-radius-lg: calc(12px * var(--ds-radius-scale)); --ds-radius-xl: calc(20px * var(--ds-radius-scale)); --ds-radius-button: var(--ds-radius-sm); --ds-media-radius: var(--ds-radius-lg); --ds-text-xs: calc(var(--ds-text-base) * var(--ds-scale-xs)); --ds-text-sm: calc(var(--ds-text-base) * var(--ds-scale-sm)); --ds-text-md: var(--ds-text-base); --ds-text-lg: calc(var(--ds-text-base) * var(--ds-scale-lg)); --ds-text-xl: calc(var(--ds-text-base) * var(--ds-scale-xl)); --ds-text-2xl: calc(var(--ds-text-base) * var(--ds-scale-2xl)); --ds-text-3xl: calc(var(--ds-text-base) * var(--ds-scale-3xl)); --ds-text-display: calc(var(--ds-text-base) * var(--ds-scale-display)); --ds-text-display-fluid: clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 3vw), calc(var(--ds-text-display) * 1.4)); --ds-text-title-page: var(--ds-text-2xl); --ds-text-title-section: var(--ds-text-lg); --ds-text-title-card: var(--ds-text-md); --ds-text-title-chapter: var(--ds-text-3xl); --ds-space-0-5: calc(var(--ds-space-unit) * .5); --ds-space-1: calc(var(--ds-space-unit) * 1); --ds-space-1-5: calc(var(--ds-space-unit) * 1.5); --ds-space-2: calc(var(--ds-space-unit) * 2); --ds-space-2-5: calc(var(--ds-space-unit) * 2.5); --ds-space-3: calc(var(--ds-space-unit) * 3); --ds-space-4: calc(var(--ds-space-unit) * 4); --ds-space-5: calc(var(--ds-space-unit) * 5); --ds-space-6: calc(var(--ds-space-unit) * 6); --ds-space-7: calc(var(--ds-space-unit) * 7); --ds-space-8: calc(var(--ds-space-unit) * 8); --ds-space-10: calc(var(--ds-space-unit) * 10); --ds-space-12: calc(var(--ds-space-unit) * 12); --ds-space-16: calc(var(--ds-space-unit) * 16); --ds-space-20: calc(var(--ds-space-unit) * 20); --ds-space-24: calc(var(--ds-space-unit) * 24); --ds-section-gap: calc(var(--ds-space-unit) * var(--ds-section-gap-units)); --ds-control-h: calc(var(--ds-control-h-base) * var(--ds-density-scale)); --ds-control-h-sm: calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)); --ds-control-h-lg: calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)); --ds-row-h: calc(var(--ds-control-h) + 4px); --ds-card-pad: calc(16px * var(--ds-density-scale)); --ds-card-gap: calc(16px * var(--ds-density-scale)); --ds-field-pitch: calc(16px * var(--ds-density-scale)); --ds-control-pad-x: calc(12px * var(--ds-density-scale)); --ds-size-h: var(--ds-control-h); --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); --ds-dur-fast: calc(120ms * var(--ds-motion-scale)); --ds-dur-base: calc(180ms * var(--ds-motion-scale)); --ds-dur-slow: calc(280ms * var(--ds-motion-scale)); } :is(:root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band]):not([data-band="accent"]) { --ds-band-accent: var(--ds-accent); --ds-band-ink: var(--ds-ink-on-accent); --ds-band-ink-away: rgb(from var(--ds-ink-on-accent) calc(255 - r) calc(255 - g) calc(255 - b)); } @supports (width: round(1px, 1px)) { :root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band] { --ds-control-h: round(calc(var(--ds-control-h-base) * var(--ds-density-scale)), 4px); --ds-control-h-sm: round(calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)), 4px); --ds-control-h-lg: round(calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)), 4px); --ds-card-pad: round(calc(16px * var(--ds-density-scale)), 4px); --ds-card-gap: round(calc(16px * var(--ds-density-scale)), 4px); --ds-field-pitch: round(calc(16px * var(--ds-density-scale)), 4px); --ds-control-pad-x: round(calc(12px * var(--ds-density-scale)), 2px); } } :root[data-mode="dark"], :not(:root)[data-mode="dark"], :not(:root)[data-band="dark"] { color-scheme: dark; --ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22; --ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; --ds-surface-hover: #222226; --ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60); --ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; --ds-ink-faint: #5e5e64; --ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c; --ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b; --ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4; --ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8; --ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46; --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8; --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50); --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129; } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { color-scheme: dark; --ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22; --ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; --ds-surface-hover: #222226; --ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60); --ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; --ds-ink-faint: #5e5e64; --ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c; --ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b; --ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4; --ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8; --ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46; --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8; --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50); --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129; } } :root[data-density="compact"], :not(:root)[data-density="compact"] { --ds-density-scale: .85; } :root[data-density="default"], :not(:root)[data-density="default"] { --ds-density-scale: 1; } :root[data-density="comfortable"], :not(:root)[data-density="comfortable"] { --ds-density-scale: 1.2; } :root[data-depth="tint"], :not(:root)[data-depth="tint"] { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent; --ds-card-shadow: 0 0 0 0 transparent; } :root[data-depth="hairline"], :not(:root)[data-depth="hairline"] { --ds-card-bg: var(--ds-ground); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; } :root[data-depth="shadow"], :not(:root)[data-depth="shadow"] { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent; --ds-card-shadow: var(--ds-shadow-card); } :root[data-depth="tint-hairline"], :not(:root)[data-depth="tint-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; } :root[data-depth="shadow-hairline"], :not(:root)[data-depth="shadow-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: var(--ds-shadow-card); } :root[data-selection="tint"], :not(:root)[data-selection="tint"] { --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="accent"], :not(:root)[data-selection="accent"] { --ds-selected-bg: var(--ds-accent-tint); --ds-selected-ink: var(--ds-accent-ink); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="accent-fill"], :not(:root)[data-selection="accent-fill"] { --ds-selected-bg: var(--ds-accent); --ds-selected-ink: var(--ds-ink-on-accent); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="underline"], :not(:root)[data-selection="underline"] { --ds-selected-bg: transparent; --ds-selected-ink: var(--ds-ink); --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="bar"], :not(:root)[data-selection="bar"] { --ds-selected-bg: transparent; --ds-selected-ink: var(--ds-ink); --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="invert"], :not(:root)[data-selection="invert"] { --ds-selected-bg: var(--ds-surface-inverse); --ds-selected-ink: var(--ds-ink-inverse); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-buttons="sm"], :not(:root)[data-buttons="sm"] { --ds-radius-button: var(--ds-radius-sm); } :root[data-buttons="pill"], :not(:root)[data-buttons="pill"] { --ds-radius-button: var(--ds-radius-pill); } :root[data-labels="sentence"], :not(:root)[data-labels="sentence"] { --ds-label-case: none; --ds-label-tracking: 0; } :root[data-labels="upper"], :not(:root)[data-labels="upper"] { --ds-label-case: uppercase; --ds-label-tracking: var(--ds-label-tracking-upper); } :root[data-controls="sentence"], :not(:root)[data-controls="sentence"] { --ds-control-case: none; } :root[data-controls="title"], :not(:root)[data-controls="title"] { --ds-control-case: capitalize; } :root[data-accent-scope="none"], :not(:root)[data-accent-scope="none"] { --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-accent-line: var(--ds-ink); --ds-border-selected: var(--ds-ink); --ds-selection-graph: var(--ds-ink); } :root[data-hover="tint"], :not(:root)[data-hover="tint"] { --ds-hover-bg: var(--ds-surface-hover); --ds-hover-shadow: 0 0 0 0 transparent; } :root[data-hover="lift"], :not(:root)[data-hover="lift"] { --ds-hover-bg: var(--ds-surface); --ds-hover-shadow: var(--ds-shadow-lift); } :root[data-ambient="off"], :not(:root)[data-ambient="off"] { --ds-ambient-play: paused; --ds-ambient-motion: 0; } [data-band="tint"][data-band] { --ds-ground: var(--ds-surface-2); --ds-ground-2: var(--ds-surface-3); --ds-rule: var(--ds-rule-strong); } [data-band="accent"][data-band] { --ds-ground: var(--ds-band-accent); --ds-ground-2: color-mix(in srgb, var(--ds-band-accent) 96%, var(--ds-band-ink-away)); --ds-surface: color-mix(in srgb, var(--ds-band-accent) 90%, var(--ds-band-ink-away)); --ds-surface-2: color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away)); --ds-surface-3: color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away)); --ds-surface-hover: color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away)); --ds-surface-pressed: color-mix(in srgb, var(--ds-band-accent) 82%, var(--ds-band-ink-away)); --ds-surface-selected: color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away)); --ds-skeleton: color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away)); --ds-surface-inverse: var(--ds-band-ink); --ds-surface-inverse-hover: color-mix(in srgb, var(--ds-band-ink) 90%, var(--ds-band-accent)); --ds-ink: var(--ds-band-ink); --ds-ink-2: color-mix(in srgb, var(--ds-band-ink) 96%, var(--ds-band-accent)); --ds-ink-muted: color-mix(in srgb, var(--ds-band-ink) 94%, var(--ds-band-accent)); --ds-ink-faint: color-mix(in srgb, var(--ds-band-ink) 60%, var(--ds-band-accent)); --ds-ink-inverse: var(--ds-band-accent); --ds-ink-on-primary: var(--ds-band-accent); --ds-ink-on-accent: var(--ds-band-accent); --ds-rule-faint: color-mix(in srgb, var(--ds-band-ink) 8%, var(--ds-band-accent)); --ds-rule-soft: color-mix(in srgb, var(--ds-band-ink) 12%, var(--ds-band-accent)); --ds-rule: color-mix(in srgb, var(--ds-band-ink) 18%, var(--ds-band-accent)); --ds-rule-strong: color-mix(in srgb, var(--ds-band-ink) 26%, var(--ds-band-accent)); --ds-border: color-mix(in srgb, var(--ds-band-ink) 22%, var(--ds-band-accent)); --ds-border-strong: color-mix(in srgb, var(--ds-band-ink) 34%, var(--ds-band-accent)); --ds-primary-fill: var(--ds-band-ink); --ds-primary-fill-hover: color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent)); --ds-primary-border: transparent; --ds-primary-highlight: transparent; --ds-accent: var(--ds-band-ink); --ds-accent-hover: color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent)); --ds-accent-ink: var(--ds-band-ink); --ds-accent-tint: color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away)); --ds-accent-soft: color-mix(in srgb, var(--ds-band-ink) 45%, var(--ds-band-accent)); --ds-ink-link: var(--ds-band-ink); --ds-ring: var(--ds-band-ink); --ds-border-selected: var(--ds-band-ink); --ds-accent-line: var(--ds-band-ink); --ds-selection-graph: var(--ds-band-ink); --ds-success-tint: var(--ds-accent-tint); --ds-success-ink: var(--ds-band-ink); --ds-success-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-danger-tint: var(--ds-accent-tint); --ds-danger-ink: var(--ds-band-ink); --ds-danger-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-warning-tint: var(--ds-accent-tint); --ds-warning-ink: var(--ds-band-ink); --ds-warning-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-info-tint: var(--ds-accent-tint); --ds-info-ink: var(--ds-band-ink); --ds-info-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-shadow-lift: 0 1px 2px color-mix(in srgb, var(--ds-band-ink) 10%, transparent); --ds-shadow-card: 0 1px 3px color-mix(in srgb, var(--ds-band-ink) 12%, transparent); --ds-shadow-float: 0 8px 24px color-mix(in srgb, var(--ds-band-ink) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent); --ds-shadow-modal: 0 24px 80px color-mix(in srgb, var(--ds-band-ink) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent); --ds-shadow-object: 0 4px 12px color-mix(in srgb, var(--ds-band-ink) 25%, transparent); --ds-illustration-ground: var(--ds-accent-tint); --ds-texture-color: color-mix(in srgb, var(--ds-band-ink) 10%, transparent); --ds-glass-fill: color-mix(in srgb, var(--ds-band-ink) 10%, transparent); --ds-glass-border: color-mix(in srgb, var(--ds-band-ink) 20%, transparent); } @media (prefers-reduced-motion: reduce) { :root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band] { --ds-motion-scale: 0; --ds-ambient-play: paused; --ds-ambient-motion: 0; } } [data-theme="seeded"], [data-theme="seeded"] [data-mode="light"] { --ds-seed-h: 195; --ds-seed-c: .035; --ds-surface-polarity: -1; --ds-ground: oklch(97% var(--ds-seed-c) var(--ds-seed-h)); --ds-ground-2: oklch(95% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface: oklch(94% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-2: oklch(91% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-3: oklch(88% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-hover: oklch(92% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-pressed: oklch(90% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-selected: oklch(89% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-raised: #ffffff; --ds-surface-inverse: oklch(18% .02 var(--ds-seed-h)); --ds-scrim: rgba(0, 0, 0, .15); --ds-scrim-filter: blur(6px); --ds-ink: rgba(0, 0, 0, .92); --ds-ink-2: rgba(0, 0, 0, .75); --ds-ink-muted: rgba(0, 0, 0, .60); --ds-ink-faint: rgba(0, 0, 0, .40); --ds-ink-inverse: rgba(255, 255, 255, .95); --ds-ink-on-primary: #ffffff; --ds-ink-on-accent: #ffffff; --ds-rule-soft: oklch(92% var(--ds-seed-c) var(--ds-seed-h)); --ds-rule: oklch(89% var(--ds-seed-c) var(--ds-seed-h)); --ds-rule-strong: oklch(84% var(--ds-seed-c) var(--ds-seed-h)); --ds-border: oklch(86% var(--ds-seed-c) var(--ds-seed-h)); --ds-border-strong: oklch(78% var(--ds-seed-c) var(--ds-seed-h)); --ds-primary-fill: oklch(48% .13 var(--ds-seed-h)); --ds-primary-fill-hover: oklch(43% .13 var(--ds-seed-h)); --ds-accent: var(--ds-primary-fill); --ds-accent-hover: var(--ds-primary-fill-hover); --ds-accent-ink: oklch(40% .13 var(--ds-seed-h)); --ds-accent-tint: oklch(90% .05 var(--ds-seed-h)); --ds-accent-soft: oklch(72% .10 var(--ds-seed-h)); --ds-accent-2: #e5348b; --ds-accent-2-ink: #b4206a; --ds-accent-2-tint: #fbe4ee; --ds-data-3: #009263; --ds-data-4: #ce6129; --ds-data-6: #a27b01; --ds-data-7: #008e9b; --ds-shadow-float: 0 8px 24px oklch(30% .05 var(--ds-seed-h) / .14), 0 0 0 1px oklch(30% .05 var(--ds-seed-h) / .06); --ds-shadow-modal: 0 24px 80px oklch(30% .05 var(--ds-seed-h) / .20); --ds-radius-scale: 1.25; --ds-font-display: var(--ds-font-mono); --ds-text-base: 16px; --ds-display-weight: 500; --ds-control-case: capitalize; --ds-space-unit: 8px; --ds-density-scale: 1.2; --ds-card-bg: var(--ds-surface); --ds-card-border: transparent; --ds-card-shadow: 0 0 0 0 transparent; --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; } :where([data-theme="seeded"]) :is([data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band="tint"], [data-band="dark"], [data-band="accent"]) { --ds-card-border: transparent; } [data-theme="seeded"][data-mode="dark"], [data-theme="seeded"] [data-mode="dark"], [data-theme="seeded"] [data-band="dark"] { --ds-ground: oklch(14% var(--ds-seed-c) var(--ds-seed-h)); --ds-ground-2: oklch(16% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface: oklch(18% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-2: oklch(22% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-3: oklch(26% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-hover: oklch(21% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-pressed: oklch(23% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-selected: oklch(25% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-raised: #1f1f22; --ds-surface-inverse: oklch(96% .01 var(--ds-seed-h)); --ds-scrim: rgba(0, 0, 0, .50); --ds-scrim-filter: blur(6px); --ds-ink: rgba(255, 255, 255, .93); --ds-ink-2: rgba(255, 255, 255, .76); --ds-ink-muted: rgba(255, 255, 255, .64); --ds-ink-faint: rgba(255, 255, 255, .40); --ds-ink-inverse: rgba(0, 0, 0, .92); --ds-ink-on-primary: oklch(12% .02 var(--ds-seed-h)); --ds-ink-on-accent: oklch(12% .02 var(--ds-seed-h)); --ds-rule-soft: oklch(21% var(--ds-seed-c) var(--ds-seed-h)); --ds-rule: oklch(25% var(--ds-seed-c) var(--ds-seed-h)); --ds-rule-strong: oklch(30% var(--ds-seed-c) var(--ds-seed-h)); --ds-border: oklch(28% var(--ds-seed-c) var(--ds-seed-h)); --ds-border-strong: oklch(36% var(--ds-seed-c) var(--ds-seed-h)); --ds-primary-fill: oklch(74% .13 var(--ds-seed-h)); --ds-primary-fill-hover: oklch(79% .13 var(--ds-seed-h)); --ds-accent: var(--ds-primary-fill); --ds-accent-hover: var(--ds-primary-fill-hover); --ds-accent-ink: oklch(84% .10 var(--ds-seed-h)); --ds-accent-tint: oklch(28% .06 var(--ds-seed-h)); --ds-accent-soft: oklch(50% .11 var(--ds-seed-h)); --ds-accent-2: #f06fa4; --ds-accent-2-ink: #f596bd; --ds-accent-2-tint: #432936; --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65); } @media (prefers-color-scheme: dark) { :root[data-theme="seeded"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="seeded"]:not([data-mode="light"]) { --ds-ground: oklch(14% var(--ds-seed-c) var(--ds-seed-h)); --ds-ground-2: oklch(16% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface: oklch(18% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-2: oklch(22% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-3: oklch(26% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-hover: oklch(21% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-pressed: oklch(23% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-selected: oklch(25% var(--ds-seed-c) var(--ds-seed-h)); --ds-surface-raised: #1f1f22; --ds-surface-inverse: oklch(96% .01 var(--ds-seed-h)); --ds-scrim: rgba(0, 0, 0, .50); --ds-scrim-filter: blur(6px); --ds-ink: rgba(255, 255, 255, .93); --ds-ink-2: rgba(255, 255, 255, .76); --ds-ink-muted: rgba(255, 255, 255, .64); --ds-ink-faint: rgba(255, 255, 255, .40); --ds-ink-inverse: rgba(0, 0, 0, .92); --ds-ink-on-primary: oklch(12% .02 var(--ds-seed-h)); --ds-ink-on-accent: oklch(12% .02 var(--ds-seed-h)); --ds-rule-soft: oklch(21% var(--ds-seed-c) var(--ds-seed-h)); --ds-rule: oklch(25% var(--ds-seed-c) var(--ds-seed-h)); --ds-rule-strong: oklch(30% var(--ds-seed-c) var(--ds-seed-h)); --ds-border: oklch(28% var(--ds-seed-c) var(--ds-seed-h)); --ds-border-strong: oklch(36% var(--ds-seed-c) var(--ds-seed-h)); --ds-primary-fill: oklch(74% .13 var(--ds-seed-h)); --ds-primary-fill-hover: oklch(79% .13 var(--ds-seed-h)); --ds-accent: var(--ds-primary-fill); --ds-accent-hover: var(--ds-primary-fill-hover); --ds-accent-ink: oklch(84% .10 var(--ds-seed-h)); --ds-accent-tint: oklch(28% .06 var(--ds-seed-h)); --ds-accent-soft: oklch(50% .11 var(--ds-seed-h)); --ds-accent-2: #f06fa4; --ds-accent-2-ink: #f596bd; --ds-accent-2-tint: #432936; --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre, fieldset, legend { margin: 0; } ul, ol { padding: 0; } ul[class], ol[class] { list-style: none; } fieldset { padding: 0; border: 0; min-width: 0; } legend { padding: 0; } img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; } button, input, select, textarea, optgroup { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; } button, [role="button"], summary { cursor: pointer; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } textarea { resize: vertical; } a { color: var(--ds-ink-link); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; } a:hover { text-decoration-color: currentColor; } hr { border: 0; height: 0; } table { border-collapse: collapse; border-spacing: 0; } :where(th) { text-align: inherit; font-weight: inherit; } code, kbd, samp, pre { font-family: var(--ds-font-mono); font-size: .93em; } ::placeholder { color: var(--ds-ink-muted); opacity: 1; } ::selection { background: var(--ds-accent-tint); color: var(--ds-ink); } [hidden] { display: none !important; } body { background: var(--ds-ground); color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); font-variant-numeric: var(--ds-numeric); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; overflow-x: clip; } [data-theme]:not(:root), [data-mode]:not(:root) { background: var(--ds-ground); color: var(--ds-ink); } .ds-display { font-family: var(--ds-font-display); font-size: var(--ds-text-display); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); text-wrap: balance; } .ds-h1, .ds-h2, .ds-h3, .ds-h4 { font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); color: var(--ds-ink); text-wrap: balance; } .ds-h1 { font-size: var(--ds-text-2xl); } .ds-h2 { font-size: var(--ds-text-xl); } .ds-h3 { font-size: var(--ds-text-lg); } .ds-h4 { font-size: var(--ds-text-md); } .ds-h1 { letter-spacing: var(--ds-display-tracking); } .ds-body { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); } .ds-body-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); } .ds-body-lg { font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); } .ds-label { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-eyebrow { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); } .ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-code); font-variant-numeric: tabular-nums; letter-spacing: 0; } .ds-numeric { font-variant-numeric: tabular-nums; } .ds-prose { font-family: var(--ds-font-body-alt); font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); max-width: var(--ds-measure); color: var(--ds-ink-2); } .ds-prose > * + * { margin-block-start: 1em; } .ds-prose :is(h1, h2, h3, h4) { font-family: var(--ds-font-sans); color: var(--ds-ink); line-height: var(--ds-lh-heading); } .ds-prose a { color: var(--ds-ink-link); } .ds-prose :is(ul, ol) { padding-inline-start: 1.4em; } .ds-prose ul { list-style: disc; } .ds-prose ol { list-style: decimal; } .ds-quote { font-family: var(--ds-font-body-alt); font-style: italic; font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); } .ds-two-tone { color: var(--ds-ink); } .ds-two-tone .ds-muted { color: var(--ds-ink-muted); font-weight: inherit; } .ds-ink { color: var(--ds-ink); } .ds-ink-2 { color: var(--ds-ink-2); } .ds-muted { color: var(--ds-ink-muted); } .ds-faint { color: var(--ds-ink-faint); } .ds-strong { font-weight: var(--ds-weight-semibold); } .ds-medium { font-weight: var(--ds-weight-medium); } .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-tnum { font-variant-numeric: tabular-nums; } [data-size="sm"] { --ds-size-h: var(--ds-control-h-sm); --ds-size-text: var(--ds-text-sm); --ds-size-pad-x: calc(var(--ds-control-pad-x) - 2px); } [data-size="md"] { --ds-size-h: var(--ds-control-h); --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); } [data-size="lg"] { --ds-size-h: var(--ds-control-h-lg); --ds-size-text: var(--ds-text-lg); --ds-size-pad-x: calc(var(--ds-control-pad-x) + 4px); } .ds-control { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); padding-inline: var(--ds-size-pad-x); font-size: var(--ds-size-text); line-height: var(--ds-lh-list); border-radius: var(--ds-radius-sm); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); color: var(--ds-ink); text-transform: var(--ds-control-case); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard); } .ds-control:hover { border-color: var(--ds-border-strong); } .ds-control:disabled, .ds-control[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); } :focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); border-radius: inherit; } :focus:not(:focus-visible) { outline: none; } :is(input, textarea, select, .ds-control):focus-visible { outline-offset: calc(-1 * var(--ds-border-width)); } [data-ring="outset"]:focus-visible { outline-offset: var(--ds-ring-outset); } .ds-hairline { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-hairline--soft { border-block-start-color: var(--ds-rule-soft); } .ds-hairline--strong { border-block-start-color: var(--ds-rule-strong); } .ds-hairline--dashed { border-block-start-style: dashed; } .ds-hairline--dotted { border-block-start-style: dotted; } hr.ds-hairline { width: 100%; } .ds-hairline-v { border-inline-start: var(--ds-border-width) solid var(--ds-rule); align-self: stretch; } .ds-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--ds-space-4)); } .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--ds-space-2)); } .ds-row--between { justify-content: space-between; } .ds-row--end { justify-content: flex-end; } .ds-row--nowrap { flex-wrap: nowrap; } .ds-grid { display: grid; gap: var(--_gap, var(--ds-card-gap)); grid-template-columns: repeat(auto-fit, minmax(min(var(--_min, 240px), 100%), 1fr)); } .ds-grid[data-cols="2"] { --_min: 320px; } .ds-grid[data-cols="3"] { --_min: 240px; } .ds-grid[data-cols="4"] { --_min: 200px; } .ds-spacer { flex: 1 1 auto; } .ds-container { width: 100%; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); } .ds-container--narrow { max-width: var(--ds-container-narrow); } .ds-container--prose { max-width: var(--ds-container-prose); } .ds-content { width: 100%; max-width: var(--ds-container-content); margin-inline: auto; padding-inline: var(--ds-gutter-page); } .ds-surface { background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); border-radius: var(--ds-radius-md); } .ds-well { background: var(--ds-surface-2); border-radius: var(--ds-radius-md); } .ds-demo { padding: var(--ds-space-6) var(--ds-gutter-page); border-block-end: var(--ds-border-width) solid var(--ds-rule); display: flex; flex-direction: column; gap: var(--ds-space-4); min-width: 0; } .ds-demo::before { content: attr(data-component) " · " attr(data-variant) " — " attr(data-title); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: 0; text-transform: none; } .ds-demo[data-title=""]::before, .ds-demo:not([data-title])::before { content: attr(data-component) " · " attr(data-variant); } .ds-demo > * { min-width: 0; } .ds-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); } .ds-demo__note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: var(--ds-measure); } .ds-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .ds-sec:not([data-mode]):not([data-band]) + .ds-sec:not([data-mode]):not([data-band]) { padding-block-start: 0; } .ds-accent-word { color: var(--ds-accent); } .ds-avatar svg[fill="none"] { fill: none; stroke: currentColor; } .ds-avatar { --_size: 32px; --_radius: var(--ds-radius-pill); --_fill: var(--ds-illustration-ground); --_ink: var(--ds-ink-2); --_hue: var(--ds-accent); --_font: max(var(--ds-text-xs), calc(var(--_size) * .375)); position: relative; display: inline-grid; place-items: center; flex: none; inline-size: var(--_size); block-size: var(--_size); padding: 0; margin: 0; border: 0; border-radius: var(--_radius); background: var(--_fill); color: var(--_ink); font-family: var(--ds-font-sans); font-size: var(--_font); font-weight: var(--ds-weight-semibold); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-decoration: none; vertical-align: middle; user-select: none; overflow: visible; } .ds-avatar[data-size="xs"] { --_size: 20px; } .ds-avatar[data-size="sm"] { --_size: 24px; } .ds-avatar[data-size="md"] { --_size: 32px; } .ds-avatar[data-size="lg"] { --_size: 40px; } .ds-avatar[data-size="xl"] { --_size: 48px; } .ds-avatar[data-size="2xl"] { --_size: 80px; } .ds-avatar[data-shape="square"] { --_radius: var(--ds-radius-sm); } .ds-avatar[data-shape="square"]:is([data-size="xs"], [data-size="sm"]) { --_radius: var(--ds-radius-xs); } .ds-avatar[data-shape="square"]:is([data-size="xl"], [data-size="2xl"]) { --_radius: var(--ds-radius-md); } .ds-avatar[data-hue="1"] { --_hue: var(--ds-data-1); --_fill: var(--ds-data-1-tint); --_ink: var(--ds-data-1-ink); } .ds-avatar[data-hue="2"] { --_hue: var(--ds-data-2); --_fill: var(--ds-data-2-tint); --_ink: var(--ds-data-2-ink); } .ds-avatar[data-hue="3"] { --_hue: var(--ds-data-3); --_fill: var(--ds-data-3-tint); --_ink: var(--ds-data-3-ink); } .ds-avatar[data-hue="4"] { --_hue: var(--ds-data-4); --_fill: var(--ds-data-4-tint); --_ink: var(--ds-data-4-ink); } .ds-avatar[data-hue="5"] { --_hue: var(--ds-data-5); --_fill: var(--ds-data-5-tint); --_ink: var(--ds-data-5-ink); } .ds-avatar[data-hue="6"] { --_hue: var(--ds-data-6); --_fill: var(--ds-data-6-tint); --_ink: var(--ds-data-6-ink); } .ds-avatar[data-hue="7"] { --_hue: var(--ds-data-7); --_fill: var(--ds-data-7-tint); --_ink: var(--ds-data-7-ink); } .ds-avatar[data-hue="8"] { --_hue: var(--ds-data-8); --_fill: var(--ds-data-8-tint); --_ink: var(--ds-data-8-ink); } .ds-avatar[data-tone="inverse"] { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); } .ds-avatar[data-tone="outline"] { --_fill: var(--ds-surface); --_ink: var(--ds-ink); } .ds-avatar[data-tone="outline"]::before, .ds-avatar[data-ring="ink"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--ds-border-width) solid var(--ds-ink); pointer-events: none; } .ds-avatar__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; } .ds-avatar__glyph { inline-size: 58%; block-size: 58%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; color: var(--ds-ink-muted); } .ds-avatar:has(> .ds-avatar__glyph) { color: transparent; } .ds-avatar:has(> .ds-avatar__glyph) .ds-avatar__glyph { color: var(--ds-ink-muted); } .ds-avatar__presence { position: absolute; inset-block-end: 0; inset-inline-end: 0; box-sizing: content-box; inline-size: max(6px, calc(var(--_size) * .22)); block-size: max(6px, calc(var(--_size) * .22)); border-radius: var(--ds-radius-pill); background: var(--ds-presence); border: 2px solid var(--ds-surface); transform: translate(25%, 25%); pointer-events: none; } .ds-avatar__presence[data-pos="top-end"] { inset-block-end: auto; inset-block-start: 0; transform: translate(25%, -25%); } .ds-avatar__presence[data-status="away"] { background: var(--ds-warning); } .ds-avatar__presence[data-status="busy"] { background: var(--ds-danger); } .ds-avatar__presence[data-status="offline"] { background: var(--ds-surface-3); box-shadow: var(--ds-shadow-lip); } .ds-avatar__presence[data-status="offline"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--ds-border-width) solid var(--ds-border-strong); } .ds-avatar__badge { position: absolute; display: inline-grid; place-items: center; inset-block-end: 0; inset-inline-end: 0; inline-size: max(14px, calc(var(--_size) * .3)); block-size: max(14px, calc(var(--_size) * .3)); border-radius: var(--ds-radius-pill); transform: translate(15%, 15%); color: var(--ds-ink-on-semantic); font-size: var(--ds-text-xs); pointer-events: none; } .ds-avatar__badge svg { inline-size: 62%; block-size: 62%; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ds-avatar__badge[data-kind="trust"] { background: var(--ds-accent-2); color: var(--ds-ink-on-accent); } .ds-avatar__badge[data-kind="verified"] { background: var(--ds-data-6); border: 2px solid var(--ds-surface); box-sizing: content-box; inline-size: max(12px, calc(var(--_size) * .34)); block-size: max(12px, calc(var(--_size) * .34)); } .ds-avatar__badge[data-pos="top-end"] { inset-block-end: auto; inset-block-start: 0; transform: translate(25%, -25%); } .ds-avatar__badge[data-pos="bottom"] { inset-inline-end: auto; inset-inline-start: 50%; inline-size: auto; block-size: auto; transform: translate(-50%, 40%); background: transparent; } .ds-avatar[data-ring="quota"]::after { content: ""; position: absolute; inset: -4px; border-radius: var(--ds-radius-pill); background: conic-gradient(var(--ds-accent) calc(var(--_quota, 0) * 360deg), var(--ds-rule) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--ds-ink) calc(100% - 2px + .5px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--ds-ink) calc(100% - 2px + .5px)); pointer-events: none; } [data-avatar="generated"] .ds-avatar:not(:has(> .ds-avatar__img)) { color: transparent; background: repeating-linear-gradient(45deg, transparent 0 2px, color-mix(in srgb, var(--_fill) 70%, transparent) 2px 4px), linear-gradient(135deg, var(--_hue), var(--_fill) 60%, var(--_hue)); } [data-avatar="glyph"] .ds-avatar:not(:has(> .ds-avatar__img)) { color: transparent; background-color: var(--_fill); background-image: radial-gradient(circle at 50% 36%, var(--ds-ink-muted) 0 17%, transparent 18%), radial-gradient(ellipse 34% 24% at 50% 92%, var(--ds-ink-muted) 0 98%, transparent 100%); } .ds-avatar[data-variant="descript-initials-tint"] { --_fill: var(--ds-accent-2-tint); --_ink: var(--ds-ink); } .ds-avatar[data-variant="retool-pastel-initial"] { --_size: 28px; } .ds-avatar[data-variant="retool-pastel-initial"] .ds-avatar__presence { inset-block-end: auto; inset-block-start: 0; transform: translate(25%, -25%); inline-size: 8px; block-size: 8px; } .ds-avatar[data-variant="luma-shape-equals-entity-type"] { --_size: 28px; } .ds-avatar[data-variant="luma-shape-equals-entity-type"][data-shape="square"] { --_size: 25px; --_radius: var(--ds-radius-sm); } .ds-avatar[data-variant="airbnb-trust-badge"] { --_size: 104px; } .ds-avatar[data-variant="v0-generated-pixel-gradient"] { color: transparent; background: repeating-linear-gradient(45deg, transparent 0 2px, color-mix(in srgb, var(--_fill) 70%, transparent) 2px 4px), linear-gradient(135deg, var(--_hue), var(--_fill) 60%, var(--_hue)); } .ds-avatar[data-variant="elevenlabs-quota-ring"] { --_fill: var(--ds-surface-2); } .ds-avatar[data-variant="clickup-presence-dot"] { --_size: 24px; --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); } .ds-avatar[data-variant="clickup-presence-dot"] .ds-avatar__presence { inline-size: 6px; block-size: 6px; border-width: 1.5px; } .ds-avatar[data-variant="plane-mascot-placeholder-set"] { --_size: 22px; --_radius: var(--ds-radius-sm); } .ds-avatar[data-variant="navattic-glyph-fallback-circle"] { --_size: 40px; --_fill: var(--ds-surface-3); --_ink: var(--ds-ink); } .ds-avatar[data-variant="origin-ring-initials"] { --_size: 44px; --_fill: var(--ds-surface); --_ink: var(--ds-ink); --_font: var(--ds-text-md); font-family: var(--ds-font-mono); font-weight: var(--ds-weight-medium); } .ds-avatar[data-variant="origin-ring-initials"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--ds-border-width) solid var(--ds-ink); pointer-events: none; } .ds-avatar[data-variant="homerun-dark-tile-workspace"] { --_size: 40px; --_radius: var(--ds-radius-sm); --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); } .ds-avatar[data-variant="oku-elevenlabs-verified-check"] { --_size: 32px; } .ds-avatar[data-variant="linear-invited-dashed-initials"] { --_size: 24px; --_font: var(--ds-text-xs); font-weight: var(--ds-weight-medium); } .ds-avatar[data-variant="clickup-card-cover-initials"] { --_size: 128px; --_radius: var(--ds-radius-md) var(--ds-radius-md) 0 0; --_font: var(--ds-text-3xl); inline-size: 100%; letter-spacing: var(--ds-heading-tracking); } .ds-avatar:is(a, button) { cursor: pointer; } .ds-avatar:is(a, button):hover::before, .ds-avatar[data-state="hover"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--ds-border-strong); pointer-events: none; } .ds-avatar:is(a, button):hover, .ds-avatar[data-state="hover"] { box-shadow: var(--ds-hover-shadow); } .ds-avatar:is(:disabled, [aria-disabled="true"]) { --_fill: var(--ds-surface-3); --_ink: var(--ds-ink-faint); cursor: not-allowed; } .ds-avatar:is(:disabled, [aria-disabled="true"]) .ds-avatar__img { opacity: .5; } .ds-avatar:is(:disabled, [aria-disabled="true"]) .ds-avatar__glyph { color: var(--ds-ink-faint); } .ds-avatar[aria-busy="true"] { --_fill: var(--ds-skeleton); color: transparent; background-image: none; } .ds-avatar[aria-busy="true"] > * { visibility: hidden; } .ds-avatar[data-state="error"] .ds-avatar__img { display: none; } .ds-avatar[data-state="empty"] { --_fill: transparent; --_ink: var(--ds-ink-muted); border: var(--ds-border-width) dashed var(--ds-rule-strong); text-transform: none; font-weight: var(--ds-weight-regular); } .ds-avatar[data-state="pending"] { --_fill: transparent; --_ink: var(--ds-ink-muted); border: var(--ds-border-width) dashed var(--ds-border-strong); font-weight: var(--ds-weight-regular); } .ds-text-input { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); --_ti-text: var(--ds-size-text); --_radius: var(--ds-radius-sm); --_w: auto; --_align: start; --_icon: var(--ds-icon-size); position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-2); width: var(--_w); max-width: 100%; min-width: 0; min-height: var(--_h); padding-inline: var(--_pad-x); font-size: var(--_ti-text); line-height: var(--ds-lh-list); color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--_radius); transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard); } .ds-text-input:hover { border-color: var(--ds-border-strong); } .ds-text-input__control { flex: 1 1 auto; align-self: stretch; width: 100%; min-width: 0; padding: 0; border: 0; margin: 0; background: transparent; color: inherit; font: inherit; text-align: var(--_align); text-overflow: ellipsis; } .ds-text-input__control::placeholder { color: var(--ds-ink-muted); opacity: 1; } .ds-text-input__control::-webkit-search-decoration, .ds-text-input__control::-webkit-search-cancel-button { appearance: none; } .ds-text-input__control:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); border-radius: var(--ds-radius-xs); } .ds-text-input__icon, .ds-text-input__clear, .ds-text-input__chevron { flex: none; color: var(--ds-ink-muted); } .ds-text-input__icon { display: inline-flex; width: var(--_icon); height: var(--_icon); } .ds-text-input__icon svg, .ds-text-input__clear svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-text-input__prefix { flex: none; color: var(--ds-ink-muted); white-space: nowrap; } .ds-text-input__clear { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--ds-icon-size) + var(--ds-space-2)); height: calc(var(--ds-icon-size) + var(--ds-space-2)); margin-inline-end: calc(-1 * var(--ds-space-1)); padding: var(--ds-space-1); border: 0; background: transparent; border-radius: var(--ds-radius-xs); cursor: pointer; } .ds-text-input__clear:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-text-input:has(> .ds-text-input__control:placeholder-shown) .ds-text-input__clear { display: none; } .ds-text-input__unit { flex: none; align-self: stretch; display: inline-flex; align-items: center; margin-inline-end: calc(-1 * var(--_pad-x)); padding-inline: var(--ds-space-3); border-inline-start: var(--ds-border-width) solid var(--ds-border); border-start-end-radius: calc(var(--_radius) - var(--ds-border-width)); border-end-end-radius: calc(var(--_radius) - var(--ds-border-width)); background: var(--ds-surface-2); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); white-space: nowrap; } .ds-text-input__chevron { width: calc(var(--ds-icon-size) * .45); height: calc(var(--ds-icon-size) * .45); margin-inline-end: var(--ds-space-0-5); border: 0 solid currentColor; border-inline-end-width: var(--ds-icon-stroke); border-block-end-width: var(--ds-icon-stroke); transform: translateY(-25%) rotate(45deg); } .ds-text-input__message { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); } @supports selector(:has(a)) { .ds-text-input__control:focus-visible { outline: none; } .ds-text-input:has(> .ds-text-input__control:focus-visible) { border-color: var(--ds-ring); outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); } .ds-text-input:has(> .ds-text-input__control[readonly]) { background: var(--ds-surface-2); border-color: transparent; } .ds-text-input:has(> .ds-text-input__control[readonly]) .ds-text-input__control { cursor: default; } .ds-text-input:has(> .ds-text-input__control:disabled) { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-text-input:has(> .ds-text-input__control:disabled) .ds-text-input__control { cursor: not-allowed; } .ds-text-input:has(> .ds-text-input__control:disabled) .ds-text-input__control::placeholder, .ds-text-input:has(> .ds-text-input__control:disabled) :is(.ds-text-input__icon, .ds-text-input__prefix, .ds-text-input__unit, .ds-text-input__chevron) { color: var(--ds-ink-faint); } .ds-text-input:has(> .ds-text-input__control[aria-invalid="true"]) { border-color: var(--ds-danger); } .ds-text-input:has(> .ds-text-input__control[aria-invalid="true"]:focus-visible) { border-color: var(--ds-danger); outline-color: var(--ds-danger); } } .ds-text-input[data-state="error"] { border-color: var(--ds-danger); } .ds-text-input[data-state="hover"] { border-color: var(--ds-border-strong); } .ds-text-input[data-state="focus"] { border-color: var(--ds-ring); outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); } .ds-text-input[aria-busy="true"]::after { content: ""; flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); border: 2px solid var(--ds-rule); border-block-start-color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); animation: ds-text-input-spin calc(var(--ds-dur-slow) * 3) linear infinite; } .ds-text-input[aria-busy="true"] .ds-text-input__clear { display: none; } @keyframes ds-text-input-spin { to { transform: rotate(360deg); } } .ds-text-input[data-size] { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); } .ds-text-input[data-size="sm"] { --_h: var(--ds-control-h-sm); --_pad-x: calc(var(--ds-control-pad-x) - 2px); --_ti-text: var(--ds-text-sm); } .ds-text-input[data-size="md"] { --_h: var(--ds-control-h); --_pad-x: var(--ds-control-pad-x); --_ti-text: var(--ds-text-md); } .ds-text-input[data-size="lg"] { --_h: var(--ds-control-h-lg); --_pad-x: calc(var(--ds-control-pad-x) + 4px); --_ti-text: var(--ds-text-lg); } .ds-text-input[data-variant="descript-tint-fill-right-aligned"] { --_align: end; background: var(--ds-surface-2); border-color: transparent; } .ds-text-input[data-variant="descript-tint-fill-right-aligned"]:hover { background: var(--ds-surface-hover); border-color: transparent; } .ds-text-input[data-variant="retool-hairline-32"] { --_h: var(--ds-control-h-sm); --_pad-x: calc(var(--ds-control-pad-x) - 2px); --_radius: var(--ds-radius-xs); font-size: var(--ds-text-sm); } .ds-text-input[data-variant="navattic-hairline-lip"] { --_h: var(--ds-control-h-sm); --_pad-x: calc(var(--ds-control-pad-x) - 2px); box-shadow: var(--ds-shadow-lift); } .ds-text-input[data-variant="origin-large-rounded"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-6)); --_pad-x: var(--ds-space-6); --_radius: var(--ds-radius-lg); --_icon: var(--ds-icon-size-row); --_w: 100%; gap: var(--ds-space-4); font-size: var(--ds-text-xl); border-color: var(--ds-border-strong); } .ds-text-input[data-variant="hsaj-full-width-48"] { --_h: calc(var(--ds-control-h) + var(--ds-space-3)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-md); --_w: 100%; font-size: var(--ds-text-lg); } .ds-text-input[data-variant="hsajl-inline-label-row"] { --_h: calc(var(--ds-row-h) + var(--ds-space-4)); --_pad-x: var(--ds-space-5); --_radius: 0; --_w: 100%; gap: var(--ds-space-6); font-size: var(--ds-text-lg); background: transparent; border-width: 0 0 var(--ds-border-width); border-color: var(--ds-rule); } .ds-text-input[data-variant="hsajl-inline-label-row"]:hover { border-color: var(--ds-rule-strong); } .ds-text-input[data-variant="hsajl-inline-label-row"] .ds-text-input__control { font-weight: var(--ds-weight-semibold); } .ds-text-input[data-variant="hsajl-inline-label-row"] .ds-text-input__control::placeholder { font-weight: var(--ds-weight-regular); } .ds-text-input[data-variant="luma-modal-white-with-clear"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-1)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-md); --_w: 100%; font-size: var(--ds-text-lg); border-color: transparent; } .ds-text-input[data-variant="luma-modal-white-with-clear"]:hover { border-color: var(--ds-rule); } .ds-text-input[data-variant="perplexity-composer-strong-rule"] { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-4); font-size: var(--ds-text-lg); border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-lift); } .ds-text-input[data-form="multiline"] { --_rows: 4; align-items: stretch; padding-block: calc(var(--_pad-x) * 0.66); width: var(--_w, 100%); } .ds-text-input[data-form="multiline"] > .ds-text-input__control { min-height: calc(var(--_rows) * 1lh); line-height: var(--ds-lh-body, 1.5); resize: vertical; text-overflow: clip; white-space: pre-wrap; appearance: none; } .ds-text-input[data-form="select"] { position: relative; padding-inline-end: 0; } .ds-text-input[data-form="select"] > .ds-text-input__control { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: calc(var(--_pad-x) + var(--ds-icon-size)); min-height: calc(var(--_h) - 2 * var(--ds-border-width)); } .ds-text-input[data-form="select"] > .ds-text-input__chevron { position: absolute; inset-inline-end: var(--_pad-x); top: 50%; margin: 0; transform: translateY(-75%) rotate(45deg); pointer-events: none; } .ds-text-input[data-form] > .ds-text-input__control:disabled { cursor: not-allowed; color: var(--ds-ink-faint); } .ds-select-trigger { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); --_radius: var(--ds-radius-sm); --_w: auto; --_lead: var(--ds-icon-size); position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-2); width: var(--_w); max-width: 100%; min-width: 0; min-height: var(--_h); padding: 0 var(--_pad-x); font: inherit; font-size: var(--ds-size-text); line-height: var(--ds-lh-list); font-weight: var(--ds-weight-regular); text-align: start; text-decoration: none; color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--_radius); box-shadow: var(--ds-shadow-lip); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-select-trigger:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); box-shadow: var(--ds-shadow-lip), var(--ds-hover-shadow); } .ds-select-trigger:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); } .ds-select-trigger[aria-expanded="true"] { background: var(--ds-surface-2); border-color: var(--ds-border-strong); } .ds-select-trigger[aria-expanded="true"] .ds-select-trigger__chevron:not([data-glyph]) { transform: translateY(25%) rotate(225deg); } .ds-select-trigger__lead { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--_lead); height: var(--_lead); color: var(--ds-ink-muted); } .ds-select-trigger__lead svg, .ds-select-trigger__edit svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-select-trigger__lead[data-avatar] { --_lead: var(--ds-icon-size-row); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-accent-ink); background: var(--ds-accent-tint); border-radius: var(--ds-radius-pill); overflow: hidden; } .ds-select-trigger__lead[data-avatar="square"] { border-radius: var(--ds-radius-xs); } .ds-select-trigger__lead[data-avatar] img { width: 100%; height: 100%; object-fit: cover; } .ds-select-trigger__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-select-trigger[data-state="unset"] .ds-select-trigger__value { color: var(--ds-ink-muted); } .ds-select-trigger__key { color: var(--ds-ink-muted); } .ds-select-trigger__chevron { flex: none; position: relative; width: calc(var(--ds-icon-size) * .45); height: calc(var(--ds-icon-size) * .45); margin-inline-start: auto; margin-inline-end: var(--ds-space-0-5); color: var(--ds-ink-muted); border: 0 solid currentColor; border-inline-end-width: var(--ds-icon-stroke); border-block-end-width: var(--ds-icon-stroke); transform: translateY(-25%) rotate(45deg); transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-select-trigger__chevron[data-glyph="double"] { width: calc(var(--ds-icon-size) * .5); height: var(--ds-icon-size); border: 0; transform: none; } .ds-select-trigger__chevron[data-glyph="double"]::before, .ds-select-trigger__chevron[data-glyph="double"]::after { content: ""; position: absolute; inset-inline-start: 1px; width: 5px; height: 5px; border: 0 solid currentColor; border-inline-end-width: var(--ds-icon-stroke); border-block-end-width: var(--ds-icon-stroke); } .ds-select-trigger__chevron[data-glyph="double"]::before { top: 3px; transform: rotate(225deg); } .ds-select-trigger__chevron[data-glyph="double"]::after { bottom: 3px; transform: rotate(45deg); } .ds-select-trigger__chevron[data-glyph="arrow"] { width: var(--ds-icon-size); height: var(--ds-icon-size); border: 0; transform: none; } .ds-select-trigger__chevron[data-glyph="arrow"]::before { content: ""; position: absolute; top: 50%; inset-inline: 3px; height: var(--ds-icon-stroke); margin-top: calc(-.5 * var(--ds-icon-stroke)); background: currentColor; } .ds-select-trigger__chevron[data-glyph="arrow"]::after { content: ""; position: absolute; top: 50%; inset-inline-end: 3px; width: 6px; height: 6px; margin-top: -3px; border: 0 solid currentColor; border-inline-end-width: var(--ds-icon-stroke); border-block-start-width: var(--ds-icon-stroke); transform: rotate(45deg); } .ds-select-trigger:disabled, .ds-select-trigger[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-select-trigger:disabled :is(.ds-select-trigger__lead, .ds-select-trigger__chevron, .ds-select-trigger__value, .ds-select-trigger__key), .ds-select-trigger[aria-disabled="true"] :is(.ds-select-trigger__lead, .ds-select-trigger__chevron, .ds-select-trigger__value, .ds-select-trigger__key) { color: var(--ds-ink-faint); } .ds-select-trigger[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-select-trigger[aria-invalid="true"]:focus-visible { outline-color: var(--ds-danger); } .ds-select-trigger[aria-busy="true"] .ds-select-trigger__chevron { width: var(--ds-icon-size); height: var(--ds-icon-size); border: 2px solid var(--ds-rule); border-block-start-color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); transform: none; animation: ds-select-trigger-spin calc(var(--ds-dur-slow) * 3) linear infinite; } .ds-select-trigger[aria-busy="true"] .ds-select-trigger__chevron::before, .ds-select-trigger[aria-busy="true"] .ds-select-trigger__chevron::after { display: none; } @keyframes ds-select-trigger-spin { to { transform: rotate(360deg); } } .ds-select-trigger[data-state="hover"] { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); box-shadow: var(--ds-shadow-lip), var(--ds-hover-shadow); } .ds-select-trigger__message { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-select-trigger__message[data-tone="error"] { color: var(--ds-danger-ink); } .ds-select-trigger[data-size] { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); } .ds-select-trigger[data-variant="retool-bordered-chevron"] { --_h: var(--ds-control-h-sm); --_pad-x: calc(var(--ds-control-pad-x) - 2px); --_radius: var(--ds-radius-xs); --_w: 100%; font-size: var(--ds-text-sm); box-shadow: none; } .ds-select-trigger[data-variant="hsaj-select-48"] { --_h: calc(var(--ds-control-h) + var(--ds-space-3)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-md); --_w: 100%; font-size: var(--ds-text-lg); box-shadow: none; } .ds-select-trigger[data-variant="hsaj-select-48"] .ds-select-trigger__chevron { margin-inline-end: var(--ds-space-1); } .ds-select-trigger[data-variant="luma-select-as-pill"] { --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-3); --_radius: var(--ds-radius-md); font-weight: var(--ds-weight-medium); background: var(--ds-surface-2); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="luma-select-as-pill"]:hover { background: var(--ds-surface-3); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="luma-select-as-pill"] .ds-select-trigger__lead:not([data-avatar]) { color: var(--ds-ink-2); } .ds-select-trigger[data-variant="luma-select-as-pill"][aria-expanded="true"] { background: var(--ds-accent-tint); border-color: transparent; color: var(--ds-accent-ink); } .ds-select-trigger[data-variant="luma-select-as-pill"][aria-expanded="true"] :is(.ds-select-trigger__lead:not([data-avatar]), .ds-select-trigger__chevron) { color: var(--ds-accent-ink); } .ds-select-trigger[data-variant="perplexity-ghost-to-value"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-1); --_radius: var(--ds-radius-sm); gap: var(--ds-space-1); color: var(--ds-ink-muted); background: transparent; border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="perplexity-ghost-to-value"]:hover { background: var(--ds-hover-bg); border-color: transparent; box-shadow: none; color: var(--ds-ink); } .ds-select-trigger[data-variant="perplexity-ghost-to-value"] .ds-select-trigger__lead { --_lead: var(--ds-icon-size-row); color: inherit; } .ds-select-trigger[data-variant="perplexity-ghost-to-value"] .ds-select-trigger__value, .ds-select-trigger[data-variant="perplexity-ghost-to-value"] .ds-select-trigger__chevron { color: inherit; } .ds-select-trigger[data-variant="perplexity-ghost-to-value"][data-state="unset"] .ds-select-trigger__chevron { display: none; } .ds-select-trigger[data-variant="perplexity-ghost-to-value"][aria-expanded="true"] { background: var(--ds-surface-2); border-color: transparent; color: var(--ds-ink); } .ds-select-trigger[data-variant="navattic-labelled-split"] { --_h: var(--ds-control-h-sm); --_pad-x: 0; gap: 0; overflow: hidden; box-shadow: var(--ds-shadow-lift); } .ds-select-trigger[data-variant="navattic-labelled-split"] .ds-select-trigger__label { flex: none; align-self: stretch; display: inline-flex; align-items: center; gap: var(--ds-space-1); padding-inline: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-2); border-inline-end: var(--ds-border-width) solid var(--ds-border); color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); } .ds-select-trigger[data-variant="navattic-labelled-split"] .ds-select-trigger__label .ds-select-trigger__lead { color: var(--ds-ink-2); } .ds-select-trigger[data-variant="navattic-labelled-split"] .ds-select-trigger__value { padding-inline-start: var(--ds-space-3); } .ds-select-trigger[data-variant="navattic-labelled-split"] .ds-select-trigger__chevron { margin-inline: var(--ds-space-3); } .ds-select-trigger[data-variant="navattic-labelled-split"][aria-expanded="true"] { background: var(--ds-surface); } .ds-select-trigger[data-variant="navattic-labelled-split"][aria-expanded="true"] .ds-select-trigger__label { background: var(--ds-surface-3); } .ds-select-trigger[data-variant="jasper-brand-filled"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); font-weight: var(--ds-weight-medium); color: var(--ds-ink-on-accent); background: var(--ds-accent); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="jasper-brand-filled"]:hover { background: var(--ds-accent-hover); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="jasper-brand-filled"] :is(.ds-select-trigger__chevron, .ds-select-trigger__lead) { color: var(--ds-ink-on-accent); } .ds-select-trigger[data-variant="jasper-brand-filled"][aria-expanded="true"] { background: var(--ds-accent-hover); } .ds-select-trigger[data-variant="contra-inline-sentence-select"] { --_h: 0; --_pad-x: 0; --_radius: var(--ds-radius-xs); display: inline-flex; vertical-align: baseline; gap: var(--ds-space-1); font-weight: var(--ds-weight-bold); font-size: inherit; line-height: inherit; background: transparent; border: 0; border-block-end: var(--ds-border-width) dotted var(--ds-rule-strong); border-radius: 0; box-shadow: none; } .ds-select-trigger[data-variant="contra-inline-sentence-select"]:hover { background: transparent; border-color: var(--ds-ink); box-shadow: none; } .ds-select-trigger[data-variant="contra-inline-sentence-select"]:focus-visible { outline-offset: var(--ds-ring-offset); } .ds-select-trigger[data-variant="contra-inline-sentence-select"] .ds-select-trigger__chevron { margin-inline-start: var(--ds-space-0-5); color: var(--ds-ink); } .ds-select-trigger[data-variant="contra-inline-sentence-select"][aria-expanded="true"] { background: var(--ds-surface-2); } .ds-select-trigger[data-variant="manychat-chip-dropdown"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); box-shadow: none; } .ds-select-trigger[data-variant="manychat-chip-dropdown"] .ds-select-trigger__value { color: var(--ds-ink-2); } .ds-select-trigger[data-variant="origin-compare-pill"] { --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-pill); border-color: var(--ds-border-strong); box-shadow: none; } .ds-select-trigger[data-variant="origin-compare-pill"]:hover { border-color: var(--ds-ink); } .ds-select-trigger[data-variant="origin-compare-pill"] .ds-select-trigger__lead { color: var(--ds-ink); } .ds-select-trigger[data-variant="klarna-region-chip-button"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-sm); --_lead: var(--ds-icon-size-rail); gap: var(--ds-space-3); font-weight: var(--ds-weight-medium); background: var(--ds-surface-2); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="klarna-region-chip-button"]:hover { background: var(--ds-surface-3); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="klarna-region-chip-button"] .ds-select-trigger__chevron { color: var(--ds-ink); } .ds-select-trigger[data-variant="luma-theme-card"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-5)); --_pad-x: var(--ds-space-3); --_radius: var(--ds-radius-md); --_w: 100%; gap: var(--ds-space-3); background: var(--ds-surface-2); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="luma-theme-card"]:hover { background: var(--ds-surface-hover); border-color: transparent; box-shadow: none; } .ds-select-trigger[data-variant="luma-theme-card"][aria-expanded="true"] { background: var(--ds-surface-3); border-color: transparent; } .ds-select-trigger__thumb { flex: none; width: calc(var(--ds-icon-size-rail) * 2 + var(--ds-space-1)); height: calc(var(--ds-icon-size-row) * 2); border-radius: var(--ds-radius-xs); background: linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) var(--ds-space-2) var(--ds-space-2) / 40% 4px no-repeat, linear-gradient(var(--ds-rule), var(--ds-rule)) var(--ds-space-2) calc(var(--ds-space-2) + 8px) / 70% 3px no-repeat, linear-gradient(var(--ds-rule), var(--ds-rule)) var(--ds-space-2) calc(var(--ds-space-2) + 14px) / 55% 3px no-repeat, var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); overflow: hidden; } .ds-select-trigger__thumb img { width: 100%; height: 100%; object-fit: cover; } .ds-select-trigger__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-0-5); } .ds-select-trigger__caption { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); line-height: var(--ds-lh-list); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-select-trigger__text .ds-select-trigger__value { font-weight: var(--ds-weight-semibold); } .ds-select-trigger__edit { flex: none; display: inline-flex; width: var(--ds-icon-size); height: var(--ds-icon-size); margin-inline-start: auto; color: var(--ds-ink-muted); } .ds-select-trigger:hover .ds-select-trigger__edit { color: var(--ds-ink); } .ds-breadcrumb svg[fill="none"] { fill: none; } .ds-breadcrumb { --_size: var(--ds-text-md); --_gap: var(--ds-space-2); --_leaf-weight: var(--ds-weight-medium); --_sep-glyph: "/"; min-width: 0; font-size: var(--_size); line-height: var(--ds-lh-list); color: var(--ds-ink-muted); } .ds-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap); min-width: 0; margin: 0; padding: 0; list-style: none; } .ds-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--_gap); min-width: 0; flex: 0 1 auto; } .ds-breadcrumb[data-wrap="nowrap"] .ds-breadcrumb__list { flex-wrap: nowrap; } .ds-breadcrumb__item:has(> .ds-breadcrumb__link) { flex-shrink: 0; max-inline-size: 100%; } .ds-breadcrumb__link { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); text-decoration: none; border-radius: var(--ds-radius-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-breadcrumb__link:hover, .ds-breadcrumb__link[data-state="hover"] { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; } .ds-breadcrumb__leaf { color: var(--ds-ink); font-weight: var(--_leaf-weight); font-size: inherit; line-height: inherit; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-breadcrumb__sep { flex: none; color: var(--ds-ink-faint); font-weight: var(--ds-weight-regular); user-select: none; } .ds-breadcrumb__sep::before { content: var(--_sep-glyph); } .ds-breadcrumb[data-sep="chevron"] { --_sep-glyph: "›"; } .ds-breadcrumb[data-sep="plus"] { --_sep-glyph: "+"; } .ds-breadcrumb__sep svg { inline-size: 12px; block-size: 12px; display: block; } .ds-breadcrumb__sep:has(svg)::before { content: none; } .ds-breadcrumb__ellipsis { display: inline-grid; place-items: center; min-inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); padding: 0 var(--ds-space-1); border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); font: inherit; cursor: pointer; } .ds-breadcrumb__ellipsis:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-breadcrumb__icon { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); border-radius: var(--ds-radius-xs); background: var(--ds-data-1-tint); color: var(--ds-data-1-ink); } .ds-breadcrumb__icon[data-hue="2"] { background: var(--ds-data-2-tint); color: var(--ds-data-2-ink); } .ds-breadcrumb__icon[data-hue="7"] { background: var(--ds-data-7-tint); color: var(--ds-data-7-ink); } .ds-breadcrumb__icon svg { inline-size: 12px; block-size: 12px; } .ds-breadcrumb__control { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h-sm); padding-inline: var(--ds-space-3) var(--ds-space-2); font: inherit; font-weight: var(--ds-weight-medium); color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-lip); cursor: pointer; white-space: nowrap; max-inline-size: 100%; } .ds-breadcrumb__control svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); flex: none; } .ds-breadcrumb__control:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-breadcrumb__control[aria-expanded="true"] { border-color: var(--ds-border-strong); background: var(--ds-surface-selected); } .ds-breadcrumb__control:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; } .ds-breadcrumb__edit { display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); cursor: pointer; } .ds-breadcrumb__edit svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-breadcrumb__edit:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-breadcrumb__leaf[data-editable="true"] { text-decoration: underline dotted; text-decoration-color: var(--ds-rule-strong); text-underline-offset: .25em; } .ds-breadcrumb__leaf[data-state="empty"] { color: var(--ds-ink-muted); font-style: italic; font-weight: var(--ds-weight-regular); padding-inline-end: .12em; } .ds-breadcrumb__badge { flex: none; display: inline-flex; align-items: center; block-size: var(--ds-icon-size-row); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-xs); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: .06em; text-transform: uppercase; background: var(--ds-surface-2); color: var(--ds-ink-2); border: var(--ds-border-width) solid var(--ds-rule); } .ds-breadcrumb__badge[data-tone="live"] { background: var(--ds-danger-tint); color: var(--ds-danger-ink); border-color: transparent; } .ds-breadcrumb__badge[data-tone="draft"] { background: var(--ds-surface-2); color: var(--ds-ink-muted); border-color: var(--ds-rule); } .ds-breadcrumb__star { display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); cursor: pointer; } .ds-breadcrumb__star svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); fill: none; stroke: currentColor; } .ds-breadcrumb__star:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-breadcrumb__star[aria-pressed="true"] { color: var(--ds-accent); } .ds-breadcrumb__star[aria-pressed="true"] svg { fill: currentColor; } .ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] { --_size: var(--ds-text-2xl); --_gap: var(--ds-space-4); --_leaf-weight: var(--ds-heading-weight); --_sep-glyph: "›"; line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); } .ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] .ds-breadcrumb__leaf { color: var(--ds-ink); white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; } .ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] .ds-breadcrumb__sep { font-size: var(--ds-text-lg); color: var(--ds-ink-faint); } .ds-breadcrumb[data-variant="navattic-interactive-leaf"] { --_gap: var(--ds-space-3); } .ds-breadcrumb[data-variant="clickup-icon-square"] { --_leaf-weight: var(--ds-weight-semibold); } .ds-breadcrumb[data-variant="manychat-editable-leaf-badge"] { --_sep-glyph: "›"; } .ds-breadcrumb[data-variant="manychat-editable-leaf-badge"] .ds-breadcrumb__sep { color: var(--ds-accent); } .ds-breadcrumb[data-variant="manychat-editable-leaf-badge"] .ds-breadcrumb__leaf { font-weight: var(--ds-weight-regular); } .ds-breadcrumb[data-variant="perplexity-collection-untitled"] { --_leaf-weight: var(--ds-weight-regular); } .ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__link, .ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__leaf { color: var(--ds-ink-muted); } .ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__leaf { font-style: italic; padding-inline-end: .12em; } .ds-breadcrumb[data-variant="perplexity-collection-untitled"] .ds-breadcrumb__link::before { content: "+ "; color: var(--ds-ink-faint); } .ds-breadcrumb[data-variant="luma-admin-single-level"] { --_sep-glyph: "›"; --_gap: var(--ds-space-1); } .ds-breadcrumb[data-variant="luma-admin-single-level"] .ds-breadcrumb__link { color: var(--ds-ink-2); } .ds-breadcrumb, .ds-breadcrumb__link, .ds-breadcrumb__leaf { text-transform: none; } @media (max-width: 720px) { .ds-breadcrumb[data-collapse="mobile"] .ds-breadcrumb__item[data-collapsible] { display: none; } .ds-breadcrumb[data-collapse="mobile"] .ds-breadcrumb__item[data-role="ellipsis"] { display: inline-flex; } } .ds-breadcrumb__item[data-role="ellipsis"] { display: none; } .ds-breadcrumb__initials { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); line-height: 1; letter-spacing: 0; } .ds-breadcrumb__icon:has(.ds-breadcrumb__initials) { font-size: var(--ds-text-xs); } .ds-breadcrumb[data-state="collapsed"] .ds-breadcrumb__item[data-role="ellipsis"] { display: inline-flex; } .ds-breadcrumb[data-state="collapsed"] .ds-breadcrumb__item[data-collapsible] { display: none; } .ds-breadcrumb[data-state="collapsed"] .ds-breadcrumb__leaf { max-inline-size: 32ch; } .ds-breadcrumb__live { display: none; } .ds-breadcrumb[data-state="switched"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); } .ds-breadcrumb[data-state="switched"] .ds-breadcrumb__item[data-role="workspace"] > .ds-breadcrumb__link { color: var(--ds-accent-ink); background: var(--ds-accent-tint); padding-inline: var(--ds-space-1); } .ds-breadcrumb[data-state="switched"] .ds-breadcrumb__live { display: inline-flex; align-items: center; min-height: var(--ds-icon-size-row); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); letter-spacing: 0; } .ds-breadcrumb[data-variant="jstov"] { --_leaf-weight: var(--ds-weight-semibold); --_gap: var(--ds-space-1-5); font-size: var(--ds-text-sm); } .ds-breadcrumb[data-variant="jstov"] .ds-breadcrumb__icon { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-radius: var(--ds-radius-xs); } .ds-breadcrumb[data-variant="jstov"] .ds-breadcrumb__link { padding-inline: var(--ds-space-0-5); } .ds-breadcrumb[data-variant="frame-space-icon"] { --_size: var(--ds-text-xs); --_gap: var(--ds-space-1-5); --_leaf-weight: var(--ds-weight-semibold); } .ds-breadcrumb[data-variant="frame-space-icon"] .ds-breadcrumb__icon { background: transparent; color: var(--ds-ink-muted); } .ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"] .ds-breadcrumb__icon { display: none; } .ds-breadcrumb[data-variant="hsaj-breadcrumb-as-h1"][data-state="collapsed"] .ds-breadcrumb__link { font-size: var(--ds-text-md); } .ds-rail-footer-stack { --_gap: var(--ds-space-2); --_inset: 0px; --_pct: 0; display: flex; flex-direction: column; gap: var(--_gap); margin-block-start: auto; padding-inline: var(--_inset); min-width: 0; color: var(--ds-ink-2); font-size: var(--ds-text-md); } .ds-rail-footer-stack__rule { height: 0; border: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); margin-block: var(--ds-space-1); } .ds-rail-footer-stack__account { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink); text-decoration: none; min-width: 0; } a.ds-rail-footer-stack__account:hover, button.ds-rail-footer-stack__account:hover { background: var(--ds-hover-bg); box-shadow: var(--ds-hover-shadow); } button.ds-rail-footer-stack__account { width: 100%; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; } .ds-rail-footer-stack__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); line-height: 1; overflow: hidden; } .ds-rail-footer-stack__avatar > img { width: 100%; height: 100%; object-fit: cover; } .ds-rail-footer-stack__avatar[data-size="lg"] { width: 40px; height: 40px; font-size: var(--ds-text-sm); } .ds-rail-footer-stack__avatar[data-kind="orb"] { background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)); color: var(--ds-ink-on-accent); } .ds-rail-footer-stack__identity { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .ds-rail-footer-stack__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ds-weight-medium); color: var(--ds-ink); } .ds-rail-footer-stack__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-rail-footer-stack__icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-muted); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-rail-footer-stack__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-rail-footer-stack__icon-btn:disabled { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-rail-footer-stack__icon-btn > svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__icon-btn[data-badged="true"]::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-accent); transform: translate(8px, -8px); } .ds-rail-footer-stack__icon-btn { position: relative; } .ds-rail-footer-stack__utilities { display: flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-1); } .ds-rail-footer-stack__utilities > .ds-spacer { flex: 1 1 auto; } .ds-rail-footer-stack__utility-link { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-2); min-height: var(--ds-control-h-sm); border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-decoration: none; } .ds-rail-footer-stack__utility-link:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-rail-footer-stack__utility-link > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__plan { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); color: var(--ds-ink-2); font-size: var(--ds-text-md); text-decoration: none; cursor: pointer; } .ds-rail-footer-stack__plan:hover { border-color: var(--ds-border-strong); } .ds-rail-footer-stack__ring { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); border-radius: var(--ds-radius-pill); border: 3px solid var(--ds-accent); } .ds-rail-footer-stack__ring[data-tone="warning"] { border-color: var(--ds-warning); } .ds-rail-footer-stack__ring[data-tone="danger"] { border-color: var(--ds-danger); } .ds-rail-footer-stack__chip { flex: none; display: inline-flex; align-items: center; min-height: 20px; padding-inline: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); background: var(--ds-surface); color: var(--ds-ink-2); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: 1; letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); white-space: nowrap; } .ds-rail-footer-stack__credit { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font-family: var(--ds-font-mono); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; } .ds-rail-footer-stack__ghost { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink-2); font-size: var(--ds-text-md); text-decoration: none; } .ds-rail-footer-stack__ghost:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-rail-footer-stack__ghost > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__cta-row { display: flex; gap: var(--ds-space-2); align-items: center; } .ds-rail-footer-stack__cta { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-control-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-shadow-lip); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); text-decoration: none; cursor: pointer; } .ds-rail-footer-stack__cta:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-rail-footer-stack__cta > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__cta-row > .ds-rail-footer-stack__icon-btn { border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); } .ds-rail-footer-stack__promo { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-card-pad); border: var(--ds-border-width) solid var(--ds-card-border); border-radius: var(--ds-radius-lg); background: var(--ds-card-bg); box-shadow: var(--ds-card-shadow); color: var(--ds-ink-2); text-decoration: none; overflow: hidden; } a.ds-rail-footer-stack__promo:hover { border-color: var(--ds-border-strong); } .ds-rail-footer-stack__promo-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-muted); } .ds-rail-footer-stack__promo-icon > svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__promo-title { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); } .ds-rail-footer-stack__promo-body { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ds-rail-footer-stack__promo[data-kind="block"] { padding: var(--ds-space-2); border-color: transparent; background: transparent; box-shadow: none; } .ds-rail-footer-stack__promo[data-kind="block"] .ds-rail-footer-stack__promo-body { -webkit-line-clamp: 3; } .ds-rail-footer-stack__promo-button { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-control-pad-x); border: 0; border-radius: var(--ds-radius-button); background: var(--ds-surface-3); color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); cursor: pointer; } .ds-rail-footer-stack__promo-button:hover { background: var(--ds-surface-selected); } .ds-rail-footer-stack__promo-button > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__progress { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-card-pad); border: var(--ds-border-width) solid var(--ds-rule-strong); border-radius: var(--ds-radius-md); background: var(--ds-card-bg); color: var(--ds-ink-2); } .ds-rail-footer-stack__progress-head { display: flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink); font-size: var(--ds-text-md); } .ds-rail-footer-stack__progress-head > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rail-footer-stack__progress-head > .ds-spacer { flex: 1 1 auto; } .ds-rail-footer-stack__bar { height: 4px; border-radius: var(--ds-radius-pill); background: var(--ds-rule); overflow: hidden; } .ds-rail-footer-stack__bar > span { display: block; height: 100%; width: calc(var(--_pct) * 1%); border-radius: inherit; background: var(--ds-ink); } .ds-rail-footer-stack__progress-foot { display: flex; justify-content: space-between; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-rail-footer-stack__progress-foot > a { color: var(--ds-ink); } .ds-rail-footer-stack__ring-pill { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 64px; padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-2); border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); text-align: start; cursor: pointer; } .ds-rail-footer-stack__ring-pill:hover { background: var(--ds-surface-3); } .ds-rail-footer-stack__ring-meter { position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--ds-radius-pill); background: conic-gradient(var(--ds-accent) 0, var(--ds-accent-2) calc(var(--_pct) * 1%), var(--ds-rule-strong) 0); display: grid; place-items: center; } .ds-rail-footer-stack__ring-meter::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--ds-surface-2); } .ds-rail-footer-stack__ring-meter > span { position: relative; font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink); } .ds-rail-footer-stack__account[data-kind="pill"] { background: var(--ds-surface-2); border-radius: var(--ds-radius-md); min-height: var(--ds-tap-target-min); } .ds-rail-footer-stack__account[data-kind="pill"]:hover { background: var(--ds-surface-3); } .ds-rail-footer-stack__wordmark { display: flex; align-items: center; justify-content: center; min-height: var(--ds-control-h-lg); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .18em; text-transform: uppercase; color: var(--ds-ink); } .ds-rail-footer-stack :is(a, button):focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-rail-footer-stack[data-state="empty"] > * { display: none; } .ds-rail-footer-stack[data-state="empty"]::before { content: attr(data-empty-label); display: flex; align-items: center; justify-content: center; min-height: var(--ds-control-h-lg); border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-rail-footer-stack[aria-busy="true"] .ds-rail-footer-stack__avatar { background: var(--ds-rule-strong); color: transparent; } .ds-rail-footer-stack__skeleton { display: block; height: calc(var(--ds-text-md) * .9); width: 60%; border-radius: var(--ds-radius-xs); background: var(--ds-rule-strong); animation: ds-rail-footer-stack-pulse var(--ds-dur-slow) var(--ds-ease-standard) infinite alternate; } @keyframes ds-rail-footer-stack-pulse { from { opacity: 1; } to { opacity: .55; } } .ds-rail-footer-stack[data-orientation="rail"] { align-items: center; --_gap: var(--ds-space-1); } .ds-rail-footer-stack[data-orientation="rail"] .ds-rail-footer-stack__rule { width: var(--ds-control-h-sm); } .ds-rail-footer-stack[data-orientation="rail"] .ds-rail-footer-stack__icon-btn { width: var(--ds-tap-target-min); height: var(--ds-tap-target-min); } .ds-rail-footer-stack[data-orientation="rail"] .ds-rail-footer-stack__account { padding: 0; min-height: var(--ds-tap-target-min); justify-content: center; } .ds-rail-footer-stack[data-orientation="rail"] .ds-rail-footer-stack__avatar { width: 32px; height: 32px; } .ds-rail-footer-stack[data-variant="jstov"] .ds-rail-footer-stack__account { min-height: var(--ds-control-h-lg); } .ds-rail-footer-stack[data-variant="navattic-plan-pill-invite"] { --_gap: var(--ds-space-1); } .ds-rail-footer-stack[data-variant="confluence-invite-cta"] { --_gap: var(--ds-space-3); } .ds-rail-footer-stack[data-variant="perplexity-upsell-identity-utilities"] .ds-rail-footer-stack__account { min-height: 52px; } .ds-rail-footer-stack[data-variant="contra-progress-pill"] { --_inset: var(--ds-space-4); } .ds-rail-footer-stack[data-variant="elevenlabs-promo-card"] { --_gap: var(--ds-space-2); } .ds-rail-footer-stack[data-variant="oku-goal-widget-account-pill"] { --_inset: 0px; --_gap: var(--ds-space-3); } .ds-rail-footer-stack[data-variant="homerun-wordmark-foot"] { --_gap: 0; } .ds-rail-footer-stack[data-variant="v0-account-row-credit-chip"] .ds-rail-footer-stack__account { min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-2); } .ds-rail-footer-stack[data-variant="manychat-rail-utilities"] { align-items: center; } .ds-icon-rail { --_w: var(--ds-rail-w); --_tile: var(--ds-control-h-sm); --_tile-radius: var(--ds-radius-sm); --_pitch-gap: var(--ds-space-2); --_bg: var(--ds-ground-2); --_rule: var(--ds-rule); --_label-size: var(--ds-text-xs); --_icon: var(--ds-icon-size-rail); display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3); width: var(--_w); min-width: var(--_w); height: 100%; min-height: 0; padding-block: var(--ds-space-3); background: var(--_bg); border-inline-end: var(--ds-border-width) solid var(--_rule); color: var(--ds-ink-2); font-family: var(--ds-font-sans); user-select: none; } .ds-icon-rail__brand { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--_tile); height: var(--_tile); border-radius: var(--_tile-radius); color: var(--ds-ink); text-decoration: none; } .ds-icon-rail__brand > svg { width: 70%; height: 70%; } .ds-icon-rail__brand[data-kind="inverse"] { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); } .ds-icon-rail__brand-rule { width: var(--ds-control-h-lg); height: 0; border: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); margin-block: calc(-1 * var(--ds-space-1)); } .ds-icon-rail__identity { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--_tile); height: var(--_tile); padding: 0; border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); cursor: pointer; overflow: visible; } .ds-icon-rail__identity > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .ds-icon-rail__identity[data-shape="square"] { border-radius: var(--ds-radius-sm); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); } .ds-icon-rail__identity[data-shape="square"] > svg { width: 60%; height: 60%; } .ds-icon-rail__plan { position: absolute; inset-inline-start: 50%; inset-block-end: -5px; transform: translateX(-50%); padding-inline: var(--ds-space-1); border-radius: var(--ds-radius-xs); background: var(--ds-accent); color: var(--ds-ink-on-accent); font-size: 9px; font-weight: var(--ds-weight-bold); letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; } .ds-icon-rail__list { display: flex; flex-direction: column; align-items: center; gap: var(--_pitch-gap); width: 100%; margin: 0; padding: 0; list-style: none; min-width: 0; } .ds-icon-rail__list { flex: 0 1 auto; min-height: 0; padding-block-start: var(--ds-space-1); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .ds-icon-rail__list::-webkit-scrollbar { display: none; } .ds-icon-rail__list > li { display: flex; justify-content: center; width: 100%; min-width: 0; } .ds-icon-rail__group-gap { height: var(--ds-space-4); } .ds-icon-rail__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-0-5); width: 100%; min-width: 0; padding-block: 0; padding-inline: var(--ds-space-0-5); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-muted); font: inherit; text-decoration: none; cursor: pointer; } .ds-icon-rail__tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--_tile); height: var(--_tile); border-radius: var(--_tile-radius); color: inherit; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-icon-rail__tile > svg { width: var(--_icon); height: var(--_icon); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-icon-rail__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--_label-size); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); color: inherit; } .ds-icon-rail__dot { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-accent); } .ds-icon-rail__count { position: absolute; inset-block-start: 0; inset-inline-end: 0; transform: translate(25%, -25%); min-width: 16px; height: 16px; padding-inline: var(--ds-space-1); border-radius: var(--ds-radius-pill); background: var(--ds-accent); color: var(--ds-ink-on-accent); font-family: var(--ds-font-mono); font-size: 10px; font-weight: var(--ds-weight-semibold); line-height: 16px; text-align: center; } .ds-icon-rail__item:hover .ds-icon-rail__tile, .ds-icon-rail__item[data-state="hover"] .ds-icon-rail__tile { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-icon-rail__item:hover, .ds-icon-rail__item[data-state="hover"] { color: var(--ds-ink); } .ds-icon-rail__item:active .ds-icon-rail__tile { background: var(--ds-surface-pressed, var(--ds-surface-3)); } .ds-icon-rail__item[aria-current="page"] { color: var(--ds-ink); } .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__label { font-weight: var(--ds-selected-weight); } .ds-icon-rail__item:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); border-radius: var(--ds-radius-sm); } .ds-icon-rail__item:disabled, .ds-icon-rail__item[aria-disabled="true"] { color: var(--ds-ink-faint); cursor: not-allowed; pointer-events: none; } .ds-icon-rail__item[aria-busy="true"] .ds-icon-rail__tile { background: var(--ds-rule-strong); color: transparent; } .ds-icon-rail__item[aria-busy="true"] .ds-icon-rail__label { display: block; width: 60%; height: calc(var(--_label-size) * .9); border-radius: var(--ds-radius-xs); background: var(--ds-rule-strong); color: transparent; } .ds-icon-rail__item[data-kind="ai"] .ds-icon-rail__tile { background: var(--ds-accent-2-tint); color: var(--ds-accent-2-ink); } .ds-icon-rail__spacer { flex: 1 1 auto; } .ds-icon-rail__footer { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); width: 100%; margin-block-start: auto; } .ds-icon-rail__footer > .ds-rail-footer-stack { width: 100%; } .ds-icon-rail[data-orientation="horizontal"] { flex-direction: row; width: 100%; min-width: 0; height: auto; padding-block: var(--ds-space-1); padding-inline: var(--ds-space-2); border-inline-end: 0; border-block-start: var(--ds-border-width) solid var(--_rule); } .ds-icon-rail[data-orientation="horizontal"] .ds-icon-rail__list { flex-direction: row; justify-content: space-around; } .ds-icon-rail[data-orientation="horizontal"] .ds-icon-rail__list > li { width: auto; flex: 1 1 0; } .ds-icon-rail[data-orientation="horizontal"] :is(.ds-icon-rail__brand, .ds-icon-rail__brand-rule, .ds-icon-rail__identity, .ds-icon-rail__spacer, .ds-icon-rail__footer, .ds-icon-rail__group-gap) { display: none; } @media (max-width: 767px) { .ds-icon-rail[data-orientation="auto"] { flex-direction: row; width: 100%; min-width: 0; height: auto; padding-block: var(--ds-space-1); padding-inline: var(--ds-space-2); border-inline-end: 0; border-block-start: var(--ds-border-width) solid var(--_rule); } .ds-icon-rail[data-orientation="auto"] .ds-icon-rail__list { flex-direction: row; justify-content: space-around; } .ds-icon-rail[data-orientation="auto"] .ds-icon-rail__list > li { width: auto; flex: 1 1 0; } .ds-icon-rail[data-orientation="auto"] :is(.ds-icon-rail__brand, .ds-icon-rail__brand-rule, .ds-icon-rail__identity, .ds-icon-rail__spacer, .ds-icon-rail__footer, .ds-icon-rail__group-gap) { display: none; } } .ds-icon-rail[data-variant="navattic-outside-sheet"] { --_w: 56px; --_tile: var(--ds-tap-target-min); --_tile-radius: var(--ds-radius-md); --_bg: var(--ds-ground-2); --_rule: transparent; --_pitch-gap: var(--ds-space-3); } .ds-icon-rail[data-variant="navattic-outside-sheet"] .ds-icon-rail__label { display: none; } .ds-icon-rail[data-variant="navattic-outside-sheet"] .ds-icon-rail__tile { border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); color: var(--ds-ink-2); } .ds-icon-rail[data-variant="navattic-outside-sheet"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-surface); color: var(--ds-ink); } .ds-icon-rail[data-variant="navattic-outside-sheet"] .ds-icon-rail__item:hover .ds-icon-rail__tile { border-color: var(--ds-border-strong); background: var(--ds-surface); } .ds-icon-rail[data-variant="navattic-outside-sheet"] .ds-icon-rail__brand { width: 32px; height: 32px; } .ds-icon-rail[data-variant="manychat-grey-tile"] { --_w: 64px; --_tile: 48px; --_tile-radius: var(--ds-radius-md); --_pitch-gap: 0; --_bg: var(--ds-ground); --_rule: var(--ds-rule-strong); } .ds-icon-rail[data-variant="manychat-grey-tile"] .ds-icon-rail__label { display: none; } .ds-icon-rail[data-variant="manychat-grey-tile"] .ds-icon-rail__identity { width: 32px; height: 32px; } .ds-icon-rail[data-variant="manychat-grey-tile"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-icon-rail[data-variant="manychat-grey-tile"] .ds-icon-rail__dot { inset-block-start: 8px; inset-inline-end: 8px; } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] { --_w: 52px; --_tile: 28px; --_icon: var(--ds-icon-size-row); --_tile-radius: var(--ds-radius-sm); --_pitch-gap: var(--ds-space-4); --_bg: var(--ds-surface-inverse); --_rule: transparent; --_label-size: 10px; height: auto; align-self: stretch; margin: var(--ds-space-3) var(--ds-space-2); border-radius: var(--ds-radius-md); color: var(--ds-ink-inverse); } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] .ds-icon-rail__brand { background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)); color: var(--ds-ink-on-accent); } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] .ds-icon-rail__item { color: var(--ds-ink-inverse); } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] .ds-icon-rail__label { font-weight: var(--ds-weight-semibold); } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] .ds-icon-rail__item:hover .ds-icon-rail__tile { background: var(--ds-overlay-fill); color: var(--ds-ink-inverse); } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)); color: var(--ds-ink-on-accent); } .ds-icon-rail[data-variant="clickup-floating-black-labelled"] .ds-icon-rail__item:focus-visible { outline-color: var(--ds-ink-inverse); } .ds-icon-rail[data-variant="retool-mode-rail"] { --_w: 40px; --_tile: 32px; --_icon: var(--ds-icon-size-row); --_tile-radius: var(--ds-radius-md); --_pitch-gap: var(--ds-space-2); --_bg: var(--ds-surface); padding-block: var(--ds-space-2); gap: var(--ds-space-2); } .ds-icon-rail[data-variant="retool-mode-rail"] .ds-icon-rail__label { display: none; } .ds-icon-rail[data-variant="retool-mode-rail"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-icon-rail[data-variant="quicken-band"] { --_w: 56px; --_tile: 48px; --_icon: var(--ds-icon-size-row); --_tile-radius: 0; --_pitch-gap: 0; --_bg: var(--ds-surface); --_rule: var(--ds-rule-strong); } .ds-icon-rail[data-variant="quicken-band"] .ds-icon-rail__label { display: none; } .ds-icon-rail[data-variant="quicken-band"] .ds-icon-rail__item { padding-inline: 0; border-radius: 0; } .ds-icon-rail[data-variant="quicken-band"] .ds-icon-rail__tile { width: 100%; } .ds-icon-rail[data-variant="quicken-band"] .ds-icon-rail__item:hover .ds-icon-rail__tile { background: var(--ds-hover-bg); } .ds-icon-rail[data-variant="quicken-band"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-icon-rail[data-variant="quicken-band"] .ds-icon-rail__brand { width: var(--ds-tap-target-min); height: var(--ds-tap-target-min); border-radius: var(--ds-radius-md); } .ds-icon-rail[data-variant="grammarly-labelled-tile"] { --_w: 96px; --_tile: 36px; --_tile-radius: var(--ds-radius-md); --_pitch-gap: var(--ds-space-4); --_bg: var(--ds-surface); --_label-size: var(--ds-text-sm); } .ds-icon-rail[data-variant="grammarly-labelled-tile"] .ds-icon-rail__item { color: var(--ds-ink-2); } .ds-icon-rail[data-variant="grammarly-labelled-tile"] .ds-icon-rail__label { font-weight: var(--ds-weight-regular); } .ds-icon-rail[data-variant="grammarly-labelled-tile"] .ds-icon-rail__item[aria-current="page"] { color: var(--ds-accent-ink); } .ds-icon-rail[data-variant="grammarly-labelled-tile"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-icon-rail[data-variant="grammarly-labelled-tile"] .ds-icon-rail__identity { width: 32px; height: 32px; background: var(--ds-accent); color: var(--ds-ink-on-accent); } .ds-icon-rail[data-variant="plane-labelled-tiles"] { --_w: 64px; --_tile: 32px; --_icon: var(--ds-icon-size-row); --_tile-radius: var(--ds-radius-md); --_pitch-gap: var(--ds-space-3); --_bg: var(--ds-ground-2); --_rule: transparent; } .ds-icon-rail[data-variant="plane-labelled-tiles"] .ds-icon-rail__item { color: var(--ds-ink-2); } .ds-icon-rail[data-variant="plane-labelled-tiles"] .ds-icon-rail__item[aria-current="page"] .ds-icon-rail__tile { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-top-bar svg[fill="none"] { fill: none; } .ds-top-bar { --_h: var(--ds-topbar-h); --_pad: var(--ds-space-4); --_gap: var(--ds-space-2); --_bg: transparent; --_rule: var(--ds-rule); --_cols: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); --_center-max: 560px; --_rail-w: var(--ds-sidebar-w); position: relative; z-index: var(--ds-z-sticky); display: grid; grid-template-columns: var(--_cols); grid-template-areas: "notice notice notice" "start center end" "sub sub sub"; align-items: center; column-gap: var(--ds-space-4); min-width: 0; padding-inline: var(--_pad); background: var(--_bg); color: var(--ds-ink); border-block-end: var(--ds-border-width) solid var(--_rule); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); transition: box-shadow var(--ds-dur-base) var(--ds-ease-standard); } .ds-top-bar[data-search="center"] { --_cols: minmax(0, 1fr) minmax(0, var(--_center-max)) minmax(0, 1fr); } .ds-top-bar__start, .ds-top-bar__center, .ds-top-bar__end { display: flex; align-items: center; gap: var(--_gap); min-width: 0; min-height: var(--_h); } .ds-top-bar__start { grid-area: start; } .ds-top-bar__center { grid-area: center; justify-content: center; } .ds-top-bar__end { grid-area: end; justify-content: flex-end; } .ds-top-bar__center > .ds-global-search { inline-size: 100%; } .ds-top-bar__brand { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-width: 0; color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-decoration: none; border-radius: var(--ds-radius-sm); } .ds-top-bar__logo { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); border-radius: var(--ds-radius-xs); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-bold); } .ds-top-bar__logo svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-top-bar__logo[data-tone="accent"] { background: var(--ds-accent); color: var(--ds-ink-on-accent); } .ds-top-bar__logo[data-tone="tint"] { background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-top-bar__switcher { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); padding-inline: var(--ds-space-2) var(--ds-space-2); border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink); font: inherit; font-weight: var(--ds-weight-semibold); cursor: pointer; min-width: 0; max-inline-size: 240px; } .ds-top-bar__switcher > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-top-bar__switcher svg { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); } .ds-top-bar__switcher:hover { background: var(--ds-hover-bg); } .ds-top-bar__switcher[aria-expanded="true"] { background: var(--ds-surface-selected); } .ds-top-bar__switcher[data-style="bordered"] { background: var(--ds-surface); border-color: var(--ds-border); } .ds-top-bar__switcher[data-style="tint"] { background: var(--ds-surface-2); } .ds-top-bar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); } .ds-top-bar__status { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); display: inline-flex; align-items: center; gap: var(--ds-space-1); white-space: nowrap; } .ds-top-bar__status svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-success); } .ds-top-bar__clock { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-top-bar__nav { display: flex; align-items: center; gap: var(--ds-space-1); min-width: 0; } .ds-top-bar__nav-link { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); text-decoration: none; white-space: nowrap; } .ds-top-bar__nav-link svg { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-top-bar__nav-link:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-top-bar__nav-link[aria-current="page"] { color: var(--ds-ink); } .ds-top-bar__account { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-1) var(--ds-space-1) var(--ds-space-1) var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-ink-2); font: inherit; cursor: pointer; transition: box-shadow var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-top-bar__account > svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; } .ds-top-bar__account > :is(.ds-top-bar__avatar, .ds-avatar) { --_avatar: calc(var(--ds-control-h-sm) - var(--ds-space-1)); pointer-events: none; } .ds-top-bar__account:hover, .ds-top-bar__account[data-state="hover"] { border-color: var(--ds-border-strong); box-shadow: var(--ds-hover-shadow); } .ds-top-bar__account[aria-expanded="true"] { border-color: var(--ds-border-strong); background: var(--ds-surface-selected); } .ds-top-bar__start > .ds-breadcrumb { min-width: 0; } .ds-top-bar__action { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); padding-inline: var(--ds-size-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-size-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-transform: var(--ds-control-case); text-decoration: none; white-space: nowrap; box-shadow: var(--ds-shadow-lip); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-top-bar__action svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; } .ds-top-bar__action:hover, .ds-top-bar__action[data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-top-bar__action[data-tone="primary"] { background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); border-color: var(--ds-primary-border); box-shadow: none; } .ds-top-bar__action[data-tone="primary"]:hover, .ds-top-bar__action[data-tone="primary"][data-state="hover"] { background: var(--ds-primary-fill-hover); border-color: var(--ds-primary-border); } .ds-top-bar__action[data-tone="ghost"] { background: transparent; border-color: transparent; box-shadow: none; color: var(--ds-ink-2); } .ds-top-bar__action[data-tone="ghost"]:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-top-bar__action[data-tone="text"] { background: transparent; border-color: transparent; box-shadow: none; color: var(--ds-ink); padding-inline: var(--ds-space-1); } .ds-top-bar__action[data-tone="text"]:hover { text-decoration: underline; text-underline-offset: .2em; background: transparent; } .ds-top-bar__action[data-tone="promo"] { color: var(--ds-ink-2); } .ds-top-bar__action[data-tone="promo"][data-style="pill"] { border-radius: var(--ds-radius-pill); } .ds-top-bar__action[data-tone="promo"][data-style="dark-pill"] { border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; box-shadow: none; } .ds-top-bar__action[data-tone="upgrade"] { color: var(--ds-accent-ink); border-color: var(--ds-accent-soft); } .ds-top-bar__action[data-tone="upgrade"]:hover { background: var(--ds-accent-tint); } .ds-top-bar__action[data-tone="ai"] svg { color: var(--ds-accent-2-ink); } .ds-top-bar__action:disabled, .ds-top-bar__action[aria-disabled="true"] { background: var(--ds-surface-3); color: var(--ds-ink-faint); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-top-bar__action[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; } .ds-top-bar__action[aria-busy="true"]::after { content: ""; position: absolute; inset-inline-start: calc(50% - var(--ds-icon-size) / 2); inset-block-start: calc(50% - var(--ds-icon-size) / 2); inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); border-radius: var(--ds-radius-pill); border: 2px solid transparent; border-block-start-color: var(--ds-ink-on-primary); border-inline-end-color: var(--ds-ink-on-primary); animation: ds-top-bar-spin var(--ds-dur-slow) linear infinite; } @keyframes ds-top-bar-spin { to { transform: rotate(360deg); } } .ds-top-bar__icon-btn { position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-size-h); block-size: var(--ds-size-h); padding: 0; border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-button); background: transparent; color: var(--ds-ink-2); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-top-bar__icon-btn svg { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); } .ds-top-bar__icon-btn:hover, .ds-top-bar__icon-btn[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-top-bar__icon-btn[aria-expanded="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-top-bar__icon-btn[data-style="bordered"] { border-color: var(--ds-border); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); } .ds-top-bar__icon-btn[data-style="bordered"]:hover { border-color: var(--ds-border-strong); } .ds-top-bar__icon-btn[data-style="bordered"] svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-top-bar__icon-btn:disabled { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; } .ds-top-bar__dot { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; } .ds-top-bar__count { position: absolute; inset-block-start: 0; inset-inline-end: 0; } .ds-top-bar__avatar { position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--_avatar, var(--ds-control-h-sm)); block-size: var(--_avatar, var(--ds-control-h-sm)); padding: 0; border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-illustration-ground); color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); letter-spacing: 0; cursor: pointer; overflow: visible; } .ds-top-bar__avatar[data-ring="ink"] { outline: var(--ds-border-width) solid var(--ds-ink); outline-offset: 1px; } .ds-top-bar__avatar[data-ring="quota"]::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: conic-gradient(var(--ds-accent) calc(var(--_quota, .6) * 360deg), var(--ds-rule) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), currentColor calc(100% - 2px + .5px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), currentColor calc(100% - 2px + .5px)); } .ds-top-bar__avatar .ds-top-bar__presence { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 8px; block-size: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-presence); border: var(--ds-border-width) solid var(--ds-surface); } .ds-top-bar__avatar:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-top-bar__divider { inline-size: var(--ds-border-width); block-size: var(--ds-space-5); background: var(--ds-rule-strong); margin-inline: var(--ds-space-1); } .ds-top-bar__notice { grid-area: notice; display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-h-sm); margin-inline: calc(-1 * var(--_pad)); padding-inline: var(--_pad); background: var(--ds-surface); color: var(--ds-ink-2); font-size: var(--ds-text-sm); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-top-bar__notice svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; color: var(--ds-ink-muted); } .ds-top-bar__notice a { color: var(--ds-ink-link); } .ds-top-bar__notice .ds-top-bar__icon-btn { margin-inline-start: auto; inline-size: var(--ds-control-h-sm); block-size: var(--ds-control-h-sm); } .ds-top-bar__notice[data-tone="warning"] { background: var(--ds-warning-tint); color: var(--ds-warning-ink); border-block-end-color: transparent; } .ds-top-bar__notice[data-tone="warning"] svg { color: var(--ds-warning-ink); } .ds-top-bar__subrow { grid-area: sub; display: flex; justify-content: flex-end; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-h-lg); padding-block: var(--ds-space-3); margin-inline: calc(-1 * var(--_pad)); padding-inline: var(--_pad); border-block-start: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-ground); } .ds-top-bar[data-state="scrolled"] { --_h: calc(var(--ds-topbar-h) - 8px); box-shadow: var(--ds-shadow-lift); background: var(--ds-ground); } .ds-top-bar[data-sticky] { position: sticky; inset-block-start: 0; } .ds-top-bar__skeleton { display: inline-block; inline-size: var(--_skeleton-w, 140px); block-size: var(--ds-icon-size); border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); animation: ds-top-bar-pulse calc(var(--ds-dur-slow) * 4) var(--ds-ease-standard) infinite alternate; } @keyframes ds-top-bar-pulse { to { opacity: .45; } } .ds-top-bar[data-variant="descript-centred-search"] { --_h: calc(var(--ds-topbar-h) + 4px); --_bg: var(--ds-ground-2); --_rule: transparent; --_center-max: 870px; --_gap: var(--ds-space-3); } .ds-top-bar[data-variant="descript-centred-search"] .ds-top-bar__logo { background: transparent; color: var(--ds-ink); } .ds-top-bar[data-variant="retool-command-bar"] { --_h: calc(var(--ds-topbar-h) - 16px); --_bg: var(--ds-surface); --_center-max: 530px; --_pad: var(--ds-space-3); } .ds-top-bar[data-variant="retool-command-bar"] .ds-top-bar__title { font-size: var(--ds-text-sm); } .ds-top-bar[data-variant="retool-command-bar"] .ds-top-bar__logo { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); } .ds-top-bar[data-variant="clickup-three-zone"] { --_h: calc(var(--ds-topbar-h) - 16px); --_bg: var(--ds-ground); --_center-max: 200px; --_pad: var(--ds-space-3); } .ds-top-bar[data-variant="manychat-title-only"], .ds-top-bar[data-variant="manychat-title-centred-search"] { --_h: calc(var(--ds-topbar-h) + 4px); --_bg: var(--ds-ground); --_pad: var(--ds-space-6); } .ds-top-bar[data-variant="manychat-title-only"] .ds-top-bar__title, .ds-top-bar[data-variant="manychat-title-centred-search"] .ds-top-bar__title { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-display-tracking); } .ds-top-bar[data-variant="manychat-title-centred-search"] { --_center-max: 380px; } .ds-top-bar[data-variant="confluence-split-at-rail-edge"] { --_h: calc(var(--ds-topbar-h) - 8px); --_bg: var(--ds-surface); --_cols: var(--_rail-w) minmax(0, 1fr) auto; --_pad: var(--ds-space-3); } .ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__start { margin-inline-start: calc(-1 * var(--_pad)); padding-inline-start: var(--_pad); } .ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__center { justify-content: flex-start; } .ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__logo { background: var(--ds-accent); color: var(--ds-ink-on-accent); border-radius: var(--ds-radius-xs); } .ds-top-bar[data-variant="navattic-breadcrumb-bar"] { --_bg: var(--ds-surface); --_rule: var(--ds-rule-soft); --_pad: var(--ds-space-6); } .ds-top-bar[data-variant="elevenlabs-slim-utility"] { --_h: calc(var(--ds-topbar-h) - 8px); --_bg: var(--ds-surface); --_rule: var(--ds-rule-soft); --_pad: var(--ds-space-3); } .ds-top-bar[data-variant="elevenlabs-slim-utility"] .ds-top-bar__action, .ds-top-bar[data-variant="elevenlabs-slim-utility"] .ds-top-bar__icon-btn[data-style="bordered"] { border-radius: var(--ds-radius-lg); } .ds-top-bar[data-variant="elevenlabs-slim-utility"] .ds-top-bar__title { font-size: var(--ds-text-md); } .ds-top-bar[data-variant="contra-utility-only"] { --_h: calc(var(--ds-topbar-h) + 8px); --_bg: var(--ds-surface); --_rule: transparent; --_gap: var(--ds-space-6); --_pad: var(--ds-space-6); box-shadow: var(--ds-shadow-lift); } .ds-top-bar[data-variant="contra-utility-only"] .ds-top-bar__avatar { --_avatar: var(--ds-control-h); } .ds-top-bar[data-variant="plane-switcher-search-utilities"] { --_h: calc(var(--ds-topbar-h) - 4px); --_bg: var(--ds-ground-2); --_rule: transparent; --_center-max: 420px; } .ds-top-bar[data-variant="origin-title-utility-cluster"] { --_h: calc(var(--ds-topbar-h) + 16px); --_bg: var(--ds-ground); --_rule: transparent; --_gap: var(--ds-space-3); --_pad: var(--ds-space-8); } .ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__title { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-display-tracking); } .ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__action { border-radius: var(--ds-radius-pill); font-family: var(--ds-font-label); font-size: var(--ds-text-sm); letter-spacing: .1em; text-transform: uppercase; border-color: var(--ds-border-strong); background: transparent; box-shadow: none; } .ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__action[data-tone="promo"] { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; } .ds-top-bar[data-variant="origin-title-utility-cluster"] .ds-top-bar__icon-btn { border-radius: var(--ds-radius-pill); } .ds-top-bar[data-variant="luma-transparent-with-clock"] { --_h: calc(var(--ds-topbar-h) + 10px); --_bg: transparent; --_rule: transparent; --_pad: var(--ds-space-8); --_cols: auto minmax(0, 1fr) auto; } .ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__center { justify-content: flex-start; padding-inline-start: var(--ds-gutter-page); } .ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__avatar { --_avatar: calc(var(--ds-control-h-sm) - 4px); } .ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__logo { border-radius: var(--ds-radius-pill); } .ds-top-bar[data-variant="hsaj-title-cta"] { --_h: calc(var(--ds-topbar-h) + 24px); --_bg: var(--ds-surface); --_pad: var(--ds-space-6); } .ds-top-bar[data-variant="hsaj-title-cta"] .ds-top-bar__title { font-size: var(--ds-text-2xl); } .ds-top-bar[data-variant="hsaj-title-cta"] .ds-top-bar__subrow { background: var(--ds-surface); border-block-start: 0; } .ds-top-bar__title { text-transform: none; } @media (max-width: 720px) { .ds-top-bar { --_cols: minmax(0, 1fr) auto; --_gap: var(--ds-space-1); column-gap: var(--ds-space-3); grid-template-areas: "notice notice" "start end" "center center" "sub sub"; --_pad: var(--ds-space-4); } .ds-top-bar[data-search="center"], .ds-top-bar[data-variant] { --_cols: minmax(0, 1fr) auto; } .ds-top-bar__action[data-tone="promo"], .ds-top-bar__action[data-tone="upgrade"], .ds-top-bar [data-mobile="hide"] { display: none; } .ds-top-bar__end { flex-wrap: nowrap; } .ds-top-bar__center { min-height: 0; padding-block: 0 var(--ds-space-3); justify-content: stretch; } .ds-top-bar__center:empty { display: none; } .ds-top-bar__center > .ds-global-search { max-inline-size: 100%; } .ds-top-bar__switcher { max-inline-size: 160px; } .ds-top-bar__clock, .ds-top-bar__status { display: none; } .ds-top-bar[data-variant="confluence-split-at-rail-edge"] .ds-top-bar__start { margin-inline-start: 0; padding-inline-start: 0; } .ds-top-bar[data-variant="luma-transparent-with-clock"] .ds-top-bar__center { padding-inline-start: 0; } .ds-top-bar__nav { flex-wrap: wrap; row-gap: 0; justify-content: flex-start; margin-inline: calc(-1 * var(--ds-space-2)); } .ds-top-bar__nav-link { padding-inline: var(--ds-space-2); } .ds-top-bar[data-nav="scroll"] .ds-top-bar__nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--ds-space-8)), transparent); mask-image: linear-gradient(to right, currentColor calc(100% - var(--ds-space-8)), transparent); } .ds-top-bar[data-nav="scroll"] .ds-top-bar__nav::-webkit-scrollbar { display: none; } .ds-top-bar[data-nav="scroll"] .ds-top-bar__nav-link { flex: none; } .ds-top-bar__account { gap: var(--ds-space-2); padding-inline-start: var(--ds-space-2); } } .ds-top-bar__menu-btn { display: none; } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"], .ds-top-bar[data-variant="semrush-centred-search-links-right"], .ds-top-bar[data-variant="etsy-two-tier"] { --_bg: var(--ds-surface); --_gap: var(--ds-space-2); --_center-max: 640px; } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] .ds-top-bar__nav-link, .ds-top-bar[data-variant="semrush-centred-search-links-right"] .ds-top-bar__nav-link, .ds-top-bar[data-variant="etsy-two-tier"] .ds-top-bar__nav-link { position: relative; } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] .ds-top-bar__nav-link[aria-current="page"], .ds-top-bar[data-variant="semrush-centred-search-links-right"] .ds-top-bar__nav-link[aria-current="page"], .ds-top-bar[data-variant="etsy-two-tier"] .ds-top-bar__nav-link[aria-current="page"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); } .ds-top-bar[data-selection="underline"] .ds-top-bar__nav-link[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--ds-space-3); inset-block-end: 0; block-size: 2px; background: var(--ds-selected-line); } .ds-top-bar__nav-link:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] { --_cols: auto auto minmax(0, 1fr) auto; grid-template-areas: "notice notice notice notice" "start nav center end" "sub sub sub sub"; --_center-max: 560px; } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] > .ds-top-bar__nav { grid-area: nav; margin-inline-start: var(--ds-space-2); } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] .ds-top-bar__center { padding-inline: var(--ds-space-4); } .ds-top-bar[data-variant="semrush-centred-search-links-right"] { --_cols: auto minmax(0, 1fr) auto auto; grid-template-areas: "notice notice notice notice" "start center nav end" "sub sub sub sub"; --_center-max: 520px; } .ds-top-bar[data-variant="semrush-centred-search-links-right"] > .ds-top-bar__nav { grid-area: nav; } .ds-top-bar[data-variant="semrush-centred-search-links-right"] .ds-top-bar__end { margin-inline-start: var(--ds-space-2); } .ds-top-bar[data-variant="etsy-two-tier"] { --_cols: auto minmax(0, 1fr) auto; grid-template-areas: "notice notice notice" "start center end" "links links links"; --_center-max: 760px; } .ds-top-bar[data-variant="etsy-two-tier"] .ds-top-bar__center { padding-inline: var(--ds-space-4); } .ds-top-bar[data-variant="etsy-two-tier"] > .ds-top-bar__nav { grid-area: links; justify-content: center; margin-inline: calc(-1 * var(--_pad)); padding: 0 var(--_pad) var(--ds-space-2); } .ds-top-bar[data-variant="etsy-two-tier"] .ds-top-bar__nav-link { font-size: var(--ds-text-sm); min-block-size: var(--ds-control-h-sm); } @media (max-width: 860px) { .ds-top-bar[data-variant="soundcloud-links-left-search-fill"], .ds-top-bar[data-variant="semrush-centred-search-links-right"], .ds-top-bar[data-variant="etsy-two-tier"] { --_cols: minmax(0, 1fr) auto; column-gap: var(--ds-space-3); grid-template-areas: "notice notice" "start end" "center center" "nav nav"; } .ds-top-bar[data-variant="etsy-two-tier"] { grid-template-areas: "notice notice" "start end" "center center" "links links"; } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] .ds-top-bar__center, .ds-top-bar[data-variant="etsy-two-tier"] .ds-top-bar__center { padding-inline: 0; } .ds-top-bar__menu-btn { display: inline-grid; } .ds-top-bar[data-variant="soundcloud-links-left-search-fill"] > .ds-top-bar__nav, .ds-top-bar[data-variant="semrush-centred-search-links-right"] > .ds-top-bar__nav, .ds-top-bar[data-variant="etsy-two-tier"] > .ds-top-bar__nav { display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0 calc(-1 * var(--_pad)); padding: var(--ds-space-1) var(--_pad) var(--ds-space-2); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-top-bar[data-menu="open"] > .ds-top-bar__nav { display: flex; } .ds-top-bar > .ds-top-bar__nav .ds-top-bar__nav-link { min-block-size: var(--ds-tap-target-min, var(--ds-control-h-lg)); padding-inline: var(--ds-space-3); font-size: var(--ds-text-md); } .ds-top-bar[data-variant="semrush-centred-search-links-right"] .ds-top-bar__end { margin-inline-start: 0; } } .ds-button-primary { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); --_radius: var(--ds-radius-button); --_w: auto; --_gap: var(--ds-space-2); --_icon: var(--ds-icon-size); --_lift: 0 0 0 0 transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--_gap); width: var(--_w); max-width: 100%; min-width: 0; min-height: var(--_h); padding-inline: var(--_pad-x); padding-block: 0; font-family: inherit; font-size: var(--ds-size-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: 0; text-transform: var(--ds-control-case); text-decoration: none; white-space: nowrap; color: var(--ds-ink-on-primary); background: var(--ds-primary-fill); border: var(--ds-border-width) solid var(--ds-primary-border); border-radius: var(--_radius); box-shadow: inset 0 var(--ds-border-width) 0 0 var(--ds-primary-highlight), var(--_lift, var(--ds-shadow-lift)); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-button-primary__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-button-primary__icon { flex: none; display: inline-flex; width: var(--_icon); height: var(--_icon); } .ds-button-primary__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-button-primary__icon[data-slot="trailing"] { margin-inline-end: calc(-1 * var(--ds-space-0-5)); } .ds-button-primary__icon[data-slot="leading"] { margin-inline-start: calc(-1 * var(--ds-space-0-5)); } .ds-button-primary:hover, .ds-button-primary[data-state="hover"] { background: var(--ds-primary-fill-hover); } .ds-button-primary:active, .ds-button-primary[data-state="pressed"] { background: var(--ds-primary-fill-hover); --_lift: 0 0 0 0 transparent; box-shadow: inset 0 var(--ds-border-width) 0 0 transparent, var(--_lift, var(--ds-shadow-lift)); } .ds-button-primary:focus-visible, .ds-button-primary[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-button-primary:disabled, .ds-button-primary[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: inset 0 0 0 0 transparent, var(--_lift, var(--ds-shadow-lift)); --_lift: 0 0 0 0 transparent; cursor: not-allowed; } .ds-button-primary[aria-busy="true"] { pointer-events: none; } .ds-button-primary[aria-busy="true"] > * { visibility: hidden; } .ds-button-primary[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--_icon); height: var(--_icon); border: 2px solid transparent; border-block-start-color: currentColor; border-inline-end-color: currentColor; border-radius: var(--ds-radius-pill); animation: ds-button-primary-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-button-primary-spin { to { transform: rotate(360deg); } } .ds-button-primary[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); } .ds-button-primary[data-size="sm"] { --_icon: var(--ds-icon-size); } .ds-button-primary[data-size="lg"] { --_icon: var(--ds-icon-size-row); } .ds-button-primary[data-variant="filled-ink"] { color: var(--ds-ink-inverse); background: var(--ds-surface-inverse); border-color: transparent; } .ds-button-primary[data-variant="filled-ink"]:hover, .ds-button-primary[data-variant="filled-ink"][data-state="hover"], .ds-button-primary[data-variant="filled-ink"]:active { background: color-mix(in srgb, var(--ds-surface-inverse) 86%, var(--ds-ink-inverse)); } .ds-button-primary[data-variant="filled-accent"] { color: var(--ds-ink-on-accent); background: var(--ds-accent); border-color: transparent; } .ds-button-primary[data-variant="filled-accent"]:hover, .ds-button-primary[data-variant="filled-accent"][data-state="hover"], .ds-button-primary[data-variant="filled-accent"]:active { background: var(--ds-accent-hover); } .ds-button-primary[data-variant="full-width-terminal"] { --_w: 100%; --_h: calc(var(--ds-control-h-lg) + var(--ds-space-2)); --_pad-x: var(--ds-space-6); --_icon: var(--ds-icon-size-row); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); margin-block-start: calc(var(--ds-field-pitch) * 2.5); } .ds-button-primary[data-variant="full-width-terminal"][data-align="center"] { --_w: auto; min-width: calc(var(--_h) * 4); } .ds-button-primary[data-variant="over-wide"] { min-width: calc(var(--_h) * 4); } .ds-button-primary[data-variant="navattic-tactile"] { --_lift: var(--ds-shadow-lift); border-color: color-mix(in srgb, var(--ds-primary-fill) 70%, var(--ds-ink)); box-shadow: inset 0 var(--ds-border-width) 0 0 color-mix(in srgb, var(--ds-ink-on-primary) 18%, transparent), var(--_lift, var(--ds-shadow-lift)); } .ds-button-primary[data-variant="navattic-tactile"]:active { box-shadow: inset 0 var(--ds-border-width) 0 0 transparent, var(--ds-shadow-lift); --_lift: 0 0 0 0 transparent; } .ds-button-primary[data-variant="synara-solid-pill"] { --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-5); --_radius: var(--ds-radius-pill); font-size: var(--ds-text-lg); } .ds-button-primary[data-variant="perplexity-circular-submit"] { --_pad-x: 0; --_radius: var(--ds-radius-pill); --_w: var(--_h); aspect-ratio: 1; color: var(--ds-ink-on-accent); background: var(--ds-accent); border-color: transparent; } .ds-button-primary[data-variant="perplexity-circular-submit"]:hover { background: var(--ds-accent-hover); } .ds-button-primary[data-variant="perplexity-circular-submit"]:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-2); border-color: transparent; } .ds-button-primary[data-variant="grid-snapped-fixed-width"] { --_h: var(--ds-control-h-sm); --_w: calc(var(--ds-control-h-sm) * 4.5); --_radius: var(--ds-radius-xs); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); } .ds-button-secondary { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); --_radius: var(--ds-radius-button); --_w: auto; --_gap: var(--ds-space-2); --_icon: var(--ds-icon-size); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--_gap); width: var(--_w); max-width: 100%; min-width: 0; min-height: var(--_h); padding-inline: var(--_pad-x); padding-block: 0; font-family: inherit; font-size: var(--ds-size-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: 0; text-transform: var(--ds-control-case); text-decoration: none; white-space: nowrap; color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--_radius); box-shadow: var(--ds-shadow-lip); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-button-secondary__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-button-secondary__icon { flex: none; display: inline-flex; width: var(--_icon); height: var(--_icon); } .ds-button-secondary__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-button-secondary__icon[data-slot="trailing"] { margin-inline-end: calc(-1 * var(--ds-space-0-5)); } .ds-button-secondary__icon[data-slot="leading"] { margin-inline-start: calc(-1 * var(--ds-space-0-5)); } .ds-button-secondary__dot { flex: none; width: var(--ds-space-2); height: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-live); } .ds-button-secondary:hover, .ds-button-secondary[data-state="hover"] { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } [data-hover="lift"] .ds-button-secondary:hover, [data-hover="lift"] .ds-button-secondary[data-state="hover"] { box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); } .ds-button-secondary:active, .ds-button-secondary[data-state="pressed"] { background: var(--ds-surface-pressed, var(--ds-surface-3)); border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-lip); } .ds-button-secondary:focus-visible, .ds-button-secondary[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-button-secondary[aria-pressed="true"], .ds-button-secondary[aria-expanded="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); border-color: var(--ds-border-strong); } .ds-button-secondary:disabled, .ds-button-secondary[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-button-secondary[aria-busy="true"] { pointer-events: none; } .ds-button-secondary[aria-busy="true"] > * { visibility: hidden; } .ds-button-secondary[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--_icon); height: var(--_icon); border: 2px solid transparent; border-block-start-color: currentColor; border-inline-end-color: currentColor; border-radius: var(--ds-radius-pill); animation: ds-button-secondary-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-button-secondary-spin { to { transform: rotate(360deg); } } .ds-button-secondary[data-tone="danger"], .ds-button-secondary[data-variant="danger-text"] { color: var(--ds-danger-ink); } .ds-button-secondary[data-tone="danger"]:hover, .ds-button-secondary[data-variant="danger-text"]:hover, .ds-button-secondary[data-tone="danger"][data-state="hover"], .ds-button-secondary[data-variant="danger-text"][data-state="hover"] { background: var(--ds-danger-tint); border-color: var(--ds-danger); color: var(--ds-danger-ink); } .ds-button-secondary[data-tone="danger"]:focus-visible, .ds-button-secondary[data-variant="danger-text"]:focus-visible { outline-color: var(--ds-danger); } .ds-button-secondary[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); } .ds-button-secondary[data-size="lg"] { --_icon: var(--ds-icon-size-row); } .ds-button-secondary[data-variant="outlined-lip"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); } .ds-button-secondary[data-variant="outlined-lip"]:hover { box-shadow: var(--ds-shadow-lip), var(--ds-shadow-lift); } .ds-button-secondary[data-variant="outlined-mono-caps-pill"] { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-6); --_radius: var(--ds-radius-pill); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); letter-spacing: .12em; text-transform: uppercase; border-color: var(--ds-border-strong); background: transparent; } .ds-button-secondary[data-variant="outlined-mono-caps-pill"]:hover { background: var(--ds-hover-bg); border-color: var(--ds-ink-muted); } .ds-button-secondary[data-variant="tint-fill"] { background: var(--ds-surface-2); border-color: transparent; box-shadow: none; } .ds-button-secondary[data-variant="tint-fill"]:hover, .ds-button-secondary[data-variant="tint-fill"][data-state="hover"] { background: var(--ds-surface-3); border-color: transparent; box-shadow: none; } .ds-button-secondary[data-variant="tint-fill"]:active { background: var(--ds-surface-pressed, var(--ds-surface-3)); } .ds-button-secondary[data-variant="tint-fill"]:disabled { background: var(--ds-surface-3); border-color: transparent; } .ds-button-secondary[data-variant="ghost-text"] { --_pad-x: var(--ds-space-2); color: var(--ds-ink-2); background: transparent; border-color: transparent; box-shadow: none; } .ds-button-secondary[data-variant="ghost-text"]:hover, .ds-button-secondary[data-variant="ghost-text"][data-state="hover"] { background: var(--ds-hover-bg); border-color: transparent; color: var(--ds-ink); box-shadow: none; } .ds-button-secondary[data-variant="ghost-text"]:disabled { background: transparent; border-color: transparent; } .ds-button-secondary[data-variant="glass"] { --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-5); --_radius: var(--ds-radius-pill); font-size: var(--ds-text-lg); color: var(--ds-ink); background: var(--ds-glass-fill); border-color: var(--ds-glass-border); box-shadow: none; -webkit-backdrop-filter: blur(var(--ds-glass-blur)); backdrop-filter: blur(var(--ds-glass-blur)); } .ds-button-secondary[data-variant="glass"]:hover { background: var(--ds-glass-fill); border-color: var(--ds-ink); box-shadow: none; } .ds-button-secondary[data-variant="hsaj-full-width-ghost"] { --_w: 100%; --_h: calc(var(--ds-control-h) + var(--ds-space-3)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-md); --_icon: var(--ds-icon-size-row); justify-content: flex-start; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); box-shadow: none; } .ds-button-secondary[data-variant="ink-outline"] { --_h: calc(var(--ds-control-h-sm) + var(--ds-space-0-5)); --_radius: var(--ds-radius-md); font-weight: var(--ds-weight-semibold); border-color: var(--ds-ink); box-shadow: none; } .ds-button-secondary[data-variant="ink-outline"]:hover { border-color: var(--ds-ink); background: var(--ds-hover-bg); box-shadow: none; } .ds-button-secondary[data-variant="dark-ghost"] { background: var(--ds-surface-2); border-color: var(--ds-border); box-shadow: none; } .ds-button-secondary[data-variant="dark-ghost"]:hover { background: var(--ds-surface-3); border-color: var(--ds-border-strong); box-shadow: none; } .ds-icon-button { --_size: var(--ds-size-h); --_glyph: var(--ds-icon-size); --_radius: var(--ds-radius-sm); position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--_size); height: var(--_size); padding: 0; font: inherit; line-height: 1; color: var(--ds-ink-2); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--_radius); box-shadow: var(--ds-shadow-lip); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-icon-button > svg, .ds-icon-button__glyph { width: var(--_glyph); height: var(--_glyph); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-icon-button__glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-icon-button > svg[data-fill], .ds-icon-button__glyph svg[data-fill] { fill: currentColor; stroke: none; } .ds-icon-button:hover, .ds-icon-button[data-state="hover"] { color: var(--ds-ink); background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-icon-button:active, .ds-icon-button[data-state="pressed"] { background: var(--ds-surface-2); color: var(--ds-ink); } .ds-icon-button:focus-visible, .ds-icon-button[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-icon-button[aria-pressed="true"], .ds-icon-button[aria-expanded="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); border-color: var(--ds-border-strong); } .ds-icon-button:disabled, .ds-icon-button[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-icon-button[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-icon-button[data-tone="danger"]:hover { background: var(--ds-danger-tint); border-color: var(--ds-danger); color: var(--ds-danger-ink); } .ds-icon-button[data-tone="danger"]:focus-visible { outline-color: var(--ds-danger); } .ds-icon-button[aria-busy="true"] { pointer-events: none; } .ds-icon-button[aria-busy="true"] > * { visibility: hidden; } .ds-icon-button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--_glyph); height: var(--_glyph); border: 2px solid transparent; border-block-start-color: currentColor; border-inline-end-color: currentColor; border-radius: var(--ds-radius-pill); animation: ds-icon-button-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-icon-button-spin { to { transform: rotate(360deg); } } .ds-icon-button[data-size] { --_size: var(--ds-size-h); } .ds-icon-button[data-size="lg"] { --_glyph: var(--ds-icon-size-row); } .ds-icon-button[data-shape="circle"] { --_radius: var(--ds-radius-pill); } .ds-icon-button[data-variant="bordered-square"] { --_size: var(--ds-control-h-sm); --_radius: var(--ds-radius-md); } .ds-icon-button[data-variant="bordered-square"][data-size="xs"] { --_size: calc(var(--ds-control-h-sm) - var(--ds-space-1)); --_radius: var(--ds-radius-sm); } .ds-icon-button[data-variant="ghost-glyph"] { --_glyph: var(--ds-icon-size-row); background: transparent; border-color: transparent; box-shadow: none; color: var(--ds-ink-muted); } .ds-icon-button[data-variant="ghost-glyph"]:hover { background: var(--ds-hover-bg); border-color: transparent; color: var(--ds-ink); } .ds-icon-button[data-variant="ghost-glyph"]:disabled { background: transparent; border-color: transparent; } .ds-icon-button[data-variant="hairline-circle"] { --_radius: var(--ds-radius-pill); --_size: calc(var(--ds-control-h) + var(--ds-space-1)); } .ds-icon-button[data-variant="hairline-circle"][data-size="md"] { --_size: var(--ds-control-h); } .ds-icon-button[data-variant="hairline-circle"][data-size="sm"] { --_size: var(--ds-control-h-sm); } .ds-icon-button[data-variant="filled-circle-close"] { --_size: var(--ds-control-h-sm); --_radius: var(--ds-radius-pill); color: var(--ds-ink); background: var(--ds-surface-3); border-color: transparent; box-shadow: none; } .ds-icon-button[data-variant="filled-circle-close"]:hover { background: var(--ds-surface-selected); border-color: transparent; } .ds-icon-button[data-variant="tint-circle"] { --_radius: var(--ds-radius-pill); background: var(--ds-surface-2); border-color: transparent; box-shadow: none; } .ds-icon-button[data-variant="tint-circle"]:hover { background: var(--ds-surface-3); border-color: transparent; } .ds-icon-button[data-variant="on-media-disc"] { --_size: var(--ds-control-h-lg); --_glyph: var(--ds-icon-size-row); --_radius: var(--ds-radius-pill); color: var(--ds-ink-inverse); background: var(--ds-surface-inverse); border-color: var(--ds-glass-border); box-shadow: var(--ds-shadow-object); } .ds-icon-button[data-variant="on-media-disc"]:hover { background: color-mix(in srgb, var(--ds-surface-inverse) 86%, var(--ds-ink-inverse)); border-color: var(--ds-glass-border); color: var(--ds-ink-inverse); } .ds-icon-button[data-variant="kebab"] { color: var(--ds-ink-2); } .ds-icon-button[data-variant="kebab"] > svg { fill: currentColor; stroke: none; } .ds-icon-button.ds-icon-button[aria-pressed="true"], .ds-icon-button.ds-icon-button[aria-expanded="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-icon-button.ds-icon-button:disabled, .ds-icon-button.ds-icon-button[aria-disabled="true"] { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-accordion svg[fill="none"] { fill: none; } .ds-accordion { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-3); --_gap: var(--ds-space-3); --_rule: var(--ds-rule); --_header-bg: transparent; --_header-bg-open: transparent; --_ink: var(--ds-ink); --_marker-w: var(--ds-icon-size); --_body-pad: var(--ds-space-4); display: flex; flex-direction: column; min-width: 0; color: var(--_ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); } .ds-accordion__item { min-width: 0; border-block-end: var(--ds-border-width) solid var(--_rule); } .ds-accordion__item:last-child { border-block-end: 0; } .ds-accordion[data-rules="around"] .ds-accordion__item:first-child { border-block-start: var(--ds-border-width) solid var(--_rule); } .ds-accordion[data-rules="around"] .ds-accordion__item:last-child { border-block-end: var(--ds-border-width) solid var(--_rule); } .ds-accordion__header { display: flex; align-items: center; gap: var(--_gap); min-height: var(--_h); padding-inline: var(--_pad-x); padding-block: var(--ds-space-2); list-style: none; cursor: pointer; background: var(--_header-bg); border-radius: var(--ds-radius-sm); color: var(--_ink); font-weight: var(--ds-weight-medium); -webkit-user-select: none; user-select: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-accordion__header::-webkit-details-marker { display: none; } .ds-accordion__header::marker { content: ""; } .ds-accordion__header:hover, .ds-accordion__header[data-state="hover"] { background: var(--ds-hover-bg); } .ds-accordion__item[open] > .ds-accordion__header { background: var(--_header-bg-open); } .ds-accordion__item[open] > .ds-accordion__header:hover { background: var(--ds-hover-bg); } .ds-accordion__header:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-accordion__title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .ds-accordion__meta { flex: 0 0 auto; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-accordion__meta[data-tone="success"] { color: var(--ds-success-ink); } .ds-accordion__meta[data-tone="warning"] { color: var(--ds-warning-ink); } .ds-accordion__meta[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-accordion__marker { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--_marker-w); height: var(--_marker-w); color: var(--ds-ink-muted); order: 2; transition: transform var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-accordion__marker svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); } .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(90deg); } .ds-accordion__header:hover .ds-accordion__marker { color: var(--ds-ink); } .ds-accordion[data-marker="start"] .ds-accordion__marker { order: -1; width: var(--ds-control-h-sm); margin-inline-start: calc(-1 * var(--ds-space-2)); } .ds-accordion[data-marker="start"] .ds-accordion__header[data-leaf] .ds-accordion__marker { visibility: hidden; } .ds-accordion__body { padding: var(--ds-space-1) var(--_pad-x) var(--_body-pad); color: var(--ds-ink-2); min-width: 0; } .ds-accordion[data-marker="start"] .ds-accordion__body { padding-inline-start: calc(var(--_pad-x) + var(--ds-control-h-sm) - var(--ds-space-2) + var(--_gap)); } .ds-accordion__body > * + * { margin-block-start: var(--ds-space-3); } .ds-accordion__body p { max-width: var(--ds-measure); } @supports (interpolate-size: allow-keywords) { .ds-accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--ds-dur-base) var(--ds-ease-standard), content-visibility var(--ds-dur-base) allow-discrete; } .ds-accordion__item[open]::details-content { block-size: auto; } .ds-accordion { interpolate-size: allow-keywords; } } .ds-accordion__item[aria-disabled="true"] > .ds-accordion__header { color: var(--ds-ink-faint); cursor: not-allowed; pointer-events: none; background: var(--ds-surface-3); } .ds-accordion__item[aria-disabled="true"] > .ds-accordion__header .ds-accordion__marker { color: var(--ds-ink-faint); } .ds-accordion__item[aria-busy="true"] .ds-accordion__body > *, .ds-accordion__body[aria-busy="true"] > * { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); } .ds-accordion__item[aria-busy="true"] .ds-accordion__body > * > *, .ds-accordion__body[aria-busy="true"] > * > * { visibility: hidden; } .ds-accordion__body[data-state="empty"] { border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-sm); margin: 0 var(--_pad-x) var(--_body-pad); padding: var(--ds-space-3); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-accordion__body[data-state="error"] { color: var(--ds-danger-ink); } .ds-accordion__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-inline: calc(-1 * var(--_pad-x)); margin-block-start: var(--_body-pad); padding: var(--ds-space-2) var(--_pad-x); border-block-start: var(--ds-border-width) solid var(--_rule); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); } .ds-accordion__footer > span { display: inline-flex; gap: var(--ds-space-1); } .ds-accordion__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); border: 0; background: transparent; color: var(--ds-ink-muted); border-radius: var(--ds-radius-button); cursor: pointer; padding: 0; } .ds-accordion__icon-btn svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); } .ds-accordion__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-accordion__icon-btn[data-tone="danger"]:hover { color: var(--ds-danger-ink); background: var(--ds-danger-tint); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] { --_h: var(--ds-control-h); --_rule: transparent; --_pad-x: var(--ds-space-4); --_header-bg: var(--ds-surface-2); --_header-bg-open: var(--ds-surface-2); gap: var(--ds-space-2); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"][data-tone="info"] { --_header-bg: var(--ds-info-tint); --_header-bg-open: var(--ds-info-tint); --_ink: var(--ds-info-ink); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"][data-tone="danger"] { --_header-bg: var(--ds-danger-tint); --_header-bg-open: var(--ds-danger-tint); --_ink: var(--ds-danger-ink); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item { border: 0; border-radius: var(--ds-radius-xs); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__header { border-radius: var(--ds-radius-xs); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-sm); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__header:hover { filter: brightness(.97); background: var(--_header-bg); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item[open] { background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); box-shadow: var(--ds-shadow-object); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__item[open] > .ds-accordion__header { border-end-start-radius: 0; border-end-end-radius: 0; } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__body { padding: var(--ds-space-5) var(--_pad-x) 0; color: var(--ds-ink-2); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__footer { --_rule: var(--ds-rule); margin-block-start: var(--ds-space-5); padding-block: var(--ds-space-2); } .ds-accordion[data-variant="grammarly-tint-row-lifts-to-card"] .ds-accordion__marker { color: var(--_ink); } .ds-accordion[data-variant="heron-audience-plus-minus"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: 0px; --_rule: var(--ds-rule-strong); } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item { border-block-end-style: dashed; } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__header { border-radius: 0; font-family: var(--ds-font-label); font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__marker { color: var(--ds-ink); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__marker svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: none; } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="vertical"] { display: none; } .ds-accordion[data-variant="heron-audience-plus-minus"] .ds-accordion__body { padding: 0 0 var(--ds-space-5); color: var(--ds-ink-muted); font-size: var(--ds-text-lg); } .ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-4); --_header-bg-open: var(--ds-surface-2); --_rule: var(--ds-rule-soft); } .ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); } .ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(-90deg); } .ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__marker { transform: rotate(90deg); } .ds-accordion[data-variant="navattic-88-inspector-tint-when-open"] .ds-accordion__body { padding-block: var(--ds-space-4); } .ds-accordion[data-variant="v0-disclosure-section-header"], .ds-accordion[data-variant="clickup-sidebar-collapsible-header"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-2); --_rule: transparent; --_marker-w: var(--ds-icon-size); font-size: var(--ds-text-sm); } .ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__header, .ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__header { color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); padding-block: 0; } .ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__header:hover, .ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__header:hover { color: var(--ds-ink); } .ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__marker { order: 2; } .ds-accordion[data-variant="v0-disclosure-section-header"] .ds-accordion__body, .ds-accordion[data-variant="clickup-sidebar-collapsible-header"] .ds-accordion__body { padding: var(--ds-space-1) 0 var(--ds-space-2); } .ds-accordion__list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; } .ds-accordion__list a { display: flex; align-items: center; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink-2); text-decoration: none; font-size: var(--ds-text-sm); } .ds-accordion__list a:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-accordion__list a[aria-current="page"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); } .ds-accordion[data-variant="attio-no-chevron"] { --_h: var(--ds-control-h-lg); --_pad-x: 0px; --_rule: var(--ds-rule); } .ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__marker { display: none; } .ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); } .ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); } .ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__item[open] > .ds-accordion__header { color: var(--ds-ink); } .ds-accordion[data-variant="attio-no-chevron"] .ds-accordion__body { padding: 0 0 var(--ds-space-4); } .ds-accordion[data-variant="jstov-faq-rows"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad-x: 0px; --_rule: var(--ds-rule); } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__header { border-radius: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-heading-tracking); } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink-2); } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__marker { font-family: var(--ds-font-mono); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); line-height: 1; color: var(--ds-ink); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: none; } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__marker [data-glyph="minus"] { display: none; } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="plus"] { display: none; } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker [data-glyph="minus"] { display: inline; } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__body { padding: 0 0 var(--ds-space-5); color: var(--ds-ink-2); font-size: var(--ds-text-md); } .ds-accordion[data-variant="jstov-faq-rows"] .ds-accordion__body p { max-width: 60ch; } .ds-accordion[data-variant="quicken-fill-nested-tree"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-3)); --_pad-x: var(--ds-space-2); --_rule: transparent; --_header-bg: var(--ds-surface-2); --_header-bg-open: var(--ds-surface-2); gap: var(--ds-space-2); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__item { border: 0; border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header { border-radius: var(--ds-radius-xs); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header:hover { background: var(--ds-hover-bg); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__marker { order: -1; width: var(--ds-control-h-sm); margin-inline-start: calc(-1 * var(--ds-space-2)); color: var(--ds-ink-muted); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__marker svg { width: var(--ds-space-3); height: var(--ds-space-3); fill: currentColor; stroke: none; } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__header[data-leaf] .ds-accordion__marker { visibility: hidden; } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body { padding: 0 var(--ds-space-2) var(--ds-space-2); color: var(--ds-ink-2); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > p { padding-inline-start: calc(var(--ds-control-h-sm) - var(--ds-space-2) + var(--_gap)); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion { --_h: var(--ds-control-h-lg); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion > .ds-accordion__item { background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion > .ds-accordion__item > .ds-accordion__header { --_header-bg: var(--ds-surface); --_header-bg-open: var(--ds-surface); font-size: var(--ds-text-md); } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion { --_h: var(--ds-control-h); gap: 0; } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion > .ds-accordion__item { background: transparent; border: 0; } .ds-accordion[data-variant="quicken-fill-nested-tree"] .ds-accordion__body > .ds-accordion .ds-accordion__body > .ds-accordion > .ds-accordion__item > .ds-accordion__header { --_header-bg: transparent; --_header-bg-open: transparent; font-size: var(--ds-text-md); color: var(--ds-ink-muted); } .ds-accordion[data-variant="synara-recap-collapsible"] { --_h: var(--ds-control-h-sm); --_pad-x: 0px; --_rule: var(--ds-rule); font-size: var(--ds-text-sm); } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__header { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); padding-block: 0; } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__header:hover { background: transparent; color: var(--ds-ink); } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__marker { transform: rotate(90deg); } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__item[open] > .ds-accordion__header .ds-accordion__marker { transform: rotate(-90deg); } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__preview { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ds-ink-muted); margin: 0 0 var(--ds-space-2); } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__item[open] + .ds-accordion__preview { display: none; } .ds-accordion[data-variant="synara-recap-collapsible"] .ds-accordion__body { padding: 0 0 var(--ds-space-2); color: var(--ds-ink-2); } :where(.ds-app-shell) { --_h: initial; --_rail-w: initial; --_sidebar-w: initial; --_topbar-h: initial; --_inspector-w: initial; --_status-h: initial; --_gap: initial; --_sheet-inset: initial; --_sheet-radius: initial; --_sheet-border: initial; --_sheet-bg: initial; --_page-bg: initial; --_rail-bg: initial; --_sidebar-bg: initial; --_topbar-bg: initial; --_main-bg: initial; --_inspector-bg: initial; --_status-bg: initial; --_rail-rule: initial; --_sidebar-rule: initial; --_topbar-rule: initial; --_inspector-rule: initial; --_status-rule: initial; } .ds-app-shell { --_as-h: 100dvh; --_as-rail-w: var(--ds-rail-w); --_as-sidebar-w: calc(var(--ds-sidebar-w) + (var(--ds-space-unit) - 4px) * 16); --_as-topbar-h: var(--ds-topbar-h); --_as-inspector-w: var(--ds-inspector-w); --_as-status-h: 28px; --_as-gap: 0px; --_as-sheet-inset: 0px; --_as-sheet-radius: 0; --_as-sheet-border: transparent; --_as-sheet-bg: transparent; --_as-page-bg: var(--ds-ground); --_as-rail-bg: var(--ds-ground-2); --_as-sidebar-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-surface); --_as-main-bg: transparent; --_as-inspector-bg: var(--ds-surface); --_as-status-bg: var(--ds-ground-2); --_as-rail-rule: var(--ds-rule); --_as-sidebar-rule: var(--ds-rule); --_as-topbar-rule: var(--ds-rule); --_as-inspector-rule: var(--ds-rule); --_as-status-rule: var(--ds-rule); position: relative; display: flex; width: 100%; height: var(--_h, var(--_as-h)); min-height: 0; max-width: 100%; background: var(--_page-bg, var(--_as-page-bg)); color: var(--ds-ink); overflow: hidden; isolation: isolate; } .ds-app-shell__sheet { --_as-col-rail: var(--_rail-w, var(--_as-rail-w)); --_as-col-sidebar: var(--_sidebar-w, var(--_as-sidebar-w)); --_as-col-inspector: var(--_inspector-w, var(--_as-inspector-w)); --_as-row-topbar: var(--_topbar-h, var(--_as-topbar-h)); --_as-row-status: var(--_status-h, var(--_as-status-h)); flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--_as-col-rail) var(--_as-col-sidebar) minmax(0, 1fr) var(--_as-col-inspector); grid-template-rows: var(--_as-row-topbar) minmax(0, 1fr) var(--_as-row-status); grid-template-areas: "rail sidebar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; gap: var(--_gap, var(--_as-gap)); margin: var(--_sheet-inset, var(--_as-sheet-inset)); border: var(--ds-border-width) solid var(--_sheet-border, var(--_as-sheet-border)); border-radius: var(--_sheet-radius, var(--_as-sheet-radius)); background: var(--_sheet-bg, var(--_as-sheet-bg)); overflow: hidden; } .ds-app-shell:not(:has(.ds-app-shell__sheet > .ds-app-shell__rail)) { --_as-rail-w: 0px; } .ds-app-shell:not(:has(.ds-app-shell__sidebar)) { --_as-sidebar-w: 0px; } .ds-app-shell:not(:has(.ds-app-shell__topbar)) { --_as-topbar-h: 0px; } .ds-app-shell:not(:has(.ds-app-shell__inspector)) { --_as-inspector-w: 0px; } .ds-app-shell:not(:has(.ds-app-shell__statusbar)) { --_as-status-h: 0px; } .ds-app-shell__sheet:has(> .ds-app-shell__topbar > :is(.ds-top-bar, .ds-editor-toolbar), > :is(.ds-top-bar, .ds-editor-toolbar)) { --_as-row-topbar: var(--_topbar-h, auto); } .ds-app-shell__rail { grid-area: rail; min-width: 0; min-height: 0; background: var(--_rail-bg, var(--_as-rail-bg)); border-inline-end: var(--ds-border-width) solid var(--_rail-rule, var(--_as-rail-rule)); } .ds-app-shell__sidebar { grid-area: sidebar; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--_sidebar-bg, var(--_as-sidebar-bg)); border-inline-end: var(--ds-border-width) solid var(--_sidebar-rule, var(--_as-sidebar-rule)); } .ds-app-shell__topbar { grid-area: topbar; min-width: 0; } .ds-app-shell__topbar:where(:not(.ds-top-bar, .ds-editor-toolbar)) { display: flex; align-items: center; gap: var(--ds-space-3); padding-inline: var(--ds-space-4); background: var(--_topbar-bg, var(--_as-topbar-bg)); border-block-end: var(--ds-border-width) solid var(--_topbar-rule, var(--_as-topbar-rule)); } .ds-app-shell__main { grid-area: main; min-width: 0; min-height: 0; overflow: auto; background: var(--_main-bg, var(--_as-main-bg)); } .ds-app-shell__inspector { grid-area: inspector; min-width: 0; min-height: 0; } .ds-app-shell__inspector:where(:not(.ds-inspector-panel)) { overflow: auto; background: var(--_inspector-bg, var(--_as-inspector-bg)); border-inline-start: var(--ds-border-width) solid var(--_inspector-rule, var(--_as-inspector-rule)); } .ds-app-shell__statusbar { grid-area: status; min-width: 0; } .ds-app-shell__statusbar:where(:not(.ds-status-bar)) { display: flex; align-items: center; gap: var(--ds-space-3); padding-inline: var(--ds-space-3); background: var(--_status-bg, var(--_as-status-bg)); border-block-start: var(--ds-border-width) solid var(--_status-rule, var(--_as-status-rule)); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-app-shell > .ds-app-shell__rail { flex: none; align-self: stretch; } .ds-app-shell__rail:has(> .ds-icon-rail), .ds-app-shell__rail.ds-icon-rail { background: transparent; border-inline-end: 0; } .ds-app-shell__sidebar:has(> .ds-sidebar-nav-panel) { background: transparent; border-inline-end: 0; } .ds-app-shell__rail > .ds-icon-rail { height: 100%; } .ds-app-shell__sidebar > .ds-sidebar-nav-panel { width: 100%; max-width: none; height: 100%; } .ds-app-shell__topbar:has(> :is(.ds-top-bar, .ds-editor-toolbar)) { display: flex; align-items: stretch; gap: 0; min-height: 0; padding: 0; background: transparent; border-block-end: 0; } .ds-app-shell__topbar > :is(.ds-top-bar, .ds-editor-toolbar) { flex: 1 1 auto; min-width: 0; } .ds-app-shell__inspector:has(> .ds-inspector-panel) { display: flex; position: relative; z-index: 1; overflow: visible; background: transparent; border-inline-start: 0; } .ds-app-shell__inspector > .ds-inspector-panel { flex: 1 1 auto; width: 100%; max-width: none; height: 100%; max-height: none; } .ds-app-shell__statusbar:has(> .ds-status-bar) { display: flex; padding: 0; background: transparent; border-block-start: 0; } .ds-app-shell__statusbar > .ds-status-bar { flex: 1 1 auto; min-width: 0; } :where(.ds-app-shell__sheet) > :where(.ds-top-bar, .ds-editor-toolbar) { grid-area: topbar; min-width: 0; } :where(.ds-app-shell__sheet) > :where(.ds-inspector-panel) { grid-area: inspector; min-width: 0; } :where(.ds-app-shell__sheet) > :where(.ds-status-bar) { grid-area: status; min-width: 0; } .ds-app-shell[data-topbar="full"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-topbar="over-sidebar"] .ds-app-shell__sheet { grid-template-areas: "rail topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell__title { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-app-shell__crumb { color: var(--ds-ink-muted); font-size: var(--ds-text-md); } .ds-app-shell__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-muted); cursor: pointer; flex: none; } .ds-app-shell__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-app-shell__icon-btn > svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-app-shell__menu-btn { display: none; } .ds-app-shell__search { flex: 1 1 auto; max-width: 420px; min-width: 0; display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-control-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink-muted); font: inherit; font-size: var(--ds-text-sm); text-align: start; cursor: text; } .ds-app-shell__search > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-app-shell__search > kbd { margin-inline-start: auto; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); padding: 0 var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); } .ds-app-shell__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); } .ds-app-shell__primary-btn { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-control-pad-x); border: var(--ds-border-width) solid var(--ds-primary-border); border-radius: var(--ds-radius-button); background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); cursor: pointer; white-space: nowrap; } .ds-app-shell__primary-btn:hover { background: var(--ds-primary-fill-hover); } .ds-app-shell__secondary-btn { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-control-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); cursor: pointer; white-space: nowrap; } .ds-app-shell__secondary-btn:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-app-shell :is(button, a, [tabindex]):focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-app-shell__overlay { position: absolute; inset: 0; z-index: var(--ds-z-scrim); display: none; background: var(--ds-scrim); backdrop-filter: var(--ds-scrim-filter); } .ds-app-shell[data-state="scrimmed"] .ds-app-shell__overlay, .ds-app-shell[data-state="sidebar-open"] .ds-app-shell__overlay { display: block; } .ds-app-shell__overlay > * { position: absolute; } .ds-app-shell[data-state="sidebar-collapsed"] > .ds-app-shell__sheet { --_as-col-sidebar: 0px; } .ds-app-shell[data-state="sidebar-collapsed"] .ds-app-shell__sidebar { display: none; } .ds-app-shell[data-state="empty"] .ds-app-shell__main { display: grid; place-items: center; color: var(--ds-ink-muted); } .ds-app-shell:not([data-variant]), .ds-app-shell[data-variant="jstov"] { --_as-sheet-inset: var(--ds-sheet-inset); --_as-sheet-radius: var(--ds-radius-lg); --_as-sheet-border: var(--ds-card-border); --_as-sheet-bg: var(--ds-card-bg); --_as-topbar-bg: transparent; --_as-topbar-rule: var(--ds-rule-soft); } .ds-app-shell:not([data-variant]) .ds-app-shell__sheet, .ds-app-shell[data-variant="jstov"] .ds-app-shell__sheet { box-shadow: var(--ds-card-shadow); } .ds-app-shell[data-variant="descript-two-tone-rails"] { --_as-topbar-h: 60px; --_as-sidebar-w: 305px; --_as-page-bg: var(--ds-ground-2); --_as-sidebar-bg: var(--ds-ground-2); --_as-topbar-bg: var(--ds-ground-2); --_as-main-bg: var(--ds-surface); --_as-sidebar-rule: transparent; --_as-topbar-rule: transparent; } .ds-app-shell[data-variant="descript-two-tone-rails"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="perplexity-inset-sheet"] { --_as-sidebar-w: 240px; --_as-page-bg: var(--ds-ground-2); --_as-sidebar-bg: var(--ds-ground-2); --_as-sidebar-rule: transparent; --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="perplexity-inset-sheet"] .ds-app-shell__main { margin-block-start: var(--ds-space-2); border-start-start-radius: var(--ds-radius-lg); } .ds-app-shell[data-variant="navattic-rail-panel-sheet"] { --_as-sidebar-w: 224px; --_as-page-bg: var(--ds-ground-2); --_as-sidebar-bg: var(--ds-ground); --_as-main-bg: var(--ds-surface); --_as-topbar-bg: transparent; --_as-topbar-rule: var(--ds-rule-soft); } .ds-app-shell[data-variant="navattic-rail-panel-sheet"] .ds-app-shell__sheet { margin: var(--ds-space-2) 0 0 0; border: var(--ds-border-width) solid var(--ds-rule); border-inline-end: 0; border-block-end: 0; border-start-start-radius: var(--ds-radius-lg); background: var(--ds-surface); grid-template-areas: "rail sidebar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="navattic-rail-panel-sheet"] > .ds-app-shell__rail { --_as-rail-rule: transparent; width: 56px; } .ds-app-shell[data-variant="clickup-floating-panes"] { --_as-gap: var(--ds-space-2); --_as-topbar-h: 40px; --_as-page-bg: var(--ds-ground); --_as-sidebar-bg: var(--ds-ground-2); --_as-main-bg: var(--ds-surface); --_as-topbar-bg: var(--ds-ground); --_as-sidebar-rule: transparent; --_as-topbar-rule: var(--ds-rule); } .ds-app-shell[data-variant="clickup-floating-panes"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; padding: 0 var(--ds-space-2) var(--ds-space-2); } .ds-app-shell[data-variant="clickup-floating-panes"] .ds-app-shell__topbar { margin-inline: calc(-1 * var(--ds-space-2)); } .ds-app-shell[data-variant="clickup-floating-panes"] .ds-app-shell__sidebar, .ds-app-shell[data-variant="clickup-floating-panes"] .ds-app-shell__main { border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); } .ds-app-shell[data-variant="clickup-floating-panes"] .ds-app-shell__rail > .ds-icon-rail { margin: 0; height: 100%; } .ds-app-shell[data-variant="manychat-dual-ground"] { --_as-topbar-h: 60px; --_as-page-bg: var(--ds-ground); --_as-rail-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-ground); --_as-main-bg: var(--ds-ground-2); --_as-rail-rule: var(--ds-rule-strong); --_as-topbar-rule: var(--ds-rule-strong); } .ds-app-shell[data-variant="manychat-dual-ground"] .ds-app-shell__sheet { grid-template-areas: "rail topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="manychat-shared-ground"] { --_as-topbar-h: 60px; --_as-sidebar-w: 296px; --_as-page-bg: var(--ds-ground); --_as-rail-bg: var(--ds-ground); --_as-sidebar-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-ground); --_as-main-bg: var(--ds-ground); --_as-sidebar-rule: transparent; --_as-rail-rule: var(--ds-rule-strong); --_as-topbar-rule: var(--ds-rule-strong); } .ds-app-shell[data-variant="manychat-shared-ground"] .ds-app-shell__sheet { grid-template-areas: "rail topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="retool-three-pane-builder"] { --_as-rail-w: 40px; --_as-sidebar-w: 240px; --_as-topbar-h: 40px; --_as-inspector-w: 320px; --_as-status-h: 28px; --_as-page-bg: var(--ds-surface); --_as-rail-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-surface); --_as-topbar-bg: var(--ds-surface); --_as-main-bg: var(--ds-ground-2); --_as-inspector-bg: var(--ds-surface); --_as-status-bg: var(--ds-surface); } .ds-app-shell[data-variant="retool-three-pane-builder"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "status status status status"; } .ds-app-shell[data-variant="elevenlabs-sidebar-topbar"] { --_as-sidebar-w: 256px; --_as-topbar-h: 48px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); --_as-topbar-rule: var(--ds-rule-soft); } .ds-app-shell[data-variant="homerun-tonal-shell"] { --_as-sidebar-w: 280px; --_as-topbar-h: 80px; --_as-page-bg: var(--ds-ground); --_as-sidebar-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-ground); --_as-main-bg: var(--ds-ground); } .ds-app-shell[data-variant="hsaj-recessed-sidebar"] { --_as-sidebar-w: 336px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-ground-2); --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="contra-inverse-chrome"] { --_as-sidebar-w: 280px; --_as-topbar-h: 64px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-ground); --_as-sidebar-rule: transparent; --_as-topbar-bg: var(--ds-surface); --_as-topbar-rule: transparent; --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="contra-inverse-chrome"] .ds-app-shell__topbar { box-shadow: var(--ds-shadow-lift); position: relative; z-index: 1; } .ds-app-shell[data-variant="v0-sidebar-no-topbar"] { --_as-sidebar-w: 274px; --_as-page-bg: var(--ds-ground); --_as-sidebar-bg: var(--ds-ground); --_as-main-bg: var(--ds-ground); } .ds-app-shell[data-variant="braintrust-shared-ground-pill-rail"] { --_as-sidebar-w: 240px; --_as-topbar-h: 56px; --_as-page-bg: var(--ds-ground); --_as-sidebar-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-ground); --_as-main-bg: var(--ds-ground); --_as-sidebar-rule: transparent; --_as-topbar-rule: transparent; } .ds-app-shell[data-variant="oku-hairline-split"] { --_as-sidebar-w: 224px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="plane-three-tone"] { --_as-sidebar-w: 285px; --_as-topbar-h: 52px; --_as-page-bg: var(--ds-ground-2); --_as-rail-bg: var(--ds-ground-2); --_as-rail-rule: transparent; --_as-topbar-bg: var(--ds-ground-2); --_as-topbar-rule: transparent; --_as-sidebar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="plane-three-tone"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="plane-three-tone"] .ds-app-shell__sidebar { border-start-start-radius: var(--ds-radius-md); } .ds-app-shell[data-variant="luma-transparent-nav-page"] { --_as-topbar-h: 64px; --_as-page-bg: var(--ds-ground); --_as-topbar-bg: transparent; --_as-topbar-rule: transparent; --_as-main-bg: transparent; } .ds-app-shell[data-variant="airbnb-topnav-only"] { --_as-topbar-h: 80px; --_as-page-bg: var(--ds-surface); --_as-topbar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="synara-three-pane-agent"] { --_as-sidebar-w: 20%; --_as-inspector-w: 38%; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-ground-2); --_as-main-bg: var(--ds-surface); --_as-inspector-bg: var(--ds-surface); } @media (min-width: 768px) and (max-width: 1099px) { .ds-app-shell:is([data-collapse="auto"], [data-collapse="swap"]) > .ds-app-shell__sheet { --_as-col-sidebar: 0px; } .ds-app-shell:is([data-collapse="auto"], [data-collapse="swap"]) .ds-app-shell__sidebar { display: none; } } @media (min-width: 1100px) { .ds-app-shell[data-collapse="swap"] > .ds-app-shell__sheet { --_as-col-rail: 0px; } .ds-app-shell[data-collapse="swap"] .ds-app-shell__rail { display: none; } } @media (max-width: 767px) { .ds-app-shell.ds-app-shell > .ds-app-shell__sheet.ds-app-shell__sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "topbar" "main" "rail" "status"; gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; } .ds-app-shell.ds-app-shell .ds-app-shell__topbar { margin-inline: 0; } .ds-app-shell.ds-app-shell .ds-app-shell__inspector { display: none; } .ds-app-shell__topbar:where(:not(.ds-top-bar, .ds-editor-toolbar)) { min-height: var(--ds-topbar-h); padding-inline: var(--ds-space-3); } .ds-app-shell__menu-btn { display: inline-flex; } .ds-app-shell__rail { border-inline-end: 0; } .ds-app-shell.ds-app-shell .ds-app-shell__rail:not(:has(.ds-icon-rail[data-orientation="auto"])):not(.ds-icon-rail[data-orientation="auto"]) { display: none; } .ds-app-shell.ds-app-shell > .ds-app-shell__rail { display: none; } .ds-app-shell.ds-app-shell .ds-app-shell__sidebar { position: absolute; z-index: var(--ds-z-modal); inset-block: 0; inset-inline-start: 0; width: min(var(--ds-sidebar-w), 85vw); max-width: 85vw; margin: 0; border-radius: 0; transform: translateX(-100%); transition: transform var(--ds-dur-base) var(--ds-ease-standard); } .ds-app-shell__sidebar { background: var(--ds-surface-raised); } .ds-app-shell.ds-app-shell[data-state="sidebar-open"] .ds-app-shell__sidebar { transform: none; box-shadow: var(--ds-shadow-modal); } } :where(.ds-app-shell) { --_vh: initial; --_sticky-top: initial; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) { --_as-vh: 100dvh; --_as-sticky-top: 0px; height: auto; min-height: var(--_h, var(--_as-vh)); overflow: visible; isolation: auto; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) > .ds-app-shell__sheet { overflow: visible; min-height: var(--_h, var(--_as-vh)); grid-template-rows: var(--_as-row-topbar) minmax(min-content, 1fr) var(--_as-row-status); } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) .ds-app-shell__main { overflow: visible; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) :is(.ds-app-shell__sidebar, .ds-app-shell__inspector, .ds-app-shell__rail) { position: sticky; top: var(--_sticky-top, var(--_as-sticky-top)); align-self: start; height: calc(var(--_vh, var(--_as-vh)) - var(--_sticky-top, var(--_as-sticky-top))); } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) .ds-app-shell__inspector:where(:not(.ds-inspector-panel)) { overflow: auto; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) .ds-app-shell__topbar { position: sticky; top: 0; z-index: var(--ds-z-sticky); } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) .ds-app-shell__statusbar { position: sticky; bottom: 0; z-index: var(--ds-z-sticky); } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) > .ds-app-shell__rail { position: sticky; top: 0; height: var(--_vh, var(--_as-vh)); } .ds-app-shell__toc { display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-6) var(--ds-space-4); font-size: var(--ds-text-sm); min-width: 0; } .ds-app-shell__toc-title { margin: 0 0 var(--ds-space-2); padding-inline-start: var(--ds-space-3); font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink); } .ds-app-shell__toc-link { position: relative; display: block; min-width: 0; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); line-height: var(--ds-lh-list); text-decoration: none; overflow-wrap: anywhere; } .ds-app-shell__toc-link[data-level="2"] { padding-inline-start: var(--ds-space-6); } .ds-app-shell__toc-link:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-app-shell__toc-link[aria-current="true"], .ds-app-shell__toc-link[aria-current="location"] { color: var(--ds-selected-ink); font-weight: var(--ds-weight-medium); } .ds-app-shell__toc-link[aria-current="true"]::before, .ds-app-shell__toc-link[aria-current="location"]::before { content: ""; position: absolute; inset-block: var(--ds-space-1); inset-inline-start: 0; width: 2px; border-radius: var(--ds-radius-pill); background: var(--ds-primary-fill); } .ds-app-shell__toc-link[aria-disabled="true"] { color: var(--ds-ink-faint); pointer-events: none; } .ds-app-shell__toc[aria-busy="true"] .ds-app-shell__toc-link { color: transparent; background: var(--ds-surface-3); animation: ds-as-pulse 1.2s var(--ds-ease-standard) infinite alternate; } .ds-app-shell__toc-empty { margin: 0; padding: var(--ds-space-3); border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); color: var(--ds-ink-muted); } @keyframes ds-as-pulse { to { opacity: .45; } } .ds-app-shell[data-variant="mintlify-docs-triple"] { --_as-topbar-h: 64px; --_as-sticky-top: 64px; --_as-sidebar-w: 272px; --_as-inspector-w: 232px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-surface); --_as-sidebar-rule: transparent; --_as-topbar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); --_as-inspector-bg: var(--ds-surface); --_as-inspector-rule: transparent; } .ds-app-shell[data-variant="mintlify-docs-triple"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="mintlify-docs-triple"] .ds-app-shell__main { justify-self: center; width: 100%; max-width: 760px; padding: var(--ds-space-8) var(--ds-space-6); } .ds-app-shell[data-variant="klaviyo-sidebar-wide"] { --_as-topbar-h: 48px; --_as-sticky-top: 0px; --_as-sidebar-w: 240px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-ground-2); --_as-topbar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="klaviyo-sidebar-wide"] .ds-app-shell__main { padding: var(--ds-space-6); } .ds-app-shell[data-variant="gitbook-topbar-toc"] { --_as-topbar-h: 56px; --_as-sticky-top: 56px; --_as-sidebar-w: 288px; --_as-page-bg: var(--ds-surface); --_as-sidebar-bg: var(--ds-ground); --_as-topbar-bg: var(--ds-surface); --_as-main-bg: var(--ds-surface); } .ds-app-shell[data-variant="gitbook-topbar-toc"] .ds-app-shell__sheet { grid-template-areas: "topbar topbar topbar topbar" "rail sidebar main inspector" "rail sidebar status status"; } .ds-app-shell[data-variant="gitbook-topbar-toc"] .ds-app-shell__main { justify-self: center; width: 100%; max-width: 720px; padding: var(--ds-space-10) var(--ds-space-6); } @media (max-width: 767px) { .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]).ds-app-shell .ds-app-shell__sidebar { position: fixed; top: 0; height: auto; align-self: auto; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]).ds-app-shell .ds-app-shell__overlay { position: fixed; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]).ds-app-shell .ds-app-shell__main { max-width: none; padding: var(--ds-space-5) var(--ds-space-4); } } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"]) .ds-app-shell__sidebar:not(:has(> .ds-sidebar-nav-panel)) { overflow-y: auto; } .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"])[data-state="sidebar-open"] .ds-app-shell__overlay { display: none; } @media (max-width: 767px) { .ds-app-shell:is([data-scroll="page"], [data-variant="mintlify-docs-triple"], [data-variant="klaviyo-sidebar-wide"], [data-variant="gitbook-topbar-toc"])[data-state="sidebar-open"] .ds-app-shell__overlay { display: block; } } .ds-banner-callout svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-banner-callout { --_fill: var(--ds-surface); --_edge: var(--ds-rule); --_ink: var(--ds-ink); --_glyph: var(--ds-ink-muted); --_radius: var(--ds-radius-md); --_pad-y: var(--ds-space-3); --_pad-x: var(--ds-space-4); --_gap: var(--ds-space-3); --_min-h: 0px; position: relative; display: flex; align-items: flex-start; gap: var(--_gap); min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--_min-h); padding: var(--_pad-y) var(--_pad-x); border-radius: var(--_radius); background: var(--_fill); border: var(--ds-border-width) solid var(--_edge); color: var(--ds-ink-2); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); text-decoration: none; } .ds-banner-callout__icon { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); margin-block-start: calc((1lh - var(--ds-icon-size)) / 2); color: var(--_glyph); } .ds-banner-callout__icon svg { inline-size: 100%; block-size: 100%; } .ds-banner-callout__icon[data-disc] { inline-size: 28px; block-size: 28px; margin-block-start: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); } .ds-banner-callout__icon[data-disc] svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-banner-callout__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ds-space-0-5); } .ds-banner-callout__title { color: var(--_ink); font-weight: var(--ds-weight-semibold); } .ds-banner-callout__text { color: inherit; max-inline-size: var(--ds-measure); } .ds-banner-callout__text a, .ds-banner-callout__action { color: var(--_ink); font-weight: var(--ds-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; } .ds-banner-callout__text a:hover, .ds-banner-callout__action:hover { text-decoration-color: currentColor; } .ds-banner-callout__action { flex: none; align-self: center; } :is(.ds-banner-callout:not([data-layout]), .ds-banner-callout[data-layout="inline"]) > .ds-banner-callout__body > .ds-banner-callout__action { align-self: flex-start; margin-block-start: var(--ds-space-1); } .ds-banner-callout__dismiss { flex: none; align-self: flex-start; margin-block: calc(-1 * var(--ds-space-1)); margin-inline-end: calc(-1 * var(--ds-space-2)); } .ds-banner-callout__badge { flex: none; align-self: center; } .ds-banner-callout__chevron { flex: none; align-self: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); } .ds-banner-callout__art { flex: none; align-self: center; display: grid; place-items: center; inline-size: 56px; block-size: 56px; color: var(--_ink); } .ds-banner-callout__art svg { inline-size: 100%; block-size: 100%; } .ds-banner-callout[data-tone="info"] { --_fill: var(--ds-info-tint); --_edge: color-mix(in srgb, var(--ds-info) 35%, transparent); --_ink: var(--ds-info-ink); --_glyph: var(--ds-info); } .ds-banner-callout[data-tone="success"] { --_fill: var(--ds-success-tint); --_edge: color-mix(in srgb, var(--ds-success) 35%, transparent); --_ink: var(--ds-success-ink); --_glyph: var(--ds-success); } .ds-banner-callout[data-tone="warning"] { --_fill: var(--ds-warning-tint); --_edge: color-mix(in srgb, var(--ds-warning) 40%, transparent); --_ink: var(--ds-warning-ink); --_glyph: var(--ds-warning); } .ds-banner-callout[data-tone="danger"] { --_fill: var(--ds-danger-tint); --_edge: color-mix(in srgb, var(--ds-danger) 35%, transparent); --_ink: var(--ds-danger-ink); --_glyph: var(--ds-danger); } .ds-banner-callout[data-tone="accent"] { --_fill: var(--ds-accent-tint); --_edge: var(--ds-accent-soft); --_ink: var(--ds-accent-ink); --_glyph: var(--ds-accent); } .ds-banner-callout[data-tone="ai"] { --_fill: var(--ds-accent-2-tint); --_edge: transparent; --_ink: var(--ds-accent-2-ink); --_glyph: var(--ds-accent-2-ink); } .ds-banner-callout[data-tone="ai"] .ds-banner-callout__icon[data-disc] { background: color-mix(in srgb, var(--ds-accent-2-tint) 60%, var(--ds-surface)); } .ds-banner-callout[data-tone] .ds-banner-callout__text { color: var(--_ink); } .ds-banner-callout[data-tone] .ds-banner-callout__title { color: var(--_ink); } .ds-banner-callout[data-layout="bar"] { --_radius: 0px; --_pad-y: var(--ds-space-1); --_min-h: calc(var(--ds-control-h-sm) + 2px); align-items: center; inline-size: 100%; border-width: 0 0 var(--ds-border-width); } .ds-banner-callout[data-layout="bar"] .ds-banner-callout__icon { margin-block-start: 0; } .ds-banner-callout[data-layout="bar"] .ds-banner-callout__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); } .ds-banner-callout[data-layout="bar"] .ds-banner-callout__dismiss { align-self: center; margin-block: 0; } .ds-banner-callout[data-layout="bar"][data-tone] { border-block-end-color: var(--_edge); } .ds-banner-callout[data-layout="pill"] { --_radius: var(--ds-radius-pill); --_pad-y: 0px; --_pad-x: var(--ds-space-4); --_gap: var(--ds-space-2); --_min-h: var(--ds-control-h); display: inline-flex; align-items: center; inline-size: auto; max-inline-size: 100%; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-banner-callout[data-layout="pill"] .ds-banner-callout__body { flex-direction: row; align-items: center; gap: var(--ds-space-2); } .ds-banner-callout[data-layout="pill"] .ds-banner-callout__text { color: var(--ds-ink); font-size: var(--ds-text-md); } .ds-banner-callout[data-layout="pill"] .ds-banner-callout__icon { margin-block-start: 0; } .ds-banner-callout[data-layout="pill"]:has(> .ds-banner-callout__badge) { padding-inline-start: var(--ds-space-2); } .ds-banner-callout[data-layout="pill"]:hover, .ds-banner-callout[data-layout="pill"][data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-banner-callout[data-layout="pill"]:hover .ds-banner-callout__chevron { transform: translateX(var(--ds-space-0-5)); } .ds-banner-callout[data-layout="pill"][data-tone] .ds-banner-callout__text { color: var(--_ink); } .ds-banner-callout[data-layout="pill"][data-tone]:hover { background: var(--_fill); border-color: var(--_ink); } .ds-banner-callout[data-layout="pill"][data-w="full"] { display: flex; inline-size: 100%; } .ds-banner-callout[data-layout="floating"] { --_radius: var(--ds-radius-sm); --_pad-y: var(--ds-space-1); --_pad-x: var(--ds-space-3); --_min-h: var(--ds-control-h-sm); position: absolute; inset-block-start: var(--ds-space-3); inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--ds-z-sticky); display: inline-flex; align-items: center; inline-size: max-content; max-inline-size: calc(100% - 2 * var(--ds-space-4)); } .ds-banner-callout[data-layout="floating"] .ds-banner-callout__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); } .ds-banner-callout[data-layout="floating"] .ds-banner-callout__text { font-size: var(--ds-text-md); } .ds-banner-callout[data-layout="floating"][data-hanging] { inset-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-block-start-width: 0; } .ds-banner-callout:is(a, button):focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-banner-callout[data-state="dismissed"] { display: none; } .ds-banner-callout[aria-busy="true"] { --_fill: var(--ds-skeleton); --_edge: transparent; color: transparent; } .ds-banner-callout[aria-busy="true"] > * { visibility: hidden; } .ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] { --_fill: var(--ds-accent-tint); --_edge: var(--ds-accent-soft); --_ink: var(--ds-accent-ink); --_radius: var(--ds-radius-xs); --_min-h: 80px; --_pad-y: var(--ds-space-2); align-items: center; justify-content: center; } .ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__body { flex: 0 1 auto; } .ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__title { font-size: var(--ds-text-lg); } .ds-banner-callout[data-variant="grammarly-plan-limit-tint-bordered"] .ds-banner-callout__text { color: var(--ds-ink-2); } .ds-banner-callout[data-variant="manychat-ai-insight-gradient"] { --_edge: transparent; --_radius: var(--ds-radius-md); --_ink: var(--ds-accent-2-ink); --_glyph: var(--ds-accent-2-ink); background: linear-gradient(135deg, var(--ds-surface) 30%, var(--ds-accent-2-tint) 100%); } .ds-banner-callout[data-variant="manychat-ai-insight-gradient"] .ds-banner-callout__text { color: var(--ds-ink); } .ds-banner-callout[data-variant="manychat-ai-insight-gradient"] .ds-banner-callout__action { align-self: flex-start; color: var(--ds-ink-link); text-decoration: none; } .ds-banner-callout[data-variant="manychat-push-down-system-notice"] { --_fill: var(--ds-surface); --_edge: var(--ds-rule-strong); } .ds-banner-callout[data-variant="manychat-push-down-system-notice"] .ds-banner-callout__text a { color: var(--ds-ink-link); font-weight: var(--ds-weight-regular); text-decoration: none; } .ds-banner-callout[data-variant="manychat-read-only-mode-banner"] { --_fill: var(--ds-warning-tint); --_edge: color-mix(in srgb, var(--ds-warning) 35%, transparent); --_ink: var(--ds-warning-ink); } .ds-banner-callout[data-variant="manychat-read-only-mode-banner"] .ds-banner-callout__text { color: var(--_ink); } .ds-banner-callout[data-variant="manychat-read-only-mode-banner"] .ds-banner-callout__action { color: var(--ds-ink-link); } .ds-banner-callout[data-variant="elevenlabs-announce-pill"] { --_edge: var(--ds-border); } .ds-banner-callout[data-variant="attio-announcement-capsule"] { --_min-h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); --_gap: var(--ds-space-1); } .ds-banner-callout[data-variant="attio-announcement-capsule"] .ds-banner-callout__text { font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-banner-callout[data-variant="attio-announcement-capsule"] .ds-banner-callout__chevron { inline-size: 12px; block-size: 12px; } .ds-banner-callout[data-variant="fibery-note-pill"] { --_fill: var(--ds-data-6-tint); --_edge: transparent; --_ink: var(--ds-data-6-ink); --_glyph: var(--ds-data-6-ink); --_min-h: 31px; } .ds-banner-callout[data-variant="fibery-note-pill"] .ds-banner-callout__text { color: var(--_ink); font-weight: var(--ds-weight-medium); } .ds-banner-callout[data-variant="fibery-note-pill"] .ds-banner-callout__chevron { color: var(--_ink); } .ds-banner-callout[data-variant="fibery-note-pill"][data-layout="inline"] { --_radius: var(--ds-radius-lg); } .ds-banner-callout[data-variant="navattic-plan-status-pill"] { --_min-h: var(--ds-control-h-sm); --_edge: var(--ds-border); --_glyph: var(--ds-accent); --_pad-x: var(--ds-space-3); box-shadow: var(--ds-shadow-lip); } .ds-banner-callout[data-variant="navattic-plan-status-pill"] .ds-banner-callout__text { font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); color: var(--ds-ink); } .ds-banner-callout[data-variant="manychat-coach-mark-pill"] { --_fill: var(--ds-surface-2); --_edge: transparent; --_glyph: var(--ds-ink-muted); --_min-h: 31px; --_radius: var(--ds-radius-sm); } .ds-banner-callout[data-variant="manychat-coach-mark-pill"] .ds-banner-callout__text { color: var(--ds-ink-muted); font-size: var(--ds-text-md); } .ds-card { --_bg: var(--ds-card-bg); --_border: var(--ds-card-border); --_shadow: var(--ds-card-shadow); --_radius: var(--ds-radius-md); --_pad: var(--ds-card-pad); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--_bg); border: var(--ds-border-width) solid var(--_border); box-shadow: var(--_shadow, var(--ds-card-shadow)); border-radius: var(--_radius); color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); text-decoration: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-base) var(--ds-ease-standard); } .ds-card > * { min-width: 0; } .ds-card svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-card__header { display: flex; align-items: center; gap: var(--ds-space-3); min-height: calc(var(--ds-control-h) + var(--ds-space-1)); padding: var(--ds-space-2) var(--_pad) 0; } .ds-card__header[data-rule="true"] { padding-block-end: var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-card__title { flex: 1 1 auto; min-width: 0; font-size: var(--ds-text-title-card, var(--ds-text-md)); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); } .ds-card__label { flex: 1 1 auto; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); } .ds-card__header-actions { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin-inline-start: auto; } .ds-card__icon-button, .ds-card__handle { appearance: none; display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); cursor: pointer; } .ds-card__icon-button:hover { background: var(--ds-surface-hover); color: var(--ds-ink); } .ds-card__icon-button svg, .ds-card__handle svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-card__body { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--_pad); flex: 1 1 auto; } .ds-card__header + .ds-card__body { padding-block-start: var(--ds-space-3); } .ds-card__body > p { color: var(--ds-ink-2); max-width: var(--ds-measure); } .ds-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-3); min-height: var(--ds-control-h-lg); padding: var(--ds-space-2) var(--_pad); border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); background: var(--ds-surface-2); border-radius: 0 0 calc(var(--_radius) - var(--ds-border-width)) calc(var(--_radius) - var(--ds-border-width)); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-card__media { display: block; overflow: clip; aspect-ratio: var(--ds-media-aspect); background: var(--ds-illustration-ground); border-radius: calc(var(--_radius) - var(--ds-border-width)) calc(var(--_radius) - var(--ds-border-width)) 0 0; } .ds-card__media img, .ds-card__media svg { width: 100%; height: 100%; object-fit: cover; } .ds-card__inset { padding: var(--ds-space-3); background: var(--ds-surface-2); border-radius: var(--ds-radius-sm); } .ds-card .ds-card { --_bg: var(--ds-surface-2); --_border: transparent; --_shadow: none; --_radius: var(--ds-radius-sm); } .ds-card__action { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); padding-inline: var(--ds-size-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-decoration: none; text-transform: var(--ds-control-case); white-space: nowrap; cursor: pointer; box-shadow: var(--ds-shadow-lip); } .ds-card__action:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-card__action:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; } .ds-card__caption { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); line-height: var(--ds-lh-body); } a.ds-card, button.ds-card, .ds-card[data-interactive] { cursor: pointer; text-align: inherit; font: inherit; } :is(a, button).ds-card:hover, .ds-card[data-interactive]:hover, .ds-card[data-state="hover"] { background: var(--ds-hover-bg); } [data-hover="lift"] :is(:is(a, button).ds-card:hover, .ds-card[data-interactive]:hover, .ds-card[data-state="hover"]) { box-shadow: var(--ds-hover-shadow); } :is(a, button).ds-card:hover { border-color: var(--_border); } .ds-card[aria-selected="true"] { outline: 2px solid var(--ds-selected-line); outline-offset: -2px; } .ds-card[aria-selected="true"]:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-card[aria-disabled="true"] { --_bg: var(--ds-surface-3); --_border: var(--ds-rule); --_shadow: none; color: var(--ds-ink-faint); cursor: not-allowed; } .ds-card[aria-disabled="true"] :is(.ds-card__title, .ds-card__body > p, .ds-card__label) { color: var(--ds-ink-faint); } .ds-card[aria-invalid="true"] { --_border: var(--ds-danger); } .ds-card__error { display: flex; align-items: center; gap: var(--ds-space-1-5); padding: 0 var(--_pad) var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-card__error svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; } .ds-card[data-state="empty"], .ds-card[data-variant="dashed-optional"] { --_bg: transparent; --_border: var(--ds-rule-strong); --_shadow: none; border-style: dashed; } .ds-card__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: calc(var(--ds-control-h-lg) * 2); padding: var(--_pad); text-align: center; color: var(--ds-ink-muted); } .ds-card__empty > span { max-width: var(--ds-measure); } .ds-card__empty a { color: var(--ds-ink-link); } .ds-card[data-state="ghost"] :is(.ds-card__title, .ds-card__body) { color: var(--ds-ink-muted); } .ds-card[aria-busy="true"] { pointer-events: none; } .ds-card__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 60%); max-width: 100%; border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-card__skeleton + .ds-card__skeleton { margin-block-start: var(--ds-space-2); } .ds-card__handle { position: absolute; inset-inline-start: var(--ds-space-1); inset-block-start: var(--ds-space-1); cursor: grab; opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-standard); } .ds-card:hover .ds-card__handle, .ds-card__handle:focus-visible, .ds-card[data-state="dragging"] .ds-card__handle, .ds-card[data-state="hover"] .ds-card__handle { opacity: 1; } .ds-card[data-state="dragging"] { box-shadow: var(--ds-shadow-object); cursor: grabbing; } .ds-card[data-state="dragging"] .ds-card__handle { cursor: grabbing; } @media (hover: none) { .ds-card__handle { opacity: 1; } } .ds-card:has(> .ds-card__handle) > .ds-card__header { padding-inline-start: calc(var(--_pad) + var(--ds-space-6)); } .ds-card[data-variant="tint-only"] { --_bg: var(--ds-surface); --_border: transparent; --_shadow: none; } .ds-card[data-variant="tint-step-down"] { --_bg: var(--ds-surface-2); --_border: transparent; --_shadow: none; --_radius: var(--ds-radius-lg); } .ds-card[data-variant="tint-step-down"]:is(:is(a, button):hover, [data-interactive]:hover, [data-state="hover"]) { background: var(--ds-surface-3); } .ds-card[data-variant="hairline"] { --_bg: var(--ds-surface); --_border: var(--ds-rule); --_shadow: none; } .ds-card[data-variant="hairline-plus-tint-semantics"] { --_bg: var(--ds-surface); --_border: var(--ds-rule); --_shadow: none; --_radius: var(--ds-radius-xs); } .ds-card[data-variant="hairline-plus-tint-semantics"][data-kind="suggested"] { --_bg: var(--ds-surface-2); } .ds-card[data-variant="tint-plus-warm-hairline"] { --_bg: var(--ds-surface-2); --_border: var(--ds-rule); --_shadow: none; } .ds-card[data-variant="bottom-only-shadow"] { --_bg: var(--ds-surface); --_border: transparent; --_shadow: var(--ds-shadow-lift); } .ds-card[data-variant="soft-shadow-card-row"] { --_bg: var(--ds-surface); --_border: transparent; --_shadow: var(--ds-shadow-card); --_radius: var(--ds-radius-md); } .ds-card[data-variant="elevated-subject"] { --_bg: var(--ds-surface); --_border: transparent; --_shadow: var(--ds-shadow-object); --_radius: var(--ds-radius-xl); --_pad: var(--ds-space-6); } .ds-card[data-variant="elevated-subject"][data-role="context"] { --_border: var(--ds-rule); --_shadow: none; } .ds-card[data-variant="nested-tint-then-white"] { --_bg: var(--ds-surface-2); --_border: transparent; --_shadow: none; --_radius: var(--ds-radius-lg); } .ds-card[data-variant="nested-tint-then-white"] .ds-card { --_bg: var(--ds-surface); --_border: transparent; --_shadow: none; --_radius: var(--ds-radius-md); } .ds-card[data-variant="mono-label-rule-header"] { --_bg: var(--ds-surface); --_border: var(--ds-rule); --_shadow: none; --_radius: var(--ds-radius-xl); --_pad: var(--ds-space-8); } .ds-card[data-variant="mono-label-rule-header"] .ds-card__header { padding-block: var(--ds-space-5) var(--ds-space-3); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-card[data-variant="title-rule-body"] { --_bg: var(--ds-surface); --_border: var(--ds-rule); --_shadow: none; --_radius: var(--ds-radius-xs); --_pad: var(--ds-space-5); } .ds-card[data-variant="title-rule-body"] .ds-card__header { padding-block: 0; border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-card[data-variant="title-rule-body"] .ds-card__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); } .ds-card[data-variant="title-rule-body"] .ds-card__header + .ds-card__body { padding-block-start: var(--_pad); } .ds-card[data-variant="dashed-optional"][data-state="drop-active"] { --_border: var(--ds-accent); --_bg: var(--ds-accent-tint); } .ds-card[data-variant="intercom-zero-radius"] { --_bg: transparent; --_border: transparent; --_shadow: none; --_radius: 0; gap: var(--ds-space-3); } .ds-card[data-variant="intercom-zero-radius"] .ds-card__frame { display: flex; flex-direction: column; background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); border-radius: 0; } .ds-card[data-variant="intercom-zero-radius"] .ds-card__media { border-radius: 0; } .ds-chart svg[fill="none"] { fill: none; } .ds-chart { --_h: 240px; --_stroke: 2px; --_area-alpha: 20%; --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); display: flex; flex-direction: column; gap: var(--ds-space-4); margin: 0; min-width: 0; max-width: 100%; color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); font-variant-numeric: tabular-nums; } .ds-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); min-width: 0; } .ds-chart__title { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); min-width: 0; } .ds-chart__title.ds-eyebrow { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; } .ds-chart__info { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-space-5); height: var(--ds-space-5); border: 0; background: transparent; color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); cursor: pointer; padding: 0; } .ds-chart__info svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); } .ds-chart__info:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-chart__tools { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-muted); white-space: nowrap; } .ds-chart__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--ds-space-4) var(--ds-space-6); align-items: end; } .ds-chart__stat { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; } .ds-chart__stat-label { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); } .ds-chart__stat-value { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); } .ds-chart__stat-legend { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-2); } .ds-chart__stats[data-layout="block"] { grid-template-columns: minmax(0, 1fr) auto; } .ds-chart__plot { position: relative; height: var(--_h); min-width: 0; max-width: 100%; padding-inline-start: var(--_y-w, 0px); padding-block-end: calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); } .ds-chart__plot[data-axis-y] { --_y-w: 40px; } .ds-chart__plot[data-axis-y="currency"] { --_y-w: 56px; } .ds-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; } .ds-chart__grid line, .ds-chart__baseline { stroke: var(--ds-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; } .ds-chart__baseline { stroke: var(--ds-rule-strong); } .ds-chart__line { fill: none; stroke-width: var(--_stroke); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .ds-chart__line[data-series="1"], .ds-chart__swatch[data-series="1"], .ds-chart__dot[data-series="1"], .ds-chart__wedge[data-series="1"], .ds-chart__arc[data-series="1"] { stroke: var(--_series-1); --_c: var(--_series-1); } .ds-chart__line[data-series="2"], .ds-chart__swatch[data-series="2"], .ds-chart__dot[data-series="2"], .ds-chart__wedge[data-series="2"], .ds-chart__arc[data-series="2"] { stroke: var(--_series-2); --_c: var(--_series-2); } .ds-chart__line[data-series="3"], .ds-chart__swatch[data-series="3"], .ds-chart__dot[data-series="3"], .ds-chart__wedge[data-series="3"], .ds-chart__arc[data-series="3"] { stroke: var(--_series-3); --_c: var(--_series-3); } .ds-chart__line[data-series="4"], .ds-chart__swatch[data-series="4"], .ds-chart__wedge[data-series="4"], .ds-chart__arc[data-series="4"] { stroke: var(--ds-data-2); --_c: var(--ds-data-2); } .ds-chart__line[data-series="5"], .ds-chart__swatch[data-series="5"], .ds-chart__wedge[data-series="5"], .ds-chart__arc[data-series="5"] { stroke: var(--ds-data-6); --_c: var(--ds-data-6); } .ds-chart__line[data-series="6"], .ds-chart__swatch[data-series="6"], .ds-chart__wedge[data-series="6"], .ds-chart__arc[data-series="6"] { stroke: var(--ds-data-7); --_c: var(--ds-data-7); } .ds-chart__line[data-series="7"], .ds-chart__swatch[data-series="7"], .ds-chart__wedge[data-series="7"], .ds-chart__arc[data-series="7"] { stroke: var(--ds-data-5); --_c: var(--ds-data-5); } .ds-chart__line[data-series="8"], .ds-chart__swatch[data-series="8"], .ds-chart__wedge[data-series="8"], .ds-chart__arc[data-series="8"] { stroke: var(--ds-data-8); --_c: var(--ds-data-8); } .ds-chart__line[data-ramp="1"], .ds-chart__swatch[data-ramp="1"], .ds-chart__wedge[data-ramp="1"] { stroke: var(--ds-chart-ramp-1); --_c: var(--ds-chart-ramp-1); } .ds-chart__line[data-ramp="2"], .ds-chart__swatch[data-ramp="2"], .ds-chart__wedge[data-ramp="2"] { stroke: var(--ds-chart-ramp-2); --_c: var(--ds-chart-ramp-2); } .ds-chart__line[data-ramp="3"], .ds-chart__swatch[data-ramp="3"], .ds-chart__wedge[data-ramp="3"] { stroke: var(--ds-chart-ramp-3); --_c: var(--ds-chart-ramp-3); } .ds-chart__line[data-role="comparison"], .ds-chart__swatch[data-role="comparison"], .ds-chart__dot[data-role="comparison"] { stroke: var(--ds-chart-comparison); --_c: var(--ds-chart-comparison); stroke-dasharray: 4 4; stroke-width: 1.5px; } .ds-chart__area { fill: color-mix(in srgb, var(--_c, var(--_series-1)) var(--_area-alpha), transparent); stroke: none; } .ds-chart__area[data-series="1"] { --_c: var(--_series-1); } .ds-chart__area[data-series="2"] { --_c: var(--_series-2); } .ds-chart__area[data-series="3"] { --_c: var(--_series-3); } .ds-chart__dot { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100); inset-block-start: calc((100% - var(--ds-text-xs) * var(--ds-lh-list) - var(--ds-space-2)) * var(--_y, 0) / 100); width: var(--ds-space-3); height: var(--ds-space-3); margin: calc(-1 * var(--ds-space-1-5)) 0 0 calc(-1 * var(--ds-space-1-5)); border-radius: var(--ds-radius-pill); background: var(--_c, var(--_series-1)); border: 2px solid var(--ds-surface); } .ds-chart__dot[data-role="comparison"] { background: var(--ds-chart-comparison); } .ds-chart__y { position: absolute; inset-inline-start: 0; inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); width: var(--_y-w, 0px); pointer-events: none; } .ds-chart__y span { position: absolute; inset-inline-end: var(--ds-space-2); inset-block-start: calc(var(--_y, 0) * 1%); transform: translateY(-50%); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; } .ds-chart__x { position: absolute; inset-inline: var(--_y-w, 0px) 0; inset-block-end: 0; height: calc(var(--ds-text-xs) * var(--ds-lh-list)); pointer-events: none; } .ds-chart__x span { position: absolute; inset-inline-start: calc(var(--_x, 0) * 1%); transform: translateX(-50%); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; text-align: center; line-height: var(--ds-lh-list); } .ds-chart__x span:first-child { transform: none; text-align: start; } .ds-chart__x span:last-child { transform: translateX(-100%); text-align: end; } .ds-chart__x span small { display: block; font-size: inherit; color: var(--ds-ink-muted); } .ds-chart__x[data-lane="mono"] span { font-family: var(--ds-font-mono); letter-spacing: .04em; } .ds-chart__crosshair { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100); inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); width: 0; border-inline-start: var(--ds-border-width) dashed var(--ds-rule-strong); pointer-events: none; } .ds-chart__tooltip { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100 + var(--ds-space-3)); inset-block-start: var(--ds-space-2); z-index: var(--ds-z-tooltip); min-width: 140px; max-width: min(240px, 60%); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-raised); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-float); color: var(--ds-ink); font-size: var(--ds-text-sm); pointer-events: none; } .ds-chart__tooltip[data-side="start"] { inset-inline-start: auto; inset-inline-end: calc(100% - (var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100) + var(--ds-space-3)); } .ds-chart__tooltip b { display: block; font-weight: var(--ds-weight-semibold); margin-block-end: var(--ds-space-1); color: var(--ds-ink-2); } .ds-chart__tooltip-row { display: flex; align-items: center; gap: var(--ds-space-2); justify-content: space-between; } .ds-chart__tooltip-row span:last-child { font-weight: var(--ds-weight-medium); } .ds-chart__plot:not([data-state="hover"]) .ds-chart__crosshair, .ds-chart__plot:not([data-state="hover"]) .ds-chart__tooltip { display: none; } .ds-chart__plot:focus-visible { border-radius: var(--ds-radius-sm); } .ds-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2) var(--ds-space-5); margin: 0; padding: 0; list-style: none; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-chart__legend[data-align="start"] { justify-content: flex-start; } .ds-chart__legend-item { display: inline-flex; align-items: center; gap: var(--ds-space-2); white-space: nowrap; } .ds-chart__legend-item b { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-chart__swatch { display: inline-block; width: var(--ds-space-4); height: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--_c); flex: 0 0 auto; } .ds-chart__swatch[data-shape="line"] { height: 2px; border-radius: 0; position: relative; } .ds-chart__swatch[data-shape="line"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: var(--ds-space-2); height: var(--ds-space-2); transform: translate(-50%, -50%); border-radius: var(--ds-radius-pill); background: var(--_c); } .ds-chart__swatch[data-shape="square"] { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-xs); } .ds-chart__swatch[data-shape="dot"] { width: var(--ds-space-2); height: var(--ds-space-2); } .ds-chart__swatch[data-role="comparison"] { background: repeating-linear-gradient(to right, var(--ds-chart-comparison) 0 3px, transparent 3px 6px); height: 2px; border-radius: 0; } .ds-chart__swatch[data-tone="success"] { --_c: var(--ds-success); background: var(--_c); } .ds-chart__swatch[data-tone="warning"] { --_c: var(--ds-warning); background: var(--_c); } .ds-chart__swatch[data-tone="danger"] { --_c: var(--ds-danger); background: var(--_c); } .ds-chart__plot[data-kind="donut"], .ds-chart__plot[data-kind="pie"] { height: auto; padding: 0; display: grid; place-items: center; } .ds-chart__plot[data-kind="donut"] .ds-chart__svg { width: min(100%, 320px); height: auto; aspect-ratio: 200 / 110; } .ds-chart__plot[data-kind="pie"] .ds-chart__svg { width: min(100%, 220px); height: auto; aspect-ratio: 1; } .ds-chart__arc { fill: none; stroke-width: 18; stroke-linecap: butt; } .ds-chart__arc[data-track] { stroke: var(--ds-surface-2); } .ds-chart__arc:not([data-track]) { paint-order: stroke; } .ds-chart__wedge { fill: var(--_c); stroke: var(--ds-surface); stroke-width: 2; } .ds-chart__wedge-label { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); fill: var(--ds-ink-on-accent); pointer-events: none; } .ds-chart__wedge-label[data-on="light"] { fill: var(--ds-ink); } .ds-chart__centre { position: absolute; inset-inline: 0; inset-block-end: 0; text-align: center; display: flex; flex-direction: column; gap: var(--ds-space-0-5); pointer-events: none; } .ds-chart__centre b { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-tight); color: var(--ds-ink); } .ds-chart__centre span { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-chart__plot[data-kind="donut"] { position: relative; } .ds-chart__bar { display: flex; gap: 2px; height: var(--ds-space-3); border-radius: var(--ds-radius-pill); overflow: hidden; background: var(--ds-surface-2); } .ds-chart__bar-segment { flex: 0 0 auto; width: var(--_w, 0%); background: var(--_c); } .ds-chart__bar-segment[data-tone="success"] { --_c: var(--ds-success); } .ds-chart__bar-segment[data-tone="warning"] { --_c: var(--ds-warning); } .ds-chart__bar-segment[data-tone="danger"] { --_c: var(--ds-danger); } .ds-chart__bar-segment:first-child { border-start-start-radius: var(--ds-radius-pill); border-end-start-radius: var(--ds-radius-pill); } .ds-chart__bar-segment:last-child { border-start-end-radius: var(--ds-radius-pill); border-end-end-radius: var(--ds-radius-pill); } .ds-chart__legend[data-kind="status"] { justify-content: flex-start; gap: var(--ds-space-3) var(--ds-space-6); } .ds-chart__legend[data-kind="status"] .ds-chart__legend-item svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: var(--_c); stroke-width: var(--ds-icon-stroke); } .ds-chart__table { width: 100%; font-size: var(--ds-text-sm); border-collapse: collapse; } .ds-chart__table th, .ds-chart__table td { padding: var(--ds-space-1) var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); text-align: end; } .ds-chart__table th:first-child, .ds-chart__table td:first-child { text-align: start; } .ds-chart__table thead th { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); font-weight: var(--ds-weight-medium); } .ds-chart:not([data-table="visible"]) .ds-chart__table { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ds-chart__table-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-button); cursor: pointer; } .ds-chart__table-toggle:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-chart[aria-busy="true"] .ds-chart__plot { background: var(--ds-skeleton); border-radius: var(--ds-radius-md); } .ds-chart[aria-busy="true"] .ds-chart__plot > * { visibility: hidden; } .ds-chart[aria-busy="true"] .ds-chart__stat-value, .ds-chart[aria-busy="true"] .ds-chart__legend { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); } .ds-chart[data-state="empty"] .ds-chart__plot { border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); display: grid; place-items: center; } .ds-chart[data-state="empty"] .ds-chart__plot > :not(.ds-chart__message) { visibility: hidden; } .ds-chart__message { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--ds-space-4); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-chart__message a { color: var(--ds-ink-link); } .ds-chart[data-state="error"] .ds-chart__plot { border: var(--ds-border-width) dashed var(--ds-danger); border-radius: var(--ds-radius-md); } .ds-chart[data-state="error"] .ds-chart__plot > :not(.ds-chart__message) { visibility: hidden; } .ds-chart[data-state="error"] .ds-chart__message { color: var(--ds-danger-ink); } .ds-chart[data-state="error"] .ds-chart__message code { font-family: var(--ds-font-mono); color: var(--ds-ink-2); } .ds-chart[data-variant="retool-monochrome-series-ramp"] { --_stroke: 2px; } .ds-chart[data-variant="origin-current-vs-ghost"] .ds-chart__grid { display: none; } .ds-chart[data-variant="origin-current-vs-ghost"] .ds-chart__x span { font-family: var(--ds-font-mono); letter-spacing: .04em; } .ds-chart[data-variant="quicken-quiet-area"] { --_area-alpha: 20%; } .ds-chart[data-variant="quicken-quiet-area"] .ds-chart__legend { display: none; } .ds-chart[data-variant="origin-semi-donut"] .ds-chart__legend { justify-content: center; } .ds-chart[data-variant="attio-semantic-trio"] .ds-chart__plot { height: auto; padding: 0; } .ds-chart[data-variant="retool-pie"] .ds-chart__legend .ds-chart__swatch { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-xs); } .ds-chart[data-kind="rank"] { container-type: inline-size; } .ds-chart__rank { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; } .ds-chart__row { --_c: var(--_series-1); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ds-space-3); min-height: var(--ds-row-h); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-md); min-width: 0; transition: background var(--ds-dur-fast) var(--ds-ease-standard); } .ds-chart__row[data-series="2"] { --_c: var(--_series-2); } .ds-chart__row[data-series="3"] { --_c: var(--_series-3); } .ds-chart__row[data-series="4"] { --_c: var(--ds-data-2); } .ds-chart__row[data-series="5"] { --_c: var(--ds-data-6); } .ds-chart__row[data-series="6"] { --_c: var(--ds-data-7); } .ds-chart__row[data-series="7"] { --_c: var(--ds-data-5); } .ds-chart__row[data-series="8"] { --_c: var(--ds-data-8); } .ds-chart__row[data-role="other"] { --_c: var(--ds-chart-comparison); } .ds-chart__row[data-role="other"] .ds-chart__row-label { color: var(--ds-ink-muted); } .ds-chart__row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-chart__row-label:is(a) { text-decoration: none; border-radius: var(--ds-radius-xs); } .ds-chart__row-label:is(a):hover { text-decoration: underline; text-underline-offset: 3px; } .ds-chart__row-bar { display: block; height: var(--_bar-h, var(--ds-space-2)); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); overflow: hidden; min-width: 0; } .ds-chart__row-bar > i { display: block; height: 100%; width: var(--_value, 0%); border-radius: var(--ds-radius-pill); background: var(--_c); } .ds-chart__row-value { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-align: end; white-space: nowrap; } .ds-chart__row-share { color: var(--ds-ink-muted); text-align: end; white-space: nowrap; min-width: 4ch; } .ds-chart__row-rank { color: var(--ds-ink-muted); min-width: 2ch; text-align: end; } .ds-chart__row-share, .ds-chart__row-rank { display: none; } .ds-chart__row:hover, .ds-chart__row:focus-within, .ds-chart__row[data-state="hover"] { background: var(--ds-hover-bg); } .ds-chart__row[aria-current="true"] { background: var(--ds-selected-bg); } .ds-chart__row[aria-current="true"] .ds-chart__row-label { color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight, var(--ds-weight-semibold)); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row { --_tint: 16%; padding-inline: 0; min-height: var(--ds-control-h-sm); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row:hover, .ds-chart[data-variant="seline-row-fill"] .ds-chart__row:focus-within, .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[data-state="hover"] { background: transparent; --_tint: 28%; } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-bar { grid-area: 1 / 1; align-self: stretch; height: auto; background: transparent; border-radius: var(--ds-radius-sm); overflow: visible; } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-bar > i { border-radius: var(--ds-radius-sm); background: color-mix(in srgb, var(--_c) var(--_tint), transparent); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-label { grid-area: 1 / 1; position: relative; z-index: 1; padding-inline: var(--ds-space-3); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-value { grid-area: 1 / 2; padding-inline-end: var(--ds-space-2); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[aria-current="true"] { background: transparent; --_tint: 28%; } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[data-role="other"] { --_tint: 22%; } .ds-chart[data-variant="replit-inline-track"] .ds-chart__row { grid-template-columns: minmax(0, var(--_label-w, 11rem)) minmax(0, 1fr) auto; } .ds-chart[data-variant="replit-inline-track"] { --_bar-h: var(--ds-space-1-5); } @container (max-width: 440px) { .ds-chart[data-variant="replit-inline-track"] .ds-chart__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--ds-space-1); padding-block: var(--ds-space-2); } .ds-chart[data-variant="replit-inline-track"] .ds-chart__row-bar { grid-column: 1 / -1; grid-row: 2; } } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-rank, .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-share { display: block; } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row { grid-template-columns: 2ch minmax(0, 1fr) minmax(0, 1fr) auto 5ch; border-radius: var(--ds-radius-sm); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__rank { gap: 0; } .ds-chart[data-variant="apollo-ranked-share"] { --_bar-h: var(--ds-space-3); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar { border-radius: var(--ds-radius-xs); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar > i { border-radius: var(--ds-radius-xs); } @container (max-width: 520px) { .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row { grid-template-columns: 2ch minmax(0, 1fr) auto 5ch; row-gap: var(--ds-space-1); padding-block: var(--ds-space-2); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar { grid-column: 2 / -1; grid-row: 2; } } .ds-chart__line[data-role="placeholder"], .ds-chart__area[data-role="placeholder"], .ds-chart__wedge[data-role="placeholder"], .ds-chart__skeleton { display: none; } .ds-chart[data-state="empty"][data-placeholder] .ds-chart__plot, .ds-chart[aria-busy="true"][data-placeholder] .ds-chart__plot { border: 0; background: transparent; border-radius: 0; display: block; } .ds-chart[data-state="empty"][data-placeholder] .ds-chart__plot > :not(.ds-chart__message), .ds-chart[aria-busy="true"][data-placeholder] .ds-chart__plot > :not(.ds-chart__message) { visibility: visible; } .ds-chart[data-placeholder] :is(.ds-chart__line, .ds-chart__area, .ds-chart__wedge, .ds-chart__dot, .ds-chart__crosshair, .ds-chart__tooltip, .ds-chart__centre b):not([data-role="placeholder"]):not([data-track]) { visibility: hidden; } .ds-chart[data-placeholder] .ds-chart__wedge-label { visibility: hidden; } .ds-chart[data-placeholder] .ds-chart__plot[data-kind="donut"] .ds-chart__message { place-items: end center; } .ds-chart[data-placeholder] .ds-chart__arc:not([data-track]):not([data-role="placeholder"]) { visibility: hidden; } .ds-chart[data-placeholder] :is(.ds-chart__y, .ds-chart__x) { opacity: .7; } .ds-chart[data-placeholder] .ds-chart__message { z-index: 1; pointer-events: none; } .ds-chart[data-placeholder] .ds-chart__message > span { background: var(--ds-surface); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-sm); max-width: 32ch; } .ds-chart[data-placeholder] .ds-chart__message > span b { display: block; color: var(--ds-ink-2); font-weight: var(--ds-weight-semibold); } .ds-chart[data-placeholder] .ds-chart__message > span a { pointer-events: auto; } .ds-chart[data-state="empty"][data-placeholder] .ds-chart__legend, .ds-chart[data-state="empty"][data-placeholder] .ds-chart__bar-segment { visibility: hidden; } .ds-chart[data-state="empty"][data-placeholder] .ds-chart__stat-value { color: var(--ds-ink-muted); } .ds-chart[data-state="empty"][data-placeholder="savvycal-bare-axes"] .ds-chart__arc[data-track] { stroke-dasharray: 2 3; } .ds-chart[data-state="empty"][data-placeholder="savvycal-bare-axes"] .ds-chart__bar { background: transparent; border: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__line[data-role="placeholder"] { display: inline; stroke: var(--ds-chart-comparison); stroke-dasharray: 4 5; opacity: .8; } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__area[data-role="placeholder"] { display: inline; fill: color-mix(in srgb, var(--ds-chart-comparison) 14%, transparent); } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__wedge[data-role="placeholder"] { display: inline; fill: none; stroke: var(--ds-chart-comparison); stroke-dasharray: 4 5; } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__arc[data-track] { stroke: var(--ds-surface-2); stroke-dasharray: 3 4; } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__bar { background: repeating-linear-gradient(to right, var(--ds-surface-2) 0 12px, transparent 12px 16px); } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__row[data-ghost] .ds-chart__row-bar > i { width: var(--_value, 0%); background: color-mix(in srgb, var(--ds-chart-comparison) 10%, transparent); outline: 1px dashed var(--ds-chart-comparison); outline-offset: -1px; opacity: .8; } .ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__plot .ds-chart__message > span { box-shadow: var(--ds-shadow-lip); } @keyframes ds-chart-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] :is(.ds-chart__skeleton > i, .ds-chart__row[data-ghost] .ds-chart__row-bar > i, .ds-chart__row[data-ghost] .ds-chart__row-label, .ds-chart__row[data-ghost] .ds-chart__row-value) { background: linear-gradient(90deg, var(--ds-skeleton) 0 40%, var(--ds-surface-2) 50%, var(--ds-skeleton) 60% 100%) 0 0 / 300% 100%; animation: ds-chart-shimmer 1.6s linear infinite; color: transparent; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__skeleton { display: flex; align-items: flex-end; gap: var(--ds-space-2); position: absolute; inset-inline: var(--_y-w, 0px) 0; inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); padding-inline: var(--ds-space-2); } .ds-chart__skeleton > i { flex: 1 1 0; min-width: 0; height: var(--_value, 40%); border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] :is(.ds-chart__line, .ds-chart__area, .ds-chart__wedge, .ds-chart__arc:not([data-track]), .ds-chart__bar-segment, .ds-chart__centre) { visibility: hidden; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] :is(.ds-chart__y, .ds-chart__x) { opacity: .45; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__stat-value { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); min-width: 6ch; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__legend { background: none; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__message > span { background: transparent; color: var(--ds-ink-muted); } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__bar { background: linear-gradient(90deg, var(--ds-skeleton) 0 40%, var(--ds-surface-2) 50%, var(--ds-skeleton) 60% 100%) 0 0 / 300% 100%; animation: ds-chart-shimmer 1.6s linear infinite; } .ds-chart[data-placeholder] .ds-chart__row[data-ghost] { pointer-events: none; } .ds-chart[data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-label, .ds-chart[data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-value { min-height: 1em; } .ds-chart[aria-busy="true"][data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-label { width: var(--_label-skel, 70%); border-radius: var(--ds-radius-xs); } .ds-chart[aria-busy="true"][data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-value { width: 5ch; border-radius: var(--ds-radius-xs); } .ds-chart__plot[data-kind="rank"] { height: auto; padding: 0; min-height: calc(var(--ds-row-h) * 4); } .ds-chart[data-state="empty"]:not([data-placeholder]) .ds-chart__plot[data-kind="rank"] { display: block; } .ds-chart[data-state="empty"][data-placeholder] .ds-chart__row[data-ghost] { border-block-end: var(--ds-border-width) dashed var(--ds-rule-soft); border-radius: 0; } .ds-chart[data-variant="seline-row-fill"][aria-busy="true"] .ds-chart__row[data-ghost] .ds-chart__row-label { background: none; animation: none; } .ds-chart__plot[data-kind="rank"] > .ds-chart__rank { width: 100%; justify-self: stretch; } .ds-chart[data-placeholder] .ds-chart__message { visibility: visible; } .ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__arc[data-track] { visibility: visible; stroke: var(--ds-skeleton); } .ds-chart[data-placeholder] .ds-chart__plot:has(> .ds-chart__bar) { display: block; width: 100%; } .ds-choice-card { --_media: 40px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--ds-space-4); min-height: calc(var(--ds-control-h-lg) + 2 * var(--ds-space-6)); padding: var(--ds-space-4) var(--ds-card-pad); border: var(--ds-border-width) solid var(--ds-card-border); border-radius: var(--ds-radius-xl); background: var(--ds-card-bg); box-shadow: var(--ds-card-shadow); color: var(--ds-ink); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-choice-card__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .ds-choice-card__input:focus-visible { outline: none; } .ds-choice-card:has(.ds-choice-card__input:focus-visible) { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-choice-card[data-ring="outset"]:has(.ds-choice-card__input:focus-visible) { outline-offset: var(--ds-ring-outset); } .ds-choice-card:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-choice-card:has(.ds-choice-card__input:checked) { border-color: var(--ds-border-selected); background: var(--ds-selected-bg); } .ds-choice-card:has(.ds-choice-card__input:disabled) { cursor: not-allowed; color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); } .ds-choice-card[aria-busy="true"] .ds-choice-card__body > * { color: transparent; background: var(--ds-surface-3); border-radius: var(--ds-radius-xs); } .ds-choice-card__media { display: grid; place-items: center; width: var(--_media); height: var(--_media); border-radius: var(--ds-radius-pill); background: var(--ds-accent-2-tint); color: var(--ds-accent-2-ink); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); overflow: hidden; } .ds-choice-card__media[data-tone="neutral"] { background: var(--ds-surface-2); color: var(--ds-ink-muted); } .ds-choice-card__media svg, .ds-choice-card__chevron, .ds-choice-card__check svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-choice-card__body { display: flex; flex-direction: column; gap: var(--ds-space-0-5); min-width: 0; } .ds-choice-card__label { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); } .ds-choice-card__desc { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); } .ds-choice-card:has(.ds-choice-card__input:disabled) .ds-choice-card__desc { color: var(--ds-ink-faint); } .ds-choice-card__chevron { color: var(--ds-ink-muted); } .ds-choice-card__check { display: grid; place-items: center; width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); border-radius: var(--ds-radius-pill); background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-standard); } .ds-choice-card__check svg { width: 12px; height: 12px; stroke-width: 2.5; } .ds-choice-card:has(.ds-choice-card__input:checked) .ds-choice-card__check { opacity: 1; } .ds-choice-card[data-variant="luma-explained-option-row"] { --_media: var(--ds-icon-size-row); min-height: var(--ds-control-h-lg); padding: var(--ds-space-2) var(--ds-space-3); border-color: transparent; background: transparent; box-shadow: none; border-radius: var(--ds-radius-sm); column-gap: var(--ds-space-3); align-items: start; } .ds-choice-card[data-variant="luma-explained-option-row"] .ds-choice-card__media { background: none; color: var(--ds-ink-muted); border-radius: 0; margin-block-start: 1px; } .ds-choice-card[data-variant="luma-explained-option-row"] .ds-choice-card__label { font-size: var(--ds-text-md); } .ds-choice-card[data-variant="luma-explained-option-row"]:hover { background: var(--ds-hover-bg); border-color: transparent; } .ds-choice-card[data-variant="luma-explained-option-row"]:has(.ds-choice-card__input:checked) { background: transparent; border-color: transparent; } .ds-choice-card-group { display: flex; flex-direction: column; gap: var(--ds-space-2); margin: 0; padding: 0; border: 0; min-width: 0; } .ds-choice-card-group__legend { padding: 0; margin-bottom: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-choice-card-group__error { display: none; margin: var(--ds-space-1) 0 0; font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-choice-card-group[data-state="error"] .ds-choice-card-group__error { display: block; grid-column: 1 / -1; flex-basis: 100%; text-align: inherit; } .ds-choice-card-group[data-state="error"] .ds-choice-card { border-color: var(--ds-danger-line); } .ds-choice-card-group[aria-busy="true"] .ds-choice-card__body > * { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); } .ds-choice-card-group .ds-choice-card { min-height: var(--ds-control-h-lg); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); column-gap: var(--ds-space-3); } .ds-choice-card-group .ds-choice-card__label { font-size: var(--ds-text-md); } .ds-choice-card-group .ds-choice-card__media { --_media: 32px; border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-ink-2); } .ds-choice-card-group .ds-choice-card__media img { width: 20px; height: 20px; } .ds-choice-card-group[data-variant="jstov"] .ds-choice-card { align-items: start; } .ds-choice-card-group[data-variant="jstov"] .ds-choice-card__check { margin-block-start: var(--ds-space-1-5); } .ds-choice-card-group[data-variant="coda-icon-rows"] .ds-choice-card { min-height: calc(var(--ds-control-h-lg) + var(--ds-space-2)); border-radius: var(--ds-radius-sm); box-shadow: none; } .ds-choice-card-group[data-variant="coda-icon-rows"] .ds-choice-card__media { background: none; } .ds-choice-card-group[data-variant="coda-icon-rows"] .ds-choice-card__desc, .ds-choice-card-group[data-variant="coda-icon-tiles"] .ds-choice-card__desc, .ds-choice-card-group[data-variant="coda-logo-check"] .ds-choice-card__desc, .ds-choice-card-group[data-variant="clickup-pills"] .ds-choice-card__desc, .ds-choice-card-group[data-variant="mural-outlined-buttons"] .ds-choice-card__desc { display: none; } .ds-choice-card-group:is([data-variant="coda-icon-rows"], [data-variant="coda-icon-tiles"], [data-variant="clickup-pills"], [data-variant="mural-outlined-buttons"]) .ds-choice-card__check { display: none; } .ds-choice-card-group:is([data-variant="coda-icon-tiles"], [data-variant="coda-logo-check"]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--ds-space-2); } .ds-choice-card-group:is([data-variant="coda-icon-tiles"], [data-variant="coda-logo-check"]) .ds-choice-card { border-radius: var(--ds-radius-sm); box-shadow: none; } .ds-choice-card-group:is([data-variant="coda-icon-tiles"], [data-variant="coda-logo-check"]) .ds-choice-card__media { background: none; --_media: 24px; } .ds-choice-card-group[data-variant="coda-logo-check"] .ds-choice-card__check { opacity: 1; background: transparent; border: var(--ds-border-width) solid var(--ds-border-strong); color: transparent; } .ds-choice-card-group[data-variant="coda-logo-check"] .ds-choice-card:has(.ds-choice-card__input:checked) .ds-choice-card__check { background: var(--ds-primary-fill); border-color: var(--ds-primary-fill); color: var(--ds-ink-on-primary); } .ds-choice-card-group[data-variant="coda-logo-check"] .ds-choice-card:has(.ds-choice-card__input:checked) { background: var(--ds-card-bg); border-color: var(--ds-card-border); } .ds-choice-card-group[data-variant="clickup-pills"] { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2); max-width: 620px; } .ds-choice-card-group[data-variant="clickup-pills"] .ds-choice-card { grid-template-columns: auto minmax(0, auto); min-height: var(--ds-control-h); padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-sm); box-shadow: none; column-gap: var(--ds-space-2); } .ds-choice-card-group[data-variant="clickup-pills"] .ds-choice-card__media { display: none; } .ds-choice-card-group[data-variant="clickup-pills"] .ds-choice-card__label { font-size: var(--ds-text-sm); white-space: nowrap; } .ds-choice-card-group[data-variant="clickup-pills"] .ds-choice-card:has(.ds-choice-card__input:checked) { background: var(--ds-selected-bg); border-color: var(--ds-border-selected); color: var(--ds-selected-ink); } .ds-choice-card-group[data-variant="mural-outlined-buttons"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--ds-space-2); } .ds-choice-card-group[data-variant="mural-outlined-buttons"] .ds-choice-card { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: var(--ds-control-h); padding: var(--ds-space-1-5) var(--ds-space-3); border-radius: var(--ds-radius-sm); border-color: var(--ds-border-strong); box-shadow: none; text-align: center; } .ds-choice-card-group[data-variant="mural-outlined-buttons"] .ds-choice-card__media { display: none; } .ds-choice-card-group[data-variant="mural-outlined-buttons"] .ds-choice-card__label { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); } .ds-choice-card-group[data-variant="mural-outlined-buttons"] .ds-choice-card:has(.ds-choice-card__input:checked) { background: var(--ds-selected-bg); border-color: var(--ds-border-selected); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); } .ds-citation-sources svg[fill="none"], .ds-citation-sources-cite svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-citation-sources { --_fill: var(--ds-surface-2); --_edge: transparent; --_radius: var(--ds-radius-md); --_pad: var(--ds-space-3); --_min: 160px; --_disc: var(--ds-space-5); display: flex; flex-direction: column; gap: var(--ds-space-3); min-width: 0; max-width: 100%; color: var(--ds-ink); } .ds-citation-sources__header { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-space-7); } .ds-citation-sources__icon { flex: none; inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); color: var(--ds-ink-2); } .ds-citation-sources__title { margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-heading); color: var(--ds-ink); } .ds-citation-sources__count { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; color: var(--ds-ink-muted); } .ds-citation-sources__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr)); gap: var(--ds-space-2); list-style: none; margin: 0; padding: 0; min-width: 0; } .ds-citation-sources__card { min-width: 0; display: flex; } .ds-citation-sources__link { display: flex; flex-direction: column; gap: var(--ds-space-2); inline-size: 100%; min-width: 0; min-block-size: calc(var(--ds-space-7) * 3); padding: var(--_pad); border: var(--ds-border-width) solid var(--_edge); border-radius: var(--_radius); background: var(--_fill); color: var(--ds-ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-citation-sources__link:hover, .ds-citation-sources__link[data-state="hover"] { background: var(--ds-surface-3); color: var(--ds-ink); } .ds-citation-sources__link:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-citation-sources__link[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--ds-border-selected), var(--ds-card-shadow); } .ds-citation-sources__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-width: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-body); color: var(--ds-ink); } .ds-citation-sources__meta { display: flex; align-items: center; gap: var(--ds-space-1-5); min-width: 0; margin-block-start: auto; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-citation-sources__domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-citation-sources__index { flex: none; white-space: nowrap; font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; color: var(--ds-ink-2); } .ds-citation-sources__index::before { content: "· "; color: var(--ds-ink-muted); } .ds-citation-sources__favicon { flex: none; display: inline-grid; place-items: center; inline-size: var(--_disc); block-size: var(--_disc); border-radius: var(--ds-radius-pill); background: var(--ds-surface); box-shadow: inset 0 0 0 var(--ds-border-width) var(--ds-rule), var(--ds-card-shadow); color: var(--ds-ink-muted); overflow: hidden; } .ds-citation-sources__favicon > svg, .ds-citation-sources__favicon > img { inline-size: 60%; block-size: 60%; object-fit: contain; } .ds-citation-sources__favicon[data-hue="1"] { color: var(--ds-data-1); } .ds-citation-sources__favicon[data-hue="2"] { color: var(--ds-data-2); } .ds-citation-sources__favicon[data-hue="3"] { color: var(--ds-data-3); } .ds-citation-sources__favicon[data-hue="4"] { color: var(--ds-data-4); } .ds-citation-sources__favicon[data-hue="5"] { color: var(--ds-data-5); } .ds-citation-sources__favicon[data-hue="6"] { color: var(--ds-data-6); } .ds-citation-sources__favicon[data-hue="7"] { color: var(--ds-data-7); } .ds-citation-sources__favicon[data-hue="8"] { color: var(--ds-data-8); } .ds-citation-sources:not([data-mark="colour"]) .ds-citation-sources__favicon { color: var(--ds-ink-muted); } .ds-citation-sources:not([data-mark="colour"]) .ds-citation-sources__favicon > img { filter: grayscale(1); opacity: .8; } .ds-citation-sources__favicon-row { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; } .ds-citation-sources__more { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); margin-block-start: auto; } .ds-citation-sources__link:hover .ds-citation-sources__more { color: var(--ds-ink); } .ds-citation-sources[data-kind="row"] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); } .ds-citation-sources[data-kind="row"] .ds-citation-sources__favicon-row { gap: 0; } .ds-citation-sources[data-kind="row"] .ds-citation-sources__favicon { margin-inline-end: calc(-1 * var(--ds-space-1)); box-shadow: 0 0 0 2px var(--ds-ground), inset 0 0 0 var(--ds-border-width) var(--ds-rule), var(--ds-card-shadow); } .ds-citation-sources[data-kind="row"] .ds-citation-sources__count { font-family: inherit; font-size: var(--ds-text-sm); color: var(--ds-ink-2); padding-inline-start: var(--ds-space-2); } .ds-citation-sources[data-fit="row"] .ds-citation-sources__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .ds-citation-sources[data-fit="row"] .ds-citation-sources__favicon-row { flex-wrap: nowrap; overflow: hidden; } .ds-citation-sources[data-fit="row"] .ds-citation-sources__favicon-row > :nth-child(n+5) { display: none; } @media (max-width: 560px) { .ds-citation-sources[data-fit="row"] .ds-citation-sources__grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr)); } } .ds-citation-sources[data-state="loading"] .ds-citation-sources__link { pointer-events: none; } .ds-citation-sources__skeleton { display: block; block-size: var(--ds-text-sm); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-citation-sources__skeleton[data-w="short"] { inline-size: 55%; } .ds-citation-sources__empty { display: flex; align-items: center; gap: var(--ds-space-2); min-block-size: calc(var(--ds-space-7) * 2); padding: var(--_pad); border: var(--ds-border-width) dashed var(--ds-border); border-radius: var(--_radius); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-citation-sources__empty > svg { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-citation-sources-cite { --_pill: var(--ds-space-5); position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; inline-size: var(--_pill); block-size: var(--_pill); margin-inline: var(--ds-space-0-5) 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); color: var(--ds-ink-2); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; line-height: 1; text-decoration: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-citation-sources-cite:hover, .ds-citation-sources-cite[data-state="open"] { background: var(--ds-surface-3); color: var(--ds-ink); } .ds-citation-sources-cite:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-citation-sources-cite__num { display: inline-block; } .ds-citation-sources-cite__card { position: absolute; inset-block-end: calc(100% + var(--ds-space-2)); inset-inline-start: 0; z-index: var(--ds-z-popover); display: none; flex-direction: column; gap: var(--ds-space-2); inline-size: max-content; max-inline-size: min(320px, calc(100vw - var(--ds-space-8))); padding: var(--ds-space-3); border-radius: var(--ds-radius-md); background: var(--ds-surface-raised); border: var(--ds-border-width) solid var(--ds-rule); box-shadow: var(--ds-shadow-float); color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); text-align: start; white-space: normal; } .ds-citation-sources-cite[data-placement="end"] .ds-citation-sources-cite__card { inset-inline-start: auto; inset-inline-end: 0; } .ds-citation-sources-cite:hover .ds-citation-sources-cite__card, .ds-citation-sources-cite:focus-visible .ds-citation-sources-cite__card, .ds-citation-sources-cite[data-state="open"] .ds-citation-sources-cite__card { display: flex; } .ds-citation-sources-cite__quote { margin: 0; padding-inline-start: var(--ds-space-2-5); border-inline-start: 2px solid var(--ds-accent-2); color: var(--ds-ink-2); font-family: var(--ds-font-body-alt); font-style: italic; } .ds-citation-sources-cite__source { display: flex; align-items: center; gap: var(--ds-space-1-5); min-width: 0; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-citation-sources-cite__source .ds-citation-sources__favicon { --_disc: var(--ds-space-4); color: var(--ds-ink-muted); } .ds-citation-sources-cite__source strong { color: var(--ds-ink); font-weight: var(--ds-weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .ds-citation-sources-cite__card { position: fixed; inset-inline: var(--ds-space-4); inset-block: auto var(--ds-space-4); inline-size: auto; max-inline-size: none; } } .ds-citation-sources[data-variant="perplexity-provenance-first"] { --_min: 150px; --_disc: 22px; } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr)); } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] { grid-column: span 2; } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__link { flex-direction: row; align-items: center; gap: var(--ds-space-3); } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__favicon { --_disc: var(--ds-space-10); } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__name { -webkit-line-clamp: 1; } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__name { flex: 1 1 auto; } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] .ds-citation-sources__meta { flex: 0 1 auto; max-inline-size: 45%; margin-block-start: 0; margin-inline-start: auto; font-size: var(--ds-text-sm); } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="compact"] .ds-citation-sources__link { flex-direction: column-reverse; } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="compact"] .ds-citation-sources__meta { margin-block-start: 0; } .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="compact"] .ds-citation-sources__favicon { --_disc: var(--ds-space-4); } .ds-citation-sources-cite[data-variant="perplexity-provenance-first"] { --_pill: 22px; background: var(--ds-surface-3); color: var(--ds-ink-muted); font-family: var(--ds-font-sans); } @media (max-width: 560px) { .ds-citation-sources[data-variant="perplexity-provenance-first"] .ds-citation-sources__card[data-kind="featured"] { grid-column: auto; } } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] { --_fill: transparent; --_pad: 0px; --_disc: var(--ds-space-4); gap: var(--ds-space-4); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__header { min-height: var(--ds-control-h-sm); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-medium); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__count { margin-inline-start: auto; font-family: inherit; font-size: var(--ds-text-md); color: var(--ds-ink-2); } .ds-citation-sources__toggle { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-control-h-sm); block-size: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-2); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-citation-sources__toggle svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); transition: transform var(--ds-dur-base) var(--ds-ease-standard); } .ds-citation-sources__toggle:hover, .ds-citation-sources__toggle[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-citation-sources__toggle[aria-expanded="false"] svg { transform: rotate(180deg); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); } .ds-citation-sources[data-state="collapsed"] .ds-citation-sources__grid { display: none; } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link { min-block-size: 0; gap: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-sm); background: transparent; } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__meta { align-self: flex-start; max-inline-size: 100%; margin-block-start: 0; min-block-size: var(--ds-space-7); padding-block: var(--ds-space-0-5); padding-inline: var(--ds-space-1) var(--ds-space-2-5); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-surface); font-size: var(--ds-text-sm); color: var(--ds-ink-2); transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__index { order: -1; display: inline-grid; place-items: center; min-inline-size: var(--ds-space-5); block-size: var(--ds-space-5); border-radius: var(--ds-radius-pill); background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__index::before { content: none; } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__favicon { box-shadow: none; background: transparent; } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__name { font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) { background: transparent; } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) .ds-citation-sources__meta { border-color: var(--ds-border-strong); background: var(--ds-surface-2); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) .ds-citation-sources__name { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--ds-rule-strong); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link[data-state="focus"], .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__toggle[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link[aria-current="true"] { box-shadow: none; } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__link[aria-current="true"] .ds-citation-sources__meta { border-color: var(--ds-selected-line); background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-citation-sources[data-variant="copilot-numbered-reference-list"] .ds-citation-sources__skeleton[data-w="pill"] { inline-size: 9em; block-size: var(--ds-space-7); border-radius: var(--ds-radius-pill); } .ds-citation-sources-cite[data-variant="copilot-numbered-reference-list"] { --_pill: 18px; background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-family: var(--ds-font-sans); } .ds-citation-sources-cite[data-variant="copilot-numbered-reference-list"]:is(:hover, [data-state="open"]) { background: var(--ds-accent-soft); color: var(--ds-accent-ink); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] { --_disc: var(--ds-space-4); display: block; line-height: var(--ds-lh-list); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__header { display: inline-flex; min-height: var(--ds-control-h-sm); margin-inline-end: var(--ds-space-2); vertical-align: middle; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__title { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__count { font-size: var(--ds-text-xs); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__grid { display: inline; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__card { display: inline-flex; max-inline-size: 100%; margin-block: var(--ds-space-1); margin-inline-end: var(--ds-space-2); vertical-align: middle; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link { flex-direction: row; align-items: center; gap: var(--ds-space-1-5); inline-size: auto; min-block-size: var(--ds-control-h-sm); padding: 0 var(--ds-space-2-5); border: 0; border-radius: var(--ds-radius-xs); font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link:is(:hover, [data-state="hover"]) { color: var(--ds-ink); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__link[aria-current="true"] { box-shadow: none; background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__favicon { border-radius: var(--ds-radius-xs); box-shadow: none; background: var(--ds-surface); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__favicon > svg { inline-size: 75%; block-size: 75%; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__meta { margin-block-start: 0; font-size: inherit; color: inherit; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__index { display: none; } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__more { margin: 0; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-2); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__skeleton { display: inline-block; inline-size: 7em; block-size: var(--ds-text-xs); } .ds-citation-sources[data-variant="cohere-highlighted-spans"] .ds-citation-sources__empty { display: inline-flex; min-block-size: var(--ds-control-h-sm); padding-block: 0; vertical-align: middle; } .ds-citation-sources-cite[data-variant="cohere-highlighted-spans"] { display: inline; inline-size: auto; block-size: auto; margin: 0; padding: .1em .15em; border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); color: inherit; font: inherit; line-height: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ds-citation-sources-cite[data-variant="cohere-highlighted-spans"]:is(:hover, [data-state="open"]) { background: var(--ds-accent-2-tint); color: var(--ds-accent-2-ink); } .ds-citation-sources-cite[data-variant="cohere-highlighted-spans"][data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-data-table { --_row-h: var(--ds-control-h); --_head-h: var(--ds-control-h-sm); --_pad-x: var(--ds-control-pad-x); --_radius: var(--ds-radius-md); --_head-bg: transparent; --_rule-row: var(--ds-rule-soft); --_rule-col: transparent; --_cover: var(--ds-surface); display: flex; flex-direction: column; min-width: 0; background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--_radius); color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-data-table svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-data-table[data-rows="entity"] { --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-5)); } .ds-data-table[data-rows="comfortable"] { --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-8)); } .ds-data-table[data-columns="ruled"] { --_rule-col: var(--ds-rule-soft); } .ds-data-table[data-header="tint"] { --_head-bg: var(--ds-surface-2); } .ds-data-table__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-radius: calc(var(--_radius) - var(--ds-border-width)) calc(var(--_radius) - var(--ds-border-width)) 0 0; background: linear-gradient(to left, var(--_cover, var(--ds-surface)) 40%, transparent) 100% 0 / var(--ds-space-8) 100% no-repeat local, linear-gradient(to left, var(--ds-rule), transparent) 100% 0 / var(--ds-space-4) 100% no-repeat scroll; } .ds-data-table__scroll:last-child { border-radius: calc(var(--_radius) - var(--ds-border-width)); } .ds-data-table__table { width: 100%; min-width: var(--_min-w, 0); border-collapse: collapse; } .ds-data-table__table caption { text-align: start; padding: var(--ds-space-3) var(--_pad-x); font-weight: var(--ds-weight-semibold); } .ds-data-table__th { height: var(--_head-h); padding: 0 var(--_pad-x); vertical-align: middle; text-align: start; background: var(--_head-bg); border-block-end: var(--ds-border-width) solid var(--ds-rule); font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); white-space: nowrap; } .ds-data-table__th + .ds-data-table__th, .ds-data-table__td + .ds-data-table__td { border-inline-start: var(--ds-border-width) solid var(--_rule-col); } .ds-data-table__sort { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); margin-inline: calc(-1 * var(--ds-space-1)); padding: 0 var(--ds-space-1); border: 0; border-radius: var(--ds-radius-xs); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; } .ds-data-table__sort:hover { color: var(--ds-ink); } .ds-data-table__sort svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-standard), transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-data-table__sort:hover svg { opacity: 1; color: var(--ds-ink-faint); } .ds-data-table__th[aria-sort="ascending"] .ds-data-table__sort svg, .ds-data-table__th[aria-sort="descending"] .ds-data-table__sort svg { opacity: 1; color: var(--ds-ink); } .ds-data-table__th[aria-sort="descending"] .ds-data-table__sort svg { transform: rotate(180deg); } .ds-data-table__th[aria-sort="ascending"], .ds-data-table__th[aria-sort="descending"] { color: var(--ds-ink); } .ds-data-table__td { height: var(--_row-h); padding: var(--ds-space-1) var(--_pad-x); vertical-align: middle; border-block-end: var(--ds-border-width) solid var(--_rule-row); color: var(--ds-ink-2); } .ds-data-table__table tbody tr:last-child > .ds-data-table__td { border-block-end-color: transparent; } .ds-data-table__primary { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-data-table__num { text-align: end; font-variant-numeric: tabular-nums; } .ds-data-table__null { font-style: italic; color: var(--ds-ink-muted); } .ds-data-table__null[data-null="dash"] { font-style: normal; } .ds-data-table__secondary { display: block; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-data-table__truncate { display: block; max-width: var(--_max, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-data-table__nowrap { white-space: nowrap; } .ds-data-table__select { width: calc(var(--ds-control-h-sm) + var(--_pad-x)); padding-inline-end: 0; } .ds-data-table__glyph { display: inline-block; width: var(--ds-icon-size); height: var(--ds-icon-size); vertical-align: -3px; margin-inline-end: var(--ds-space-1); color: var(--ds-ink-muted); } .ds-data-table__chip { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: calc(var(--ds-space-5) + 2px); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-xs); background: var(--_chip-tint, var(--ds-surface-2)); color: var(--_chip-ink, var(--ds-ink-2)); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); white-space: nowrap; } .ds-data-table__chip[data-shape="pill"] { border-radius: var(--ds-radius-pill); } .ds-data-table__chip[data-hue="1"] { --_chip-tint: var(--ds-data-1-tint); --_chip-ink: var(--ds-data-1-ink); } .ds-data-table__chip[data-hue="2"] { --_chip-tint: var(--ds-data-2-tint); --_chip-ink: var(--ds-data-2-ink); } .ds-data-table__chip[data-hue="3"] { --_chip-tint: var(--ds-data-3-tint); --_chip-ink: var(--ds-data-3-ink); } .ds-data-table__chip[data-hue="4"] { --_chip-tint: var(--ds-data-4-tint); --_chip-ink: var(--ds-data-4-ink); } .ds-data-table__chip[data-hue="6"] { --_chip-tint: var(--ds-data-6-tint); --_chip-ink: var(--ds-data-6-ink); } .ds-data-table__chip[data-tone="live"] { --_chip-tint: var(--ds-live); --_chip-ink: var(--ds-ink-on-semantic); text-transform: uppercase; letter-spacing: .04em; } .ds-data-table__chip[data-tone="off"] { --_chip-tint: var(--ds-surface-2); --_chip-ink: var(--ds-ink-muted); text-transform: uppercase; letter-spacing: .04em; } .ds-data-table__status { display: inline-grid; place-items: center; width: var(--ds-icon-size); height: var(--ds-icon-size); vertical-align: -3px; margin-inline-end: var(--ds-space-2); color: var(--ds-ink-muted); } .ds-data-table__actions-cell { width: calc(var(--ds-control-h-sm) + var(--_pad-x)); padding-inline-start: 0; text-align: end; } .ds-data-table__actions { display: inline-flex; gap: var(--ds-space-1); opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-standard); } .ds-data-table__row:hover .ds-data-table__actions, .ds-data-table__row:focus-within .ds-data-table__actions, .ds-data-table__row[data-state="hover"] .ds-data-table__actions { opacity: 1; } @media (hover: none) { .ds-data-table__actions { opacity: 1; } } .ds-data-table__icon-button { appearance: none; display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); cursor: pointer; } .ds-data-table__icon-button:hover { background: var(--ds-surface-hover); color: var(--ds-ink); } .ds-data-table__icon-button svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-data-table__row { transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } tbody .ds-data-table__row:hover > .ds-data-table__td, .ds-data-table__row[data-state="hover"] > .ds-data-table__td { background: var(--ds-hover-bg); } .ds-data-table__row[aria-selected="true"] > .ds-data-table__td { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-data-table__row[aria-selected="true"] .ds-data-table__primary { color: inherit; font-weight: var(--ds-selected-weight); } .ds-data-table__row[data-state="inactive"] > .ds-data-table__td, .ds-data-table__row[data-state="inactive"] .ds-data-table__primary { color: var(--ds-ink-muted); } .ds-data-table__row[aria-disabled="true"] > .ds-data-table__td, .ds-data-table__row[aria-disabled="true"] .ds-data-table__primary { color: var(--ds-ink-faint); } .ds-data-table__row[aria-disabled="true"] { cursor: not-allowed; } .ds-data-table__row:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-data-table__group > .ds-data-table__th { height: var(--ds-control-h); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); text-transform: none; letter-spacing: 0; color: var(--ds-ink); background: transparent; border-block-end: var(--ds-border-width) solid var(--_rule-row); } .ds-data-table__group-cell { display: flex; align-items: center; gap: var(--ds-space-2); } .ds-data-table__group-cell .ds-data-table__icon-button { width: var(--ds-space-6); height: var(--ds-space-6); } .ds-data-table__group[aria-expanded="false"] .ds-data-table__icon-button svg { transform: rotate(-90deg); } .ds-data-table__count { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; } .ds-data-table__add > .ds-data-table__td { padding-block: 0; } .ds-data-table__add-button { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--_row-h); padding: 0; border: 0; background: none; font: inherit; color: var(--ds-ink-muted); cursor: pointer; border-radius: var(--ds-radius-xs); } .ds-data-table__add-button:hover { color: var(--ds-ink); } .ds-data-table__add-button svg { width: 14px; height: 14px; } .ds-data-table[aria-busy="true"] .ds-data-table__table { pointer-events: none; } .ds-data-table__num > .ds-data-table__skeleton { margin-inline-start: auto; } .ds-data-table__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 70%); max-width: 100%; border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-data-table[data-state="empty"] { border-style: dashed; border-color: var(--ds-rule-strong); } .ds-data-table__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: calc(var(--ds-control-h-lg) * 2); padding: var(--ds-space-6) var(--_pad-x); text-align: center; color: var(--ds-ink-muted); } .ds-data-table__empty > span { max-width: var(--ds-measure); } .ds-data-table__empty a { color: var(--ds-ink-link); } .ds-data-table__empty-row > .ds-data-table__td { border-block-end: 0; } .ds-data-table[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-data-table__error { display: flex; align-items: center; gap: var(--ds-space-1-5); color: var(--ds-danger-ink); font-size: var(--ds-text-sm); } .ds-data-table__error svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; } .ds-data-table__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); min-height: var(--_head-h); padding: var(--ds-space-1) var(--_pad-x); border-block-start: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-data-table__footer-count { color: var(--ds-ink); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; } .ds-data-table__footer-count[data-align="center"] { margin-inline: auto; } .ds-data-table__tools { display: inline-flex; align-items: center; gap: var(--ds-space-1); } .ds-data-table__pager { display: inline-flex; align-items: center; gap: var(--ds-space-2); } .ds-data-table__page-button { appearance: none; display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink-2); font: inherit; font-size: var(--ds-text-sm); text-transform: var(--ds-control-case); cursor: pointer; box-shadow: var(--ds-shadow-lip); } .ds-data-table__page-button:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-data-table__page-button:disabled { color: var(--ds-ink-faint); border-color: var(--ds-rule); background: var(--ds-surface); box-shadow: none; } .ds-data-table[data-figures="mono"] :is(.ds-data-table__td.ds-data-table__num, .ds-data-table__id, .ds-data-table__footer-count) { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; letter-spacing: 0; } .ds-data-table[data-figures="mono"] .ds-data-table__td.ds-data-table__num { text-align: end; } .ds-data-table[data-figures="mono"] .ds-data-table__td.ds-data-table__num .ds-data-table__secondary { font-family: var(--ds-font-sans); } .ds-data-table__id { font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-data-table[data-frame="none"] { --_radius: 0px; --_cover: var(--ds-card-bg); background: transparent; border: 0; } .ds-data-table[data-frame="none"] :is(.ds-data-table__th, .ds-data-table__td):first-child { padding-inline-start: 0; } .ds-data-table[data-frame="none"] :is(.ds-data-table__th, .ds-data-table__td):last-child { padding-inline-end: 0; } .ds-data-table[data-frame="none"] .ds-data-table__footer { padding-inline: 0; } .ds-data-table[data-frame="none"][data-state="empty"] .ds-data-table__empty { border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-sm); } .ds-data-table[data-frame="none"][aria-invalid="true"] .ds-data-table__footer { border-block-start-color: var(--ds-danger); } .ds-data-table[data-variant="navattic-bordered-grid"] { --_head-bg: var(--ds-ground); --_rule-col: var(--ds-rule-soft); --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-5)); border-color: var(--ds-rule-soft); } .ds-data-table[data-variant="navattic-bordered-grid"] .ds-data-table__th { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); text-transform: none; letter-spacing: 0; color: var(--ds-ink-2); border-block-end-color: var(--ds-rule-soft); } .ds-data-table[data-variant="navattic-bordered-grid"] .ds-data-table__num { text-align: start; font-variant-numeric: normal; } .ds-data-table[data-variant="navattic-bordered-grid"] .ds-data-table__td { padding-inline: var(--ds-space-4); } .ds-data-table[data-variant="navattic-bordered-grid"] .ds-data-table__td:first-child { padding-inline-start: var(--ds-space-3); } .ds-data-table[data-variant="retool-list-first-hairline"] { --_radius: var(--ds-radius-xs); --_row-h: var(--ds-control-h-sm); --_rule-row: var(--ds-rule); font-size: var(--ds-text-sm); } .ds-data-table[data-variant="retool-list-first-hairline"] .ds-data-table__th { font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); text-transform: none; letter-spacing: 0; color: var(--ds-ink); } .ds-data-table[data-variant="retool-list-first-hairline"] .ds-data-table__td { color: var(--ds-ink); } .ds-data-table[data-variant="retool-list-first-hairline"] .ds-data-table__chip { border-radius: var(--ds-radius-pill); } .ds-data-table[data-variant="retool-list-first-hairline"] .ds-data-table__footer { min-height: var(--ds-control-h-sm); } .ds-data-table[data-variant="manychat-bordered-card-table"] { --_head-h: var(--ds-control-h-lg); --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-8)); --_rule-row: var(--ds-rule); --_pad-x: var(--ds-space-6); box-shadow: var(--ds-shadow-card); } .ds-data-table[data-variant="manychat-bordered-card-table"] .ds-data-table__th { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); text-transform: none; letter-spacing: 0; color: var(--ds-ink); border-block-end-color: var(--ds-rule); } .ds-data-table[data-variant="manychat-card-row-table"] { --_cols: auto minmax(0, 1fr) 72px 72px 148px 40px; --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-6) + var(--ds-space-1)); background: transparent; border: 0; border-radius: 0; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__scroll { background: none; } .ds-data-table[data-variant="manychat-card-row-table"] :is(.ds-data-table__table, thead, tbody) { display: block; min-width: 0; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__row { display: grid; grid-template-columns: var(--_cols); align-items: center; column-gap: var(--ds-space-3); min-width: 0; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__th { height: auto; padding: 0 var(--_pad-x) var(--ds-space-3); border: 0; background: transparent; font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); text-transform: none; letter-spacing: 0; color: var(--ds-ink-muted); } .ds-data-table[data-variant="manychat-card-row-table"] tbody .ds-data-table__row { min-height: calc(var(--ds-control-h-lg) + var(--ds-space-6) + var(--ds-space-1)); background: var(--ds-surface); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-card); padding-block: var(--ds-space-3); } .ds-data-table[data-variant="manychat-card-row-table"] tbody .ds-data-table__row + .ds-data-table__row { margin-block-start: var(--ds-space-4); } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__td { height: auto; min-width: 0; padding: 0 var(--_pad-x); border: 0; } .ds-data-table[data-variant="manychat-card-row-table"] tbody .ds-data-table__row:hover > .ds-data-table__td, .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__row[data-state="hover"] > .ds-data-table__td { background: transparent; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__row[aria-selected="true"] > .ds-data-table__td { background: transparent; color: inherit; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__primary { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__primary .ds-data-table__truncate { flex: 0 1 auto; min-width: 0; max-width: 100%; } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1-5); margin-block-start: var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__summary svg { width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-danger); } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__num .ds-data-table__secondary { margin-block-start: var(--ds-space-2); } .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__select, .ds-data-table[data-variant="manychat-card-row-table"] .ds-data-table__actions-cell { width: auto; } @media (max-width: 600px) { .ds-data-table[data-variant="manychat-card-row-table"] { --_cols: auto minmax(0, 1fr) 40px; } .ds-data-table[data-variant="manychat-card-row-table"] :is(.ds-data-table__th, .ds-data-table__td)[data-collapse] { display: none; } } .ds-data-table[data-variant="clickup-grouped-list"] { --_row-h: var(--ds-control-h); --_rule-row: var(--ds-rule); --_pad-x: var(--ds-space-2); background: transparent; border: 0; border-radius: 0; } .ds-data-table[data-variant="clickup-grouped-list"] .ds-data-table__scroll { background: none; } .ds-data-table[data-variant="clickup-grouped-list"] .ds-data-table__th { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); text-transform: none; letter-spacing: 0; border-block-end-color: var(--ds-rule); } .ds-data-table[data-variant="clickup-grouped-list"] .ds-data-table__primary { font-size: var(--ds-text-sm); } .ds-data-table[data-variant="clickup-grouped-list"] .ds-data-table__chip { text-transform: uppercase; letter-spacing: .02em; font-weight: var(--ds-weight-bold); --_chip-tint: var(--ds-surface-3); --_chip-ink: var(--ds-ink); } .ds-data-table[data-variant="origin-transaction-list"] { --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-6)); --_rule-row: transparent; --_pad-x: 0px; background: transparent; border: 0; border-radius: 0; } .ds-data-table[data-variant="origin-transaction-list"] .ds-data-table__scroll { background: none; } .ds-data-table[data-variant="origin-transaction-list"] .ds-data-table__th { height: auto; padding-block-end: var(--ds-space-3); border-block-end: 0; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; } .ds-data-table[data-variant="origin-transaction-list"] .ds-data-table__td { color: var(--ds-ink); } .ds-data-table[data-variant="origin-transaction-list"] .ds-data-table__num { font-weight: var(--ds-weight-medium); font-size: var(--ds-text-lg); } .ds-data-table__empty-icon { display: grid; place-items: center; inline-size: var(--ds-control-h-lg); block-size: var(--ds-control-h-lg); border-radius: var(--ds-radius-md); background: var(--ds-surface-2); color: var(--ds-ink-muted); } .ds-data-table__empty-icon svg { inline-size: var(--ds-icon-size-row, var(--ds-icon-size)); block-size: var(--ds-icon-size-row, var(--ds-icon-size)); } .ds-data-table__empty-title { color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); } .ds-data-table__empty-text { max-inline-size: var(--ds-measure); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-data-table__empty-action { appearance: none; display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); margin-block-start: var(--ds-space-1); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); text-decoration: none; cursor: pointer; box-shadow: var(--ds-shadow-lip); } .ds-data-table__empty-action:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-data-table__empty-action:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-data-table[data-empty="gusto-colspan-action"] .ds-data-table__empty { min-height: calc(var(--ds-control-h-lg) * 4); gap: var(--ds-space-2); } .ds-data-table[data-empty="gusto-colspan-action"] .ds-data-table__empty-icon { background: transparent; color: var(--ds-danger-ink); } .ds-data-table[data-empty="plain-footprint"] .ds-data-table__empty-row > .ds-data-table__td { padding: var(--ds-space-4) var(--_pad-x); } .ds-data-table[data-empty="plain-footprint"] .ds-data-table__empty { border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-sm); min-height: calc(var(--ds-control-h-lg) * 3); } .ds-data-table[data-empty="plain-footprint"] .ds-data-table__empty-icon { inline-size: var(--ds-control-h); block-size: var(--ds-control-h); border-radius: var(--ds-radius-sm); } .ds-data-table__scroll:has(> .ds-data-table__overlay) { position: relative; } .ds-data-table__ghost > .ds-data-table__row > .ds-data-table__td { border-block-end-color: var(--_rule-row); } .ds-data-table__ghost { -webkit-mask-image: linear-gradient(to bottom, currentColor, transparent); mask-image: linear-gradient(to bottom, currentColor, transparent); pointer-events: none; user-select: none; } .ds-data-table__ghost .ds-data-table__skeleton { background: var(--ds-surface-3); } .ds-data-table__overlay { position: absolute; inset: var(--_head-h) 0 0 0; display: grid; place-items: center; padding: var(--_pad-x); text-align: center; } .ds-data-table__overlay > .ds-data-table__empty { min-height: 0; padding: 0; } @keyframes ds-dt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .ds-data-table[data-loading] .ds-data-table__skeleton { animation: ds-dt-pulse calc(var(--ds-dur-slow) * 5) var(--ds-ease-standard) infinite; } .ds-data-table__table[aria-busy="true"] { pointer-events: none; } .ds-data-table__table[aria-busy="true"] .ds-data-table__td { color: transparent; } .ds-data-table[data-loading="neon-skeleton-rows"] .ds-data-table__skeleton { block-size: var(--ds-space-2-5, var(--ds-space-3)); } .ds-data-table[data-loading="databricks-skeleton-grid"] { --_rule-col: var(--ds-rule-soft); } .ds-data-table[data-loading="databricks-skeleton-grid"] .ds-data-table__th .ds-data-table__skeleton { background: var(--ds-surface-3); } .ds-data-table__status-line { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--_pad-x); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-data-table[data-loading="clickup-blurred-overlay"] .ds-data-table__table { filter: blur(var(--ds-space-0-5)); } .ds-data-table[data-loading="clickup-blurred-overlay"] .ds-data-table__overlay { z-index: 1; inset: 0; } .ds-data-table__overlay-card { display: grid; justify-items: center; gap: var(--ds-space-1); max-inline-size: 280px; padding: var(--ds-space-5) var(--ds-space-6); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip), var(--ds-shadow-float); text-align: center; } .ds-data-table__overlay-card svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); } .ds-data-table__share { --_bar: var(--ds-data-1); --_bar-tint: var(--ds-data-1-tint); --_bar-h: var(--ds-space-1); position: relative; text-align: end; font-variant-numeric: tabular-nums; } .ds-data-table__share[data-hue="2"] { --_bar: var(--ds-data-2); --_bar-tint: var(--ds-data-2-tint); } .ds-data-table__share[data-hue="3"] { --_bar: var(--ds-data-3); --_bar-tint: var(--ds-data-3-tint); } .ds-data-table__share[data-hue="4"] { --_bar: var(--ds-data-4); --_bar-tint: var(--ds-data-4-tint); } .ds-data-table__share-num { position: relative; z-index: 1; display: block; } .ds-data-table__share-pct { display: block; min-inline-size: 4ch; text-align: end; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-data-table__share-bar { display: block; inline-size: 100%; block-size: var(--_bar-h); border-radius: var(--ds-radius-pill); background: var(--ds-rule-soft); overflow: hidden; } .ds-data-table__share-bar::before { content: ""; display: block; inline-size: var(--_share, 0%); block-size: 100%; border-radius: inherit; background: var(--_bar); } .ds-data-table[data-share="ynab-underline"] .ds-data-table__share { min-inline-size: calc(var(--ds-control-h-lg) * 3); } .ds-data-table[data-share="ynab-underline"] .ds-data-table__share-bar { margin-block-start: var(--ds-space-1); } .ds-data-table[data-share="deel-cell-fill"] .ds-data-table__share { min-inline-size: calc(var(--ds-control-h-lg) * 3); } .ds-data-table[data-share="deel-cell-fill"] .ds-data-table__share-bar { position: absolute; inset: 0; block-size: auto; border-radius: 0; background: transparent; } .ds-data-table[data-share="deel-cell-fill"] .ds-data-table__share-bar::before { background: var(--_bar-tint); } .ds-data-table[data-share="reddit-bar-pct"] .ds-data-table__share { display: flex; align-items: center; gap: var(--ds-space-2); min-inline-size: calc(var(--ds-control-h-lg) * 3); } .ds-data-table[data-share="reddit-bar-pct"] .ds-data-table__share-bar { flex: 1 1 auto; min-inline-size: var(--ds-space-10, 40px); block-size: var(--ds-space-2); } .ds-data-table[data-share="reddit-bar-pct"] .ds-data-table__share-pct { flex: none; } .ds-data-table:not([data-share="deel-cell-fill"]) .ds-data-table__row[aria-selected="true"] .ds-data-table__share-bar { background: var(--ds-surface); } .ds-display-title-input { --_size: min(var(--ds-text-display), 12vw); --_lh: var(--ds-lh-tight); --_w: 100%; display: block; width: var(--_w); max-width: 100%; min-width: 0; margin: 0; font: inherit; } .ds-display-title-input__control { display: block; width: 100%; min-width: 0; margin: 0 calc(-1 * var(--ds-space-1)); padding: 0 var(--ds-space-1); border: 0; border-block-end: var(--ds-border-width) dotted transparent; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink); font-family: var(--ds-font-display); font-size: var(--_size); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--_lh); text-overflow: ellipsis; caret-color: var(--ds-accent); transition: border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-display-title-input__control::placeholder { color: var(--ds-ink-muted); opacity: 1; } .ds-display-title-input__control:hover:not(:disabled):not([readonly]) { border-block-end-color: var(--ds-rule-strong); } .ds-display-title-input__control:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); border-block-end-color: transparent; } .ds-display-title-input__control[readonly] { cursor: default; } .ds-display-title-input__control:disabled { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-display-title-input__control[aria-invalid="true"] { border-block-end: 2px solid var(--ds-danger); } .ds-display-title-input__control[aria-invalid="true"]:focus-visible { outline-color: var(--ds-danger); } .ds-display-title-input[data-state="hover"] .ds-display-title-input__control { border-block-end-color: var(--ds-rule-strong); } .ds-display-title-input[data-state="focus"] .ds-display-title-input__control { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-display-title-input[aria-busy="true"] .ds-display-title-input__control { visibility: hidden; } .ds-display-title-input[aria-busy="true"] { position: relative; } .ds-display-title-input[aria-busy="true"]::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: min(40%, 320px); height: calc(var(--_size) * .6); transform: translateY(-50%); border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); } .ds-display-title-input__message { display: block; margin-block-start: var(--ds-space-2); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); letter-spacing: 0; line-height: var(--ds-lh-body); color: var(--ds-ink-muted); } .ds-display-title-input__message[data-tone="error"] { color: var(--ds-danger-ink); } .ds-display-title-input[data-variant="luma-mono-display"] { --_size: min(var(--ds-text-display), 12vw); } .ds-display-title-input[data-variant="manychat-inline-rename-pencil"] { --_size: var(--ds-text-md); --_lh: var(--ds-lh-list); --_w: auto; display: inline-flex; align-items: center; gap: var(--ds-space-1); vertical-align: middle; min-width: 0; } .ds-display-title-input[data-variant="manychat-inline-rename-pencil"] .ds-display-title-input__control { width: auto; min-width: 4ch; max-width: 100%; flex: 0 1 auto; field-sizing: content; min-height: var(--ds-control-h-sm); margin: 0; padding-inline: var(--ds-space-1); font-family: var(--ds-font-sans); font-weight: var(--ds-weight-medium); letter-spacing: 0; border-radius: var(--ds-radius-xs); } .ds-display-title-input__edit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); cursor: pointer; } .ds-display-title-input__edit svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-display-title-input__edit:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-display-title-input__edit:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-display-title-input[data-variant="squarespace-framed-centred-block"] { --_lh: var(--ds-lh-heading); } .ds-display-title-input[data-variant="squarespace-framed-centred-block"] .ds-display-title-input__control { margin: 0; padding: var(--ds-space-2) var(--ds-space-3); border-block-end: 0; border-radius: 0; text-align: center; font-weight: var(--ds-weight-regular); outline: var(--ds-border-width) solid transparent; outline-offset: 0; transition: outline-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-display-title-input[data-variant="squarespace-framed-centred-block"] .ds-display-title-input__control:hover:not(:disabled):not([readonly]), .ds-display-title-input[data-variant="squarespace-framed-centred-block"][data-state="hover"] .ds-display-title-input__control { outline-color: var(--ds-border-strong); } .ds-display-title-input[data-variant="squarespace-framed-centred-block"] .ds-display-title-input__control:focus-visible, .ds-display-title-input[data-variant="squarespace-framed-centred-block"][data-state="focus"] .ds-display-title-input__control { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: 0; } .ds-display-title-input[data-variant="squarespace-framed-centred-block"] .ds-display-title-input__control[aria-invalid="true"] { outline: var(--ds-ring-width) solid var(--ds-danger); } .ds-display-title-input[data-variant="squarespace-framed-centred-block"][aria-busy="true"]::before { inset-inline-start: 50%; transform: translate(-50%, -50%); } .ds-display-title-input[data-variant="squarespace-framed-centred-block"] ~ .ds-display-title-input__message { text-align: center; } .ds-display-title-input__toolbar { display: flex; justify-content: center; margin-block-start: var(--ds-space-2); visibility: hidden; } .ds-display-title-input__toolbar > .ds-formatting-toolbar { background: var(--ds-surface); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-float); } .ds-display-title-input:focus-within + .ds-display-title-input__toolbar, .ds-display-title-input[data-state="focus"] + .ds-display-title-input__toolbar, .ds-display-title-input__toolbar:focus-within { visibility: visible; } .ds-display-title-input[data-variant="notion-wrapping-page-title"] { --_lh: var(--ds-lh-tight); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-2); } .ds-display-title-input__heading { position: relative; width: 100%; min-width: 0; margin: 0; font: inherit; } .ds-display-title-input[data-variant="notion-wrapping-page-title"] .ds-display-title-input__control { resize: none; overflow: hidden; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: var(--ds-weight-bold); border-block-end: 0; } .ds-display-title-input[data-variant="notion-wrapping-page-title"] .ds-display-title-input__control[aria-invalid="true"] { border-block-end: 2px solid var(--ds-danger); } .ds-display-title-input__icon { display: inline-grid; place-items: center; inline-size: calc(var(--ds-control-h-lg) + var(--ds-space-5)); block-size: calc(var(--ds-control-h-lg) + var(--ds-space-5)); margin-block-start: calc(-1 * (var(--ds-control-h-lg) + var(--ds-space-5)) / 2); padding: 0; border: var(--ds-border-width) solid var(--ds-card-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-ink-2); cursor: pointer; } .ds-display-title-input__icon svg { inline-size: 55%; block-size: 55%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-display-title-input__icon:hover { background: var(--ds-hover-bg); } .ds-display-title-input__icon:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-display-title-input__affordances { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin-inline-start: calc(-1 * var(--ds-space-2)); visibility: hidden; } .ds-display-title-input[data-variant="notion-wrapping-page-title"]:hover .ds-display-title-input__affordances, .ds-display-title-input[data-variant="notion-wrapping-page-title"][data-state="hover"] .ds-display-title-input__affordances, .ds-display-title-input__affordances:focus-within { visibility: visible; } .ds-display-title-input[data-variant="notion-wrapping-page-title"][aria-disabled="true"] .ds-display-title-input__affordances { visibility: hidden; } .ds-display-title-input__byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); color: var(--ds-ink-muted); } .ds-display-title-input__avatar { display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); border-radius: var(--ds-radius-pill); background: var(--ds-data-2-tint); color: var(--ds-data-2-ink); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); } .ds-display-title-input__byline strong { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-display-title-input[data-variant="notion-wrapping-page-title"][aria-busy="true"]::before { content: none; } .ds-display-title-input[data-variant="notion-wrapping-page-title"][aria-busy="true"] .ds-display-title-input__heading::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: min(60%, 420px); height: calc(var(--_size) * .75); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-editor-toolbar { --_h: var(--ds-topbar-h); --_pad-x: var(--ds-space-4); --_gap: var(--ds-space-4); --_fill: var(--ds-ground); --_rule: var(--ds-rule); --_radius: 0px; --_close-gap: var(--ds-space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--_gap); min-height: var(--_h); min-width: 0; padding-inline: var(--_pad-x); padding-block: var(--ds-space-2); background: var(--_fill); border-block-end: var(--ds-border-width) solid var(--_rule); border-radius: var(--_radius); color: var(--ds-ink); } .ds-editor-toolbar[data-dock="top"] { position: sticky; inset-block-start: 0; z-index: var(--ds-z-sticky); } .ds-editor-toolbar__identity { display: inline-flex; align-items: center; gap: var(--ds-space-2); flex: none; } .ds-editor-toolbar__logo { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h); height: var(--ds-control-h); flex: none; color: var(--ds-ink); } .ds-editor-toolbar__logo svg { width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); fill: currentColor; } .ds-editor-toolbar__context { display: flex; align-items: center; gap: var(--ds-space-3); flex: 1 1 240px; min-width: 0; } .ds-editor-toolbar__context > * { min-width: 0; } .ds-editor-toolbar__title { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-width: 0; margin: 0; font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); color: var(--ds-ink); } .ds-editor-toolbar__title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-editor-toolbar__title-icon { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; color: var(--ds-ink-muted); } .ds-editor-toolbar__status { display: inline-flex; flex: none; } .ds-editor-toolbar__state { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); flex: none; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); white-space: nowrap; } .ds-editor-toolbar__state > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-editor-toolbar__state[data-state="saving"]::before { content: ""; width: var(--ds-space-3); height: var(--ds-space-3); border: 2px solid var(--ds-rule-strong); border-block-start-color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); animation: ds-editor-toolbar-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-editor-toolbar-spin { to { transform: rotate(360deg); } } .ds-editor-toolbar__state[data-state="dirty"] { color: var(--ds-ink-2); } .ds-editor-toolbar__state[data-state="dirty"]::before { content: ""; width: var(--ds-space-2); height: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-warning); } .ds-editor-toolbar__state[data-state="error"] { color: var(--ds-danger-ink); } .ds-editor-toolbar__state[data-state="offline"] { color: var(--ds-ink-2); } .ds-editor-toolbar__history { display: inline-flex; align-items: center; gap: var(--ds-space-1); flex: none; } .ds-editor-toolbar__divider { flex: none; width: var(--ds-border-width); height: var(--ds-icon-size-row); background: var(--ds-rule-strong); margin-inline: var(--ds-space-1); } .ds-editor-toolbar__view { display: inline-flex; flex: none; min-width: 0; max-width: 100%; } .ds-editor-toolbar__search { display: flex; justify-content: center; flex: 1 1 280px; min-width: 0; } .ds-editor-toolbar__search > * { width: min(530px, 100%); } .ds-editor-toolbar__actions { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin-inline-start: auto; flex: none; max-width: 100%; } .ds-editor-toolbar__close { display: inline-flex; flex: none; margin-inline-start: var(--_close-gap); } .ds-editor-toolbar__pill { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h); padding-inline: var(--ds-space-1); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); flex: none; max-width: 100%; min-width: 0; } .ds-editor-toolbar__pill-title { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-width: 0; margin: 0; padding-inline: var(--ds-space-2) var(--ds-space-1); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-list); } .ds-editor-toolbar__pill-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-editor-toolbar__kind-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); border-radius: var(--ds-radius-xs); background: var(--ds-data-6-tint); color: var(--ds-data-6-ink); } .ds-editor-toolbar__kind-tile svg { width: var(--ds-space-3); height: var(--ds-space-3); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-editor-toolbar[aria-busy="true"] .ds-editor-toolbar__actions { pointer-events: none; opacity: .6; } .ds-editor-toolbar[aria-disabled="true"] { color: var(--ds-ink-faint); } .ds-editor-toolbar__skeleton { display: inline-block; height: .9em; width: var(--_w, 160px); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-editor-toolbar[data-variant="manychat-draft-set-live"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-8); --_fill: var(--ds-ground-2); --_rule: var(--ds-rule-strong); } .ds-editor-toolbar[data-variant="manychat-draft-set-live"] .ds-editor-toolbar__logo { width: calc(var(--ds-control-h) + var(--ds-space-1)); height: calc(var(--ds-control-h) + var(--ds-space-1)); } .ds-editor-toolbar[data-variant="navattic-88-action-cluster"] { --_fill: var(--ds-surface); --_rule: transparent; --_radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; --_close-gap: var(--ds-space-8); } .ds-editor-toolbar[data-variant="navattic-88-action-cluster"] .ds-editor-toolbar__actions { gap: var(--ds-space-2-5); } .ds-editor-toolbar[data-variant="clickup-board-header-overlay"] { --_fill: transparent; --_rule: transparent; --_pad-x: var(--ds-space-2); --_h: calc(var(--ds-control-h) + var(--ds-space-4)); position: absolute; inset-block-start: 0; inset-inline: 0; z-index: var(--ds-z-sticky); } .ds-editor-toolbar[data-variant="clickup-board-header-overlay"] .ds-editor-toolbar__close { margin-inline-start: 0; } .ds-editor-toolbar[data-variant="retool-command-bar"] { --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-3); --_gap: var(--ds-space-3); --_fill: var(--ds-surface); padding-block: var(--ds-space-1); } .ds-editor-toolbar[data-variant="retool-command-bar"] .ds-editor-toolbar__title { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); } .ds-editor-toolbar[data-variant="retool-command-bar"] .ds-editor-toolbar__logo { width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); } .ds-editor-toolbar[data-variant="retool-command-bar"] .ds-editor-toolbar__logo svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-editor-toolbar[data-state] { position: relative; } .ds-editor-toolbar[data-state] svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-editor-toolbar[data-state] svg[data-fill] { fill: currentColor; stroke: none; } .ds-editor-toolbar[data-state] .ds-breadcrumb__leaf { font-size: var(--ds-text-md); } .ds-editor-toolbar[data-state] .ds-editor-toolbar__context { flex: 1 1 380px; } .ds-editor-toolbar[data-state] .ds-breadcrumb__list { flex-wrap: nowrap; min-width: 0; } .ds-editor-toolbar[data-state] .ds-breadcrumb__leaf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-editor-toolbar__save { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; } .ds-editor-toolbar__save:empty { display: none; } .ds-editor-toolbar__audience { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); flex: none; font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-editor-toolbar__audience > svg { width: 14px; height: 14px; color: var(--ds-ink-muted); } .ds-editor-toolbar__meta { flex: none; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); white-space: nowrap; } .ds-editor-toolbar__why { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); max-width: 22ch; line-height: var(--ds-lh-tight); } .ds-editor-toolbar__notice { display: flex; align-items: flex-start; gap: var(--ds-space-2); flex-basis: 100%; margin: 0 0 var(--ds-space-1); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); background: var(--ds-info-tint); color: var(--ds-info-ink); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); } .ds-editor-toolbar__notice > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; margin-block-start: 2px; } .ds-editor-toolbar__notice[data-tone="offline"] { background: var(--ds-warning-tint); color: var(--ds-warning-ink); } .ds-editor-toolbar__panel { position: absolute; inset-block-start: calc(100% + var(--ds-space-2)); inset-inline-end: var(--_pad-x); z-index: var(--ds-z-popover); display: flex; flex-direction: column; gap: var(--ds-space-3); width: min(400px, calc(100% - 2 * var(--_pad-x))); padding: var(--ds-space-4); background: var(--ds-surface-raised); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-float); color: var(--ds-ink); } .ds-editor-toolbar__panel :is(p, ul) { margin: 0; padding: 0; list-style: none; } .ds-editor-toolbar__panel-title { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); } .ds-editor-toolbar__invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h); padding: var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-surface); } .ds-editor-toolbar__invite:focus-within { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-editor-toolbar__chip { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-0-5) 0 var(--ds-space-1); border-radius: var(--ds-radius-xs); background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-size: var(--ds-text-sm); } .ds-editor-toolbar__chip-remove { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: inherit; cursor: pointer; } .ds-editor-toolbar__chip-remove svg { width: 12px; height: 12px; } .ds-editor-toolbar__chip-remove:hover { background: var(--ds-hover-bg); } .ds-editor-toolbar__chip-remove:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: 0; } .ds-editor-toolbar__invite-input { flex: 1 1 140px; min-width: 0; min-height: var(--ds-control-h-sm); border: 0; background: transparent; color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); outline: none; } .ds-editor-toolbar__people { display: flex; flex-direction: column; gap: var(--ds-space-1); } .ds-editor-toolbar__person { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-row-h); } .ds-editor-toolbar__person-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: var(--ds-lh-tight); } .ds-editor-toolbar__person-name { font-size: var(--ds-text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-editor-toolbar__person-meta { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-editor-toolbar__person-new { flex: none; padding: 0 var(--ds-space-1-5); border-radius: var(--ds-radius-xs); background: var(--ds-success-tint); color: var(--ds-success-ink); font-size: var(--ds-text-xs); } .ds-editor-toolbar__panel-note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-editor-toolbar__panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } .ds-editor-toolbar[data-variant="jstov"][data-state] { --_gap: var(--ds-space-3); } .ds-editor-toolbar[data-variant="airops-draft-publish"] { --_fill: var(--ds-surface); --_h: 48px; } .ds-editor-toolbar[data-variant="airops-draft-publish"] .ds-editor-toolbar__context { justify-content: center; } .ds-editor-toolbar[data-variant="airops-draft-publish"] .ds-breadcrumb__item:first-child { display: none; } .ds-editor-toolbar[data-variant="airops-draft-publish"] .ds-status-badge { border-radius: var(--ds-radius-sm); padding-inline: var(--ds-space-2); } .ds-editor-toolbar[data-variant="airops-draft-publish"] .ds-editor-toolbar__audience span { display: none; } .ds-editor-toolbar[data-variant="airops-draft-publish"] .ds-editor-toolbar__meta { order: 20; flex-basis: 100%; text-align: center; font-size: var(--ds-text-xs); } .ds-editor-toolbar[data-variant="notion-private-edited"] { --_h: 44px; --_fill: var(--ds-surface); --_rule: transparent; --_gap: var(--ds-space-2); } .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-breadcrumb__leaf { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); } .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-editor-toolbar__identity, .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-editor-toolbar__status { display: none; } .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-editor-toolbar__audience { order: -1; margin-inline-start: auto; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-editor-toolbar__context { order: -2; flex: 0 1 auto; } .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-editor-toolbar__actions { margin-inline-start: 0; } .ds-editor-toolbar[data-variant="notion-private-edited"] .ds-editor-toolbar__meta { font-size: var(--ds-text-xs); } .ds-editor-toolbar[data-variant="craft-shared-pill"] { --_fill: var(--ds-ground); --_rule: var(--ds-rule-soft); } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-breadcrumb__item:first-child, .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__identity { display: none; } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__context { flex-wrap: wrap; row-gap: 0; } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__status .ds-status-badge { border-radius: var(--ds-radius-pill); } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__actions :is(.ds-button-primary, .ds-button-secondary) { border-radius: var(--ds-radius-pill); } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__save { order: 20; flex-basis: 100%; margin-block-start: calc(-1 * var(--ds-space-2)); } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__notice { order: 30; } .ds-editor-toolbar[data-variant="craft-shared-pill"] .ds-editor-toolbar__panel { border-radius: var(--ds-radius-lg); } .ds-empty-state svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-empty-state { --_footprint: calc(var(--ds-row-h) * 1.6); --_pad: var(--ds-space-8); --_radius: var(--ds-radius-md); --_measure: 52ch; --_art: 48px; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; max-inline-size: 100%; color: var(--ds-ink-2); text-align: center; font-size: var(--ds-text-md); line-height: var(--ds-lh-body); } .ds-empty-state[data-align="start"] { align-items: flex-start; text-align: start; } .ds-empty-state__art { display: grid; place-items: center; color: var(--ds-rule-strong); margin-block-end: var(--ds-space-2); } .ds-empty-state__art svg { max-inline-size: 100%; } .ds-empty-state__art[data-shape="circle"] { inline-size: var(--_art); block-size: var(--_art); border-radius: var(--ds-radius-pill); border: var(--ds-border-width) solid var(--ds-rule-strong); color: var(--ds-ink-2); margin: 0; flex: none; aspect-ratio: 1; min-inline-size: var(--_art); box-sizing: border-box; } .ds-empty-state__art[data-shape="circle"] svg { inline-size: 18px; block-size: 18px; stroke-width: 1px; } .ds-empty-state__art[data-shape="glyph"] { inline-size: 32px; block-size: 32px; color: var(--ds-ink); margin: 0; flex: none; } .ds-empty-state__art[data-shape="glyph"] svg { inline-size: 100%; block-size: 100%; } .ds-empty-state__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); color: var(--ds-ink); text-wrap: balance; max-inline-size: var(--_measure); } .ds-empty-state__text { color: var(--ds-ink-muted); max-inline-size: var(--_measure); text-wrap: pretty; } .ds-empty-state__text strong { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); } .ds-empty-state__hint { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-empty-state__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: var(--ds-space-2); margin-block-start: var(--ds-space-2); } .ds-empty-state__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); margin-block-start: var(--ds-space-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-ink-2); } .ds-empty-state__links > a { color: inherit; text-decoration: none; } .ds-empty-state__links > a:hover { text-decoration: underline; } .ds-empty-state__links > a + a { padding-inline-start: var(--ds-space-3); border-inline-start: var(--ds-border-width) solid var(--ds-rule-strong); } .ds-empty-state__links > svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-warning); } .ds-empty-state[data-level="page"] { display: block; text-align: start; min-block-size: 320px; } .ds-empty-state__ghost { opacity: .5; pointer-events: none; user-select: none; } .ds-empty-state__overlay { position: absolute; inset-block-start: var(--ds-space-10); inset-inline-start: 50%; transform: translateX(-50%); z-index: 1; inline-size: min(570px, calc(100% - 2 * var(--ds-space-4))); text-align: start; } .ds-empty-state[data-level="module"] { flex-direction: row; align-items: center; gap: var(--ds-space-6); padding: var(--_pad); border-radius: var(--_radius); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); text-align: start; } .ds-empty-state[data-level="module"] > .ds-empty-state__body { display: flex; flex-direction: column; gap: var(--ds-space-1); min-inline-size: 0; flex: 1 1 auto; } .ds-empty-state[data-level="module"] .ds-empty-state__title { font-size: var(--ds-text-xl); } .ds-empty-state[data-level="module"][data-align="center"] { flex-direction: column; text-align: center; } .ds-empty-state[data-level="module"][data-align="center"] > .ds-empty-state__body { align-items: center; } @media (max-width: 480px) { .ds-empty-state[data-level="module"] { flex-direction: column; align-items: flex-start; --_pad: var(--ds-card-pad); } } .ds-empty-state[data-level="list"] { justify-content: center; min-block-size: var(--_footprint); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--_radius); border: var(--ds-border-width) dashed var(--ds-rule-strong); background: transparent; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-empty-state[data-level="list"] .ds-empty-state__footprint { max-inline-size: var(--_measure); } .ds-empty-state[data-level="list"] .ds-empty-state__footprint a { color: var(--ds-ink-link); } .ds-empty-state[data-level="list"][data-state="drop-active"] { border-color: var(--ds-accent); background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-empty-state[data-level="field"] { appearance: none; flex-direction: row; align-items: center; gap: var(--ds-space-3); inline-size: 100%; min-block-size: var(--ds-row-h); padding: var(--ds-space-2) var(--ds-space-4); border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-ink); text-align: start; font: inherit; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-empty-state[data-level="field"] .ds-empty-state__art { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); color: var(--ds-ink-muted); margin: 0; flex: none; } .ds-empty-state[data-level="field"] .ds-empty-state__art svg { inline-size: 100%; block-size: 100%; } .ds-empty-state[data-level="field"] > .ds-empty-state__body { display: flex; flex-direction: column; gap: 0; min-inline-size: 0; } .ds-empty-state[data-level="field"] .ds-empty-state__title { font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); } .ds-empty-state[data-level="field"]:hover, .ds-empty-state[data-level="field"][data-state="hover"] { background: var(--ds-surface-3); } .ds-empty-state[data-level="field"]:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-empty-state[data-level="field"]:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); cursor: not-allowed; } .ds-empty-state[data-level="field"]:disabled .ds-empty-state__art, .ds-empty-state[data-level="field"]:disabled .ds-empty-state__hint { color: var(--ds-ink-faint); } .ds-empty-state[data-level="field"][data-state="drop-active"] { border-color: var(--ds-accent); background: var(--ds-accent-tint); } .ds-empty-state[data-level="cell"] { display: inline; font-style: italic; color: var(--ds-ink-muted); text-align: inherit; font-size: inherit; line-height: inherit; } .ds-empty-state[data-level="section"] { flex-direction: row; align-items: center; gap: var(--ds-space-4); padding: var(--ds-card-pad) var(--ds-space-6); border-radius: var(--_radius); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); color: var(--ds-ink-muted); text-align: start; } .ds-empty-state[data-level="section"] .ds-empty-state__art { inline-size: 40px; block-size: 40px; color: var(--ds-ink-faint); margin: 0; flex: none; } .ds-empty-state[data-level="section"] .ds-empty-state__art svg { inline-size: 100%; block-size: 100%; } .ds-empty-state[data-level="section"] > .ds-empty-state__body { display: flex; flex-direction: column; gap: var(--ds-space-0-5); min-inline-size: 0; } .ds-empty-state[data-level="section"] .ds-empty-state__title { font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); } .ds-empty-state[data-level="section"] .ds-empty-state__text { font-size: var(--ds-text-sm); } .ds-empty-state[aria-busy="true"] { visibility: hidden; } .ds-empty-state[data-variant="origin-ghosted-preview"] .ds-empty-state__overlay { inset-block-start: var(--ds-space-8); } .ds-empty-state[data-variant="origin-in-card-icon-sentence-link"] { gap: var(--ds-space-3); padding-block: var(--ds-space-6); } .ds-empty-state[data-variant="origin-in-card-icon-sentence-link"] .ds-empty-state__text { color: var(--ds-ink); font-size: var(--ds-text-lg); max-inline-size: 26ch; } .ds-empty-state[data-variant="origin-in-card-icon-sentence-link"] .ds-empty-state__action { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .2em; color: var(--ds-ink); } .ds-empty-state[data-variant="luma-add-row-placeholder"] { min-block-size: 68px; --_radius: var(--ds-radius-md); border-radius: var(--_radius); background: var(--ds-surface); border-color: var(--ds-rule); } .ds-empty-state[data-variant="luma-add-row-placeholder"] .ds-empty-state__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); } .ds-empty-state[data-variant="luma-add-row-placeholder"][data-single] { min-block-size: 46px; } .ds-empty-state[data-variant="luma-admin-greyed-card"] { --_radius: var(--ds-radius-lg); padding: var(--ds-space-6); } .ds-empty-state[data-variant="luma-admin-greyed-card"] .ds-empty-state__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); } .ds-empty-state[data-variant="luma-admin-greyed-card"] .ds-empty-state__text { font-size: var(--ds-text-md); } .ds-empty-state[data-variant="manychat-instruction-card"] { --_pad: var(--ds-space-4); min-block-size: 88px; justify-content: center; gap: var(--ds-space-1); } .ds-empty-state[data-variant="manychat-instruction-card"] .ds-empty-state__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); } .ds-empty-state[data-variant="contra-actionable-empty-card"] { --_radius: var(--ds-radius-xl); --_pad: var(--ds-space-8); } .ds-empty-state[data-variant="contra-actionable-empty-card"] .ds-empty-state__title { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); } .ds-empty-state[data-variant="contra-actionable-empty-card"] .ds-empty-state__text { font-size: var(--ds-text-lg); } .ds-empty-state[data-variant="v0-dashed-footprint"] { --_footprint: 64px; --_radius: var(--ds-radius-md); font-size: var(--ds-text-sm); border-color: var(--ds-rule); } .ds-empty-state[data-variant="retool-dashed-target"] { --_footprint: 40px; --_radius: var(--ds-radius-xs); padding-block: 0; font-size: var(--ds-text-sm); } .ds-empty-state[data-variant="luma-absence-nudge-verb"] { gap: var(--ds-space-3); padding-block: var(--ds-space-12); } .ds-empty-state[data-variant="luma-absence-nudge-verb"] .ds-empty-state__art { inline-size: min(210px, 60vw); margin-block-end: var(--ds-space-4); } .ds-empty-state[data-variant="luma-absence-nudge-verb"] .ds-empty-state__title { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-display-tracking); } .ds-empty-state[data-variant="luma-absence-nudge-verb"] .ds-empty-state__text { font-size: var(--ds-text-lg); } .ds-empty-state[data-variant="navattic-italic-word"] { font-style: italic; } .ds-empty-state[data-variant="quicken-dash"] { font-style: normal; color: var(--ds-ink-faint); } .ds-empty-state[data-variant="quicken-dash"]::before { content: "—"; } .ds-empty-state[data-variant="manychat-n/a-vs-0"] { font-style: normal; font-variant-numeric: tabular-nums; } .ds-empty-state[data-variant="manychat-n/a-vs-0"][data-value="zero"] { color: var(--ds-ink); } .ds-empty-state-host { container: ds-empty-host / inline-size; min-inline-size: 0; } .ds-empty-state[data-compact="true"] { --_art: 32px; --_pad: var(--ds-space-4); --_measure: 100%; gap: var(--ds-space-1-5); font-size: var(--ds-text-sm); } .ds-empty-state[data-compact="true"][data-level="module"], .ds-empty-state[data-compact="true"][data-level="section"] { flex-direction: column; align-items: flex-start; gap: var(--ds-space-3); } .ds-empty-state[data-compact="true"] .ds-empty-state__title, .ds-empty-state[data-compact="true"][data-level="module"] .ds-empty-state__title { font-size: var(--ds-text-md); } .ds-empty-state[data-compact="true"] .ds-empty-state__text { font-size: var(--ds-text-sm); } .ds-empty-state[data-compact="true"] .ds-empty-state__links { gap: var(--ds-space-2); } @container ds-empty-host (max-width: 320px) { .ds-empty-state:not([data-compact="off"]) { --_art: 32px; --_pad: var(--ds-space-4); --_measure: 100%; gap: var(--ds-space-1-5); font-size: var(--ds-text-sm); } .ds-empty-state:not([data-compact="off"])[data-level="module"], .ds-empty-state:not([data-compact="off"])[data-level="section"] { flex-direction: column; align-items: flex-start; gap: var(--ds-space-3); } .ds-empty-state:not([data-compact="off"]) .ds-empty-state__title, .ds-empty-state:not([data-compact="off"])[data-level="module"] .ds-empty-state__title { font-size: var(--ds-text-md); } .ds-empty-state:not([data-compact="off"]) .ds-empty-state__text { font-size: var(--ds-text-sm); } .ds-empty-state:not([data-compact="off"]) .ds-empty-state__links { gap: var(--ds-space-2); } } .ds-empty-state[data-variant="squarespace-icon-line-link"] { gap: var(--ds-space-2); padding-block: var(--ds-space-6); font-size: var(--ds-text-sm); } .ds-empty-state[data-variant="squarespace-icon-line-link"] .ds-empty-state__art { inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); color: var(--ds-ink-muted); margin: 0; } .ds-empty-state[data-variant="squarespace-icon-line-link"] .ds-empty-state__art svg { inline-size: 100%; block-size: 100%; } .ds-empty-state[data-variant="squarespace-icon-line-link"] .ds-empty-state__text { color: var(--ds-ink-2); font-size: var(--ds-text-sm); max-inline-size: 28ch; } .ds-empty-state[data-variant="squarespace-icon-line-link"] .ds-empty-state__action { color: var(--ds-ink-link); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-decoration: underline; text-underline-offset: .2em; background: none; border: 0; padding: var(--ds-space-1); font-family: inherit; cursor: pointer; border-radius: var(--ds-radius-xs); } .ds-empty-state[data-variant="squarespace-icon-line-link"] .ds-empty-state__action:hover { color: var(--ds-ink); } .ds-empty-state[data-variant="squarespace-icon-line-link"] .ds-empty-state__action:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-empty-state[data-variant="plain-icon-left-compact"] { flex-direction: row; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); text-align: start; font-size: var(--ds-text-sm); } .ds-empty-state[data-variant="plain-icon-left-compact"] .ds-empty-state__art { inline-size: var(--ds-control-h-sm); block-size: var(--ds-control-h-sm); flex: none; margin: 0; border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-ink-muted); } .ds-empty-state[data-variant="plain-icon-left-compact"] .ds-empty-state__art svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-empty-state[data-variant="plain-icon-left-compact"] > .ds-empty-state__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-0-5); min-inline-size: 0; } .ds-empty-state[data-variant="plain-icon-left-compact"] .ds-empty-state__title { font-size: var(--ds-text-sm); } .ds-empty-state[data-variant="plain-icon-left-compact"] .ds-empty-state__text { font-size: var(--ds-text-xs); } .ds-empty-state[data-variant="plain-icon-left-compact"] .ds-empty-state__actions { margin-block-start: var(--ds-space-2); } .ds-empty-state[data-variant="pin-ghost-footprint-cta"] { gap: var(--ds-space-2); padding: var(--ds-space-5) var(--ds-space-4); border-radius: var(--ds-radius-md); border: var(--ds-border-width) dashed var(--ds-rule-strong); background: transparent; font-size: var(--ds-text-sm); } .ds-empty-state[data-variant="pin-ghost-footprint-cta"] .ds-empty-state__art { inline-size: calc(var(--ds-space-12) + var(--ds-space-4)); block-size: auto; aspect-ratio: 1; color: var(--ds-rule-strong); margin-block-end: var(--ds-space-1); } .ds-empty-state[data-variant="pin-ghost-footprint-cta"] .ds-empty-state__art svg { inline-size: 100%; block-size: 100%; } .ds-empty-state[data-variant="pin-ghost-footprint-cta"] .ds-empty-state__title { font-size: var(--ds-text-md); } .ds-empty-state[data-variant="pin-ghost-footprint-cta"] .ds-empty-state__text { font-size: var(--ds-text-sm); max-inline-size: 30ch; } .ds-empty-state[data-variant="pin-ghost-footprint-cta"][data-state="drop-active"] { border-color: var(--ds-accent); background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-field-row { --_row-h: calc(var(--ds-size-h) + 2 * var(--ds-space-2)); --_pitch: var(--ds-field-pitch); --_control-w: 100%; --_bw: 2px; position: relative; display: flex; flex-direction: column; gap: var(--ds-field-gap); min-width: 0; padding-block-end: var(--_pitch); color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); text-align: start; } .ds-field-row__label { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-family: var(--ds-font-label); font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-field-row__qualifier { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-field-row__control { position: relative; display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; max-width: 100%; } .ds-field-row__control > .ds-control { width: min(var(--_control-w), 100%); flex: 0 1 auto; } .ds-field-row__control > textarea.ds-control { min-height: calc(var(--ds-size-h) * 2); padding-block: var(--ds-space-2); align-items: flex-start; } .ds-field-row__control :where(input[type="checkbox"]:not([class]), input[type="radio"]:not([class])) { accent-color: var(--ds-accent); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); margin: 0; } .ds-field-row__hint { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-field-row__caption { grid-area: caption; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-field-row__error { display: none; } .ds-field-row[data-state="error"] .ds-field-row__error, .ds-field-row:has([aria-invalid="true"]) .ds-field-row__error { display: flex; } .ds-field-row[data-state="error"] .ds-control, .ds-field-row .ds-control[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-field-row[data-state="error"] .ds-control:hover, .ds-field-row .ds-control[aria-invalid="true"]:hover { border-color: var(--ds-danger); } .ds-field-row__icon { grid-area: icon; width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); color: var(--ds-ink-muted); transition: color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-field-row__icon svg, .ds-field-row__edit, .ds-field-row__chevron, .ds-field-row__remove svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-field-row__icon svg { width: 100%; height: 100%; } .ds-field-row__edit, .ds-field-row__chevron { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-ink-muted); } .ds-field-row__value { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-1); border: 0; border-radius: var(--ds-radius-sm); background: none; font: inherit; color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); font-variant-numeric: var(--ds-numeric); text-align: end; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } :is(button, a).ds-field-row__value { cursor: pointer; text-decoration: none; } :is(button, a).ds-field-row__value:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-field-row[data-state="set"] .ds-field-row__value { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } .ds-field-row[data-state="set"] .ds-field-row__edit { color: var(--ds-ink-2); } .ds-field-row__remove { appearance: none; display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-field-row__remove svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-field-row__remove:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-field-row__action { appearance: none; min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-1); border: 0; border-radius: var(--ds-radius-sm); background: none; font: inherit; font-weight: var(--ds-weight-medium); color: var(--ds-ink); text-decoration: none; cursor: pointer; text-transform: var(--ds-control-case); } .ds-field-row__action:hover { background: var(--ds-hover-bg); } .ds-field-row__action[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-field-row__control > .ds-control:read-only:not(select), .ds-field-row__control > .ds-control[aria-readonly="true"] { background: var(--ds-surface-2); border-color: transparent; color: var(--ds-ink-2); } .ds-field-row[data-state="dirty"] .ds-field-row__label::after { content: ""; width: 6px; height: 6px; border-radius: var(--ds-radius-pill); background: var(--ds-accent); } .ds-field-row[data-state="default"]::before { content: ""; position: absolute; inset-inline-start: var(--_dot-x, calc(-1 * var(--ds-space-3))); inset-block-start: calc(var(--ds-lh-list) * 0.5em - 3px); inline-size: 6px; block-size: 6px; border-radius: var(--ds-radius-pill); border: var(--ds-border-width) solid var(--ds-border-strong); pointer-events: none; } .ds-field-row__default { display: inline-flex; align-items: center; flex: none; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); white-space: nowrap; } .ds-field-row__label > .ds-field-row__default { margin-inline-start: var(--ds-space-1); } .ds-field-row__control > .ds-field-row__default { margin-inline-end: var(--ds-space-1); } .ds-field-row:not([data-state="default"]) .ds-field-row__default { display: none; } .ds-field-row[aria-disabled="true"] { cursor: not-allowed; } .ds-field-row[aria-disabled="true"] :is(.ds-field-row__label, .ds-field-row__value, .ds-field-row__caption, .ds-field-row__icon, .ds-field-row__edit, .ds-field-row__chevron, .ds-field-row__hint) { color: var(--ds-ink-faint); } .ds-field-row[aria-disabled="true"] :is(.ds-field-row__value, .ds-field-row__remove, .ds-field-row__action) { pointer-events: none; } .ds-field-row[data-state="locked"] .ds-field-row__control { opacity: .5; } .ds-field-row[data-state="locked"] .ds-field-row__control > * { pointer-events: none; } .ds-field-row[aria-busy="true"] .ds-field-row__control > * { visibility: hidden; } .ds-field-row[aria-busy="true"] .ds-field-row__control::after { content: ""; position: absolute; inset: 0; border-radius: var(--ds-radius-sm); background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-surface-3) 50%, var(--ds-surface-2) 75%); background-size: 200% 100%; animation: ds-field-row-shimmer calc(var(--ds-dur-slow) * 5) linear infinite; } @keyframes ds-field-row-shimmer { to { background-position: -200% 0; } } .ds-field-row[data-variant="retool-label-over-field"] { gap: var(--ds-space-1); --_pitch: var(--ds-space-3); } .ds-field-row[data-variant="retool-label-over-field"] .ds-field-row__label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); } .ds-field-row[data-variant="retool-label-over-field"] .ds-field-row__required { color: var(--ds-danger); } .ds-field-row[data-variant="hsaj-same-size-grey-label"] { gap: var(--ds-space-4); --_pitch: var(--ds-space-4); } .ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) { --_control-w: 312px; --_pitch: 0px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); min-height: var(--_row-h); } .ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) .ds-field-row__label { flex: 1 1 auto; } .ds-field-row[data-variant="descript-label-left-control-right"] .ds-field-row__label { color: var(--ds-ink); font-family: var(--ds-font-sans); text-transform: none; letter-spacing: 0; } .ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) .ds-field-row__control { flex: 0 1 auto; justify-content: flex-end; margin-inline-start: auto; } .ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) .ds-field-row__control > .ds-control { text-align: end; } .ds-field-row:is([data-variant="jstov-inspector"], [data-variant="descript-label-left-control-right"]) :is(.ds-field-row__hint, .ds-field-row__error) { flex-basis: 100%; } .ds-field-row[data-variant="descript-label-left-control-right"] .ds-field-row__control > .ds-control { background: var(--ds-surface-2); border-color: transparent; } .ds-field-row[data-variant="descript-label-left-control-right"] .ds-field-row__control > .ds-control:hover { border-color: var(--ds-border); } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"], [data-variant="navattic-88-icon-labelled-toggle-stacked"]) { --_pitch: 0px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon label control"; align-items: center; align-content: center; column-gap: var(--ds-space-3); row-gap: 0; min-height: var(--_row-h); padding-block: var(--ds-space-2); padding-inline: var(--_row-pad-x, var(--ds-card-pad)); } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):has(.ds-field-row__caption, .ds-field-row__hint, .ds-field-row__error) { grid-template-areas: "icon label control" "icon caption control"; } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):not(:has(.ds-field-row__icon)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label control"; } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):not(:has(.ds-field-row__icon)):has(.ds-field-row__caption, .ds-field-row__hint, .ds-field-row__error) { grid-template-areas: "label control" "caption control"; } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"], [data-variant="navattic-88-icon-labelled-toggle-stacked"]) .ds-field-row__label { grid-area: label; font-family: var(--ds-font-sans); text-transform: none; letter-spacing: 0; color: var(--ds-ink); } .ds-field-row:is([data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"]) .ds-field-row__label { color: var(--ds-ink-2); } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"], [data-variant="navattic-88-icon-labelled-toggle-stacked"]) .ds-field-row__control { grid-area: control; justify-self: end; display: inline-flex; } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]) :is(.ds-field-row__hint, .ds-field-row__error) { grid-area: caption; } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"])[data-state="default"]::before { inset-inline-start: var(--_dot-x, calc(var(--_row-pad-x, var(--ds-card-pad)) / 2 - 3px)); inset-block-start: calc(50% - 3px); } .ds-field-row:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]) .ds-field-row__control { align-items: center; } .ds-field-row[data-state="default"]:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):has(.ds-field-row__default) { grid-template-columns: auto minmax(min-content, 1fr) minmax(0, auto); } .ds-field-row[data-state="default"]:is([data-variant="jstov-setting"], [data-variant="luma-setting-row"], [data-variant="luma-value-with-consequence-caption"], [data-variant="hsajl-toggle-row"]):has(.ds-field-row__default):not(:has(.ds-field-row__icon)) { grid-template-columns: minmax(min-content, 1fr) minmax(0, auto); } .ds-field-row[data-state="default"] .ds-field-row__control:has(> .ds-field-row__default) { flex-wrap: wrap; justify-content: flex-end; min-inline-size: 0; row-gap: 0; } :is(a, button).ds-field-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } :is(a, button).ds-field-row:hover { background: var(--ds-hover-bg); } .ds-field-row[data-variant^="luma-"][data-state="set"] .ds-field-row__icon { color: var(--ds-accent); } .ds-field-row[data-variant="hsajl-toggle-row"] { --_row-h: calc(var(--ds-size-h) + var(--ds-space-3)); } .ds-field-row[data-variant="hsajl-toggle-row"] .ds-field-row__label { font-weight: var(--ds-weight-semibold); } .ds-field-row[data-variant="navattic-88-icon-labelled-toggle-stacked"] { grid-template-areas: "icon label" "control control"; grid-template-columns: auto minmax(0, 1fr); row-gap: var(--ds-space-2); min-height: 0; } .ds-field-row[data-variant="navattic-88-icon-labelled-toggle-stacked"] .ds-field-row__control { justify-self: start; } .ds-field-row[data-variant="navattic-88-icon-labelled-toggle-stacked"] .ds-field-row__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-field-row[data-variant="clickup-toggle-card"] { --_pitch: 0px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon label control"; align-items: center; column-gap: var(--ds-space-2); min-height: var(--_row-h); padding-inline: var(--ds-space-4); background: var(--ds-surface); border: var(--_bw) solid var(--ds-border); border-radius: var(--ds-radius-xs); transition: border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-field-row[data-variant="clickup-toggle-card"]:has(input:checked) { border-color: var(--ds-border-selected); } .ds-field-row[data-variant="clickup-toggle-card"]:hover { border-color: var(--ds-border-strong); } .ds-field-row[data-variant="clickup-toggle-card"]:has(input:checked):hover { border-color: var(--ds-border-selected); } .ds-field-row[data-variant="clickup-toggle-card"] .ds-field-row__label { grid-area: label; font-family: var(--ds-font-sans); text-transform: none; letter-spacing: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); gap: var(--ds-space-2); } .ds-field-row[data-variant="clickup-toggle-card"] .ds-field-row__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-ink-2); } .ds-field-row[data-variant="clickup-toggle-card"] .ds-field-row__control { grid-area: control; justify-self: end; } .ds-field-row[data-variant="clickup-toggle-card"]:has(.ds-field-row__cap) { padding-block-start: var(--ds-space-4); } .ds-field-row__cap { position: absolute; inset: calc(-1 * var(--_bw)) calc(-1 * var(--_bw)) auto; height: var(--ds-space-4); display: flex; align-items: center; justify-content: center; background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); font-size: var(--ds-text-xs); line-height: 1; border-start-start-radius: var(--ds-radius-xs); border-start-end-radius: var(--ds-radius-xs); } .ds-field-row__marker { display: inline-flex; align-items: center; height: calc(var(--ds-icon-size) + var(--ds-space-1)); padding-inline: calc(var(--ds-space-1) * 1.5); border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); white-space: nowrap; } .ds-filter-bar, .ds-filter-bar [data-size] { --_fb-h: var(--ds-size-h); --_fb-text: var(--ds-size-text); --_fb-pad-x: var(--ds-size-pad-x); } :is(.ds-filter-bar[data-size="sm"], .ds-filter-bar [data-size="sm"]) { --_fb-h: var(--ds-control-h-sm); --_fb-text: var(--ds-text-sm); --_fb-pad-x: calc(var(--ds-control-pad-x) - 2px); } :is(.ds-filter-bar[data-size="md"], .ds-filter-bar [data-size="md"]) { --_fb-h: var(--ds-control-h); --_fb-text: var(--ds-text-md); --_fb-pad-x: var(--ds-control-pad-x); } :is(.ds-filter-bar[data-size="lg"], .ds-filter-bar [data-size="lg"]) { --_fb-h: var(--ds-control-h-lg); --_fb-text: var(--ds-text-lg); --_fb-pad-x: calc(var(--ds-control-pad-x) + 4px); } .ds-filter-bar { --_search-w: 192px; --_date-w: 266px; --_grid-min: 220px; display: flex; flex-direction: column; gap: var(--ds-space-3); min-width: 0; color: var(--ds-ink); font-size: var(--_fb-text); line-height: var(--ds-lh-list); } .ds-filter-bar__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); min-width: 0; } .ds-filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); min-width: 0; } .ds-filter-bar__group[data-align="end"] { margin-inline-start: auto; } .ds-filter-bar__toolbar > .ds-spacer { flex: 1 1 auto; } .ds-filter-bar__search, .ds-filter-bar__button, .ds-filter-bar__split, .ds-filter-bar__token { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--_fb-h); padding-inline: var(--_fb-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--_fb-text); line-height: var(--ds-lh-list); white-space: nowrap; box-shadow: var(--ds-shadow-lip); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-filter-bar__button { appearance: none; cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__button:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-filter-bar__button:disabled, .ds-filter-bar__button[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-filter-bar__button[aria-pressed="true"] { border-color: var(--ds-border-strong); color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-filter-bar__button svg, .ds-filter-bar__search svg, .ds-filter-bar__split svg, .ds-filter-bar__token svg, .ds-filter-bar__chip svg, .ds-filter-bar__tool svg, .ds-filter-bar__slot svg { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-filter-bar__button svg:first-child, .ds-filter-bar__search svg { color: var(--ds-ink-muted); } .ds-filter-bar__count { display: inline-grid; place-items: center; min-width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); padding-inline: var(--ds-space-1); border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); color: var(--ds-ink); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; } .ds-filter-bar__button[aria-pressed="true"] .ds-filter-bar__count { background: var(--ds-surface-selected); } .ds-filter-bar__search { flex: 0 1 var(--_search-w); min-width: min(160px, 100%); cursor: text; } .ds-filter-bar__search:hover { border-color: var(--ds-border-strong); } .ds-filter-bar__search:focus-within { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); } .ds-filter-bar__search input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; } .ds-filter-bar__search input:focus-visible { outline: none; } .ds-filter-bar__search input::-webkit-search-cancel-button { appearance: none; } .ds-filter-bar__clear-input { appearance: none; display: inline-grid; place-items: center; width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); color: var(--ds-ink-muted); cursor: pointer; } .ds-filter-bar__clear-input svg { width: 12px; height: 12px; } .ds-filter-bar__clear-input:hover { color: var(--ds-ink); } .ds-filter-bar__search:not(:has(input:not(:placeholder-shown))) .ds-filter-bar__clear-input { display: none; } .ds-filter-bar__split { padding: 0; overflow: clip; } .ds-filter-bar__split-label { display: inline-flex; align-items: center; gap: var(--ds-space-2); align-self: stretch; padding-inline: var(--_fb-pad-x); background: var(--ds-surface-2); color: var(--ds-ink-muted); border-inline-end: var(--ds-border-width) solid var(--ds-border); } .ds-filter-bar__split-value { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); align-self: stretch; padding-inline: var(--_fb-pad-x); border: 0; background: none; font: inherit; color: var(--ds-ink); cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__split-value:hover { background: var(--ds-hover-bg); } .ds-filter-bar__split-value:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-filter-bar__split-value[aria-expanded="true"] { background: var(--ds-surface-selected); } .ds-filter-bar__tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2); border-radius: var(--ds-radius-md); background: var(--ds-surface-2); } .ds-filter-bar__tray[hidden] { display: none; } .ds-filter-bar__token { padding-inline: var(--ds-space-1) 0; gap: 0; } .ds-filter-bar__token-main { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); align-self: stretch; padding-inline: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-xs); background: none; font: inherit; color: var(--ds-ink); cursor: pointer; } .ds-filter-bar__token-main:hover { background: var(--ds-hover-bg); } .ds-filter-bar__token-key { color: var(--ds-ink-muted); } .ds-filter-bar__token-value { display: inline-flex; align-items: center; height: calc(var(--_fb-h) - var(--ds-space-3)); padding-inline: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); font-size: var(--ds-text-sm); } .ds-filter-bar__token-remove { appearance: none; display: inline-grid; place-items: center; width: calc(var(--_fb-h) - 2 * var(--ds-border-width)); align-self: stretch; border: 0; border-inline-start: var(--ds-border-width) solid var(--ds-rule); background: none; color: var(--ds-ink-muted); cursor: pointer; } .ds-filter-bar__token-remove:hover { background: var(--ds-danger-tint); color: var(--ds-danger-ink); } .ds-filter-bar__token-remove:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-filter-bar__ghost { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--_fb-h); padding-inline: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-sm); background: none; font: inherit; color: var(--ds-ink-muted); cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__ghost:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-filter-bar__ghost svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-filter-bar[aria-busy="true"] .ds-filter-bar__token { position: relative; } .ds-filter-bar[aria-busy="true"] .ds-filter-bar__token > * { visibility: hidden; } .ds-filter-bar[aria-busy="true"] .ds-filter-bar__token::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-surface-3) 50%, var(--ds-surface-2) 75%); background-size: 200% 100%; animation: ds-filter-bar-shimmer calc(var(--ds-dur-slow) * 5) linear infinite; } @keyframes ds-filter-bar-shimmer { to { background-position: -200% 0; } } .ds-filter-bar__summary { display: inline-flex; align-items: baseline; gap: var(--ds-space-1); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); white-space: nowrap; } .ds-filter-bar__summary strong { color: var(--ds-ink); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; } .ds-filter-bar__summary[data-state="empty"] { color: var(--ds-ink-muted); } .ds-filter-bar__summary[data-state="empty"] strong { color: var(--ds-ink-muted); } .ds-filter-bar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); min-width: 0; } .ds-filter-bar__chips[data-overflow] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: var(--ds-space-0-5); scroll-snap-type: x proximity; } .ds-filter-bar__chips[data-overflow]::-webkit-scrollbar { display: none; } .ds-filter-bar__chips[data-overflow="fade"] { mask-image: linear-gradient(to right, currentColor calc(100% - var(--ds-space-10)), transparent); } .ds-filter-bar__chips[data-overflow] > * { flex: none; scroll-snap-align: start; } .ds-filter-bar__chip-group { display: flex; flex-direction: column; gap: var(--ds-space-1-5); min-width: 0; } .ds-filter-bar__chip-group > .ds-filter-bar__chips { flex: 1 1 auto; } .ds-filter-bar__group-label { flex: none; margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } @media (min-width: 520px) { .ds-filter-bar__chip-group { flex-direction: row; align-items: baseline; gap: var(--ds-space-3); } .ds-filter-bar__chip-group > .ds-filter-bar__group-label { width: var(--_fb-label-w, 88px); } } .ds-filter-bar__chip { appearance: none; display: inline-flex; align-items: center; gap: calc(var(--ds-space-1) * 1.5); min-height: var(--_fb-h); padding-inline: var(--_fb-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--_fb-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); white-space: nowrap; cursor: pointer; text-transform: var(--ds-control-case); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-filter-bar__chip:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-filter-bar__chip:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); cursor: not-allowed; } .ds-filter-bar__chip-key { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-filter-bar__chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) { background: var(--ds-selected-bg); color: var(--ds-selected-ink); border-color: var(--ds-selected-bg); font-weight: var(--ds-selected-weight); } .ds-filter-bar__chip[data-tone="muted"] { color: var(--ds-ink-muted); } .ds-filter-bar__tool { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--_fb-h); padding-inline: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-sm); background: none; font: inherit; font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__tool svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-filter-bar__tool:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-filter-bar__tool[aria-pressed="true"] { color: var(--ds-accent-ink); } .ds-filter-bar__slot { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--_fb-h); padding-inline: var(--_fb-pad-x); border: var(--ds-border-width) dashed var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: transparent; font: inherit; color: var(--ds-ink-muted); cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__slot:hover { background: var(--ds-hover-bg); color: var(--ds-ink); border-style: solid; } .ds-filter-bar__bulk { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); margin: 0; accent-color: var(--ds-accent); flex: none; } .ds-filter-bar__button[data-kind="date"] { min-width: var(--_date-w); } .ds-filter-bar__button[data-kind="date"] > span { font-variant-numeric: tabular-nums; } .ds-filter-bar__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--_grid-min), 100%), 1fr)); gap: var(--ds-space-4); } .ds-filter-bar__grid > * { width: 100%; max-width: 100%; } .ds-filter-bar__grid .ds-filter-bar__search { flex: none; } .ds-filter-bar__button[data-kind="select"] { justify-content: space-between; color: var(--ds-ink-2); } .ds-filter-bar__button[data-kind="select"] svg:last-child { color: var(--ds-ink-muted); } .ds-filter-bar__overflow { appearance: none; display: inline-grid; place-items: center; flex: none; width: var(--_fb-h); height: var(--_fb-h); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-ink); cursor: pointer; box-shadow: var(--ds-shadow-float); } .ds-filter-bar__overflow svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__chip { min-height: calc(var(--_fb-h) - var(--ds-space-2)); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-pill); border-color: var(--ds-rule); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__count { min-width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__chip { border-radius: var(--ds-radius-pill); border-color: transparent; background: var(--ds-surface-2); padding-inline: var(--ds-space-5); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__chip:hover { background: var(--ds-surface-3); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__chip:is([aria-checked="true"], [aria-pressed="true"]) { background: var(--ds-selected-bg); color: var(--ds-selected-ink); border-color: transparent; box-shadow: none; } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__search { border-radius: var(--ds-radius-pill); border-color: transparent; background: var(--ds-surface-2); box-shadow: none; } .ds-filter-bar[data-variant="manychat-chip-bar"] .ds-filter-bar__chips { gap: var(--ds-space-3); } .ds-filter-bar[data-variant="manychat-chip-bar"] .ds-filter-bar__chip { border-radius: var(--ds-radius-md); } @media (max-width: 480px) { .ds-filter-bar__search { flex-basis: 100%; } .ds-filter-bar__group[data-align="end"] { margin-inline-start: 0; } .ds-filter-bar__button[data-kind="date"] { min-width: 0; } } .ds-filter-bar__views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); padding-bottom: var(--ds-space-2); border-bottom: var(--ds-border-width) solid var(--ds-rule); } .ds-filter-bar__view { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2-5); border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); font: inherit; font-size: var(--ds-text-sm); white-space: nowrap; cursor: pointer; } .ds-filter-bar__view:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-filter-bar__view[aria-selected="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); } .ds-filter-bar__view-count { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; } .ds-filter-bar__view[aria-selected="true"] .ds-filter-bar__view-count { color: inherit; } .ds-filter-bar__view-add { appearance: none; display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); border: var(--ds-border-width) dashed var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); cursor: pointer; } .ds-filter-bar__view-add:hover { border-style: solid; color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-filter-bar__view-add svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-filter-bar__view-new { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); min-width: 0; } .ds-filter-bar__view-name input { min-height: var(--ds-control-h-sm); width: 200px; max-width: 100%; padding-inline: var(--ds-space-2-5); border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); } .ds-filter-bar__view-save { appearance: none; display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-primary-border); border-radius: var(--ds-radius-button); background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__view-save:hover { background: var(--ds-primary-fill-hover); } .ds-filter-bar__view-new .ds-filter-bar__ghost { min-height: var(--ds-control-h-sm); font-size: var(--ds-text-sm); } .ds-filter-bar__view-note { flex-basis: 100%; color: var(--ds-ink-muted); font-size: var(--ds-text-xs); } .ds-filter-bar__facet-key { font-weight: var(--ds-weight-medium); } .ds-filter-bar__facet-value { color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; } .ds-filter-bar__button[aria-pressed="true"] .ds-filter-bar__facet-value { color: var(--ds-ink); } .ds-filter-bar__button[data-facet] svg:last-child { color: var(--ds-ink-muted); } .ds-filter-bar__filters { display: none; } .ds-filter-bar__clear { display: none; } .ds-filter-bar__tray-label { display: none; } .ds-filter-bar__result { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-filter-bar__result[data-tone="none"] { font-weight: var(--ds-weight-medium); } .ds-filter-bar__save { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--_fb-h); padding-inline: var(--_fb-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); color: var(--ds-ink); font: inherit; font-weight: var(--ds-weight-medium); white-space: nowrap; cursor: pointer; text-transform: var(--ds-control-case); } .ds-filter-bar__save:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-filter-bar__save:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; cursor: not-allowed; } .ds-filter-bar[data-state="saved"] .ds-filter-bar__save:disabled { color: var(--ds-ink-muted); background: none; border-color: transparent; } .ds-filter-bar__token[data-state="culprit"] { border-color: var(--ds-warning-line); background: var(--ds-warning-tint); } .ds-filter-bar__token[data-state="culprit"] .ds-filter-bar__token-value { border-color: var(--ds-warning-line); background: var(--ds-surface); } .ds-filter-bar__notice { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); background: var(--ds-surface); } .ds-filter-bar__notice[data-tone="narrow"] { background: var(--ds-info-tint); border-color: var(--ds-info-line); color: var(--ds-info-ink); } .ds-filter-bar__notice[data-tone="empty"] { background: var(--ds-warning-tint); border-color: var(--ds-warning-line); color: var(--ds-warning-ink); } .ds-filter-bar__notice[data-tone="saved"] { background: var(--ds-surface-2); border-color: transparent; color: var(--ds-ink-2); } .ds-filter-bar__notice-text { margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); } .ds-filter-bar__notice-text strong { font-weight: var(--ds-weight-semibold); } .ds-filter-bar__suggests { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); } .ds-filter-bar__suggest { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); white-space: nowrap; cursor: pointer; } .ds-filter-bar__suggest span { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; } .ds-filter-bar__suggest:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-filter-bar__suggest[data-best] { border-color: var(--ds-border-strong); font-weight: var(--ds-weight-medium); } .ds-filter-bar__suggest:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); cursor: not-allowed; } .ds-filter-bar__suggest:disabled span { color: var(--ds-ink-faint); } .ds-filter-bar[aria-busy="true"] .ds-filter-bar__result { color: var(--ds-ink-muted); } .ds-filter-bar[data-variant="jstov"] { --_search-w: 280px; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] { --_search-w: 360px; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__search { border-radius: var(--ds-radius-pill); box-shadow: none; background: var(--ds-surface-2); border-color: transparent; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__group[data-role="facets"] { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--ds-space-2); padding: var(--ds-space-2); border-radius: var(--ds-radius-lg); background: var(--ds-surface-2); } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__button[data-facet] { justify-content: center; border-color: transparent; background: transparent; box-shadow: none; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__button[data-facet]:hover { background: var(--ds-hover-bg); } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__button[data-facet] .ds-filter-bar__facet-key { display: none; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__button[data-facet][aria-pressed="true"] { background: var(--ds-surface); } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__button[data-facet][aria-pressed="true"] .ds-filter-bar__facet-value { color: var(--ds-accent-ink); } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__clear { display: inline-flex; align-items: center; appearance: none; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-ink); border-radius: var(--ds-radius-pill); background: none; color: var(--ds-ink); font: inherit; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); cursor: pointer; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__clear:disabled { border-color: var(--ds-rule); color: var(--ds-ink-faint); cursor: not-allowed; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__save { border-radius: var(--ds-radius-pill); min-height: var(--ds-control-h-sm); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__tray { background: none; padding: 0; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__token { border-radius: var(--ds-radius-pill); box-shadow: none; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__token-value { border: 0; background: none; color: var(--ds-accent-ink); } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__tray .ds-filter-bar__ghost[data-role="clear-all"] { display: none; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__views { border-bottom: 0; } .ds-filter-bar[data-variant="rocketmoney-segment-strip"] .ds-filter-bar__view { border-radius: var(--ds-radius-pill); } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__search { flex: 1 1 100%; min-height: var(--ds-control-h-lg); border-radius: var(--ds-radius-pill); border-color: var(--ds-border-strong); box-shadow: none; padding-inline: var(--ds-space-5); } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__button[data-facet] { border-radius: var(--ds-radius-pill); border-color: var(--ds-border-strong); box-shadow: none; min-height: var(--ds-control-h-sm); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__button[data-facet][aria-pressed="true"] { background: var(--ds-accent-tint); color: var(--ds-accent-ink); border-color: transparent; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__button[data-facet][aria-pressed="true"] .ds-filter-bar__facet-value { color: inherit; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__tray { background: none; padding: 0; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__token { border-radius: var(--ds-radius-pill); border-color: transparent; background: var(--ds-accent-tint); color: var(--ds-accent-ink); box-shadow: none; padding-inline-start: var(--ds-space-2); } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__token-key { color: inherit; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__token-key::after { content: ":"; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__token-value { border: 0; background: none; padding: 0; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__token-remove { border-inline-start: 0; color: inherit; border-radius: 0 var(--ds-radius-pill) var(--ds-radius-pill) 0; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__view { border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-pill); } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__views { border-bottom: 0; } .ds-filter-bar[data-variant="paypal-pill-row"] .ds-filter-bar__save { border-radius: var(--ds-radius-pill); } .ds-filter-bar[data-variant="base44-filter-by-chips"] { --_search-w: 240px; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__button[data-facet] { display: none; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__filters { display: inline-flex; align-items: center; gap: var(--ds-space-2); appearance: none; min-height: var(--_fb-h); padding-inline: var(--_fb-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); box-shadow: var(--ds-shadow-lip); color: var(--ds-ink); font: inherit; font-weight: var(--ds-weight-medium); cursor: pointer; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__filters:hover { background: var(--ds-hover-bg); } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__filters svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__filters .ds-filter-bar__count { background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__tray { background: none; padding: 0; gap: var(--ds-space-1-5); } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__tray-label { display: inline; color: var(--ds-ink-muted); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__tray-label::after { content: ":"; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__token { min-height: calc(var(--_fb-h) - var(--ds-space-3)); border-color: transparent; background: var(--ds-accent-tint); color: var(--ds-accent-ink); box-shadow: none; border-radius: var(--ds-radius-xs); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__token-key { display: none; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__token-main { padding-inline: var(--ds-space-1-5); color: inherit; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__token-value { height: auto; border: 0; background: none; padding: 0; font-size: inherit; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__token-remove { width: calc(var(--_fb-h) - var(--ds-space-4)); border-inline-start: 0; color: inherit; } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__tray .ds-filter-bar__ghost { min-height: calc(var(--_fb-h) - var(--ds-space-3)); font-size: var(--ds-text-xs); color: var(--ds-ink); } .ds-filter-bar[data-variant="base44-filter-by-chips"] .ds-filter-bar__tray .ds-filter-bar__ghost svg { display: none; } .ds-filter-bar[data-variant="midday-grey-value-chips"] { --_search-w: 300px; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__search { border-radius: var(--ds-radius-xs); box-shadow: none; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__button[data-facet] { display: none; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__filters { display: inline-grid; place-items: center; grid-auto-flow: column; gap: var(--ds-space-1); appearance: none; min-height: var(--_fb-h); min-width: var(--_fb-h); padding-inline: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); background: var(--ds-surface); color: var(--ds-ink-muted); font: inherit; font-size: var(--ds-text-xs); cursor: pointer; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__filters > span:not(.ds-filter-bar__count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__filters svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__filters:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__tray { background: none; padding: 0; gap: var(--ds-space-1); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__token { border: 0; border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); box-shadow: none; min-height: var(--ds-control-h-sm); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__token-key { display: none; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__token-value { border: 0; background: none; padding: 0; height: auto; font-size: inherit; color: var(--ds-ink-2); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__token-remove { border-inline-start: 0; width: var(--ds-control-h-sm); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__token[data-state="culprit"] { background: var(--ds-warning-tint); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__views { border-bottom: 0; } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__view { border-radius: var(--ds-radius-xs); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="midday-grey-value-chips"] .ds-filter-bar__result { padding: var(--ds-space-1) var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); font-size: var(--ds-text-xs); } .ds-filter-bar__chip[data-state="culprit"], .ds-filter-bar__button[data-state="culprit"] { border-color: var(--ds-warning-line); background: var(--ds-warning-tint); color: var(--ds-warning-ink); } .ds-filter-bar__chip[data-state="culprit"] .ds-filter-bar__chip-key { color: inherit; } .ds-filter-bar__slot > span { color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; } .ds-filter-bar__tool svg:last-child:not(:first-child) { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-filter-bar__summary[aria-live] strong { font-variant-numeric: tabular-nums; } .ds-filter-bar[data-variant="manychat-chip-bar"] :is(.ds-filter-bar__search, .ds-filter-bar__save, .ds-filter-bar__suggest, .ds-filter-bar__ghost, .ds-filter-bar__view-save) { border-radius: var(--ds-radius-md); } .ds-filter-bar[data-variant="manychat-chip-bar"] .ds-filter-bar__view-name input { border-radius: var(--ds-radius-md); } .ds-filter-bar[data-variant="manychat-chip-bar"] .ds-filter-bar__search { box-shadow: none; } .ds-filter-bar[data-variant="clickup-key-value-chips"] :is(.ds-filter-bar__search, .ds-filter-bar__save, .ds-filter-bar__suggest, .ds-filter-bar__view-save) { min-height: calc(var(--_fb-h) - var(--ds-space-2)); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-pill); font-size: var(--ds-text-xs); box-shadow: none; } .ds-filter-bar[data-variant="clickup-key-value-chips"] :is(.ds-filter-bar__search, .ds-filter-bar__save, .ds-filter-bar__suggest) { border-color: var(--ds-rule); } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__search { --_search-w: 180px; } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__result { display: inline-flex; align-items: center; min-height: calc(var(--_fb-h) - var(--ds-space-2)); padding-inline: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__view-name input { min-height: calc(var(--_fb-h) - var(--ds-space-2)); border-radius: var(--ds-radius-pill); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__view-new .ds-filter-bar__ghost { min-height: calc(var(--_fb-h) - var(--ds-space-2)); font-size: var(--ds-text-xs); } .ds-filter-bar[data-variant="clickup-key-value-chips"] .ds-filter-bar__chip[data-state="culprit"] { border-color: var(--ds-warning-line); } .ds-filter-bar[data-variant="givingli-single-select-chips"] :is(.ds-filter-bar__save, .ds-filter-bar__suggest, .ds-filter-bar__view-save, .ds-filter-bar__ghost) { border-radius: var(--ds-radius-pill); } .ds-filter-bar[data-variant="givingli-single-select-chips"] :is(.ds-filter-bar__save, .ds-filter-bar__suggest) { border-color: transparent; background: var(--ds-surface-2); box-shadow: none; } .ds-filter-bar[data-variant="givingli-single-select-chips"] :is(.ds-filter-bar__save, .ds-filter-bar__suggest):hover { background: var(--ds-surface-3); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__view-name input { border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-4); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__notice { border-radius: var(--ds-radius-lg); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__chip[data-state="culprit"], .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__chip[data-state="culprit"][aria-checked="true"] { background: var(--ds-warning-tint); color: var(--ds-warning-ink); border-color: var(--ds-warning-line); } .ds-filter-bar[data-variant="givingli-single-select-chips"] .ds-filter-bar__chip .ds-filter-bar__count { background: var(--ds-surface); } .ds-filter-bar[data-variant="manychat-42-split-toolbar-dashed-slot"] .ds-filter-bar__search { box-shadow: none; } .ds-filter-bar[data-variant="manychat-42-split-toolbar-dashed-slot"] .ds-filter-bar__notice .ds-filter-bar__slot { background: var(--ds-surface); color: var(--ds-ink); } .ds-filter-bar[data-variant="manychat-126-4col-filter-grid"] .ds-filter-bar__button[data-kind="select"][aria-pressed="true"] { color: var(--ds-ink); } .ds-filter-bar[data-variant="manychat-126-4col-filter-grid"] .ds-filter-bar__button[data-kind="select"][data-state="culprit"] { color: var(--ds-warning-ink); } .ds-filter-bar[data-variant="manychat-126-4col-filter-grid"] .ds-filter-bar__button[data-kind="select"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-footer { --_pitch: var(--ds-control-h); --_col-min: 140px; --_card-w: clamp(340px, 24cqi, 432px); --_max: var(--ds-container-max); --_band: var(--ds-surface-inverse); --_link-ink: var(--ds-ink-muted); --_title-ink: var(--ds-ink-muted); --_toggle-h: var(--ds-control-h-sm); --_spin: var(--ds-ink); position: relative; container-type: inline-size; background: var(--ds-ground); color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-footer__inner { position: relative; width: 100%; max-width: var(--_max); margin-inline: auto; padding-inline: var(--ds-gutter-page); padding-block: var(--ds-space-16) var(--ds-space-8); min-width: 0; } .ds-footer__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--ds-space-10) var(--ds-space-6); min-width: 0; } .ds-footer__brand { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-5); } .ds-footer__groups { flex: 2 1 320px; min-width: 0; } .ds-footer__groups-stack { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-16); } .ds-footer__groups-stack > .ds-footer__groups { flex: none; } .ds-footer__card { flex: 0 1 var(--_card-w); max-width: 100%; min-width: 0; } .ds-footer__logo { display: inline-flex; align-items: center; gap: var(--ds-space-2); align-self: flex-start; min-height: var(--_pitch); border-radius: var(--ds-radius-sm); color: var(--ds-ink); text-decoration: none; font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-lg); letter-spacing: var(--ds-heading-tracking); } .ds-footer__mark { width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); flex: none; fill: currentColor; } .ds-footer__tagline { color: var(--ds-ink-muted); max-width: 28ch; margin: 0; } .ds-footer__ai-rail { display: flex; flex-direction: column; gap: var(--ds-space-2); } .ds-footer__ai-label { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-footer__ai-list { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin: 0; padding: 0; list-style: none; } .ds-footer__ai-tile { display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink-2); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); text-decoration: none; transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-footer__ai-tile:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-footer__badges { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; } .ds-footer__seal { display: inline-grid; place-items: center; width: var(--ds-control-h-lg); height: var(--ds-control-h-lg); border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-pill); color: var(--ds-ink-muted); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1; } .ds-footer__brand-foot { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--ds-space-4); } .ds-footer__ambient { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: min(420px, 60%); height: auto; pointer-events: none; fill: none; stroke: var(--ds-line-art); stroke-width: 1; opacity: .5; z-index: 0; } .ds-footer__ambient + * { position: relative; z-index: 1; } .ds-footer__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--_col-min), 100%), 1fr)); gap: var(--ds-space-8) var(--ds-space-5); align-items: start; } .ds-footer__col { display: flex; flex-direction: column; gap: var(--ds-space-8); min-width: 0; } .ds-footer__group { min-width: 0; } .ds-footer__group-title { display: flex; align-items: center; min-height: var(--_pitch); margin: 0; font-size: inherit; font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-list); color: var(--_title-ink); } .ds-footer__list { margin: 0; padding: 0; list-style: none; } .ds-footer__link { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--_pitch); max-width: 100%; border-radius: var(--ds-radius-xs); color: var(--_link-ink); text-decoration: none; transition: color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-footer__link:hover, .ds-footer__link[data-state="hover"] { color: var(--ds-ink); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .2em; } .ds-footer__link[aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-selected-weight); } .ds-footer__link[aria-disabled="true"] { color: var(--ds-ink-faint); pointer-events: none; } .ds-footer__badge { display: inline-block; padding: 0 var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-rule-strong); border-radius: var(--ds-radius-xs); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; color: var(--ds-ink-2); background: var(--ds-surface); } .ds-footer__badge[data-tone="accent"] { border-color: transparent; background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-footer__ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; color: var(--ds-ink-faint); flex: none; } .ds-footer__link:hover .ds-footer__ext { color: currentColor; } .ds-footer[data-headings="rule"] .ds-footer__group-title, .ds-footer__group[data-headings="rule"] .ds-footer__group-title { color: var(--ds-ink); border-block-end: var(--ds-border-width) solid var(--ds-rule-strong); margin-block-end: var(--ds-space-2); } .ds-footer[data-headings="eyebrow"] .ds-footer__group-title, .ds-footer__group[data-headings="eyebrow"] .ds-footer__group-title { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); } .ds-footer__groups[aria-busy="true"] .ds-footer__group-title, .ds-footer__groups[aria-busy="true"] .ds-footer__link { position: relative; color: transparent !important; pointer-events: none; } .ds-footer__groups[aria-busy="true"] .ds-footer__group-title::after, .ds-footer__groups[aria-busy="true"] .ds-footer__link::after { content: ""; position: absolute; inset-inline-start: 0; inset-block: calc(50% - .5em); width: 100%; border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); } .ds-footer__groups[aria-busy="true"] .ds-footer__group-title::after { width: 60%; background: var(--ds-surface-2); } .ds-footer__groups[data-state="empty"] { display: grid; place-items: center; min-height: calc(var(--_pitch) * 4); border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-footer__groups[data-state="empty"]::before { content: attr(data-empty); } .ds-footer__card { display: flex; flex-direction: column; gap: var(--ds-space-4); align-self: flex-start; padding: calc(var(--ds-card-pad) * 1.5); border: var(--ds-border-width) solid var(--ds-card-border); border-radius: var(--ds-radius-lg); background: var(--ds-card-bg); box-shadow: var(--ds-card-shadow); } .ds-footer__card-title { margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-heading); color: var(--ds-ink-muted); text-wrap: balance; } .ds-footer__emphasis { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-footer__card-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-5); border: var(--ds-border-width) solid var(--ds-primary-border); border-radius: var(--ds-radius-button); background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); font-weight: var(--ds-weight-medium); font-size: var(--ds-text-md); text-decoration: none; text-transform: var(--ds-control-case); box-shadow: var(--ds-shadow-lip); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-footer__card-cta:hover { background: var(--ds-primary-fill-hover); } .ds-footer__card-cta[aria-disabled="true"], .ds-footer__card-cta:disabled { background: var(--ds-surface-3); border-color: var(--ds-rule); color: var(--ds-ink-faint); box-shadow: none; cursor: not-allowed; pointer-events: none; } .ds-footer__card-cta[aria-busy="true"] { color: transparent; pointer-events: none; } .ds-footer__card-cta[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--ds-icon-size); height: var(--ds-icon-size); border: 2px solid var(--ds-ink-on-primary); border-inline-end-color: transparent; border-radius: var(--ds-radius-pill); animation: ds-footer-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-footer-spin { to { transform: rotate(360deg); } } .ds-footer__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-footer__proof-link { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-ink-link); text-decoration: none; border-radius: var(--ds-radius-xs); white-space: nowrap; } .ds-footer__proof-link:hover { text-decoration: underline; text-underline-offset: .2em; } .ds-footer__proof-link .ds-footer__ext { color: currentColor; } .ds-footer__stars { display: inline-flex; gap: 2px; color: var(--ds-data-6); } .ds-footer__stars svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: currentColor; } .ds-footer__rating { font-variant-numeric: tabular-nums; color: var(--ds-ink-2); } .ds-footer__proof-divider { width: var(--ds-border-width); height: 1.2em; background: var(--ds-rule-strong); } .ds-footer__subscribe { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; } .ds-footer__subscribe-text { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); max-width: 32ch; } .ds-footer__subscribe-row { display: flex; min-width: 0; } .ds-footer__input { flex: 1 1 auto; min-width: 0; min-height: var(--ds-control-h); padding-inline: var(--ds-control-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); } .ds-footer__input:hover { border-color: var(--ds-border-strong); } .ds-footer__input[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-footer__submit { position: relative; display: inline-grid; place-items: center; width: var(--ds-control-h); min-height: var(--ds-control-h); margin-inline-start: calc(-1 * var(--ds-border-width)); padding: 0; border: var(--ds-border-width) solid var(--ds-border); border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; background: var(--ds-surface); color: var(--ds-ink); flex: none; } .ds-footer__submit:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-footer__submit svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-footer__submit[aria-busy="true"] svg { visibility: hidden; } .ds-footer__submit[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--ds-icon-size); height: var(--ds-icon-size); border: 2px solid var(--_spin); border-inline-end-color: transparent; border-radius: var(--ds-radius-pill); animation: ds-footer-spin calc(var(--ds-dur-slow) * 3) linear infinite; } .ds-footer__subscribe-msg { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); min-height: 1.4em; } .ds-footer__subscribe[data-state="error"] .ds-footer__subscribe-msg { color: var(--ds-danger-ink); } .ds-footer__subscribe[data-state="success"] .ds-footer__subscribe-msg { color: var(--ds-success-ink); } .ds-footer__signoff { margin-block: var(--ds-space-16) var(--ds-space-8); color: var(--ds-ink); } .ds-footer__signoff-svg { width: 100%; height: auto; display: block; overflow: visible; } .ds-footer__signoff-svg text { font-family: var(--ds-font-display); font-weight: var(--ds-weight-bold); fill: currentColor; letter-spacing: -.03em; } .ds-footer__signoff[data-style="outline"] .ds-footer__signoff-svg text { fill: none; stroke: var(--ds-line-art); stroke-width: 1.5; } .ds-footer__rule { width: 100%; height: 0; margin-block: var(--ds-space-10) 0; border: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-footer__rule[data-style="faded"] { border: 0; height: var(--ds-border-width); background: linear-gradient(to right, transparent, var(--ds-rule) 15%, var(--ds-rule) 85%, transparent); } .ds-footer__rule[data-style="dashed"] { border-block-start-style: dashed; } .ds-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-6); padding-block: var(--ds-space-6) 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-footer__legal-start, .ds-footer__legal-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-6); min-width: 0; } .ds-footer__copy { margin: 0; } .ds-footer__operator { margin: 0; flex-basis: 100%; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-footer__copy--dense { font-size: var(--ds-text-xs); line-height: var(--ds-lh-body); max-width: 72ch; } .ds-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-5); margin: 0; padding: 0; list-style: none; } .ds-footer__legal-links a { color: inherit; text-decoration: none; border-radius: var(--ds-radius-xs); } .ds-footer__legal-links a:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; } .ds-footer__legal-links a[aria-current="page"] { color: var(--ds-ink); } .ds-footer__status { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); border-radius: var(--ds-radius-xs); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); text-decoration: none; white-space: nowrap; } .ds-footer__status::before { content: ""; width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-presence); flex: none; } .ds-footer__status:hover { color: var(--ds-ink); } .ds-footer__status[data-status="degraded"]::before { background: var(--ds-warning); } .ds-footer__status[data-status="down"]::before { background: var(--ds-danger); } .ds-footer__status[data-tone="accent"] { color: var(--ds-ink-link); } .ds-footer__status[data-tone="accent"]::before { background: var(--ds-accent); } .ds-footer__theme { display: inline-flex; align-items: center; gap: 2px; height: var(--_toggle-h); padding: 2px; border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface); margin: 0; align-self: flex-start; flex: none; } .ds-footer__theme-opt { display: inline-grid; place-items: center; width: calc(var(--_toggle-h) - 6px); height: calc(var(--_toggle-h) - 6px); padding: 0; border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-ink-muted); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-footer__theme-opt:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-footer__theme-opt[aria-checked="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-footer__theme-opt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-footer__privacy { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: inherit; text-decoration: none; border-radius: var(--ds-radius-xs); } .ds-footer__privacy::before { content: ""; width: 20px; height: 12px; border-radius: var(--ds-radius-pill); border: var(--ds-border-width) solid var(--ds-accent); background: linear-gradient(to right, var(--ds-accent) 50%, transparent 50%); } .ds-footer__privacy:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; } .ds-footer__region-pill { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-surface-raised); color: var(--ds-ink-2); font-size: var(--ds-text-xs); white-space: nowrap; } .ds-footer__terminator { height: 3px; background: var(--_band); } .ds-footer__social { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; } .ds-footer__social-tile { display: inline-grid; place-items: center; width: var(--ds-control-h-lg); height: var(--ds-control-h-lg); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink); text-decoration: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-footer__social-tile:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-footer__social-tile[data-fill] { background: var(--ds-surface-2); border-color: var(--ds-rule); } .ds-footer__social-glyph { display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); border-radius: var(--ds-radius-sm); color: var(--ds-ink-muted); text-decoration: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); } .ds-footer__social-glyph:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-footer__social-glyph svg, .ds-footer__social-tile svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-footer__region { display: inline-flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-3) var(--ds-space-4); border: 0; border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-ink); text-decoration: none; text-align: start; white-space: nowrap; } .ds-footer__region:hover { background: var(--ds-surface-3); } .ds-footer__region-flag { width: 26px; height: 26px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); display: inline-grid; place-items: center; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); flex: none; } .ds-footer__region svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; margin-inline-start: var(--ds-space-4); } .ds-footer__store { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-rule-strong); border-radius: var(--ds-radius-sm); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); text-decoration: none; line-height: 1.1; } .ds-footer__store svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: currentColor; } .ds-footer__store small { display: block; font-size: var(--ds-text-xs); opacity: .8; } .ds-footer__store strong { display: block; font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); } .ds-footer__utility-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-block: var(--ds-border-width) dashed var(--ds-rule-strong); } .ds-footer__cell { display: flex; flex-wrap: wrap; gap: var(--ds-space-6); padding: var(--ds-space-6) var(--ds-space-5); min-width: 0; } .ds-footer__cell + .ds-footer__cell { border-inline-start: var(--ds-border-width) dashed var(--ds-rule-strong); } .ds-footer__cell[data-align="center"] { align-items: center; justify-content: center; } .ds-footer__cell[data-align="end"] { align-items: flex-end; justify-content: flex-end; } .ds-footer__colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-10); padding-block: var(--ds-space-4); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-ink-muted); } .ds-footer__colophon dl { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-10); margin: 0; } .ds-footer__colophon div { display: inline-flex; gap: var(--ds-space-2); } .ds-footer__colophon dt::after { content: ":"; } .ds-footer__colophon dd { margin: 0; color: var(--ds-ink-2); } .ds-footer__plate { position: relative; display: grid; place-items: center; min-height: 240px; margin-block-start: var(--ds-space-8); background: linear-gradient(to bottom, transparent, var(--ds-illustration-ground)); border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; } .ds-footer__plate[data-plate="none"] { min-height: 120px; } .ds-footer__plate-mark { width: 96px; height: 96px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); display: grid; place-items: center; color: var(--ds-ink-inverse); } .ds-footer__plate-mark svg { width: 40px; height: 40px; fill: currentColor; } .ds-footer__table { display: grid; grid-template-columns: 3fr 2fr 2fr 2fr 3fr; border: var(--ds-border-width) solid var(--ds-rule); border-inline-end: 0; border-block-end: 0; } .ds-footer__table > .ds-footer__cell { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--ds-space-3); padding: var(--ds-space-4); border-inline-end: var(--ds-border-width) solid var(--ds-rule); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-footer__table > .ds-footer__cell + .ds-footer__cell { border-inline-start: 0; } .ds-footer__cell-label { display: block; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); } .ds-footer__cell--span { grid-row: span 2; display: grid; place-items: center; } .ds-footer__cell--span svg { width: min(160px, 60%); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; } .ds-footer__tagline--display { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); text-transform: uppercase; color: var(--ds-ink); max-width: 18ch; } .ds-footer__cell .ds-footer__link { min-height: var(--ds-control-h-sm); } .ds-footer__cell .ds-footer__input { border-radius: 0; } .ds-footer__cell .ds-footer__submit { border-radius: 0; } .ds-footer__legal-cells { display: flex; margin: 0; padding: 0; list-style: none; } .ds-footer__legal-cells a { display: inline-flex; align-items: center; min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-4); border-inline-start: var(--ds-border-width) solid var(--ds-rule); color: var(--ds-ink); text-decoration: none; font-size: var(--ds-text-sm); } .ds-footer__legal-cells a:hover { background: var(--ds-hover-bg); } .ds-footer:not([data-variant]), .ds-footer[data-variant="jstov"] { --_pitch: var(--ds-control-h); --_col-min: 120px; --_band: var(--ds-surface-inverse); } .ds-footer:not([data-variant]) .ds-footer__brand, .ds-footer[data-variant="jstov"] .ds-footer__brand, .ds-footer[data-variant="sequence-conversion-card"] .ds-footer__brand { flex: 0 1 200px; } .ds-footer:not([data-variant]) .ds-footer__proof-link, .ds-footer[data-variant="jstov"] .ds-footer__proof-link { color: var(--ds-ink); } .ds-footer:not([data-variant]) .ds-footer__stars, .ds-footer[data-variant="jstov"] .ds-footer__stars { color: var(--ds-ink-2); } .ds-footer[data-variant="sequence-conversion-card"] { --_pitch: calc(var(--ds-control-h) + var(--ds-space-4)); --_col-min: 120px; --_link-ink: var(--ds-ink-2); --_band: linear-gradient(to right, var(--ds-accent), var(--ds-accent-2)); font-size: var(--ds-text-lg); background: var(--ds-surface); } .ds-footer[data-variant="sequence-conversion-card"] .ds-footer__group-title { font-size: var(--ds-text-sm); } .ds-footer[data-variant="sequence-conversion-card"] .ds-footer__card-title { font-size: var(--ds-text-lg); color: var(--ds-ink); } .ds-footer[data-variant="sequence-conversion-card"] .ds-footer__emphasis { background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: inherit; } .ds-footer[data-variant="sequence-conversion-card"] .ds-footer__card-cta { border-radius: var(--ds-radius-pill); min-height: var(--ds-control-h-lg); } .ds-footer[data-variant="sequence-conversion-card"] .ds-footer__terminator { height: var(--ds-space-1); } .ds-footer[data-variant="klarna-wordmark-monument"] { --_pitch: calc(var(--ds-control-h) + var(--ds-space-1)); --_max: none; --_col-min: 200px; --_link-ink: var(--ds-ink-2); --_title-ink: var(--ds-ink); } .ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__inner { padding-inline: var(--ds-space-5); } .ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__groups { gap: var(--ds-space-10) var(--ds-space-12); } .ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__group-title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-heading-tracking); min-height: calc(var(--_pitch) + var(--ds-space-4)); align-items: flex-start; } .ds-footer[data-variant="klarna-wordmark-monument"] .ds-footer__legal { align-items: flex-start; } .ds-footer[data-variant="rox-engineering-grid"] { --_pitch: calc(var(--ds-control-h) + var(--ds-space-1)); --_col-min: 150px; --_toggle-h: var(--ds-control-h-lg); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner { border-inline: var(--ds-border-width) solid var(--ds-rule); padding-block: var(--ds-space-16) var(--ds-space-12); } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::before, .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::after { content: ""; position: absolute; inset-block-start: -5px; width: 9px; height: 9px; background: linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) center / 100% 1px no-repeat, linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) center / 1px 100% no-repeat; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::before { inset-inline-start: -5px; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::after { inset-inline-end: -5px; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__row { gap: var(--ds-space-10) 0; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__brand { flex: 1 1 240px; padding-inline-end: var(--ds-space-8); border-inline-end: var(--ds-border-width) solid var(--ds-rule); } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__groups-stack { padding-inline-start: var(--ds-space-12); } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__group-title { color: var(--ds-ink); border-block-end: var(--ds-border-width) solid var(--ds-rule-strong); margin-block-end: var(--ds-space-2); } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__col { gap: var(--ds-space-16); } .ds-footer[data-variant="legend-dashed-utility-row"] { --_pitch: calc(var(--ds-control-h) + var(--ds-space-2)); --_link-ink: var(--ds-ink); } .ds-footer[data-variant="legend-dashed-utility-row"] .ds-footer__inner { padding-block: 0 0; } .ds-footer[data-variant="legend-dashed-utility-row"] .ds-footer__group-title { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); min-height: var(--ds-control-h-sm); } .ds-footer[data-variant="legend-dashed-utility-row"] .ds-footer__colophon { border-block-end: var(--ds-border-width) dashed var(--ds-rule-strong); } .ds-footer[data-variant="vercel-sitemap-badges"] { --_pitch: var(--ds-control-h); --_col-min: 150px; --_title-ink: var(--ds-ink); } .ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__group-title { font-weight: var(--ds-weight-medium); } .ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__groups { gap: var(--ds-space-10) var(--ds-space-6); } .ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--ds-space-6); padding-block-start: var(--ds-space-12); } .ds-footer[data-variant="vercel-sitemap-badges"] .ds-footer__legal-end { width: 100%; justify-content: space-between; } .ds-footer[data-variant="heron-table-footer"] { --_pitch: var(--ds-control-h-sm); --_link-ink: var(--ds-ink); --_max: none; } .ds-footer[data-variant="heron-table-footer"] .ds-footer__inner { padding: 0; } .ds-footer[data-variant="heron-table-footer"] .ds-footer__signoff { margin: 0; padding: var(--ds-space-6) var(--ds-gutter-page); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-footer[data-variant="heron-table-footer"] .ds-footer__legal { padding: 0 0 0 var(--ds-gutter-page); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .04em; text-transform: uppercase; } .ds-footer[data-variant="intercom-mono-labelled"] { --_pitch: var(--ds-control-h-sm); --_col-min: 180px; --_link-ink: var(--ds-ink-2); background: var(--ds-surface); } .ds-footer[data-variant="intercom-mono-labelled"] .ds-footer__group-title { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-ink-muted); } .ds-footer[data-variant="intercom-mono-labelled"] .ds-footer__legal { justify-content: flex-start; padding-block-start: var(--ds-space-16); } .ds-footer[data-variant="attio-mega"] { --_pitch: var(--ds-control-h-sm); --_col-min: 130px; --_link-ink: var(--ds-ink-2); } .ds-footer[data-variant="attio-mega"] .ds-footer__brand { flex: 0 1 33%; } .ds-footer[data-variant="attio-mega"] .ds-footer__group-title { font-size: var(--ds-text-sm); } .ds-footer[data-variant="attio-mega"] .ds-footer__link { font-size: var(--ds-text-sm); } .ds-footer[data-variant="attio-mega"] .ds-footer__legal { padding-block-start: var(--ds-space-16); } .ds-footer[data-variant="fibery-proof-rail"] { --_pitch: var(--ds-control-h-sm); --_col-min: 130px; --_link-ink: var(--ds-ink-2); --_title-ink: var(--ds-ink); background: var(--ds-surface); } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__inner { padding-block-end: var(--ds-space-12); } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__brand { flex: 1 1 130px; } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__groups { flex: 5 1 320px; } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__group-title { font-weight: var(--ds-weight-semibold); } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__link { font-size: var(--ds-text-sm); } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__bar { background: var(--ds-surface-raised); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-footer[data-variant="fibery-proof-rail"] .ds-footer__bar .ds-footer__legal { max-width: var(--_max); margin-inline: auto; padding: var(--ds-space-4) var(--ds-gutter-page); } .ds-footer[data-variant="luma-app-footer"] { --_pitch: var(--ds-control-h-sm); --_link-ink: var(--ds-ink-muted); } .ds-footer[data-variant="luma-app-footer"] .ds-footer__inner { padding-block: 0 var(--ds-space-8); } .ds-footer[data-variant="luma-app-footer"] .ds-footer__legal { justify-content: space-between; padding-block: var(--ds-space-5) 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-md); } .ds-footer[data-variant="luma-app-footer"] .ds-footer__legal-links { gap: var(--ds-space-1) var(--ds-space-5); } .ds-footer__promo { margin: var(--ds-space-6) 0 0; text-align: center; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-footer__promo a { color: var(--ds-ink-link); text-decoration: none; } .ds-footer__promo a:hover { text-decoration: underline; } .ds-footer__promo .ds-footer__brand-word { color: var(--ds-accent-2-ink); font-weight: var(--ds-weight-medium); } .ds-footer[data-variant="perplexity-in-app-link-row"] { --_pitch: var(--ds-control-h-sm); --_max: var(--ds-container-narrow); background: transparent; } .ds-footer[data-variant="perplexity-in-app-link-row"] .ds-footer__inner { padding-block: var(--ds-space-6); } .ds-footer[data-variant="perplexity-in-app-link-row"] .ds-footer__legal { justify-content: center; padding: 0; } .ds-footer__locale { appearance: none; -webkit-appearance: none; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2) var(--ds-space-6); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); cursor: pointer; } .ds-footer__locale-wrap { position: relative; display: inline-flex; align-items: center; } .ds-footer__locale-wrap svg { position: absolute; inset-inline-end: var(--ds-space-2); width: 12px; height: 12px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); color: var(--ds-ink-muted); } .ds-footer__locale:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } [data-mode="dark"] .ds-footer:not([data-variant]) .ds-footer__group-title, [data-mode="dark"] .ds-footer[data-variant="jstov"] .ds-footer__group-title, [data-band] .ds-footer:not([data-variant]) .ds-footer__group-title, [data-band] .ds-footer[data-variant="jstov"] .ds-footer__group-title, .ds-footer[data-mode="dark"]:not([data-variant]) .ds-footer__group-title, .ds-footer[data-mode="dark"][data-variant="jstov"] .ds-footer__group-title { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .ds-footer:not([data-variant]):not([data-mode="light"]) .ds-footer__group-title, :root:not([data-mode="light"]) .ds-footer[data-variant="jstov"]:not([data-mode="light"]) .ds-footer__group-title { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } } .ds-footer[data-legal="mono"] .ds-footer__legal { justify-content: flex-start; gap: var(--ds-space-2) var(--ds-space-3); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .02em; } .ds-footer[data-legal="mono"] .ds-footer__legal-start, .ds-footer[data-legal="mono"] .ds-footer__legal-end, .ds-footer[data-legal="mono"] .ds-footer__legal-links { gap: var(--ds-space-2) var(--ds-space-3); } .ds-footer[data-legal="mono"] .ds-footer__legal-links li + li::before, .ds-footer[data-legal="mono"] .ds-footer__legal-start > * + *:not(.ds-footer__status)::before, .ds-footer[data-legal="mono"] .ds-footer__legal-end > .ds-footer__legal-links::before { content: "·"; margin-inline-end: var(--ds-space-3); color: var(--ds-ink-faint); } .ds-footer[data-legal="mono"] .ds-footer__legal-links li { display: inline-flex; align-items: center; } .ds-footer[data-legal="mono"] .ds-footer__legal-start > *, .ds-footer[data-legal="mono"] .ds-footer__status { display: inline-flex; align-items: center; } .ds-footer[data-legal="mono"] .ds-footer__legal-end { flex: 1 1 auto; } .ds-footer[data-legal="mono"] .ds-footer__theme { margin-inline-start: auto; } @container (max-width: 720px) { .ds-footer[data-legal="mono"] .ds-footer__legal-end > .ds-footer__legal-links::before { content: none; } } .ds-footer[data-variant="legend-dashed-utility-row"][data-rules="solid"] .ds-footer__utility-row, .ds-footer[data-variant="legend-dashed-utility-row"][data-rules="solid"] .ds-footer__cell + .ds-footer__cell, .ds-footer[data-variant="legend-dashed-utility-row"][data-rules="solid"] .ds-footer__colophon { border-style: solid; border-color: var(--ds-rule); } @container (max-width: 720px) { .ds-footer__inner { padding-block: var(--ds-space-10) var(--ds-space-6); } .ds-footer__row { gap: var(--ds-space-8); } .ds-footer__card { flex-basis: 100%; } .ds-footer__groups { gap: var(--ds-space-6) var(--ds-space-4); } .ds-footer__legal { flex-direction: column; align-items: flex-start; } .ds-footer__legal-end { width: 100%; justify-content: space-between; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner { border-inline: 0; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::before, .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__inner::after { display: none; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__brand { border-inline-end: 0; padding-inline-end: 0; } .ds-footer[data-variant="rox-engineering-grid"] .ds-footer__groups-stack { padding-inline-start: 0; } .ds-footer__ambient { width: 60%; opacity: .35; } .ds-footer__table { grid-template-columns: 1fr 1fr; } .ds-footer__cell--span { grid-row: span 1; grid-column: span 2; } .ds-footer[data-variant="heron-table-footer"] .ds-footer__legal { flex-direction: row; flex-wrap: wrap; padding-inline-start: var(--ds-space-4); } .ds-footer__legal-cells { flex-wrap: wrap; width: 100%; } .ds-footer__legal-cells a { border-inline-start: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); flex: 1 1 auto; } .ds-footer__cell + .ds-footer__cell { border-inline-start: 0; border-block-start: var(--ds-border-width) dashed var(--ds-rule-strong); } .ds-footer__cell[data-align="end"] { justify-content: flex-start; } } .ds-formatting-toolbar { --_h: var(--ds-row-h); --_pad: var(--ds-space-1) var(--ds-space-2); --_gap: var(--ds-space-1); --_group-gap: var(--ds-space-2); --_divider-h: var(--ds-icon-size-row); --_fill: transparent; --_radius: 0px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap) var(--_group-gap); min-height: var(--_h); min-width: 0; max-width: 100%; padding: var(--_pad); background: var(--_fill); border-radius: var(--_radius); color: var(--ds-ink-2); } .ds-formatting-toolbar[data-overflow="scroll"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ds-formatting-toolbar[data-overflow="scroll"]::-webkit-scrollbar { display: none; } .ds-formatting-toolbar__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--_gap); flex: 0 1 auto; min-width: 0; } .ds-formatting-toolbar__divider { flex: none; width: var(--ds-border-width); height: var(--_divider-h); background: var(--ds-rule-strong); } .ds-formatting-toolbar__spacer { flex: 1 1 auto; } .ds-formatting-toolbar__end { display: inline-flex; align-items: center; gap: var(--_gap); margin-inline-start: auto; flex: none; } .ds-formatting-toolbar__select { display: inline-flex; align-items: center; flex: none; min-width: 0; } .ds-formatting-toolbar__cell { display: inline-flex; flex-direction: column; align-items: center; gap: var(--ds-space-0-5); flex: none; border-radius: var(--ds-radius-sm); } .ds-formatting-toolbar__hint { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: 1; min-height: var(--ds-space-3); color: var(--ds-ink-faint); letter-spacing: 0; white-space: nowrap; } .ds-formatting-toolbar__cell[data-tone="ai"] { background: var(--ds-accent-2-tint); } .ds-formatting-toolbar__cell[data-tone="ai"] .ds-formatting-toolbar__hint { color: var(--ds-accent-2-ink); } .ds-formatting-toolbar__cell[data-wide] { min-width: calc(var(--ds-control-h) * 2); } .ds-formatting-toolbar .ds-icon-button[aria-pressed="true"], .ds-formatting-toolbar .ds-icon-button[aria-checked="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-formatting-toolbar .ds-icon-button:disabled, .ds-formatting-toolbar .ds-icon-button[aria-disabled="true"] { color: var(--ds-ink-faint); } .ds-formatting-toolbar[aria-busy="true"] { pointer-events: none; opacity: .6; } .ds-formatting-toolbar[aria-disabled="true"] { color: var(--ds-ink-faint); } .ds-formatting-toolbar[aria-disabled="true"] .ds-formatting-toolbar__divider { background: var(--ds-rule); } .ds-formatting-toolbar[data-state="empty"] { border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-sm); } .ds-formatting-toolbar__empty { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); padding-inline: var(--ds-space-2); } .ds-formatting-toolbar[data-variant="hsajl-segmented-icon"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-2)); --_pad: 0 var(--ds-space-4); --_gap: var(--ds-space-1-5); --_group-gap: var(--ds-space-3); } .ds-formatting-toolbar[data-variant="manychat-composer-groups"] { --_h: var(--ds-control-h-lg); --_pad: 0 var(--ds-space-3) 0 var(--ds-space-2); --_gap: var(--ds-space-1); --_group-gap: var(--ds-space-2); --_divider-h: var(--ds-icon-size-row); } .ds-formatting-toolbar[data-variant="manychat-composer-groups"] .ds-formatting-toolbar__end { gap: var(--ds-space-2); } .ds-formatting-toolbar[data-variant="clickup-tool-palette-with-hint-row"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-4)); --_pad: var(--ds-space-1) var(--ds-space-2) var(--ds-space-1); --_gap: var(--ds-space-1); --_group-gap: var(--ds-space-3); --_fill: var(--ds-surface-raised); --_radius: var(--ds-radius-lg); align-items: flex-end; border: var(--ds-border-width) solid var(--ds-rule); width: max-content; max-width: 100%; } .ds-formatting-toolbar[data-variant="clickup-tool-palette-with-hint-row"] .ds-formatting-toolbar__group { align-items: flex-end; } .ds-formatting-toolbar[data-variant="clickup-tool-palette-with-hint-row"] .ds-formatting-toolbar__divider { margin-block-end: calc((var(--ds-control-h) - var(--_divider-h)) / 2); } .ds-formatting-toolbar[data-variant="clickup-tool-palette-with-hint-row"] .ds-formatting-toolbar__end { align-self: flex-end; } .ds-formatting-toolbar[data-float="selection"] { --_h: var(--ds-control-h); --_pad: var(--ds-space-1); --_fill: var(--ds-surface-raised); --_radius: var(--ds-radius-md); --_group-gap: var(--ds-space-1); position: relative; width: max-content; max-width: min(100%, 560px); border: var(--ds-border-width) solid var(--ds-rule); box-shadow: var(--ds-shadow-float); z-index: var(--ds-z-popover); } .ds-formatting-toolbar[data-float="selection"] svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-formatting-toolbar[data-float="selection"] .ds-icon-button svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-formatting-toolbar__assist, .ds-formatting-toolbar__comment { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-2); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-2); font: inherit; font-size: var(--ds-text-sm); white-space: nowrap; cursor: pointer; } .ds-formatting-toolbar__assist svg, .ds-formatting-toolbar__comment svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; } .ds-formatting-toolbar__assist:hover, .ds-formatting-toolbar__comment:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-formatting-toolbar__assist:focus-visible, .ds-formatting-toolbar__comment:focus-visible, .ds-formatting-toolbar__link-apply:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-formatting-toolbar__assist:disabled, .ds-formatting-toolbar__comment:disabled { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; } .ds-formatting-toolbar__marks { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ds-formatting-toolbar__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); flex-basis: 100%; min-width: 0; padding: var(--ds-space-2) var(--ds-space-1) var(--ds-space-1); border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-formatting-toolbar__link-icon { display: inline-flex; color: var(--ds-ink-muted); } .ds-formatting-toolbar__link-icon svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-formatting-toolbar__link-input { flex: 1 1 220px; min-width: 0; min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); } .ds-formatting-toolbar__link-input:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: 0; border-color: var(--ds-border-strong); } .ds-formatting-toolbar__link-input[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-formatting-toolbar__link-apply { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); cursor: pointer; } .ds-formatting-toolbar__link-apply:hover { background: var(--ds-hover-bg); } .ds-formatting-toolbar__link-apply:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); cursor: not-allowed; } .ds-formatting-toolbar__link-note { flex-basis: 100%; margin: 0; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-formatting-toolbar[data-variant="jstov"][data-float="selection"] .ds-formatting-toolbar__assist span { display: none; } .ds-formatting-toolbar[data-variant="airops-comment-under"] { --_radius: var(--ds-radius-sm); --_pad: var(--ds-space-0-5) var(--ds-space-1); box-shadow: var(--ds-shadow-lift); } .ds-formatting-toolbar[data-variant="airops-comment-under"] :is(.ds-formatting-toolbar__select, .ds-formatting-toolbar__assist) { display: none; } .ds-formatting-toolbar[data-variant="airops-comment-under"] .ds-formatting-toolbar__group:first-child, .ds-formatting-toolbar[data-variant="airops-comment-under"] .ds-formatting-toolbar__group:first-child + .ds-formatting-toolbar__divider { display: none; } .ds-formatting-toolbar[data-variant="airops-comment-under"] .ds-formatting-toolbar__comment { position: absolute; inset-block-start: calc(100% + var(--ds-space-10)); inset-inline-start: var(--ds-space-2); background: var(--ds-surface-raised); border: var(--ds-border-width) solid var(--ds-rule); box-shadow: var(--ds-shadow-lift); color: var(--ds-ink); } .ds-formatting-toolbar[data-variant="airops-comment-under"][data-state="link-editing"] .ds-formatting-toolbar__comment { display: none; } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] { --_fill: var(--ds-surface-inverse); --_radius: var(--ds-radius-lg); --_pad: var(--ds-space-1) var(--ds-space-2); border-color: transparent; color: var(--ds-ink-inverse); } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] .ds-icon-button, .ds-formatting-toolbar[data-variant="asana-inverse-pill"] :is(.ds-formatting-toolbar__comment, .ds-formatting-toolbar__assist, .ds-formatting-toolbar__link-icon, .ds-formatting-toolbar__link-note) { color: var(--ds-ink-inverse); } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] .ds-icon-button:hover, .ds-formatting-toolbar[data-variant="asana-inverse-pill"] :is(.ds-formatting-toolbar__comment, .ds-formatting-toolbar__assist):hover { background: var(--ds-surface-inverse-hover); color: var(--ds-ink-inverse); } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] .ds-icon-button[aria-pressed="true"] { background: var(--ds-surface-inverse-hover); color: var(--ds-ink-inverse); } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] .ds-formatting-toolbar__divider { background: var(--ds-surface-inverse-hover); } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] :is(.ds-formatting-toolbar__select, .ds-formatting-toolbar__comment span, .ds-formatting-toolbar__assist span) { display: none; } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] .ds-formatting-toolbar__link { border-block-start-color: var(--ds-surface-inverse-hover); } .ds-formatting-toolbar[data-variant="asana-inverse-pill"] :is(.ds-formatting-toolbar__link-input, .ds-formatting-toolbar__link-apply) { background: var(--ds-surface-inverse-hover); border-color: transparent; color: var(--ds-ink-inverse); } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] { --_radius: var(--ds-radius-sm); --_pad: var(--ds-space-0-5); max-width: min(100%, 640px); box-shadow: var(--ds-shadow-lift); } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] .ds-formatting-toolbar__assist { order: -1; color: var(--ds-ink); } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] .ds-formatting-toolbar__group:nth-of-type(3) { order: 1; } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] .ds-formatting-toolbar__divider:nth-of-type(2) { order: 1; } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] .ds-formatting-toolbar__group:nth-of-type(2) { order: 2; } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] .ds-formatting-toolbar__link { order: 3; } .ds-formatting-toolbar[data-variant="notion-ai-first-row"] .ds-select-trigger { border-color: transparent; box-shadow: none; background: transparent; } .ds-inspector-panel { --_w: var(--ds-inspector-w); --_pad: var(--ds-space-4); --_header-h: var(--ds-topbar-h); --_band-h: calc(var(--ds-topbar-h) + var(--ds-space-1)); --_handle: var(--ds-tap-target-min); position: relative; flex: none; display: flex; flex-direction: column; width: min(var(--_w), 100%); min-width: 0; min-height: 0; max-height: 100%; background: var(--ds-card-bg); color: var(--ds-ink); border-inline-start: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); } .ds-inspector-panel[data-edge="start"] { border-inline-start: 0; border-inline-end: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel > * { min-width: 0; } .ds-inspector-panel svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-inspector-panel[data-state="collapsed"] { width: 0; border: 0; overflow: visible; } .ds-inspector-panel[data-state="collapsed"] > :not(.ds-inspector-panel__handle) { display: none; } .ds-inspector-panel[data-stack="always"] { width: 100%; flex: 1 1 100%; max-height: none; border-inline: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel[data-stack="always"][data-edge="start"] { border-block-start: 0; border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel[data-stack="always"] > .ds-inspector-panel__handle { display: none; } .ds-inspector-panel[data-stack="always"][data-state="collapsed"] > .ds-inspector-panel__header { display: flex; } @media (max-width: 900px) { .ds-inspector-panel[data-stack="auto"] { width: 100%; flex: 1 1 100%; max-height: none; border-inline: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel[data-stack="auto"][data-edge="start"] { border-block-start: 0; border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel[data-stack="auto"] > .ds-inspector-panel__handle { display: none; } .ds-inspector-panel[data-stack="auto"][data-state="collapsed"] > .ds-inspector-panel__header { display: flex; } } .ds-inspector-panel__handle { position: absolute; inset-block-start: 50%; inset-inline-start: calc(-1 * var(--_handle) / 2); translate: 0 -50%; z-index: 1; width: var(--_handle); height: var(--_handle); padding: 0; border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); display: grid; place-items: center; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-inspector-panel__handle svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-inspector-panel__handle:hover { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-inspector-panel__handle[aria-expanded="false"] svg { transform: rotate(180deg); } .ds-inspector-panel[data-edge="start"] .ds-inspector-panel__handle { inset-inline-start: auto; inset-inline-end: calc(-1 * var(--_handle) / 2); } .ds-inspector-panel[data-edge="start"] .ds-inspector-panel__handle svg { transform: rotate(180deg); } .ds-inspector-panel[data-edge="start"] .ds-inspector-panel__handle[aria-expanded="false"] svg { transform: none; } .ds-inspector-panel__handle[data-shape="tab"] { width: calc(var(--_handle) / 2); height: calc(var(--_handle) + var(--ds-space-6)); inset-inline-start: calc(-1 * var(--_handle) / 2); border-radius: var(--ds-radius-pill) 0 0 var(--ds-radius-pill); border-inline-end: 0; } .ds-inspector-panel__band { flex: none; min-height: var(--_band-h); display: grid; place-items: center; padding-inline: var(--_pad); background: var(--ds-accent-2-tint); color: var(--ds-ink); font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-heading-tracking); text-align: center; } .ds-inspector-panel__header { flex: none; display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--_header-h); padding-inline: var(--_pad) var(--ds-space-2); } .ds-inspector-panel__header[data-rule="true"] { border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel__title { flex: 1 1 auto; margin: 0; font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-inspector-panel__actions { display: flex; align-items: center; gap: var(--ds-space-1); margin-inline-start: auto; } .ds-inspector-panel__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; } .ds-inspector-panel__body > .ds-accordion { width: 100%; } .ds-inspector-panel__group { display: flex; flex-direction: column; gap: var(--ds-field-pitch); padding: var(--ds-space-4) var(--_pad); } .ds-inspector-panel__group + .ds-inspector-panel__group { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel__group > .ds-label { margin-block-end: calc(-1 * var(--ds-space-2)); } .ds-inspector-panel__field { display: flex; flex-direction: column; gap: var(--ds-field-gap); min-width: 0; } .ds-inspector-panel__field > .ds-label { color: var(--ds-ink); } .ds-inspector-panel__field > .ds-text-input, .ds-inspector-panel__field > .ds-select-trigger { width: 100%; --_w: 100%; } .ds-inspector-panel__field[data-layout="inline"] { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ds-space-3); } .ds-inspector-panel__field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-2); align-items: start; } .ds-inspector-panel__field-row > .ds-text-input { --_w: 100%; width: 100%; } .ds-inspector-panel__field-row[data-kind="apply"] { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } .ds-inspector-panel__unit { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); padding-inline: var(--ds-space-1); } .ds-inspector-panel__chip { display: inline-flex; align-items: center; gap: var(--ds-space-1); align-self: flex-start; min-height: calc(var(--ds-control-h-sm) - var(--ds-space-2)); padding-inline: var(--ds-space-2); border: var(--ds-border-width) dotted var(--ds-accent); border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-accent-ink); font-size: var(--ds-text-sm); cursor: pointer; } .ds-inspector-panel__chip:hover { background: var(--ds-accent-tint); } .ds-inspector-panel__chip > span:first-child { color: var(--ds-ink-muted); } .ds-inspector-panel__note { display: flex; gap: var(--ds-space-2); align-items: flex-start; font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); } .ds-inspector-panel__note svg { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); margin-block-start: 2px; } .ds-inspector-panel__note[data-tone="warning"] { color: var(--ds-warning-ink); } .ds-inspector-panel__add { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); padding-inline: var(--ds-space-3); border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-muted); font: inherit; font-size: var(--ds-text-sm); cursor: pointer; width: 100%; } .ds-inspector-panel__add:hover { border-color: var(--ds-border-strong); color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-inspector-panel__add svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-inspector-panel__metric { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: var(--ds-space-3); } .ds-inspector-panel__metric-value { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); color: var(--ds-ink); font-variant-numeric: tabular-nums; } .ds-inspector-panel__metric-ratio { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); color: var(--ds-success-ink); font-variant-numeric: tabular-nums; } .ds-inspector-panel__metric-label { grid-column: 1; font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-inspector-panel__table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-md); } .ds-inspector-panel__table th { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); text-align: end; padding: var(--ds-space-1) 0 var(--ds-space-2); border-block-end: var(--ds-border-width) dashed var(--ds-rule); } .ds-inspector-panel__table th:first-child, .ds-inspector-panel__table td:first-child { text-align: start; } .ds-inspector-panel__table td { padding: var(--ds-space-2) 0; text-align: end; font-variant-numeric: tabular-nums; vertical-align: top; border-block-end: var(--ds-border-width) dashed var(--ds-rule); } .ds-inspector-panel__table tr:last-child td { border-block-end: 0; } .ds-inspector-panel__table small { display: block; font-size: var(--ds-text-xs); color: var(--ds-success-ink); } .ds-inspector-panel__preview { display: flex; flex-direction: column; gap: var(--ds-space-6); align-items: center; } .ds-inspector-panel__frame { width: 100%; aspect-ratio: var(--ds-media-aspect); border-radius: var(--ds-media-radius); border: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-illustration-ground); overflow: clip; } .ds-inspector-panel__bubble { width: 100%; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-lg); background: var(--ds-surface-2); color: var(--ds-ink); } .ds-inspector-panel__pill { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-4); border: var(--ds-border-width) solid var(--ds-accent); border-radius: var(--ds-radius-pill); color: var(--ds-accent-ink); font-size: var(--ds-text-sm); background: transparent; } .ds-inspector-panel__pill > span + span { padding-inline-start: var(--ds-space-2); border-inline-start: var(--ds-border-width) solid var(--ds-accent-soft); } .ds-inspector-panel__empty { margin: var(--_pad); min-height: var(--ds-control-h-lg); display: grid; place-items: center; padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-xs); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-align: center; } .ds-inspector-panel__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 60%); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-inspector-panel__skeleton[data-kind="control"] { height: var(--ds-control-h); width: 100%; border-radius: var(--ds-radius-sm); } .ds-inspector-panel__field[aria-invalid="true"] > .ds-label { color: var(--ds-danger-ink); } .ds-inspector-panel__error { display: flex; gap: var(--ds-space-1-5); align-items: flex-start; font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-inspector-panel__error svg { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); margin-block-start: 2px; } .ds-inspector-panel[data-variant="manychat-analytics-plus-preview"] { --_w: 380px; --_pad: var(--ds-space-6); } .ds-inspector-panel[data-variant="manychat-analytics-plus-preview"] .ds-inspector-panel__group { gap: var(--ds-space-4); padding-block: var(--ds-space-5); } .ds-inspector-panel[data-variant="manychat-109-selected-block-editor"] { --_w: 380px; --_pad: var(--ds-space-8); } .ds-inspector-panel[data-variant="navattic-88-accordion-inspector"] { --_w: 300px; --_pad: var(--ds-space-4); } .ds-inspector-panel[data-variant="retool-empty-inspector"] { --_w: 320px; --_pad: var(--ds-space-3); --_header-h: var(--ds-control-h-lg); } .ds-inspector-panel[data-variant="retool-empty-inspector"] .ds-inspector-panel__empty { min-height: var(--ds-tap-target-min); margin-block-start: 0; } .ds-inspector-panel[data-variant="hsajl-settings-sidebar"] { --_w: 300px; --_pad: var(--ds-space-5); --_header-h: calc(var(--ds-control-h-lg) + var(--ds-space-7)); } .ds-inspector-panel[data-variant="hsajl-settings-sidebar"] .ds-inspector-panel__group { gap: var(--ds-space-6); padding-block: var(--ds-space-5); } .ds-inspector-panel__position { margin-inline-start: var(--ds-space-2); color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; } .ds-inspector-panel__icon { width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-2); cursor: pointer; } .ds-inspector-panel__icon svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-inspector-panel__icon:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-inspector-panel__icon:disabled { color: var(--ds-ink-faint); background: transparent; cursor: not-allowed; } .ds-inspector-panel__kicker { margin: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; } .ds-inspector-panel__heading { margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); color: var(--ds-ink); } .ds-inspector-panel__facts { margin: 0; display: grid; gap: var(--ds-space-2); } .ds-inspector-panel__fact { display: grid; grid-template-columns: minmax(88px, 38%) minmax(0, 1fr); gap: var(--ds-space-3); align-items: baseline; font-size: var(--ds-text-sm); } .ds-inspector-panel__fact dt { color: var(--ds-ink-muted); } .ds-inspector-panel__fact dd { margin: 0; min-width: 0; color: var(--ds-ink); overflow-wrap: anywhere; display: flex; align-items: center; gap: var(--ds-space-1-5); } .ds-inspector-panel__next-text { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-2); line-height: var(--ds-lh-body); } .ds-inspector-panel__next-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); } .ds-inspector-panel__activity { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ds-space-2-5); } .ds-inspector-panel__activity li { display: flex; gap: var(--ds-space-2); align-items: flex-start; font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-inspector-panel__activity p { margin: 0; min-width: 0; line-height: var(--ds-lh-body); } .ds-inspector-panel__activity time { display: block; color: var(--ds-ink-muted); font-size: var(--ds-text-xs); } .ds-inspector-panel__conflict, .ds-inspector-panel__receipt { display: flex; gap: var(--ds-space-2); align-items: flex-start; margin: var(--ds-space-3) var(--_pad) 0; padding: var(--ds-space-3); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); } .ds-inspector-panel__conflict { background: var(--ds-warning-tint); color: var(--ds-warning-ink); border: var(--ds-border-width) solid var(--ds-warning-line); } .ds-inspector-panel__conflict p, .ds-inspector-panel__receipt p { margin: 0; flex: 1 1 auto; min-width: 0; } .ds-inspector-panel__conflict > svg, .ds-inspector-panel__receipt > svg { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); margin-block-start: 2px; } .ds-inspector-panel__conflict-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block-start: var(--ds-space-2); } .ds-inspector-panel__receipt { background: var(--ds-success-tint); color: var(--ds-success-ink); border: var(--ds-border-width) solid var(--ds-success-line); } .ds-inspector-panel__undo { flex: none; min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); margin-block: calc(-1 * var(--ds-space-1-5)); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: inherit; font: inherit; font-weight: var(--ds-weight-semibold); text-decoration: underline; cursor: pointer; } .ds-inspector-panel[data-state="conflict"] .ds-inspector-panel__fact:first-child dd { color: var(--ds-warning-ink); font-weight: var(--ds-weight-medium); } .ds-inspector-panel[aria-busy="true"] .ds-inspector-panel__body > * { visibility: hidden; } .ds-inspector-panel[data-variant="linear-properties-cards"] { --_w: 340px; background: var(--ds-ground-2); } .ds-inspector-panel[data-variant="linear-properties-cards"] .ds-inspector-panel__group { margin: var(--ds-space-2) var(--ds-space-3); padding: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); background: var(--ds-surface); } .ds-inspector-panel[data-variant="linear-properties-cards"] .ds-inspector-panel__group + .ds-inspector-panel__group { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-inspector-panel[data-variant="linear-properties-cards"] .ds-inspector-panel__fact { grid-template-columns: minmax(0, 1fr); gap: 0; } .ds-inspector-panel[data-variant="linear-properties-cards"] .ds-inspector-panel__fact dt { font-size: var(--ds-text-xs); } .ds-inspector-panel[data-variant="linear-properties-cards"] .ds-inspector-panel__position::before { content: "· "; } .ds-inspector-panel[data-variant="jira-issue-sidebar"] { --_w: 380px; --_pad: var(--ds-space-5); } .ds-inspector-panel[data-variant="jira-issue-sidebar"] .ds-inspector-panel__heading { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); } .ds-inspector-panel[data-variant="jira-issue-sidebar"] .ds-inspector-panel__group + .ds-inspector-panel__group { border-block-start: 0; padding-block-start: 0; } .ds-inspector-panel[data-variant="jira-issue-sidebar"] .ds-label { text-transform: none; letter-spacing: 0; font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); } .ds-inspector-panel[data-variant="jira-issue-sidebar"] .ds-inspector-panel__facts { padding: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-sm); } .ds-inspector-panel[data-variant="twenty-record-fields"] { --_w: 320px; --_pad: var(--ds-space-3); font-size: var(--ds-text-sm); } .ds-inspector-panel[data-variant="twenty-record-fields"] .ds-inspector-panel__heading { text-align: center; font-size: var(--ds-text-lg); } .ds-inspector-panel[data-variant="twenty-record-fields"] .ds-inspector-panel__kicker { justify-content: center; } .ds-inspector-panel[data-variant="twenty-record-fields"] .ds-inspector-panel__fact { grid-template-columns: 96px minmax(0, 1fr); padding-block: var(--ds-space-0-5); } .ds-inspector-panel[data-variant="twenty-record-fields"] .ds-inspector-panel__position::before { content: "("; } .ds-inspector-panel[data-variant="twenty-record-fields"] .ds-inspector-panel__position::after { content: ")"; } .ds-inspector-panel[data-variant="twenty-record-fields"] .ds-inspector-panel__group + .ds-inspector-panel__group { border-block-start-style: dashed; } .ds-inspector-panel[data-variant="copilot-transaction-pane"] { --_w: 330px; --_pad: var(--ds-space-4); background: var(--ds-surface-2); } .ds-inspector-panel[data-variant="copilot-transaction-pane"] .ds-inspector-panel__header { border-block-end-color: transparent; } .ds-inspector-panel[data-variant="copilot-transaction-pane"] .ds-inspector-panel__heading { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; } .ds-inspector-panel[data-variant="copilot-transaction-pane"] .ds-inspector-panel__group + .ds-inspector-panel__group { border-block-start: 0; } .ds-inspector-panel[data-variant="copilot-transaction-pane"] .ds-inspector-panel__fact { grid-template-columns: 96px minmax(0, 1fr); } .ds-inspector-panel[data-width="fill"] { --_w: 100%; flex: 1 1 0; } .ds-key-value-facts svg[fill="none"] { fill: none; } .ds-key-value-facts { --_gap: var(--ds-space-2); --_pitch: var(--ds-space-4); --_min: 160px; --_key-w: minmax(96px, 12em); --_key-ink: var(--ds-ink-muted); --_value-ink: var(--ds-ink); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--_min), 100%), 1fr)); gap: var(--_pitch) var(--ds-space-6); margin: 0; min-width: 0; font-size: var(--ds-text-md); line-height: var(--ds-lh-body); color: var(--_value-ink); } .ds-key-value-facts__item { display: flex; flex-direction: column; gap: var(--_gap); min-width: 0; margin: 0; } .ds-key-value-facts__key { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--_key-ink); min-width: 0; } .ds-key-value-facts__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; min-width: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); color: var(--_value-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .ds-key-value-facts__value[data-lane="mono"] { font-family: var(--ds-font-mono); font-weight: var(--ds-weight-medium); font-size: var(--ds-text-md); letter-spacing: 0; } .ds-key-value-facts__value[data-null] { font-style: italic; font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-key-value-facts__value[data-masked] { font-family: var(--ds-font-mono); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); letter-spacing: .08em; } .ds-key-value-facts__value[data-tone="warning"] { color: var(--ds-warning-ink); } .ds-key-value-facts__value[data-tone="success"] { color: var(--ds-success-ink); } .ds-key-value-facts__value[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-key-value-facts__value a { color: var(--ds-ink-link); } .ds-key-value-facts__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: 0 0 auto; stroke: currentColor; stroke-width: var(--ds-icon-stroke); color: var(--ds-ink-muted); } .ds-key-value-facts__trail { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: 0 0 auto; stroke: currentColor; stroke-width: var(--ds-icon-stroke); color: var(--ds-ink-faint); margin-inline-start: auto; } .ds-key-value-facts__tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 24px; flex: 0 0 auto; border-radius: var(--ds-radius-xs); border: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: .04em; color: var(--ds-ink-2); } .ds-key-value-facts__action { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border: 0; background: transparent; border-radius: var(--ds-radius-button); color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); cursor: pointer; white-space: nowrap; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-key-value-facts__action:hover, .ds-key-value-facts__action[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-key-value-facts__action:disabled { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; } .ds-key-value-facts__action[data-state="done"] { color: var(--ds-success-ink); } .ds-key-value-facts__action svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); } .ds-key-value-facts[data-layout="row"] { display: flex; flex-direction: column; gap: 0; } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__item { display: grid; grid-template-columns: var(--_key-w) minmax(0, 1fr); align-items: center; column-gap: var(--ds-space-4); min-height: var(--ds-row-h); padding-block: var(--ds-space-1); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__item:last-child { border-block-end: 0; } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__key { display: flex; align-items: center; gap: var(--ds-space-2); } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__value { justify-content: flex-end; text-align: end; font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__value[data-align="start"] { justify-content: flex-start; text-align: start; } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__action { margin-inline-start: auto; } .ds-key-value-facts[data-layout="row"][data-rules="none"] .ds-key-value-facts__item { border: 0; min-height: calc(var(--ds-row-h) - var(--ds-space-2)); } @container (max-width: 360px) { .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--ds-space-0-5); } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__value { justify-content: flex-start; text-align: start; } } .ds-key-value-facts__value .ds-key-value-facts__link { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; text-decoration: none; min-width: 0; border-radius: var(--ds-radius-xs); min-height: var(--ds-control-h-sm); } .ds-key-value-facts__value .ds-key-value-facts__link:hover { color: var(--ds-ink); } .ds-key-value-facts__item:has(.ds-key-value-facts__link:hover), .ds-key-value-facts__item[data-state="hover"] { background: var(--ds-hover-bg); } .ds-key-value-facts__item:has(.ds-key-value-facts__link:hover) .ds-key-value-facts__trail, .ds-key-value-facts__item[data-state="hover"] .ds-key-value-facts__trail { color: var(--ds-ink-2); } .ds-key-value-facts[data-layout="row"] .ds-key-value-facts__item { border-radius: var(--ds-radius-xs); } .ds-key-value-facts__item[aria-disabled="true"] { color: var(--ds-ink-faint); --_key-ink: var(--ds-ink-faint); cursor: not-allowed; } .ds-key-value-facts__item[aria-disabled="true"] .ds-key-value-facts__link { pointer-events: none; } .ds-key-value-facts[data-layout="inline"] { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-6); } .ds-key-value-facts[data-layout="inline"] .ds-key-value-facts__item { flex-direction: row; align-items: center; gap: var(--ds-space-2); } .ds-key-value-facts[data-layout="inline"] .ds-key-value-facts__key::after { content: ":"; } .ds-key-value-facts[data-layout="inline"] .ds-key-value-facts__value { font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); } .ds-key-value-facts__group { display: flex; flex-direction: column; gap: 0; min-width: 0; padding-block: var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-key-value-facts__group:last-child { border-block-end: 0; } .ds-key-value-facts__group-label { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); padding-block: var(--ds-space-1); } .ds-key-value-facts[aria-busy="true"] .ds-key-value-facts__key, .ds-key-value-facts[aria-busy="true"] .ds-key-value-facts__value { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); width: min(100%, 8em); } .ds-key-value-facts[aria-busy="true"] .ds-key-value-facts__value { width: min(100%, 11em); } .ds-key-value-facts[aria-busy="true"] .ds-key-value-facts__value > * { visibility: hidden; } .ds-key-value-facts[data-state="empty"] { border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); padding: var(--ds-card-pad); color: var(--ds-ink-muted); } .ds-key-value-facts[data-variant="luma-label-over-value-stack"] { --_key-ink: var(--ds-ink-2); } .ds-key-value-facts[data-variant="luma-label-over-value-stack"] .ds-key-value-facts__key { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] { --_min: 260px; gap: var(--ds-space-5) var(--ds-space-8); } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] .ds-key-value-facts__item { flex-direction: row; align-items: flex-start; gap: var(--ds-space-3); } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] .ds-key-value-facts__icon { width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); color: var(--ds-ink); margin-block-start: 1px; } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] .ds-key-value-facts__key { display: inline; font-family: var(--ds-font-sans); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; color: var(--ds-ink-2); } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] .ds-key-value-facts__key::after { content: ": "; } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] .ds-key-value-facts__value { display: inline; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); } .ds-key-value-facts[data-variant="airbnb-prompt-answer"] .ds-key-value-facts__text { display: block; min-width: 0; } .ds-key-value-facts[data-variant="descript-payment-summary"] { --_key-w: minmax(120px, 1fr); } .ds-key-value-facts[data-variant="descript-payment-summary"] .ds-key-value-facts__item { grid-template-columns: var(--_key-w) auto; min-height: var(--ds-control-h-lg); border-block-end-color: var(--ds-rule); } .ds-key-value-facts[data-variant="descript-payment-summary"] .ds-key-value-facts__key { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; color: var(--ds-ink); } .ds-key-value-facts[data-variant="descript-payment-summary"] .ds-key-value-facts__value { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-key-value-facts[data-variant="synara-popover-rows"] { --_key-w: auto; font-size: var(--ds-text-sm); max-width: 260px; } .ds-key-value-facts[data-variant="synara-popover-rows"] .ds-key-value-facts__item { grid-template-columns: auto minmax(0, 1fr); min-height: var(--ds-control-h-sm); padding-block: 0; border: 0; } .ds-key-value-facts[data-variant="synara-popover-rows"] .ds-key-value-facts__key { font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; color: var(--ds-ink); } .ds-key-value-facts[data-variant="synara-popover-rows"] .ds-key-value-facts__value { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-key-value-facts[data-variant="synara-popover-rows"] .ds-key-value-facts__value[data-lane="mono"] { font-size: var(--ds-text-xs); } .ds-key-value-facts[data-variant="luma-timezone-sidecar-card"] { --_min: 180px; display: inline-grid; grid-template-columns: 1fr; } .ds-key-value-facts[data-variant="luma-timezone-sidecar-card"] .ds-key-value-facts__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-space-3); row-gap: 0; align-items: start; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); border-radius: var(--ds-radius-md); min-inline-size: 180px; } .ds-key-value-facts[data-variant="luma-timezone-sidecar-card"] .ds-key-value-facts__icon { grid-row: 1 / span 2; margin-block-start: 2px; } .ds-key-value-facts[data-variant="luma-timezone-sidecar-card"] .ds-key-value-facts__value { order: -1; font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); } .ds-key-value-facts[data-variant="luma-timezone-sidecar-card"] .ds-key-value-facts__key { font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; } .ds-key-value-facts[data-variant="legend-key-value-colophon"] { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; gap: var(--ds-space-2) var(--ds-space-8); } .ds-key-value-facts[data-variant="legend-key-value-colophon"] .ds-key-value-facts__key, .ds-key-value-facts[data-variant="legend-key-value-colophon"] .ds-key-value-facts__value { font-family: inherit; font-size: inherit; font-weight: var(--ds-weight-regular); letter-spacing: inherit; text-transform: inherit; } .ds-key-value-facts[data-variant="legend-key-value-colophon"] .ds-key-value-facts__value { color: var(--ds-ink-2); } .ds-key-value-facts[data-variant="grammarly-caps-meta-label-value"] { grid-template-columns: 1fr; --_pitch: var(--ds-space-6); --_gap: var(--ds-space-3); } .ds-key-value-facts[data-variant="grammarly-caps-meta-label-value"] .ds-key-value-facts__key { font-size: var(--ds-text-xs); letter-spacing: .04em; text-transform: uppercase; } .ds-key-value-facts[data-variant="grammarly-caps-meta-label-value"] .ds-key-value-facts__value { font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); color: var(--ds-ink-2); } .ds-list-row-group { --_divider: var(--ds-rule-soft); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; } .ds-list-row-group > * { min-width: 0; } .ds-list-row-group > * + * { border-block-start: var(--ds-border-width) solid var(--_divider); } .ds-list-row-group[data-dividers="none"], .ds-list-row-group[data-pitch="lg"], .ds-list-row-group[data-pitch="xl"] { --_divider: transparent; } .ds-list-row-group[data-dividers="rule"] { --_divider: var(--ds-rule); } .ds-list-row-group[data-frame="bordered"] { border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); background: var(--ds-surface); overflow: clip; } .ds-list-row-group__label { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); padding: var(--ds-space-4) var(--_pad-x, var(--ds-space-3)) var(--ds-space-1); } .ds-list-row-group__label[data-rule="true"] { border-block-start: var(--ds-border-width) solid var(--ds-rule); margin-block-start: var(--ds-space-2); } .ds-list-row-group[data-state="empty"] { border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-md); background: transparent; } .ds-list-row-group__empty { display: flex; align-items: center; justify-content: center; min-height: calc(var(--ds-control-h-lg) + var(--ds-space-4)); padding: var(--ds-space-3) var(--ds-space-4); text-align: center; color: var(--ds-ink-muted); } .ds-list-row-group__empty > span { max-width: var(--ds-measure); } .ds-list-row-group__empty a { color: var(--ds-ink-link); } .ds-list-row { --_lead: var(--ds-tap-target-min); --_min-h: calc(var(--ds-row-h) + var(--ds-space-2)); --_pad-x: var(--ds-space-3); --_pad-y: var(--ds-space-2); --_gap: var(--ds-space-3); --_actions-w: 0px; position: relative; display: flex; align-items: center; gap: var(--_gap); min-height: var(--_min-h); padding: var(--_pad-y) calc(var(--_pad-x) + var(--_actions-w)) var(--_pad-y) var(--_pad-x); color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); text-decoration: none; text-align: start; background: transparent; border: 0; width: 100%; min-width: 0; font-family: inherit; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-list-row > * { min-width: 0; } .ds-list-row svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-list-row-group[data-pitch="sm"] .ds-list-row { --_min-h: var(--ds-tap-target-min); --_lead: var(--ds-icon-size-rail); --_pad-y: var(--ds-space-1); } .ds-list-row-group[data-pitch="lg"] .ds-list-row { --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-5)); --_pad-y: var(--ds-space-3); } .ds-list-row-group[data-pitch="xl"] .ds-list-row { --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-12)); --_lead: var(--ds-space-12); --_pad-y: var(--ds-space-4); } .ds-list-row__lead { flex: none; display: grid; place-items: center; width: var(--_lead); height: var(--_lead); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-muted); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); text-transform: uppercase; overflow: clip; position: relative; } .ds-list-row__lead img { width: 100%; height: 100%; object-fit: cover; } .ds-list-row__lead svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-list-row__lead[data-lead="tile"] { border-radius: var(--ds-radius-sm); border: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface); color: var(--ds-ink-2); } .ds-list-row__lead[data-lead="emoji"] { background: transparent; font-size: calc(var(--_lead) * .5); text-transform: none; } .ds-list-row__lead[data-lead="glyph"] { background: transparent; border-radius: 0; color: var(--ds-ink-2); width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); } .ds-list-row__lead[data-lead="glyph"] svg { width: 100%; height: 100%; } .ds-list-row__lead[data-lead="cover"] { align-self: stretch; height: auto; min-height: var(--_lead); border-radius: var(--ds-radius-sm); } .ds-list-row__lead-badge { position: absolute; inset-inline-end: -2px; inset-block-start: -2px; width: var(--ds-icon-size); height: var(--ds-icon-size); display: grid; place-items: center; border-radius: var(--ds-radius-pill); background: var(--ds-data-6); color: var(--ds-ink-on-semantic); border: 2px solid var(--ds-surface); } .ds-list-row__lead-badge svg { width: 10px; height: 10px; stroke-width: 3; } .ds-list-row__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--ds-space-0-5); min-width: 0; } .ds-list-row__title { font-weight: var(--ds-weight-medium); color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-list-row__title[data-wrap="true"] { white-space: normal; } a.ds-list-row__title { color: inherit; text-decoration: none; } a.ds-list-row__title:hover { text-decoration: underline; } .ds-list-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-1-5); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); min-width: 0; } .ds-list-row__meta svg { width: 14px; height: 14px; flex: none; } .ds-list-row__preview { font-size: var(--ds-text-sm); color: var(--ds-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-list-row__path { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-code); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-list-row__status { color: var(--ds-ink-muted); } .ds-list-row__status[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-list-row__status[data-tone="warning"] { color: var(--ds-warning-ink); } .ds-list-row__status[data-tone="success"] { color: var(--ds-success-ink); } .ds-list-row__badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-1-5); border-radius: var(--ds-radius-xs); background: var(--ds-accent-2-tint); color: var(--ds-accent-2-ink); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); line-height: var(--ds-lh-list); } .ds-list-row__badge svg { width: 12px; height: 12px; } .ds-list-row__dot { flex: none; } .ds-list-row__trail { flex: none; display: flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-list-row__value { font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); color: var(--ds-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-list-row__value[data-sign="plus"] { color: var(--ds-success-ink); } .ds-list-row__time { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; } .ds-list-row__trail > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-ink-faint); } .ds-list-row__icon-button { appearance: none; flex: none; display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); cursor: pointer; } .ds-list-row__icon-button:hover { background: var(--ds-surface-hover); color: var(--ds-ink); } .ds-list-row__icon-button svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-list-row__icon-button[data-kind="append"] { color: var(--ds-accent); } .ds-list-row__actions { position: absolute; inset-inline-end: var(--_pad-x); inset-block: 0; display: flex; align-items: center; gap: var(--ds-space-1); opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-standard); } .ds-list-row:hover .ds-list-row__actions, .ds-list-row:focus-within .ds-list-row__actions, .ds-list-row[data-state="hover"] .ds-list-row__actions { opacity: 1; } @media (hover: none) { .ds-list-row__actions { opacity: 1; } } .ds-list-row:has(> .ds-list-row__actions) { --_actions-w: calc(var(--ds-control-h-sm) + var(--ds-space-2)); } :is(a, button).ds-list-row, .ds-list-row[data-interactive] { cursor: pointer; } :is(a, button).ds-list-row:hover, .ds-list-row[data-interactive]:hover, .ds-list-row[data-state="hover"] { background: var(--ds-hover-bg); } .ds-list-row:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); border-radius: var(--ds-radius-xs); } .ds-list-row[aria-selected="true"], .ds-list-row[aria-current="true"], .ds-list-row[aria-current="page"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-list-row[aria-selected="true"] .ds-list-row__title { font-weight: var(--ds-selected-weight); } [data-selection="underline"] .ds-list-row:is([aria-selected="true"], [aria-current="true"], [aria-current="page"])::before, [data-selection="bar"] .ds-list-row:is([aria-selected="true"], [aria-current="true"], [aria-current="page"])::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: var(--ds-selected-line); pointer-events: none; } .ds-list-row[data-state="read"] { color: var(--ds-ink-muted); } .ds-list-row[data-state="read"] .ds-list-row__title { font-weight: var(--ds-weight-regular); } .ds-list-row[data-state="read"] .ds-list-row__value { color: inherit; } .ds-list-row[data-state="unread"] .ds-list-row__title { font-weight: var(--ds-weight-semibold); } .ds-list-row[data-state="unread"] .ds-list-row__preview { color: var(--ds-ink); } .ds-list-row[data-state="ghost"] .ds-list-row__title, .ds-list-row[data-state="ghost"] .ds-list-row__preview { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-list-row[aria-disabled="true"] { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-list-row[aria-disabled="true"] :is(.ds-list-row__meta, .ds-list-row__value, .ds-list-row__time, .ds-list-row__preview, .ds-list-row__lead) { color: var(--ds-ink-faint); } .ds-list-row[aria-disabled="true"] .ds-list-row__lead { background: var(--ds-surface-3); } .ds-list-row[aria-invalid="true"] .ds-list-row__lead { outline: var(--ds-border-width) solid var(--ds-danger); outline-offset: 1px; } .ds-list-row__error { font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-list-row[aria-busy="true"] { pointer-events: none; } .ds-list-row[aria-busy="true"] .ds-list-row__lead { background: var(--ds-skeleton); color: transparent; border-color: transparent; } .ds-list-row__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 160px); max-width: 100%; border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-list-row__skeleton + .ds-list-row__skeleton { margin-block-start: var(--ds-space-1-5); } .ds-list-row[data-variant="origin-transaction-row"] { --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-5)); --_pad-x: 0px; --_gap: var(--ds-space-4); } .ds-list-row[data-variant="origin-transaction-row"] .ds-list-row__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); } .ds-list-row[data-variant="origin-transaction-row"] .ds-list-row__value { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-medium); } .ds-list-row[data-variant="origin-provenance-row"] { --_lead: calc(var(--ds-space-12) + var(--ds-space-0-5)); --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-12)); --_pad-x: 0px; --_gap: var(--ds-space-4); --_pad-y: var(--ds-space-3); } .ds-list-row[data-variant="origin-provenance-row"] .ds-list-row__lead { border: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface); font-size: var(--ds-text-lg); } .ds-list-row[data-variant="origin-provenance-row"] .ds-list-row__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); } .ds-list-row[data-variant="origin-provenance-row"] .ds-list-row__meta { display: block; } .ds-list-row[data-variant="manychat-conversation-row"] { --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-6)); --_pad-x: var(--ds-space-4); --_pad-y: var(--ds-space-3); align-items: flex-start; } .ds-list-row[data-variant="manychat-conversation-row"] .ds-list-row__title { font-weight: var(--ds-weight-semibold); } .ds-list-row[data-variant="manychat-conversation-row"] .ds-list-row__trail { align-self: flex-start; padding-block-start: 2px; } .ds-list-row[data-variant="elevenlabs-teaser-row"] { --_lead: var(--ds-control-h-sm); --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-5)); --_pad-x: 0px; --_pad-y: var(--ds-space-3); } .ds-list-row[data-variant="elevenlabs-teaser-row"] .ds-list-row__title { font-weight: var(--ds-weight-semibold); } .ds-list-row[data-variant="elevenlabs-teaser-row"] .ds-list-row__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-text-md); } .ds-list-row[data-variant="synara-two-line-thread-row"] { --_lead: var(--ds-icon-size); --_min-h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-2); --_pad-y: var(--ds-space-1-5); --_gap: var(--ds-space-2); font-size: var(--ds-text-sm); border-radius: var(--ds-radius-sm); align-items: flex-start; } .ds-list-row[data-variant="synara-two-line-thread-row"] .ds-list-row__lead { background: transparent; border-radius: 0; color: var(--ds-data-4); margin-block-start: 2px; } .ds-list-row[data-variant="synara-two-line-thread-row"] .ds-list-row__lead svg { width: 100%; height: 100%; } .ds-list-row[data-variant="synara-two-line-thread-row"] .ds-list-row__meta { font-size: var(--ds-text-xs); } .ds-list-row[data-variant="synara-two-line-thread-row"] .ds-list-row__meta > :last-child { margin-inline-start: auto; } .ds-list-row[data-variant="synara-two-line-thread-row"][aria-selected="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-list-row[data-variant="confluence-icon-tile-head"] { --_lead: var(--ds-control-h-sm); --_min-h: var(--ds-control-h-sm); --_pad-x: 0px; --_pad-y: 0px; --_gap: var(--ds-space-2); } .ds-list-row[data-variant="confluence-icon-tile-head"] .ds-list-row__title { font-weight: var(--ds-weight-semibold); } .ds-list-row[data-variant="confluence-icon-tile-head"] .ds-list-row__meta { font-size: var(--ds-text-xs); } .ds-list-row[data-variant="perplexity-append-row"] { --_min-h: calc(var(--ds-control-h-lg) + var(--ds-space-2)); --_pad-x: 0px; } .ds-list-row[data-variant="perplexity-append-row"] .ds-list-row__title { white-space: normal; } .ds-list-row[data-variant="oku-row-media-card"] { --_lead: calc(var(--ds-space-24) + var(--ds-space-2)); --_min-h: calc(var(--ds-space-24) + var(--ds-space-16)); --_pad-x: 0px; --_pad-y: 0px; --_gap: var(--ds-space-4); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); background: var(--ds-surface); overflow: clip; align-items: stretch; } .ds-list-row[data-variant="oku-row-media-card"] .ds-list-row__lead { border-radius: 0; background: var(--ds-illustration-ground); color: var(--ds-ink-muted); font-family: var(--ds-font-serif); font-size: var(--ds-text-sm); text-transform: none; padding: var(--ds-space-2); text-align: center; } .ds-list-row[data-variant="oku-row-media-card"] .ds-list-row__body { justify-content: center; padding-block: var(--ds-space-4); gap: var(--ds-space-1); } .ds-list-row[data-variant="oku-row-media-card"] .ds-list-row__title { font-family: var(--ds-font-serif); font-size: var(--ds-text-lg); white-space: normal; } .ds-list-row[data-variant="oku-row-media-card"] .ds-list-row__trail { align-self: flex-start; padding: var(--ds-space-2); } .ds-list-row[data-variant="luma-attributed-auto-value"], .ds-list-row[data-variant="luma-summary-with-first-line-preview"] { --_lead: var(--ds-icon-size-row); --_min-h: calc(var(--ds-row-h) + var(--ds-space-2)); --_pad-x: var(--ds-space-4); } .ds-list-row[data-variant="luma-attributed-auto-value"] .ds-list-row__lead, .ds-list-row[data-variant="luma-summary-with-first-line-preview"] .ds-list-row__lead { background: transparent; border-radius: 0; color: var(--ds-ink-muted); } .ds-list-row[data-variant="luma-attributed-auto-value"] .ds-list-row__lead svg, .ds-list-row[data-variant="luma-summary-with-first-line-preview"] .ds-list-row__lead svg { width: 100%; height: 100%; } .ds-list-row[data-variant="airbnb-icon-fact-row"] { --_min-h: var(--ds-tap-target-min); --_pad-x: 0px; --_pad-y: var(--ds-space-1); --_gap: var(--ds-space-3); } .ds-list-row[data-variant="airbnb-icon-fact-row"] .ds-list-row__title { font-weight: var(--ds-weight-regular); white-space: normal; } .ds-list-row[data-variant="synara-changed-file-row"] { --_lead: var(--ds-icon-size); --_min-h: var(--ds-tap-target-min); --_pad-y: var(--ds-space-1); --_gap: var(--ds-space-2); } .ds-list-row[data-variant="synara-changed-file-row"] .ds-list-row__lead { background: transparent; border-radius: 0; color: var(--ds-ink-muted); } .ds-list-row[data-variant="synara-changed-file-row"] .ds-list-row__lead svg { width: 100%; height: 100%; } .ds-list-row-group[data-layout] { --_divider: transparent; display: flex; flex-direction: column; gap: var(--ds-space-6); --_cols: 3; --_col-w: 13rem; } .ds-list-row-group[data-layout] > * + * { border-block-start: 0; } .ds-list-row-group__index { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); } .ds-list-row-group__index > :is(a, span) { display: inline-grid; place-items: center; min-width: var(--ds-control-h-sm); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-list-row-group__index > a:hover { background: var(--ds-hover-bg); } .ds-list-row-group__index > a:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-list-row-group__index > a[aria-current] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); border-color: var(--ds-selected-line); } .ds-list-row-group__index > [aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: transparent; cursor: not-allowed; } .ds-list-row-group__section { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; scroll-margin-block-start: var(--ds-space-4); } .ds-list-row-group__letter { display: flex; align-items: baseline; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); color: var(--ds-ink); } .ds-list-row-group__count { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; } .ds-list-row-group__list { list-style: none; margin: 0; padding: 0; min-width: 0; } .ds-list-row-group__list > li { min-width: 0; break-inside: avoid; } .ds-list-row-group[data-layout] .ds-list-row { --_min-h: var(--ds-control-h-sm); --_pad-y: 0px; --_pad-x: var(--ds-space-2); --_gap: var(--ds-space-2); font-size: var(--ds-text-md); border-radius: var(--ds-radius-sm); } .ds-list-row-group[data-layout] .ds-list-row__title { font-weight: var(--ds-weight-regular); } .ds-list-row-group[data-layout] :is(a, button).ds-list-row:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-list-row-group[data-layout] .ds-list-row[aria-current="page"] .ds-list-row__title { font-weight: var(--ds-selected-weight); } .ds-list-row-group[data-layout="columns"] .ds-list-row-group__list { columns: var(--_cols) var(--_col-w); column-gap: var(--ds-space-6); } .ds-list-row-group[data-layout="columns"] .ds-list-row { --_pad-x: 0px; border-radius: 0; } .ds-list-row-group[data-layout="columns"] :is(a).ds-list-row:is(:hover, [data-state="hover"]) { background: transparent; text-decoration: underline; text-underline-offset: .2em; } .ds-list-row-group[data-layout="grid"] .ds-list-row-group__letter { padding-block-end: var(--ds-space-1); border-block-end: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-lg); } .ds-list-row-group[data-layout="grid"] .ds-list-row-group__count { margin-inline-start: auto; } .ds-list-row-group[data-layout="grid"] .ds-list-row-group__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--_col-w), 100%), 1fr)); column-gap: var(--ds-space-4); } .ds-list-row-group[data-layout="grid"] .ds-list-row__trail { font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; } .ds-list-row-group[data-layout="dense"] { --_col-w: 22rem; --_divider: var(--ds-rule-soft); gap: 0; border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); background: var(--ds-surface); padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-3); } .ds-list-row-group[data-layout="dense"] .ds-list-row-group__section { gap: 0; } .ds-list-row-group[data-layout="dense"] .ds-list-row-group__letter { padding-block: var(--ds-space-3) var(--ds-space-1); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); font-family: var(--ds-font-label); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); color: var(--ds-ink-muted); } .ds-list-row-group[data-layout="dense"] .ds-list-row-group__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--_col-w), 100%), 1fr)); column-gap: var(--ds-space-8); } .ds-list-row-group[data-layout="dense"] .ds-list-row-group__list > li { border-block-end: var(--ds-border-width) solid var(--_divider); } .ds-list-row-group[data-layout="dense"] .ds-list-row { --_min-h: var(--ds-row-h); --_pad-x: var(--ds-space-1); border-radius: 0; } .ds-list-row-group[data-layout="dense"] .ds-list-row__trail { gap: var(--ds-space-3); font-size: var(--ds-text-sm); } .ds-list-row__code { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: .04em; } @media (max-width: 480px) { .ds-list-row-group[data-layout="columns"] .ds-list-row-group__list { columns: 1; } .ds-list-row-group[data-layout="grid"] .ds-list-row-group__list, .ds-list-row-group[data-layout="dense"] .ds-list-row-group__list { grid-template-columns: minmax(0, 1fr); } .ds-list-row-group[data-layout="dense"] { padding-inline: var(--ds-space-3); } } .ds-list-row[data-state="no-data"] { cursor: not-allowed; background: transparent; color: var(--ds-ink-muted); } .ds-list-row[data-state="no-data"][aria-disabled="true"] :is(.ds-list-row__meta, .ds-list-row__value, .ds-list-row__time, .ds-list-row__trail) { color: var(--ds-ink-muted); } .ds-list-row[data-state="no-data"] .ds-list-row__lead { background: var(--ds-surface-3); color: var(--ds-ink-faint); } .ds-list-row[data-state="no-data"] .ds-list-row__title { font-weight: var(--ds-weight-regular); } .ds-list-row[data-state="no-data"]:hover { background: transparent; } .ds-list-row__reason { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-1-5); border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-xs); font-size: var(--ds-text-xs); line-height: var(--ds-lh-list); color: var(--ds-ink-muted); white-space: nowrap; } .ds-marketing-nav { --_h: var(--ds-topbar-h); --_cta-h: var(--ds-size-h); --_gap: var(--ds-space-4); --_link-gap: var(--ds-space-1); --_max: var(--ds-container-max); --_spin: var(--ds-ink); position: relative; z-index: 1; container-type: inline-size; background: transparent; color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-marketing-nav[data-sticky] { position: sticky; inset-block-start: 0; z-index: var(--ds-z-sticky); } .ds-marketing-nav[data-state="scrolled"] { background: color-mix(in srgb, var(--ds-ground) 88%, transparent); -webkit-backdrop-filter: blur(var(--ds-glass-blur)); backdrop-filter: blur(var(--ds-glass-blur)); border-block-end: var(--ds-border-width) solid var(--ds-rule); transition: background-color var(--ds-dur-base) var(--ds-ease-standard), border-color var(--ds-dur-base) var(--ds-ease-standard); } .ds-marketing-nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--_gap); min-height: var(--_h); width: 100%; max-width: var(--_max); margin-inline: auto; padding-inline: var(--ds-gutter-page); min-width: 0; } .ds-marketing-nav__brand { order: 0; display: inline-flex; align-items: center; gap: var(--ds-space-2); flex: none; min-height: var(--ds-control-h-sm); border-radius: var(--ds-radius-sm); color: var(--ds-ink); text-decoration: none; font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-lg); letter-spacing: var(--ds-heading-tracking); } .ds-marketing-nav__mark { width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); flex: none; fill: currentColor; } .ds-marketing-nav__wordmark { white-space: nowrap; } .ds-marketing-nav__inner:not(:has(.ds-marketing-nav__links)) .ds-marketing-nav__brand { margin-inline-end: auto; } .ds-marketing-nav__divider { order: 0; width: var(--ds-border-width); align-self: stretch; margin-block: var(--ds-space-4); margin-inline: calc(-1 * var(--ds-space-2)); background: var(--ds-rule-strong); flex: none; } .ds-marketing-nav__drawer { display: contents; } .ds-marketing-nav__links { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--_link-gap); margin: 0; margin-inline-end: auto; padding: 0; list-style: none; min-width: 0; } .ds-marketing-nav[data-align="center"] .ds-marketing-nav__links { margin-inline: auto; } .ds-marketing-nav__link { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-control-pad-x); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); font-size: inherit; text-decoration: none; text-transform: var(--ds-control-case); white-space: nowrap; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-marketing-nav__link:hover, .ds-marketing-nav__link[data-state="hover"] { color: var(--ds-ink); background: var(--ds-hover-bg); text-decoration: none; } .ds-marketing-nav__link[aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-selected-weight); } [data-selection="underline"] .ds-marketing-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--ds-selected-line); text-underline-offset: .55em; } [data-selection="bar"] .ds-marketing-nav__link[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--ds-space-3); inset-block-end: 0; height: 2px; background: var(--ds-selected-line); } .ds-marketing-nav__link[aria-expanded="true"] { color: var(--ds-ink); background: var(--ds-surface-selected); } .ds-marketing-nav__link[aria-disabled="true"] { color: var(--ds-ink-faint); pointer-events: none; } .ds-marketing-nav__chevron { width: 12px; height: 12px; color: var(--ds-ink-muted); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-marketing-nav__link[aria-expanded="true"] .ds-marketing-nav__chevron { transform: rotate(180deg); } .ds-marketing-nav__link-icon { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-marketing-nav__utilities { order: 2; display: flex; align-items: center; gap: var(--ds-space-2); flex: none; } .ds-marketing-nav__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); padding: 0; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-2); text-decoration: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-marketing-nav__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-marketing-nav__icon-btn[aria-pressed="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-marketing-nav__icon-btn[aria-disabled="true"], .ds-marketing-nav__icon-btn:disabled { color: var(--ds-ink-faint); } .ds-marketing-nav__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-marketing-nav__icon--fill { fill: currentColor; stroke: none; } .ds-marketing-nav__meta { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; text-decoration: none; } .ds-marketing-nav__meta:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-marketing-nav__status { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); text-decoration: none; white-space: nowrap; } .ds-marketing-nav__status:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-marketing-nav__status::before { content: ""; width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-presence); flex: none; } .ds-marketing-nav__status[data-status="degraded"]::before { background: var(--ds-warning); } .ds-marketing-nav__status[data-status="down"]::before { background: var(--ds-danger); } .ds-marketing-nav__status[data-status="version"] { text-transform: none; } .ds-marketing-nav__status[data-status="version"]::before { display: none; } @container (max-width: 600px) { .ds-marketing-nav__status:not([data-status="version"]) { padding-inline: var(--ds-space-1); } .ds-marketing-nav__status:not([data-status="version"]) .ds-marketing-nav__status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .ds-marketing-nav__clock { color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-marketing-nav__avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); border: var(--ds-border-width) solid var(--ds-rule); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); overflow: hidden; flex: none; } .ds-marketing-nav__avatar img { width: 100%; height: 100%; object-fit: cover; } .ds-marketing-nav__account { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-lg); padding-inline: var(--ds-space-3) var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-ink); transition: box-shadow var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-marketing-nav__account:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-lift); } .ds-marketing-nav__account .ds-marketing-nav__avatar { width: 32px; height: 32px; } .ds-marketing-nav__actions { order: 3; display: flex; align-items: center; gap: var(--ds-space-3); flex: none; } .ds-marketing-nav__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--_cta-h); padding-inline: var(--ds-size-pad-x); border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-button); background: transparent; color: var(--ds-ink); font-size: var(--ds-size-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-decoration: none; text-transform: var(--ds-control-case); white-space: nowrap; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard); } .ds-marketing-nav__cta .ds-marketing-nav__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-marketing-nav__cta[data-cta="primary"] { --_spin: var(--ds-ink-on-primary); background: var(--ds-primary-fill); border-color: var(--ds-primary-border); color: var(--ds-ink-on-primary); box-shadow: var(--ds-shadow-lip); } .ds-marketing-nav__cta[data-cta="primary"]:hover { background: var(--ds-primary-fill-hover); } .ds-marketing-nav__cta[data-cta="secondary"], .ds-marketing-nav__cta[data-cta="outline-arrow"] { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-ink); box-shadow: var(--ds-shadow-lip); } .ds-marketing-nav__cta[data-cta="secondary"]:hover, .ds-marketing-nav__cta[data-cta="outline-arrow"]:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-marketing-nav__cta[data-cta="outline"] { background: transparent; border-color: var(--ds-border); color: var(--ds-ink); } .ds-marketing-nav__cta[data-cta="outline"]:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-marketing-nav__cta[data-cta="light"] { background: var(--ds-surface-2); color: var(--ds-ink); } .ds-marketing-nav__cta[data-cta="light"]:hover { background: var(--ds-surface-3); } .ds-marketing-nav__cta[data-cta="ghost"] { color: var(--ds-ink-2); } .ds-marketing-nav__cta[data-cta="ghost"]:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-marketing-nav__cta[data-cta="text"] { padding-inline: var(--ds-space-1); color: var(--ds-ink-2); border-radius: var(--ds-radius-xs); } .ds-marketing-nav__cta[data-cta="text"]:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: .2em; } .ds-marketing-nav__cta[aria-disabled="true"], .ds-marketing-nav__cta:disabled { background: var(--ds-surface-3); border-color: var(--ds-rule); color: var(--ds-ink-faint); box-shadow: none; cursor: not-allowed; pointer-events: none; } .ds-marketing-nav__cta[aria-busy="true"] { color: transparent; pointer-events: none; } .ds-marketing-nav__cta[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--ds-icon-size); height: var(--ds-icon-size); border: 2px solid var(--_spin); border-inline-end-color: transparent; border-radius: var(--ds-radius-pill); animation: ds-marketing-nav-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-marketing-nav-spin { to { transform: rotate(360deg); } } .ds-marketing-nav__menu-toggle { order: 4; display: none; align-items: center; justify-content: center; width: var(--ds-control-h); height: var(--ds-control-h); padding: 0; border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-ink); flex: none; } .ds-marketing-nav__menu-toggle:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-marketing-nav__menu-toggle .ds-marketing-nav__icon--close { display: none; } .ds-marketing-nav__menu-toggle[aria-expanded="true"] .ds-marketing-nav__icon--menu { display: none; } .ds-marketing-nav__menu-toggle[aria-expanded="true"] .ds-marketing-nav__icon--close { display: block; } .ds-marketing-nav:not([data-variant]), .ds-marketing-nav[data-variant="jstov"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-2)); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav:not([data-variant]) .ds-marketing-nav__links, .ds-marketing-nav[data-variant="jstov"] .ds-marketing-nav__links { margin-inline: auto; } .ds-marketing-nav:not([data-variant]) .ds-marketing-nav__brand, .ds-marketing-nav[data-variant="jstov"] .ds-marketing-nav__brand { align-self: stretch; padding-inline-end: var(--_gap); border-inline-end: var(--ds-border-width) solid var(--ds-rule); border-radius: 0; } .ds-marketing-nav:not([data-variant]) .ds-marketing-nav__utilities, .ds-marketing-nav[data-variant="jstov"] .ds-marketing-nav__utilities { align-self: stretch; padding-inline-start: var(--_gap); border-inline-start: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav[data-variant="vercel-button-trio"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-6)); --_cta-h: var(--ds-control-h-lg); --_link-gap: var(--ds-space-2); } .ds-marketing-nav[data-variant="vercel-button-trio"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-md); padding-inline: var(--ds-space-4); } .ds-marketing-nav[data-variant="vercel-button-trio"] .ds-marketing-nav__link { font-size: var(--ds-text-lg); } .ds-marketing-nav[data-variant="intercom-dual-cta"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-2)); } .ds-marketing-nav[data-variant="intercom-dual-cta"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-xs); } .ds-marketing-nav[data-variant="intercom-dual-cta"] .ds-marketing-nav__cta[data-cta="outline-arrow"] { background: transparent; border-color: var(--ds-ink); } .ds-marketing-nav[data-variant="attio-dual-cta"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-2)); background: var(--ds-surface); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav[data-variant="attio-dual-cta"] .ds-marketing-nav__link { font-size: var(--ds-text-sm); } .ds-marketing-nav[data-variant="attio-dual-cta"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-md); font-size: var(--ds-text-sm); } .ds-marketing-nav[data-variant="fibery-cta-trio"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-2)); --_link-gap: var(--ds-space-2); } .ds-marketing-nav[data-variant="heron-table-nav"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-1)); --_gap: 0px; --_max: none; border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__inner { padding-inline: 0; flex-wrap: nowrap; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__brand { flex: 1 1 50%; align-self: stretch; padding-inline: var(--ds-gutter-page); border-radius: 0; min-width: 0; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__links { flex: 1 1 50%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; align-self: stretch; margin: 0; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link { display: flex; align-items: flex-start; height: 100%; min-height: var(--_h); padding: var(--ds-space-3) var(--ds-space-4); border-radius: 0; border-inline-start: var(--ds-border-width) solid var(--ds-rule); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink); white-space: normal; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[aria-haspopup]::after { content: ""; position: absolute; inset-inline-end: var(--ds-space-2); inset-block-end: var(--ds-space-2); width: 6px; height: 6px; border-inline-end: var(--ds-border-width) solid var(--ds-rule-strong); border-block-end: var(--ds-border-width) solid var(--ds-rule-strong); } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[data-cta] { color: var(--ds-ink-link); grid-column: span 1; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[data-cta] .ds-marketing-nav__icon { position: absolute; inset-inline-end: var(--ds-space-3); inset-block-end: var(--ds-space-2); } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link:hover { background: var(--ds-hover-bg); } .ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] { --_h: calc(var(--ds-topbar-h) - var(--ds-space-1)); --_link-gap: var(--ds-space-2); } .ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] .ds-marketing-nav__links { margin-inline: auto; } .ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] .ds-marketing-nav__link { color: var(--ds-ink); } .ds-marketing-nav[data-variant="synara-three-cluster-outlined-cta"] .ds-marketing-nav__cta { border-radius: var(--ds-radius-pill); } .ds-marketing-nav[data-variant="luma-transparent-app-nav"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-2)); --_max: none; --_link-gap: var(--ds-space-1); } .ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__inner { padding-inline: var(--ds-space-6); } .ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__link { color: var(--ds-ink-muted); } .ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__link[aria-current="page"] { color: var(--ds-ink); } .ds-marketing-nav[data-variant="airbnb-account-pill"] { --_h: calc(var(--ds-topbar-h) + var(--ds-space-6)); background: var(--ds-surface); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav[data-variant="airbnb-account-pill"] .ds-marketing-nav__cta[data-cta="text"] { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); padding-inline: var(--ds-space-3); min-height: var(--ds-control-h); border-radius: var(--ds-radius-pill); } .ds-marketing-nav[data-variant="airbnb-account-pill"] .ds-marketing-nav__cta[data-cta="text"]:hover { background: var(--ds-hover-bg); text-decoration: none; } .ds-marketing-nav[data-variant="airbnb-account-pill"] .ds-marketing-nav__icon-btn { border-radius: var(--ds-radius-pill); width: var(--ds-control-h); height: var(--ds-control-h); } @container (max-width: 1024px) { .ds-marketing-nav__inner { gap: var(--ds-space-2) var(--ds-space-3); } .ds-marketing-nav__drawer { display: flex; flex-direction: column; align-items: stretch; gap: var(--ds-space-3); flex-basis: 100%; order: 5; padding-block: var(--ds-space-3) var(--ds-space-4); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav__links { flex-direction: column; align-items: stretch; gap: 0; margin: 0 !important; } .ds-marketing-nav__link { width: 100%; min-height: var(--ds-row-h); justify-content: space-between; white-space: normal; } .ds-marketing-nav__actions { flex-direction: column; align-items: stretch; gap: var(--ds-space-2); } .ds-marketing-nav__cta { width: 100%; } .ds-marketing-nav__brand { margin-inline-end: auto; } .ds-marketing-nav__utilities { margin-inline-start: 0; } .ds-marketing-nav__divider { display: none; } .ds-marketing-nav__menu-toggle { display: inline-flex; } .ds-marketing-nav__brand, .ds-marketing-nav__utilities { border: 0 !important; padding-inline: 0 !important; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__inner { flex-wrap: wrap; padding-inline: var(--ds-gutter-page); } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__brand { flex: 1 1 auto; padding-inline: 0; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__links { display: flex; } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link { height: auto; min-height: var(--ds-row-h); align-items: center; border-inline-start: 0; border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav[data-variant="heron-table-nav"] .ds-marketing-nav__link[data-cta] .ds-marketing-nav__icon { position: static; } .ds-marketing-nav[data-variant="luma-transparent-app-nav"] .ds-marketing-nav__inner { padding-inline: var(--ds-gutter-page); } } @container (max-width: 1024px) { .ds-marketing-nav[data-js] .ds-marketing-nav__drawer { display: none; } .ds-marketing-nav[data-js]:has(.ds-marketing-nav__menu-toggle[aria-expanded="true"]) .ds-marketing-nav__drawer, .ds-marketing-nav[data-js][data-state="open"] .ds-marketing-nav__drawer { display: flex; } } .ds-marketing-nav:not([data-js]) .ds-marketing-nav__menu-toggle { display: none; } @container (max-width: 1024px) { .ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__drawer, .ds-marketing-nav[data-collapse="cta"][data-js] .ds-marketing-nav__drawer, .ds-marketing-nav[data-collapse="cta"][data-js]:has(.ds-marketing-nav__menu-toggle[aria-expanded="true"]) .ds-marketing-nav__drawer, .ds-marketing-nav[data-collapse="cta"][data-js][data-state="open"] .ds-marketing-nav__drawer { display: contents; } .ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__links { flex-basis: 100%; order: 5; padding-block: var(--ds-space-3) var(--ds-space-4); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__actions { flex-direction: row; align-items: center; order: 3; flex: none; gap: var(--ds-space-2); } .ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__cta { width: auto; } .ds-marketing-nav[data-collapse="cta"] .ds-marketing-nav__actions:has(.ds-marketing-nav__cta[data-cta="primary"]) .ds-marketing-nav__cta:not([data-cta="primary"]) { display: none; } .ds-marketing-nav[data-collapse="cta"][data-js] .ds-marketing-nav__links { display: none; } .ds-marketing-nav[data-collapse="cta"][data-js]:has(.ds-marketing-nav__menu-toggle[aria-expanded="true"]) .ds-marketing-nav__links, .ds-marketing-nav[data-collapse="cta"][data-js][data-state="open"] .ds-marketing-nav__links { display: flex; } } .ds-menu { --_row-h: var(--ds-control-h-sm); --_pad: var(--ds-space-1); --_pad-x: var(--ds-space-2); --_min-w: 200px; --_max-w: 480px; --_radius: var(--ds-radius-xs); --_check: var(--ds-icon-size); list-style: none; margin: 0; padding: var(--_pad); display: flex; flex-direction: column; gap: 0; min-width: min(var(--_min-w), 100%); max-width: var(--_max-w); width: 100%; min-inline-size: 0; color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-menu > li { list-style: none; min-width: 0; } .ds-menu[data-size="sm"] { --_row-h: calc(var(--ds-control-h-sm) - var(--ds-space-1)); } .ds-menu[data-size="md"] { --_row-h: var(--ds-control-h); } .ds-menu[data-size="lg"] { --_row-h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-3); } .ds-menu__item { display: flex; align-items: center; gap: var(--ds-space-2-5); width: 100%; min-width: 0; min-height: var(--_row-h); padding: var(--ds-space-1) var(--_pad-x); border: 0; border-radius: var(--_radius); background: transparent; color: inherit; font: inherit; text-align: start; text-transform: var(--ds-control-case); cursor: pointer; text-decoration: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-menu__item > * { min-width: 0; } .ds-menu__item svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-menu__icon { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); color: var(--ds-ink-muted); display: grid; place-items: center; } .ds-menu__icon svg { width: 100%; height: 100%; } .ds-menu__lead { flex: none; display: grid; place-items: center; } .ds-menu__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--ds-space-0-5); min-width: 0; } .ds-menu__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-menu__label[data-wrap="true"] { white-space: normal; } .ds-menu__description { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); white-space: normal; } .ds-menu__value { flex: none; margin-inline-start: auto; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-menu__shortcut { flex: none; margin-inline-start: auto; } .ds-menu__value + .ds-menu__shortcut, .ds-menu__value + .ds-menu__check, .ds-menu__shortcut + .ds-menu__check { margin-inline-start: 0; } .ds-menu__check { flex: none; margin-inline-start: auto; width: var(--_check); height: var(--_check); display: grid; place-items: center; color: var(--ds-ink); } .ds-menu__check svg { width: 100%; height: 100%; stroke-width: 2; } .ds-menu__item:not([aria-checked="true"]):not([aria-selected="true"]):not([aria-current]) .ds-menu__check { display: none; } .ds-menu__item:hover, .ds-menu__item[data-state="hover"] { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-menu__item:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); background: var(--ds-hover-bg); } .ds-menu__item:active, .ds-menu__item[data-state="pressed"] { background: var(--ds-surface-selected); } .ds-menu__item[aria-checked="true"], .ds-menu__item[aria-selected="true"], .ds-menu__item[aria-current] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); } .ds-menu__item[aria-checked="true"] .ds-menu__icon, .ds-menu__item[aria-selected="true"] .ds-menu__icon { color: inherit; } .ds-menu__item[aria-disabled="true"], .ds-menu__item:disabled { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; } .ds-menu__item[aria-disabled="true"] .ds-menu__icon, .ds-menu__item[aria-disabled="true"] .ds-menu__value { color: var(--ds-ink-faint); } .ds-menu__item[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-menu__item[data-tone="danger"] .ds-menu__icon { color: inherit; } .ds-menu__item[data-tone="danger"]:hover, .ds-menu__item[data-tone="danger"][data-state="hover"] { background: var(--ds-danger-tint); color: var(--ds-danger-ink); } .ds-menu__item[data-tone="danger"]:focus-visible { outline-color: var(--ds-danger); } .ds-menu__item[aria-busy="true"] { pointer-events: none; } .ds-menu__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 60%); max-width: 100%; border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); } .ds-menu__empty { display: block; padding: var(--ds-space-3) var(--_pad-x); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-align: center; } .ds-menu__empty a { color: var(--ds-ink-link); } .ds-menu__group-label { display: block; padding: var(--ds-space-2) var(--_pad-x) var(--ds-space-1); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); line-height: var(--ds-lh-list); } .ds-menu__separator { display: block; height: 0; border: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); margin: var(--ds-space-1) 0; } .ds-menu__separator[data-grade="rule"] { border-block-start-color: var(--ds-rule); margin-inline: calc(-1 * var(--_pad)); } .ds-menu[data-variant="navattic-check-on-selected"] { --_min-w: 238px; } .ds-menu[data-variant="luma-check-filled-circle"] { --_row-h: calc(var(--ds-control-h-lg) + var(--ds-space-0-5)); --_pad-x: var(--ds-space-3); --_check: 20px; --_pad: var(--ds-space-2); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item { gap: var(--ds-space-3); font-size: var(--ds-text-lg); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[aria-checked="true"], .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[aria-selected="true"] { background: transparent; color: var(--ds-ink); font-weight: var(--ds-weight-regular); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[aria-checked="true"]:hover, .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[aria-selected="true"]:hover { background: var(--ds-hover-bg); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__check { border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__check svg { width: 12px; height: 12px; stroke-width: 2.5; } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[data-kind="action"] { color: var(--ds-ink-2); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[data-kind="action"] .ds-menu__lead { width: 28px; height: 28px; color: var(--ds-ink-muted); } .ds-menu[data-variant="luma-check-filled-circle"] .ds-menu__item[data-kind="action"] .ds-menu__lead svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-menu[data-variant="luma-explained-option"] { --_min-w: 300px; --_max-w: 360px; --_pad: var(--ds-space-2); --_pad-x: var(--ds-space-3); } .ds-menu[data-variant="luma-explained-option"] .ds-menu__item { align-items: flex-start; padding-block: var(--ds-space-2-5); gap: var(--ds-space-3); } .ds-menu[data-variant="luma-explained-option"] .ds-menu__icon { margin-block-start: var(--ds-space-0-5); width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); } .ds-menu[data-variant="luma-explained-option"] .ds-menu__label { font-weight: var(--ds-weight-medium); } .ds-menu[data-variant="luma-explained-option"] .ds-menu__check { align-self: center; } .ds-menu[data-variant="luma-explained-option"] .ds-menu__item[aria-checked="true"] .ds-menu__description { color: var(--ds-ink-2); } .ds-menu[data-variant="perplexity-trending-rows-no-hover"] { --_row-h: var(--ds-control-h); --_pad: 0; --_pad-x: var(--ds-space-4); --_radius: 0; --_max-w: none; } .ds-menu[data-variant="perplexity-trending-rows-no-hover"] .ds-menu__item { font-weight: var(--ds-weight-medium); } .ds-menu[data-variant="perplexity-trending-rows-no-hover"] .ds-menu__icon { color: var(--ds-ink-faint); } @media (max-width: 480px) { .ds-menu[data-variant="luma-explained-option"] { --_min-w: 0px; --_max-w: 100%; } } .ds-menu[data-variant="coda-doc-actions-beta-tag"] { --_row-h: var(--ds-control-h); --_pad: var(--ds-space-1-5); --_pad-x: var(--ds-space-3); --_min-w: 260px; } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__item { gap: var(--ds-space-3); } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__icon { color: var(--ds-ink-2); } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__shortcut { color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking-upper); } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__item[aria-disabled="true"] .ds-menu__shortcut { color: var(--ds-ink-faint); } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__item[aria-checked="true"] { background: transparent; color: var(--ds-ink); font-weight: var(--ds-weight-regular); } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__item[aria-checked="true"]:hover { background: var(--ds-hover-bg); } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__item[aria-checked="true"] .ds-menu__icon svg { fill: currentColor; } .ds-menu[data-variant="coda-doc-actions-beta-tag"] .ds-menu__icon > .ds-menu__skeleton { height: var(--ds-icon-size); } .ds-menu__tag { flex: none; margin-inline-start: auto; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-label-tracking-upper); text-transform: uppercase; color: var(--ds-accent-ink); } .ds-menu__item[aria-disabled="true"] .ds-menu__tag { color: var(--ds-ink-faint); } .ds-onboarding-step { --_os-progress: 0%; --_os-h: 100dvh; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--ds-space-10); align-items: start; min-height: var(--_os-h); padding: var(--ds-space-12) var(--ds-gutter-page); background: var(--ds-ground); color: var(--ds-ink); } .ds-onboarding-step__backdrop { display: none; } .ds-onboarding-step__panel { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-6); width: 100%; max-width: 560px; justify-self: end; min-width: 0; } .ds-onboarding-step__brand { display: flex; align-items: center; gap: var(--ds-space-2); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-md); } .ds-onboarding-step__brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--ds-radius-sm); background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); font-size: var(--ds-text-xs); } .ds-onboarding-step__main { display: flex; flex-direction: column; gap: var(--ds-space-6); min-width: 0; } .ds-onboarding-step__head { display: flex; flex-direction: column; gap: var(--ds-space-2); } .ds-onboarding-step__count { margin: 0; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); font-variant-numeric: tabular-nums; } .ds-onboarding-step__title { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); text-wrap: balance; } .ds-onboarding-step__why { margin: 0; font-size: var(--ds-text-md); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); max-width: 52ch; } .ds-onboarding-step__body { min-width: 0; } .ds-onboarding-step__error { display: none; margin: 0; font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-onboarding-step[data-state="error"] .ds-onboarding-step__error { display: block; } .ds-onboarding-step__progress { position: relative; height: 2px; border-radius: var(--ds-radius-pill); background: var(--ds-rule); overflow: hidden; } .ds-onboarding-step__progress-fill { position: absolute; inset: 0 auto 0 0; width: var(--_os-progress); background: var(--ds-ink); border-radius: inherit; transition: width var(--ds-dur-slow) var(--ds-ease-out); } .ds-onboarding-step__foot { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; } .ds-onboarding-step__spacer { flex: 1; } .ds-onboarding-step .ds-onboarding-step__next { display: none; } .ds-onboarding-step:is([data-state="answered"], [data-state="error"]) .ds-onboarding-step__next { display: inline-flex; } .ds-onboarding-step:is([data-state="answered"], [data-state="error"]) .ds-onboarding-step__skip { display: none; } .ds-onboarding-step[data-state="loading"] .ds-onboarding-step__foot { visibility: hidden; } .ds-onboarding-step[data-first] .ds-onboarding-step__back { visibility: hidden; } .ds-onboarding-step__aside { position: sticky; top: var(--ds-space-12); min-width: 0; } .ds-onboarding-step__receipt { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-card-pad); border: var(--ds-border-width) solid var(--ds-card-border); border-radius: var(--ds-radius-lg); background: var(--ds-card-bg); box-shadow: var(--ds-card-shadow); } .ds-onboarding-step__receipt-title { margin: 0; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } .ds-onboarding-step__receipt-list { display: flex; flex-direction: column; margin: 0; } .ds-onboarding-step__receipt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-3); padding-block: var(--ds-space-2); border-top: var(--ds-border-width) solid var(--ds-rule-soft); font-size: var(--ds-text-sm); } .ds-onboarding-step__receipt-row:first-child { border-top: 0; } .ds-onboarding-step__receipt-row dt { color: var(--ds-ink-muted); } .ds-onboarding-step__receipt-row dd { margin: 0; text-align: end; font-weight: var(--ds-weight-medium); overflow-wrap: anywhere; } .ds-onboarding-step__receipt-row[data-pending] dd { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-onboarding-step__receipt-row[data-fresh] dd { color: var(--ds-accent-ink); background: var(--ds-accent-tint); padding-inline: var(--ds-space-1-5); border-radius: var(--ds-radius-xs); } .ds-onboarding-step__receipt-note { margin: 0; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } @media (max-width: 760px) { .ds-onboarding-step { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-6); padding-block: var(--ds-space-8); } .ds-onboarding-step__panel { justify-self: stretch; } .ds-onboarding-step__aside { position: static; } } .ds-onboarding-step[data-variant="clickup-modal-over-app"] { grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--ds-space-8) var(--ds-space-4); background: var(--ds-surface-2); overflow: hidden; } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__backdrop { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--ds-scrim), var(--ds-scrim)), linear-gradient(90deg, var(--ds-surface) 0 220px, transparent 220px), repeating-linear-gradient(180deg, transparent 0 28px, var(--ds-skeleton) 28px 40px, transparent 40px 56px) 240px 80px / 60% 100% no-repeat, var(--ds-surface-2); filter: blur(2px); } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__panel { justify-self: center; max-width: 780px; padding: var(--ds-space-8) var(--ds-space-8) var(--ds-space-5); border-radius: var(--ds-radius-lg); background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-modal); gap: var(--ds-space-8); } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__head { align-items: center; text-align: center; } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__title { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__count { display: none; } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__why { font-size: var(--ds-text-sm); } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__body { display: flex; justify-content: center; } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__progress-fill { background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)); } .ds-onboarding-step[data-variant="clickup-modal-over-app"] .ds-onboarding-step__aside, .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__aside, .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__aside { display: none; } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] { grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--ds-space-8) var(--ds-space-4); background: var(--ds-surface-3); overflow: hidden; } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__backdrop { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--ds-skeleton), var(--ds-skeleton)) 16px 16px / 20px 20px no-repeat, linear-gradient(var(--ds-skeleton), var(--ds-skeleton)) 16px 56px / 120px 10px no-repeat, linear-gradient(var(--ds-skeleton), var(--ds-skeleton)) 16px 80px / 90px 10px no-repeat, linear-gradient(var(--ds-skeleton), var(--ds-skeleton)) calc(100% - 16px) 16px / 280px 14px no-repeat; } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__panel { justify-self: center; max-width: 560px; padding: var(--ds-space-8) var(--ds-space-8) var(--ds-space-5); border-radius: var(--ds-radius-md); background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-float); overflow: hidden; } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__progress { position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 0; background: var(--ds-surface-3); } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__progress-fill { background: linear-gradient(90deg, var(--ds-warning), var(--ds-danger)); border-radius: 0; } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__head { align-items: center; text-align: center; } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__why { font-size: var(--ds-text-sm); } .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__count, .ds-onboarding-step[data-variant="coda-card-over-skeleton"] .ds-onboarding-step__brand { display: none; } .ds-onboarding-step[data-variant="mural-page-top-rule"] { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 0 var(--ds-space-8); background: var(--ds-surface-2); } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__panel { justify-self: stretch; max-width: none; gap: var(--ds-space-8); min-height: var(--_os-h); } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__brand { order: -2; padding: var(--ds-space-3) var(--ds-gutter-page); background: var(--ds-surface); } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__progress { order: -1; margin-top: calc(-1 * var(--ds-space-8)); border-radius: 0; background: var(--ds-rule); } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__progress-fill { background: var(--ds-info); border-radius: 0; } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__main { align-self: center; width: min(640px, 100% - 2 * var(--ds-gutter-page)); align-items: center; text-align: center; } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__head { align-items: center; } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__title { font-family: var(--ds-font-serif); font-weight: var(--ds-weight-regular); font-size: var(--ds-text-2xl); } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__why { font-size: var(--ds-text-sm); } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__count { display: none; } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__body { width: 100%; } .ds-onboarding-step[data-variant="mural-page-top-rule"] .ds-onboarding-step__foot { margin-top: auto; padding-inline: var(--ds-gutter-page); } .ds-onboarding-step[data-variant="productboard-split-panel"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; background: var(--ds-surface); align-items: stretch; } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__panel { justify-self: start; max-width: 440px; padding: var(--ds-space-8) var(--ds-space-12); gap: var(--ds-space-8); } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__main { margin-top: var(--ds-space-10); } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__why { font-size: var(--ds-text-sm); } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__count, .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__progress { display: none; } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__foot { order: 0; } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__aside { position: relative; top: 0; display: grid; place-items: center; padding: var(--ds-space-10); background: var(--ds-surface-2); } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__receipt { box-shadow: none; background: var(--ds-surface); width: min(360px, 100%); } @media (max-width: 760px) { .ds-onboarding-step[data-variant="productboard-split-panel"] { grid-template-columns: minmax(0, 1fr); } .ds-onboarding-step[data-variant="productboard-split-panel"] .ds-onboarding-step__panel { padding: var(--ds-space-6) var(--ds-gutter-page); } .ds-onboarding-step:is([data-variant="clickup-modal-over-app"], [data-variant="coda-card-over-skeleton"]) .ds-onboarding-step__panel { padding: var(--ds-space-6) var(--ds-space-4) var(--ds-space-4); } } .ds-onboarding-step .ds-choice-card-group__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ds-onboarding-step[data-state="error"]:has(.ds-onboarding-step__body [data-state="error"]) .ds-onboarding-step__error { display: none; } .ds-popover-anchor { position: relative; display: inline-flex; max-width: 100%; min-width: 0; vertical-align: top; } .ds-popover { --_position: absolute; --_w: max-content; --_min-w: 200px; --_max-w: 480px; --_max-h: min(70vh, 480px); --_offset: var(--ds-space-2); --_radius: var(--ds-radius-md); --_pad: var(--ds-space-4); --_caret-x: var(--ds-space-5); --_lead-col: var(--ds-space-10); position: var(--_position); inset-block-start: calc(100% + var(--_offset)); inset-inline-start: 0; z-index: var(--ds-z-popover); box-sizing: border-box; width: var(--_w); min-width: min(var(--_min-w), 100%); max-width: min(var(--_max-w), calc(100vw - 2 * var(--ds-gutter-page))); max-height: var(--_max-h); overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; min-inline-size: 0; background: var(--ds-surface-raised); color: var(--ds-ink); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--_radius); box-shadow: var(--ds-shadow-float); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); text-align: start; } .ds-popover > * { min-width: 0; flex: none; } .ds-popover svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-popover > .ds-menu { width: 100%; max-width: none; } .ds-popover[data-placement="bottom-end"] { inset-inline-start: auto; inset-inline-end: 0; } .ds-popover[data-placement="top-start"] { inset-block-start: auto; inset-block-end: calc(100% + var(--_offset)); } .ds-popover[data-placement="top-end"] { inset-block-start: auto; inset-block-end: calc(100% + var(--_offset)); inset-inline-start: auto; inset-inline-end: 0; } .ds-popover[data-placement="end-start"] { inset-block-start: 0; inset-inline-start: calc(100% + var(--_offset)); } .ds-popover[data-placement="anchor-width"] { inset-inline-end: 0; width: auto; --_max-w: none; } .ds-popover[data-state="closed"], .ds-popover[hidden] { display: none; } .ds-popover__caret { display: none; } .ds-popover[data-caret="true"] { overflow: visible; } .ds-popover[data-caret="true"] .ds-popover__caret { display: block; position: absolute; inset-block-start: -7px; inset-inline-start: var(--_caret-x); width: 12px; height: 12px; background: var(--ds-surface-raised); border-block-start: var(--ds-border-width) solid var(--ds-rule); border-inline-start: var(--ds-border-width) solid var(--ds-rule); transform: rotate(45deg); pointer-events: none; } .ds-popover[data-caret="true"][data-placement^="top"] .ds-popover__caret { inset-block-start: auto; inset-block-end: -7px; transform: rotate(225deg); } .ds-popover[data-caret="true"][data-placement$="end"] .ds-popover__caret { inset-inline-start: auto; inset-inline-end: var(--_caret-x); } .ds-popover__hint { padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-popover__title { padding: var(--_pad) var(--_pad) 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); color: var(--ds-ink); } .ds-popover__body { padding: var(--ds-space-2) var(--_pad) var(--_pad); color: var(--ds-ink-2); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); } .ds-popover__body:first-child { padding-block-start: var(--_pad); } .ds-popover__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); padding: 0 var(--_pad) var(--_pad); } .ds-popover__actions[data-align="end"] { justify-content: flex-end; } .ds-popover__meta { padding: var(--ds-space-3) var(--_pad); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-popover__meta strong { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } .ds-popover__section { padding: var(--ds-space-2) var(--ds-space-3); display: flex; flex-direction: column; gap: var(--ds-space-0-5); } .ds-popover__section + .ds-popover__section { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-popover__section-label { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); line-height: var(--ds-lh-list); padding-block: var(--ds-space-0-5); } .ds-popover__kv { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-h-sm); font-size: var(--ds-text-sm); } .ds-popover__kv > :first-child { color: var(--ds-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-popover__kv > :last-child { color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; } .ds-popover__kv[data-kind="action"] > :first-child { color: var(--ds-ink-link); } .ds-popover__search { padding: var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-popover__search > * { width: 100%; } .ds-popover__grid { display: grid; grid-template-columns: repeat(var(--_cols, 8), 1fr); gap: var(--ds-space-0-5); padding: var(--ds-space-1) var(--ds-space-2) var(--ds-space-2); } .ds-popover__cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; font-size: var(--ds-text-xl); line-height: 1; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: inherit; cursor: pointer; } .ds-popover__cell:hover, .ds-popover__cell[data-state="hover"] { background: var(--ds-hover-bg); } .ds-popover__cell[aria-pressed="true"] { background: var(--ds-selected-bg); } .ds-popover__footnote { display: flex; gap: var(--ds-space-3); align-items: flex-start; padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-3); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); } .ds-popover__footnote-icon { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); margin-block-start: 2px; color: var(--ds-ink-muted); } .ds-popover__footnote-icon svg { width: 100%; height: 100%; } .ds-popover__footnote[data-align="lead"] .ds-popover__footnote-icon { width: var(--_lead-col); display: grid; justify-items: center; } .ds-popover[aria-busy="true"] { pointer-events: none; } .ds-popover__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 60%); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); margin: var(--ds-space-2) var(--ds-space-3); } .ds-popover__error { display: flex; gap: var(--ds-space-2); align-items: flex-start; padding: var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-popover__error svg { flex: none; width: var(--ds-icon-size); height: var(--ds-icon-size); margin-block-start: 2px; } .ds-popover__error a { color: inherit; } .ds-popover[data-variant="luma-entity-picker-caret"] { --_w: 356px; --_lead-col: 28px; } .ds-popover[data-variant="luma-entity-picker-caret"] .ds-popover__hint { padding: var(--ds-space-3) var(--ds-space-4) 0; } .ds-popover[data-variant="luma-entity-picker-caret"] .ds-popover__footnote { padding-inline: var(--ds-space-4); gap: var(--ds-space-3); } .ds-popover[data-variant="luma-entity-picker-caret"] .ds-popover__footnote-icon { width: 28px; display: grid; justify-items: center; } .ds-popover[data-variant="luma-explained-option-menu"] { --_w: 340px; } .ds-popover[data-variant="perplexity-hover-explain-quota"] { --_w: 340px; --_radius: var(--ds-radius-sm); --_pad: var(--ds-space-5); } .ds-popover[data-variant="perplexity-hover-explain-quota"] .ds-popover__title { font-size: var(--ds-text-lg); } .ds-popover[data-variant="perplexity-hover-explain-quota"] .ds-popover__title .ds-muted { color: var(--ds-ink); font-weight: inherit; } .ds-popover[data-variant="perplexity-hover-explain-quota"] .ds-popover__title [data-accent] { color: var(--ds-accent-ink); } .ds-popover[data-variant="perplexity-hover-explain-quota"] .ds-popover__body { color: var(--ds-ink-2); } .ds-popover[data-variant="manychat-emoji-picker"] { --_w: 352px; --_max-h: 360px; } .ds-popover[data-variant="manychat-emoji-picker"] .ds-popover__section-label { padding: var(--ds-space-2) var(--ds-space-2) 0; } .ds-popover[data-variant="synara-environment-sectioned"] { --_w: 200px; --_min-w: 200px; --_radius: var(--ds-radius-lg); } .ds-popover[data-variant="synara-environment-sectioned"] .ds-popover__section { padding: var(--ds-space-1-5) var(--ds-space-3); } .ds-popover[data-variant="synara-environment-sectioned"] .ds-popover__kv { min-height: calc(var(--ds-control-h-sm) - var(--ds-space-2)); } .ds-popover[data-variant="luma-block-insert-search-first"] { --_w: 252px; --_min-w: 252px; } .ds-popover[data-variant="luma-block-insert-search-first"] .ds-popover__search { padding: var(--ds-space-1-5); border-block-end: 0; } @media (max-width: 480px) { .ds-popover:not([data-phone="anchored"]) { --_position: fixed; inset-block: auto var(--ds-gutter-page); inset-inline: var(--ds-gutter-page); width: auto; min-width: 0; max-width: none; } .ds-popover:not([data-phone="anchored"])[data-caret="true"] .ds-popover__caret { display: none; } .ds-popover[data-phone="anchored"] { max-width: calc(100vw - 2 * var(--ds-gutter-page)); } } .ds-progress-steps svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-progress-steps { --_value: 0; --_ring: 44px; --_stroke: 4px; --_hue: var(--ds-accent); --_gap: var(--ds-space-2); display: block; min-inline-size: 0; max-inline-size: 100%; color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-progress-steps[data-frame] { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); } .ds-progress-steps__receipt { display: flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h-sm); list-style: none; cursor: pointer; border-radius: var(--ds-radius-sm); color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-progress-steps__receipt::-webkit-details-marker { display: none; } .ds-progress-steps__receipt::after { content: ""; flex: none; inline-size: 8px; block-size: 8px; margin-inline-start: var(--ds-space-1); border-inline-end: var(--ds-border-width) solid var(--ds-ink-muted); border-block-end: var(--ds-border-width) solid var(--ds-ink-muted); transform: translateY(-2px) rotate(45deg); transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-progress-steps[open] > .ds-progress-steps__receipt::after { transform: translateY(2px) rotate(225deg); } .ds-progress-steps__receipt:hover { color: var(--ds-ink); background: var(--ds-hover-bg); margin-inline: calc(-1 * var(--ds-space-2)); padding-inline: var(--ds-space-2); } .ds-progress-steps__receipt:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-progress-steps__icon { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-2); } .ds-progress-steps__summary { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-progress-steps__meta { margin-inline-start: auto; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .ds-progress-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--_gap); } .ds-progress-steps[open] > .ds-progress-steps__list, .ds-progress-steps__receipt + .ds-progress-steps__list { padding-block-start: var(--ds-space-2); } .ds-progress-steps__step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-space-2); align-items: start; min-block-size: var(--ds-space-7); color: var(--ds-ink-muted); } .ds-progress-steps__label { display: inline; min-inline-size: 0; overflow-wrap: anywhere; padding-block: calc((var(--ds-space-7) - 1lh) / 2); } .ds-progress-steps__detail { margin-inline-start: var(--ds-space-1-5); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-progress-steps__children { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--ds-space-1-5); padding-block: var(--ds-space-1) var(--ds-space-2); } .ds-progress-steps__chip { display: inline-flex; align-items: center; min-block-size: var(--ds-space-6); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); color: var(--ds-ink-2); font-size: var(--ds-text-xs); line-height: 1; max-inline-size: 100%; } .ds-progress-steps__glyph { position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); margin-block-start: calc((var(--ds-space-7) - var(--ds-icon-size)) / 2); border-radius: var(--ds-radius-pill); border: 1.5px solid var(--ds-border-strong); background: transparent; color: var(--ds-ink-on-semantic); } .ds-progress-steps__step[data-state="current"] { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-progress-steps__step[data-state="current"] .ds-progress-steps__glyph { border-color: var(--_hue); } .ds-progress-steps__step[data-state="current"] .ds-progress-steps__glyph::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: inherit; background: var(--_hue); animation: ds-progress-steps-pulse calc(1.4s * var(--ds-motion-scale)) var(--ds-ease-standard) infinite; } @keyframes ds-progress-steps-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .ds-progress-steps__step[data-state="done"] { color: var(--ds-ink-2); } .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph { border-color: var(--ds-success); background: var(--ds-success); } .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph::before { content: ""; inline-size: 3px; block-size: 6px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); } .ds-progress-steps__step[data-state="error"] { color: var(--ds-danger-ink); } .ds-progress-steps__step[data-state="error"] .ds-progress-steps__glyph { border-color: var(--ds-danger); background: var(--ds-danger); } .ds-progress-steps__step[data-state="error"] .ds-progress-steps__glyph::before { content: "!"; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); line-height: 1; } .ds-progress-steps__step[data-state="error"] .ds-progress-steps__detail { color: var(--ds-danger-ink); } .ds-progress-steps__step a { color: inherit; } .ds-progress-steps[data-state="done"] .ds-progress-steps__icon { color: var(--ds-success); } .ds-progress-steps[data-state="error"] .ds-progress-steps__meta { color: var(--ds-danger-ink); } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__list { align-items: center; gap: var(--ds-space-4); } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__step { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1-5); inline-size: min(220px, 100%); min-block-size: 34px; padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-lg); background: var(--ds-surface-2); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-align: center; } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__label { padding: 0; } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__glyph { display: none; } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__step[data-state="current"] { background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: var(--ds-weight-medium); } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__step[data-state="done"] { background: var(--ds-success-tint); color: var(--ds-success-ink); } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph { display: inline-grid; inline-size: 12px; block-size: 12px; margin: 0; border-color: currentColor; background: transparent; color: inherit; } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph::before { inline-size: 2.5px; block-size: 5px; } .ds-progress-steps[data-kind="chips"] .ds-progress-steps__step[data-state="error"] { background: var(--ds-danger-tint); color: var(--ds-danger-ink); } .ds-progress-steps[data-kind="ring"] { display: inline-flex; align-items: center; gap: var(--ds-space-3); } .ds-progress-steps__ring { position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--_ring); block-size: var(--_ring); border-radius: var(--ds-radius-pill); background: conic-gradient(var(--_hue) calc(var(--_value) * 360deg), var(--ds-rule) 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--_stroke)), var(--ds-ink) calc(100% - var(--_stroke) + .5px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_stroke)), var(--ds-ink) calc(100% - var(--_stroke) + .5px)); } .ds-progress-steps__value { position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); inline-size: var(--_ring); block-size: var(--_ring); display: grid; place-items: center; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); font-variant-numeric: tabular-nums; color: var(--ds-ink); } .ds-progress-steps__value small { font-size: .7em; font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-progress-steps[data-kind="ring"] { position: relative; } .ds-progress-steps[data-kind="ring"] .ds-progress-steps__label { padding: 0; font-weight: var(--ds-weight-semibold); } .ds-progress-steps[data-kind="bar"] { display: flex; flex-direction: column; gap: var(--ds-space-2); } .ds-progress-steps[data-kind="bar"] { --_hue: var(--ds-ink); } .ds-progress-steps__bar { position: relative; inline-size: 100%; block-size: var(--_stroke); border-radius: var(--ds-radius-pill); background: var(--ds-rule); overflow: hidden; } .ds-progress-steps__fill { position: absolute; inset: 0 auto 0 0; inline-size: calc(var(--_value) * 100%); border-radius: inherit; background: var(--_hue); transition: inline-size var(--ds-dur-slow) var(--ds-ease-out); } .ds-progress-steps__fraction { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); font-size: var(--ds-text-md); color: var(--ds-ink-2); font-variant-numeric: tabular-nums; } .ds-progress-steps__fraction a { color: var(--ds-ink-link); } .ds-progress-steps[data-kind="checklist"] { display: flex; flex-direction: column; gap: var(--ds-space-3); } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__meta { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__list { gap: 0; } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__step { min-block-size: var(--ds-row-h); align-items: center; border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__step:last-child { border-block-end: 0; } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__glyph { margin-block-start: 0; } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__label { padding: 0; } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__step[data-state="pending"] { color: var(--ds-ink); } .ds-progress-steps[data-kind="checklist"] .ds-progress-steps__step[data-state="done"] .ds-progress-steps__label { text-decoration: line-through; text-decoration-color: var(--ds-ink-faint); } .ds-progress-steps[data-variant="origin-stacked-step-chips"] .ds-progress-steps__step[data-state="done"] { background: var(--ds-surface-2); color: var(--ds-ink-muted); } .ds-progress-steps[data-variant="origin-stacked-step-chips"] .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph { display: none; } .ds-progress-steps[data-variant="perplexity-step-rows"] { --_gap: var(--ds-space-1); } .ds-progress-steps[data-variant="perplexity-step-rows"] .ds-progress-steps__step[data-state="done"] { color: var(--ds-ink); } .ds-progress-steps[data-variant="perplexity-step-rows"] .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph { background: transparent; border-color: transparent; color: var(--ds-ink); } .ds-progress-steps[data-variant="perplexity-step-rows"] .ds-progress-steps__step[data-state="done"] .ds-progress-steps__glyph::before { border-color: var(--ds-ink); } .ds-progress-steps[data-variant="perplexity-step-rows"] .ds-progress-steps__receipt { font-size: var(--ds-text-lg); } .ds-progress-steps[data-variant="contra-conic-ring-60%"] { --_ring: 44px; --_stroke: 4px; } .ds-progress-steps[data-variant="oku-4px-bar-plus-fraction"] { --_stroke: 4px; --_hue: var(--ds-ink); } .ds-progress-steps[data-variant="intercom-onboarding-checklist"] { --_stroke: 6px; --_hue: var(--ds-accent); } .ds-rich-text-editor { --_radius: var(--ds-radius-md); --_pad-x: var(--ds-space-5); --_pad-y: var(--ds-space-5); --_measure: var(--ds-measure); --_min-lines: 6; --_fill: var(--ds-card-bg); --_border: var(--ds-card-border); --_body-fill: transparent; display: flex; flex-direction: column; width: 100%; min-width: 0; background: var(--_fill); border: var(--ds-border-width) solid var(--_border); border-radius: var(--_radius); box-shadow: var(--ds-card-shadow); color: var(--ds-ink); transition: border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-rich-text-editor:focus-within { --_border: var(--ds-border-strong); } .ds-rich-text-editor__subject { display: flex; min-width: 0; } .ds-rich-text-editor__toolbar { display: flex; min-width: 0; padding-inline: calc(var(--_pad-x) - var(--ds-space-2)); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-rich-text-editor__toolbar > * { flex: 1 1 auto; min-width: 0; } .ds-rich-text-editor__body { flex: 1 1 auto; min-width: 0; min-height: calc(var(--_min-lines) * var(--ds-text-lg) * var(--ds-lh-prose) + 2 * var(--_pad-y)); padding: var(--_pad-y) var(--_pad-x); background: var(--_body-fill); font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); color: var(--ds-ink); overflow-wrap: anywhere; cursor: text; } .ds-rich-text-editor__body > * { max-width: var(--_measure); } .ds-rich-text-editor__body > * + * { margin-block-start: var(--ds-space-4); } .ds-rich-text-editor__body :is(h1, h2, h3) { font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); } .ds-rich-text-editor__body h1 { font-size: var(--ds-text-xl); } .ds-rich-text-editor__body h2 { font-size: var(--ds-text-lg); } .ds-rich-text-editor__body :is(ul, ol) { padding-inline-start: 1.4em; } .ds-rich-text-editor__body ul { list-style: disc; } .ds-rich-text-editor__body ol { list-style: decimal; } .ds-rich-text-editor__body a { color: var(--ds-ink-link); } .ds-rich-text-editor__body blockquote { padding-inline-start: var(--ds-space-4); border-inline-start: 2px solid var(--ds-rule-strong); color: var(--ds-ink-2); } .ds-rich-text-editor__body:empty::before { content: attr(data-placeholder); color: var(--ds-ink-muted); pointer-events: none; } .ds-rich-text-editor__body:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); border-radius: 0; } .ds-rich-text-editor__body:last-child { border-end-start-radius: calc(var(--_radius) - var(--ds-border-width)); border-end-end-radius: calc(var(--_radius) - var(--ds-border-width)); } .ds-rich-text-editor__body:last-child:focus-visible { border-radius: 0 0 calc(var(--_radius) - var(--ds-border-width)) calc(var(--_radius) - var(--ds-border-width)); } .ds-rich-text-editor__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-row-h); padding: var(--ds-space-2) calc(var(--_pad-x) - var(--ds-space-2)); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-rich-text-editor__footer-meta { margin-inline-start: auto; padding-inline-end: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-rich-text-editor__attachment { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2) var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); font-size: var(--ds-text-sm); color: var(--ds-ink); min-width: 0; max-width: 100%; } .ds-rich-text-editor__attachment > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; color: var(--ds-ink-muted); } .ds-rich-text-editor__attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-rich-text-editor__attachment-size { color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; } .ds-rich-text-editor__attachment-remove { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); cursor: pointer; } .ds-rich-text-editor__attachment-remove svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-rich-text-editor__attachment-remove:hover { background: var(--ds-danger-tint); color: var(--ds-danger-ink); } .ds-rich-text-editor__message { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--_pad-x); border-block-start: var(--ds-border-width) solid var(--ds-rule); font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-rich-text-editor__message[data-tone="info"] { color: var(--ds-ink-muted); } .ds-rich-text-editor__message > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rich-text-editor__notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-row-h); padding: var(--ds-space-1-5) var(--_pad-x) var(--ds-space-1-5) var(--_pad-x); border-block-end: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface-2); font-size: var(--ds-text-sm); color: var(--ds-ink-2); border-start-start-radius: calc(var(--_radius) - var(--ds-border-width)); border-start-end-radius: calc(var(--_radius) - var(--ds-border-width)); } .ds-rich-text-editor__notice > :last-child { margin-inline-start: auto; } .ds-rich-text-editor__skeleton { display: flex; flex-direction: column; gap: var(--ds-space-3); max-width: var(--_measure); } .ds-rich-text-editor__skeleton-bar { height: .85em; border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); width: var(--_w, 100%); } .ds-rich-text-editor__skeleton-bar[data-w="short"] { --_w: 32%; } .ds-rich-text-editor__skeleton-bar[data-w="half"] { --_w: 55%; } .ds-rich-text-editor__skeleton-bar[data-w="wide"] { --_w: 88%; } .ds-rich-text-editor[aria-invalid="true"] { --_border: var(--ds-danger); } .ds-rich-text-editor[aria-invalid="true"]:focus-within { --_border: var(--ds-danger); } .ds-rich-text-editor[aria-busy="true"] .ds-rich-text-editor__toolbar { opacity: .6; pointer-events: none; } .ds-rich-text-editor[aria-busy="true"] .ds-rich-text-editor__body { cursor: progress; } .ds-rich-text-editor[data-state="readonly"] .ds-rich-text-editor__toolbar { display: none; } .ds-rich-text-editor[data-state="readonly"] .ds-rich-text-editor__body { --_body-fill: var(--ds-surface-2); color: var(--ds-ink-2); cursor: default; } .ds-rich-text-editor[data-state="preview"] .ds-rich-text-editor__toolbar { display: none; } .ds-rich-text-editor[aria-disabled="true"] { --_fill: var(--ds-surface-3); --_border: var(--ds-rule); color: var(--ds-ink-faint); } .ds-rich-text-editor[aria-disabled="true"] .ds-rich-text-editor__toolbar { display: none; } .ds-rich-text-editor[aria-disabled="true"] .ds-rich-text-editor__body { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-rich-text-editor__field { display: block; width: 100%; min-width: 0; min-height: calc(var(--ds-control-h) * 3); padding: var(--ds-space-3) var(--ds-space-4); border: 0; border-radius: 0; background: transparent; color: var(--ds-ink); font: inherit; line-height: var(--ds-lh-body); resize: vertical; } .ds-rich-text-editor__field::placeholder { color: var(--ds-ink-muted); } .ds-rich-text-editor__field:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-rich-text-editor__mode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); min-height: calc(var(--ds-control-h) + var(--ds-space-4)); padding-inline: var(--ds-space-3); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-rich-text-editor__mode-meta { margin-inline-start: auto; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-rich-text-editor[data-variant="hsajl-subject-toolbar-body"] { --_radius: var(--ds-radius-lg); --_pad-x: var(--ds-space-6); } .ds-rich-text-editor[data-variant="hsajl-subject-toolbar-body"] .ds-rich-text-editor__toolbar { padding-inline: 0; } .ds-rich-text-editor[data-variant="hsajl-subject-toolbar-body"] .ds-rich-text-editor__footer { min-height: calc(var(--ds-row-h) + var(--ds-space-6)); } .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"] { --_fill: transparent; --_border: transparent; --_radius: 0px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "field actions" "settings settings"; gap: var(--ds-space-2); box-shadow: none; } .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"]:focus-within { --_border: transparent; } .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"] .ds-rich-text-editor__field { grid-area: field; min-height: calc(var(--ds-control-h) * 2.5); padding: var(--ds-space-3); background: var(--ds-surface-2); border: 2px solid transparent; border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); } .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"] .ds-rich-text-editor__field:focus-visible { outline: none; } .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"][aria-selected="true"] .ds-rich-text-editor__field, .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"] .ds-rich-text-editor__field:focus-visible { border-color: var(--ds-selection-graph); } .ds-rich-text-editor[data-variant="manychat-109-textarea-with-action-column"][aria-invalid="true"] .ds-rich-text-editor__field { border-color: var(--ds-danger); } .ds-rich-text-editor__actions { grid-area: actions; display: flex; flex-direction: column; gap: var(--ds-space-1); align-self: start; } .ds-rich-text-editor__settings { grid-area: settings; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ds-space-2); } .ds-rich-text-editor__note { width: 100%; text-align: end; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-rich-text-editor__note[data-tone="danger"] { color: var(--ds-danger-ink); } .ds-rich-text-editor[data-variant="manychat-184-composer"] { --_pad-x: var(--ds-space-4); } .ds-rich-text-editor[data-variant="manychat-184-composer"] .ds-rich-text-editor__toolbar { padding-inline: 0; border-block-end: 0; border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-rich-text-editor[data-variant="manychat-184-composer"] .ds-rich-text-editor__field { min-height: calc(var(--ds-control-h) * 3 + var(--ds-space-3)); } .ds-rich-text-editor[data-form="comment"] { --_min-lines: 2; --_pad-x: var(--ds-space-3); --_pad-y: var(--ds-space-2); --_fill: var(--ds-surface-raised); --_border: var(--ds-rule); position: relative; width: min(380px, 100%); box-shadow: var(--ds-shadow-float); font-size: var(--ds-text-md); } .ds-rich-text-editor[data-form="comment"] .ds-rich-text-editor__body { min-height: calc(var(--_min-lines) * var(--ds-text-md) * var(--ds-lh-body) + 2 * var(--_pad-y)); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); outline: none; } .ds-rich-text-editor[data-form="comment"]:focus-within { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-rich-text-editor__quote { margin: 0; padding: var(--ds-space-2) var(--_pad-x) 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); border-inline-start: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-rich-text-editor__mention-query { color: var(--ds-ink-link); font-weight: var(--ds-weight-medium); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .ds-rich-text-editor__caret { display: inline-block; width: 1.5px; height: 1.1em; margin-inline-start: 1px; vertical-align: text-bottom; background: var(--ds-ink); animation: ds-rte-caret 1s steps(1) infinite; } @keyframes ds-rte-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ds-rich-text-editor__caret { animation: none; } } .ds-rich-text-editor__float { position: absolute; inset-block-start: calc(100% + var(--ds-space-1)); inset-inline-start: var(--_pad-x); z-index: var(--ds-z-popover); width: min(340px, calc(100% - 2 * var(--_pad-x))); } .ds-rich-text-editor__float:empty { display: none; } .ds-rich-text-editor__comment-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); padding: var(--ds-space-1) var(--ds-space-2) var(--ds-space-2); } .ds-rich-text-editor__comment-bar svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-rich-text-editor__hint { flex: 1 1 120px; min-width: 0; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-rich-text-editor[data-form="comment"] .ds-rich-text-editor__comment-bar .ds-button-secondary { gap: var(--ds-space-2); } .ds-rich-text-editor__why { margin: 0; padding: 0 var(--_pad-x) var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-rich-text-editor[data-variant="campsite-comment-popover"][data-form="comment"] { --_radius: var(--ds-radius-md); width: min(320px, 100%); } .ds-rich-text-editor[data-variant="campsite-comment-popover"] .ds-rich-text-editor__quote, .ds-rich-text-editor[data-variant="campsite-comment-popover"] .ds-rich-text-editor__hint { display: none; } .ds-rich-text-editor[data-variant="campsite-comment-popover"] .ds-rich-text-editor__comment-bar { justify-content: flex-start; } .ds-rich-text-editor[data-variant="campsite-comment-popover"] .ds-rich-text-editor__comment-bar .ds-button-secondary { margin-inline-start: auto; background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; } .ds-rich-text-editor[data-variant="campsite-comment-popover"] .ds-rich-text-editor__comment-bar .ds-button-secondary:disabled { background: var(--ds-surface-3); color: var(--ds-ink-faint); } .ds-rich-text-editor[data-variant="campsite-comment-popover"] .ds-rich-text-editor__comment-bar .ds-kbd-hint { display: none; } .ds-rich-text-editor[data-variant="notion-comment-pill"][data-form="comment"] { --_radius: var(--ds-radius-lg); --_min-lines: 1; flex-direction: row; flex-wrap: wrap; align-items: center; box-shadow: var(--ds-shadow-lift); } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__quote, .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__hint { display: none; } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__body { flex: 1 1 160px; min-height: 0; } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__comment-bar { padding: var(--ds-space-1); flex-wrap: nowrap; } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__comment-bar .ds-button-secondary { border-radius: var(--ds-radius-pill); } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__comment-bar .ds-kbd-hint { display: none; } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__why { flex-basis: 100%; } .ds-rich-text-editor[data-variant="notion-comment-pill"] .ds-rich-text-editor__float { inset-block-start: 100%; } .ds-rich-text-editor[data-variant="craft-mention-bubble"][data-form="comment"] { --_radius: var(--ds-radius-lg); --_fill: var(--ds-surface); --_pad-x: var(--ds-space-4); --_pad-y: var(--ds-space-3); width: min(360px, 100%); } .ds-rich-text-editor[data-variant="craft-mention-bubble"] .ds-rich-text-editor__quote { display: none; } .ds-rich-text-editor[data-variant="craft-mention-bubble"] .ds-rich-text-editor__comment-bar > .ds-icon-button { display: none; } .ds-rich-text-editor[data-variant="craft-mention-bubble"] .ds-rich-text-editor__hint { order: -1; padding-inline-start: var(--ds-space-2); } .ds-rich-text-editor[data-variant="craft-mention-bubble"] .ds-rich-text-editor__comment-bar .ds-button-secondary { border-radius: var(--ds-radius-pill); } .ds-rich-text-editor[data-variant="craft-mention-bubble"] .ds-rich-text-editor__float { inset-block-start: calc(100% + var(--ds-space-1)); inset-inline-start: 0; } .ds-save-status { --_gap: var(--ds-space-1-5); --_ink: var(--ds-ink-muted); --_icon: var(--ds-ink-muted); display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-0-5) var(--_gap); min-width: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); color: var(--_ink); font-variant-numeric: var(--ds-numeric); } .ds-save-status__icon { display: inline-flex; flex: none; color: var(--_icon); } .ds-save-status__icon svg { display: inline-block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-save-status__text { white-space: nowrap; } .ds-save-status__detail { color: var(--ds-ink-muted); white-space: nowrap; } .ds-save-status__detail::before { content: "· "; } .ds-save-status__action { display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-1); margin-block: calc(-1 * var(--ds-space-1)); border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-link); font: inherit; font-weight: var(--ds-weight-medium); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ds-save-status__action:hover { background: var(--ds-hover-bg); } .ds-save-status__action:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-save-status__action:disabled { color: var(--ds-ink-faint); cursor: not-allowed; text-decoration: none; } .ds-save-status[data-state="saving"] .ds-save-status__icon svg { animation: ds-save-status-turn calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-save-status-turn { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ds-save-status[data-state="saving"] .ds-save-status__icon svg { animation: none; } } .ds-save-status[data-state="saved"] { --_icon: var(--ds-success-ink); } .ds-save-status[data-state="offline"], .ds-save-status[data-state="conflict"] { --_ink: var(--ds-warning-ink); --_icon: var(--ds-warning-ink); } .ds-save-status[data-state="error"] { --_ink: var(--ds-danger-ink); --_icon: var(--ds-danger-ink); } .ds-save-status[data-state="error"] .ds-save-status__action { color: var(--ds-danger-ink); } .ds-save-status[data-variant="jstov"]:is([data-state="offline"], [data-state="conflict"], [data-state="error"]) { padding: var(--ds-space-0-5) var(--ds-space-2); border-radius: var(--ds-radius-sm); background: var(--ds-warning-tint); } .ds-save-status[data-variant="jstov"][data-state="error"] { background: var(--ds-danger-tint); } .ds-save-status[data-variant="jstov"]:is([data-state="offline"], [data-state="conflict"], [data-state="error"]) .ds-save-status__detail { color: inherit; } .ds-save-status[data-variant="higgsfield-dot-word"] { --_gap: var(--ds-space-1-5); font-size: var(--ds-text-xs); color: var(--ds-ink-2); } .ds-save-status[data-variant="higgsfield-dot-word"] .ds-save-status__icon { width: 6px; height: 6px; border-radius: var(--ds-radius-pill); background: var(--ds-ink-faint); } .ds-save-status[data-variant="higgsfield-dot-word"] .ds-save-status__icon svg { display: none; } .ds-save-status[data-variant="higgsfield-dot-word"][data-state="saving"] .ds-save-status__icon { background: var(--ds-info); animation: ds-save-status-pulse var(--ds-dur-slow) var(--ds-ease-standard) infinite alternate; } .ds-save-status[data-variant="higgsfield-dot-word"][data-state="saved"] .ds-save-status__icon { background: var(--ds-success); } .ds-save-status[data-variant="higgsfield-dot-word"]:is([data-state="offline"], [data-state="conflict"]) .ds-save-status__icon { background: var(--ds-warning); } .ds-save-status[data-variant="higgsfield-dot-word"][data-state="error"] .ds-save-status__icon { background: var(--ds-danger); } .ds-save-status[data-variant="higgsfield-dot-word"] .ds-save-status__detail { flex-basis: 100%; padding-inline-start: calc(6px + var(--_gap)); } .ds-save-status[data-variant="higgsfield-dot-word"] .ds-save-status__detail::before { content: none; } @keyframes ds-save-status-pulse { to { opacity: .35; } } .ds-save-status[data-variant="notion-edited-text"] .ds-save-status__icon { display: none; } .ds-save-status[data-variant="notion-edited-text"] { color: var(--ds-ink-muted); } .ds-save-status[data-variant="notion-edited-text"]:is([data-state="offline"], [data-state="conflict"]) { color: var(--ds-warning-ink); } .ds-save-status[data-variant="notion-edited-text"][data-state="error"] { color: var(--ds-danger-ink); } .ds-save-status[data-variant="frame-spinner-label"] { font-weight: var(--ds-weight-medium); color: var(--ds-ink); --_icon: var(--ds-ink); } .ds-save-status[data-variant="frame-spinner-label"] .ds-save-status__icon svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-save-status[data-variant="frame-spinner-label"] .ds-save-status__detail { flex-basis: 100%; font-weight: var(--ds-weight-regular); padding-inline-start: calc(var(--ds-icon-size) + var(--_gap)); } .ds-save-status[data-variant="frame-spinner-label"] .ds-save-status__detail::before { content: none; } .ds-save-status[data-variant="frame-spinner-label"][data-state="saved"] { --_icon: var(--ds-success-ink); } .ds-save-status[data-variant="frame-spinner-label"]:is([data-state="offline"], [data-state="conflict"]) { color: var(--ds-warning-ink); --_icon: var(--ds-warning-ink); } .ds-save-status[data-variant="frame-spinner-label"][data-state="error"] { color: var(--ds-danger-ink); --_icon: var(--ds-danger-ink); } .ds-segmented-control { --_inset: var(--ds-space-1); --_radius: var(--ds-radius-md); --_pill-radius: var(--ds-radius-sm); --_track: var(--ds-surface-2); --_track-border: transparent; --_pill: var(--ds-selected-bg); --_pill-ink: var(--ds-selected-ink); --_ink: var(--ds-ink-muted); --_gap: 0px; display: inline-flex; align-items: stretch; gap: var(--_gap); padding: var(--_inset); min-height: var(--ds-size-h); max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; border-radius: var(--_radius); background: var(--_track); border: var(--ds-border-width) solid var(--_track-border); font-size: var(--ds-size-text); line-height: var(--ds-lh-list); color: var(--_ink); } .ds-segmented-control::-webkit-scrollbar { display: none; } .ds-segmented-control[data-fill="equal"] { display: flex; width: 100%; } .ds-segmented-control[data-fill="equal"] .ds-segmented-control__item { flex: 1 1 0; } .ds-segmented-control__item { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 0; min-height: calc(var(--ds-size-h) - 2 * var(--_inset) - 2 * var(--ds-border-width)); padding-block: 0; padding-inline: var(--ds-size-pad-x); border-radius: var(--_pill-radius); border: 0; background: transparent; color: inherit; font: inherit; font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-segmented-control__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-width: 0; } .ds-segmented-control__label svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); flex: none; } .ds-segmented-control svg[fill="none"] { fill: none; } .ds-segmented-control__input { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; margin: 0; border-radius: inherit; border: 0; background: transparent; cursor: inherit; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-segmented-control__input:checked, .ds-segmented-control__item[aria-selected="true"], .ds-segmented-control__item[aria-checked="true"] { background: var(--_pill); } .ds-segmented-control__item:has(.ds-segmented-control__input:checked), .ds-segmented-control__item[aria-selected="true"], .ds-segmented-control__item[aria-checked="true"] { color: var(--_pill-ink); font-weight: var(--ds-selected-weight); } .ds-segmented-control__item:hover:not(:has(.ds-segmented-control__input:checked)):not([aria-selected="true"]):not([aria-checked="true"]):not(:disabled), .ds-segmented-control__item[data-state="hover"]:not(:has(.ds-segmented-control__input:checked)) { color: var(--ds-ink); } .ds-segmented-control__input:hover:not(:checked):not(:disabled), .ds-segmented-control__item[data-state="hover"] .ds-segmented-control__input:not(:checked) { background: var(--ds-hover-bg); } .ds-segmented-control__item[role="tab"]:hover:not([aria-selected="true"]):not(:disabled) { background: var(--ds-hover-bg); } .ds-segmented-control__input:focus-visible, .ds-segmented-control__item[role="tab"]:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: 0; } .ds-segmented-control__input:disabled, .ds-segmented-control__item:disabled { cursor: not-allowed; } .ds-segmented-control__item:has(.ds-segmented-control__input:disabled), .ds-segmented-control__item:disabled { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-segmented-control:disabled, .ds-segmented-control[aria-disabled="true"] { --_track: var(--ds-surface-3); --_pill: var(--ds-surface); --_pill-ink: var(--ds-ink-faint); --_ink: var(--ds-ink-faint); cursor: not-allowed; } .ds-segmented-control:disabled .ds-segmented-control__item, .ds-segmented-control[aria-disabled="true"] .ds-segmented-control__item { cursor: not-allowed; color: var(--ds-ink-faint); } .ds-segmented-control[aria-busy="true"] { pointer-events: none; } .ds-segmented-control[aria-busy="true"] .ds-segmented-control__input:checked, .ds-segmented-control[aria-busy="true"] .ds-segmented-control__item[aria-selected="true"] { animation: ds-segmented-control-pulse calc(var(--ds-dur-slow) * 4) var(--ds-ease-standard) infinite alternate; } @keyframes ds-segmented-control-pulse { from { opacity: 1; } to { opacity: .45; } } [data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]), [data-selection="bar"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]), .ds-segmented-control[data-selection="underline"], .ds-segmented-control[data-selection="bar"] { --_track: transparent; --_radius: 0px; --_pill-radius: 0px; --_inset: 0px; border: 0; border-block-end: var(--ds-border-width) solid var(--ds-rule); } [data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input, [data-selection="bar"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input, .ds-segmented-control[data-selection="underline"] .ds-segmented-control__input, .ds-segmented-control[data-selection="bar"] .ds-segmented-control__input, [data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__item[role="tab"], .ds-segmented-control[data-selection="underline"] .ds-segmented-control__item[role="tab"] { border-block-end: 2px solid transparent; margin-block-end: -1px; } [data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input:checked, [data-selection="bar"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__input:checked, .ds-segmented-control[data-selection="underline"] .ds-segmented-control__input:checked, .ds-segmented-control[data-selection="bar"] .ds-segmented-control__input:checked, [data-selection="underline"] .ds-segmented-control:is(:not([data-variant]), [data-variant="jstov"]) .ds-segmented-control__item[aria-selected="true"], .ds-segmented-control[data-selection="underline"] .ds-segmented-control__item[aria-selected="true"] { border-block-end-color: var(--ds-selected-line); } .ds-segmented-control[data-variant="luma-lifted-white-pill"] { --_pill: var(--ds-surface); --_pill-ink: var(--ds-ink); min-height: var(--ds-control-h-lg); } .ds-segmented-control[data-variant="luma-lifted-white-pill"] .ds-segmented-control__input:checked, .ds-segmented-control[data-variant="luma-lifted-white-pill"] .ds-segmented-control__item[aria-selected="true"] { box-shadow: var(--ds-shadow-lift); } .ds-segmented-control[data-variant="luma-lifted-white-pill"] .ds-segmented-control__item { min-height: calc(var(--ds-control-h-lg) - 2 * var(--_inset)); font-size: var(--ds-text-md); } .ds-segmented-control[data-variant="cloudflare-white-track-inverted-pill"] { --_track: var(--ds-surface); --_track-border: var(--ds-rule); --_pill: var(--ds-surface-inverse); --_pill-ink: var(--ds-ink-inverse); --_ink: var(--ds-ink-2); } .ds-segmented-control[data-variant="hsaj-tint-track-white-pill"] { --_pill: var(--ds-surface); --_pill-ink: var(--ds-ink); --_radius: var(--ds-radius-md); --_pill-radius: var(--ds-radius-sm); min-height: var(--ds-control-h-lg); font-size: var(--ds-text-lg); } .ds-segmented-control[data-variant="hsaj-tint-track-white-pill"] .ds-segmented-control__item { min-height: calc(var(--ds-control-h-lg) - 2 * var(--_inset)); padding-inline: calc(var(--ds-space-4) + var(--ds-space-0-5)); } .ds-segmented-control[data-variant="fibery-pressed-selection"] { --_track: transparent; --_inset: 0px; --_gap: var(--ds-space-1); --_pill: var(--ds-surface-selected); --_pill-ink: var(--ds-ink); --_ink: var(--ds-ink-2); --_pill-radius: var(--ds-radius-pill); --_radius: var(--ds-radius-pill); border: 0; flex-wrap: wrap; overflow: visible; } .ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__item { min-height: var(--ds-size-h); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); } .ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__input { inset: calc(-1 * var(--ds-border-width)); } .ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__item:has(.ds-segmented-control__input:checked), .ds-segmented-control[data-variant="fibery-pressed-selection"] .ds-segmented-control__item[aria-selected="true"] { border-color: var(--ds-border-strong); } .ds-segmented-control[data-variant="rox-icon-only-three-state"] { --_track: var(--ds-surface-2); --_track-border: var(--ds-rule); --_radius: var(--ds-radius-pill); --_pill-radius: var(--ds-radius-pill); --_inset: 0px; --_pill: var(--ds-surface-selected); --_pill-ink: var(--ds-ink); min-height: var(--ds-control-h-lg); } .ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__item { min-height: calc(var(--ds-control-h-lg) - 2 * var(--ds-border-width)); inline-size: calc(var(--ds-control-h-lg) - 2 * var(--ds-border-width)); padding: 0; } .ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__input:checked, .ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__item[aria-checked="true"] { border: 4px solid var(--ds-surface-3); } .ds-segmented-control[data-variant="rox-icon-only-three-state"] .ds-segmented-control__label svg { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); } .ds-segmented-control[data-variant="vercel-three-segment-theme"] { --_track: var(--ds-surface); --_track-border: var(--ds-border); --_radius: var(--ds-radius-pill); --_pill-radius: var(--ds-radius-pill); --_inset: var(--ds-space-0-5); --_pill: var(--ds-surface-selected); --_pill-ink: var(--ds-ink); min-height: var(--ds-control-h-sm); } .ds-segmented-control[data-variant="vercel-three-segment-theme"] .ds-segmented-control__item { min-height: calc(var(--ds-control-h-sm) - 2 * var(--_inset) - 2 * var(--ds-border-width)); inline-size: calc(var(--ds-control-h-sm) - 2 * var(--_inset) - 2 * var(--ds-border-width)); padding: 0; } .ds-segmented-control[data-variant="navattic-88-scope-segment"] { --_radius: var(--ds-radius-pill); --_pill-radius: var(--ds-radius-pill); --_inset: var(--ds-space-0-5); --_pill: var(--ds-surface); --_pill-ink: var(--ds-ink); min-height: var(--ds-control-h-sm); font-size: var(--ds-text-sm); } .ds-segmented-control[data-variant="navattic-88-scope-segment"] .ds-segmented-control__item { min-height: calc(var(--ds-control-h-sm) - 2 * var(--_inset)); padding-inline: var(--ds-space-3); } .ds-segmented-control[data-variant="navattic-88-scope-segment"] .ds-segmented-control__input:checked, .ds-segmented-control[data-variant="navattic-88-scope-segment"] .ds-segmented-control__item[aria-selected="true"] { box-shadow: var(--ds-shadow-lift); } .ds-segmented-control[data-variant="retool-tint-pill-tab"] { --_track: transparent; --_inset: 0px; --_gap: var(--ds-space-6); --_pill: var(--ds-accent-tint); --_pill-ink: var(--ds-accent-ink); --_ink: var(--ds-ink-2); --_pill-radius: var(--ds-radius-sm); min-height: auto; border: 0; font-size: var(--ds-text-xs); } .ds-segmented-control[data-variant="retool-tint-pill-tab"] .ds-segmented-control__item { min-height: var(--ds-space-6); padding-inline: var(--ds-space-2); font-weight: var(--ds-weight-semibold); } .ds-segmented-control[data-variant="retool-tint-pill-tab"] .ds-segmented-control__item:has(.ds-segmented-control__input:checked), .ds-segmented-control[data-variant="retool-tint-pill-tab"] .ds-segmented-control__item[aria-selected="true"] { font-weight: var(--ds-weight-semibold); } .ds-settings-row-group { --_rule-inset: 0px; display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-settings-row-group__label { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); padding-inline: var(--ds-space-0-5); } .ds-settings-row-group__heading { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); color: var(--ds-ink); } .ds-settings-row-group__body { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); color: var(--ds-ink-2); max-width: var(--ds-measure); } .ds-settings-row-group__body strong { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } .ds-settings-row-group__card { display: flex; flex-direction: column; min-width: 0; background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); border-radius: var(--ds-radius-md); overflow: clip; } .ds-settings-row-group__card > * { min-width: 0; } .ds-settings-row-group__card > * + * { position: relative; } .ds-settings-row-group__card > * + *::before { content: ""; position: absolute; inset: 0 var(--_rule-inset) auto; border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); pointer-events: none; } .ds-settings-row-group__card[data-state="empty"] { border-style: dashed; border-color: var(--ds-rule-strong); background: transparent; } .ds-settings-row-group__empty { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: calc(var(--ds-control-h) + 2 * var(--ds-space-2)); padding: var(--ds-space-3) var(--ds-card-pad); color: var(--ds-ink-muted); text-align: center; line-height: var(--ds-lh-body); } .ds-settings-row-group__empty > span { max-width: var(--ds-measure); } .ds-settings-row-group__empty a { color: var(--ds-ink-link); } .ds-settings-row-group[aria-busy="true"] .ds-settings-row-group__label { color: var(--ds-ink-faint); } .ds-settings-row-group__danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-4); padding: var(--ds-space-4) var(--ds-card-pad); } .ds-settings-row-group__danger .ds-settings-row-group__body { flex: 1 1 280px; } .ds-settings-row-group__danger-action { appearance: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); padding-inline: var(--ds-size-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-surface); color: var(--ds-danger-ink); font: inherit; font-weight: var(--ds-weight-medium); text-decoration: none; text-transform: var(--ds-control-case); white-space: nowrap; cursor: pointer; box-shadow: var(--ds-shadow-lip); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-settings-row-group__danger-action:hover { background: var(--ds-danger-tint); border-color: var(--ds-danger); } .ds-settings-row-group__danger-action:disabled { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; } .ds-settings-row-group__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-height: var(--ds-control-h-lg); padding: var(--ds-space-2) var(--ds-card-pad); } .ds-settings-row-group__meta { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-settings-row-group__actions { display: inline-flex; gap: var(--ds-space-1); } .ds-settings-row-group__icon-button { appearance: none; display: inline-grid; place-items: center; width: var(--ds-control-h-sm); height: var(--ds-control-h-sm); border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-muted); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-settings-row-group__icon-button:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-settings-row-group__icon-button svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-settings-row-group__field { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-6) var(--ds-card-pad); } .ds-settings-row-group__field > * + * { margin-block-start: 0; } .ds-settings-row-group__value { font-size: var(--ds-text-sm); line-height: var(--ds-lh-prose); color: var(--ds-ink); max-width: var(--ds-measure); } .ds-settings-row-group__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); min-height: var(--ds-control-h-lg); } .ds-settings-row-group[data-variant="luma-outside-label-card"] { gap: var(--ds-space-3); } .ds-settings-row-group[data-variant="luma-outside-label-card"] .ds-settings-row-group__label { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); text-transform: none; letter-spacing: 0; padding-inline: 0; } .ds-settings-row-group[data-variant="luma-outside-label-card"] .ds-settings-row-group__card { border-radius: var(--ds-radius-lg); } .ds-settings-row-group[data-variant="descript-sectioned-property-list"] { gap: var(--ds-space-3); padding-block: var(--ds-space-8); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-settings-row-group[data-variant="descript-sectioned-property-list"]:last-child { border-block-end: 0; } .ds-settings-row-group[data-variant="descript-sectioned-property-list"] .ds-settings-row-group__card { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .ds-settings-row-group[data-variant="descript-sectioned-property-list"] .ds-settings-row-group__card > * + *::before { display: none; } .ds-settings-row-group[data-variant="descript-sectioned-property-list"] .ds-settings-row-group__danger { padding-inline: 0; } .ds-settings-row-group[data-variant="descript-sectioned-property-list"] .ds-settings-row-group__danger-action { border: 0; background: none; padding: 0; min-height: var(--ds-control-h-sm); box-shadow: none; } .ds-settings-row-group[data-variant="descript-sectioned-property-list"] .ds-settings-row-group__danger-action:hover { text-decoration: underline; } .ds-settings-row-group[data-variant="hsaj-hairline-sections"] { --_row-pad-x: 0px; gap: var(--ds-space-3); padding-block: var(--ds-space-6); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-settings-row-group[data-variant="hsaj-hairline-sections"] .ds-settings-row-group__label { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; padding-inline: 0; } .ds-settings-row-group[data-variant="hsaj-hairline-sections"] .ds-settings-row-group__card { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .ds-settings-row-group[data-variant="hsaj-hairline-sections"] .ds-settings-row-group__card > * + *::before { display: none; } .ds-settings-row-group[data-variant="hsajl-settings-sidebar"] { --_row-pad-x: 0px; gap: var(--ds-space-2); padding-block: var(--ds-space-4); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-settings-row-group[data-variant="hsajl-settings-sidebar"] .ds-settings-row-group__card { gap: var(--ds-space-4); } .ds-settings-row-group[data-variant="hsajl-settings-sidebar"] .ds-settings-row-group__card { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .ds-settings-row-group[data-variant="hsajl-settings-sidebar"] .ds-settings-row-group__card > * + *::before { display: none; } .ds-settings-row-group[data-variant="grammarly-labelled-field-body"] .ds-settings-row-group__card { border-radius: var(--ds-radius-sm); } .ds-settings-row-group[data-variant="grammarly-labelled-field-body"] .ds-settings-row-group__card > * + *::before { border-block-start-color: var(--ds-rule); } .ds-settings-row-group[data-variant="grammarly-labelled-field-body"] .ds-settings-row-group__heading { display: flex; align-items: center; justify-content: space-between; min-height: var(--ds-control-h); padding-inline: var(--ds-card-pad); background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-md); } .ds-settings-row-group[data-variant="grammarly-labelled-field-body"] .ds-settings-row-group__heading svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: currentColor; } .ds-split-button { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); --_radius: var(--ds-radius-button); --_w: auto; --_aux-w: var(--_h); --_divider: var(--ds-border); display: inline-flex; align-items: stretch; width: var(--_w); max-width: 100%; min-width: 0; min-height: var(--_h); font-size: var(--ds-size-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-transform: var(--ds-control-case); color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--_radius); box-shadow: var(--ds-shadow-lip); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-split-button__main, .ds-split-button__aux { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-width: 0; padding: 0; font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-split-button__main { flex: 1 1 auto; padding-inline: var(--_pad-x); border-start-start-radius: calc(var(--_radius) - var(--ds-border-width)); border-end-start-radius: calc(var(--_radius) - var(--ds-border-width)); } .ds-split-button__aux { flex: none; width: var(--_aux-w); border-inline-start: var(--ds-border-width) solid var(--_divider); border-start-end-radius: calc(var(--_radius) - var(--ds-border-width)); border-end-end-radius: calc(var(--_radius) - var(--ds-border-width)); } .ds-split-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-split-button__icon { flex: none; display: inline-flex; width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-split-button__icon svg, .ds-split-button__aux > svg { width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-split-button__icon svg { width: 100%; height: 100%; } .ds-split-button__icon svg[data-fill], .ds-split-button__aux > svg[data-fill] { fill: currentColor; stroke: none; } .ds-split-button__aux > svg { transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-split-button__aux[aria-expanded="true"] > svg[data-chevron] { transform: rotate(180deg); } .ds-split-button:hover { border-color: var(--ds-border-strong); } .ds-split-button__main:hover, .ds-split-button__aux:hover, .ds-split-button__main[data-state="hover"], .ds-split-button__aux[data-state="hover"] { background: var(--ds-hover-bg); } .ds-split-button__main:active, .ds-split-button__aux:active { background: var(--ds-surface-pressed, var(--ds-surface-3)); } .ds-split-button__aux[aria-expanded="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-split-button__main:focus-visible, .ds-split-button__aux:focus-visible, .ds-split-button__main[data-state="focus"], .ds-split-button__aux[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(var(--ds-ring-offset) + var(--ds-border-width)); z-index: 1; } .ds-split-button__main:disabled, .ds-split-button__aux:disabled { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; } .ds-split-button:has(> .ds-split-button__main:disabled), .ds-split-button[data-state="disabled"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; --_divider: var(--ds-rule); } .ds-split-button__main[aria-busy="true"] { pointer-events: none; } .ds-split-button__main[aria-busy="true"] > * { visibility: hidden; } .ds-split-button__main[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--ds-icon-size); height: var(--ds-icon-size); border: 2px solid transparent; border-block-start-color: currentColor; border-inline-end-color: currentColor; border-radius: var(--ds-radius-pill); animation: ds-split-button-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-split-button-spin { to { transform: rotate(360deg); } } .ds-split-button[data-fill="primary"] { --_divider: color-mix(in srgb, var(--ds-ink-on-primary) 25%, transparent); color: var(--ds-ink-on-primary); background: var(--ds-primary-fill); border-color: var(--ds-primary-border); box-shadow: inset 0 var(--ds-border-width) 0 0 var(--ds-primary-highlight), var(--ds-shadow-lip); } .ds-split-button[data-fill="primary"]:hover { border-color: var(--ds-primary-border); } .ds-split-button[data-fill="primary"] .ds-split-button__main:hover, .ds-split-button[data-fill="primary"] .ds-split-button__aux:hover, .ds-split-button[data-fill="primary"] .ds-split-button__main[data-state="hover"], .ds-split-button[data-fill="primary"] .ds-split-button__main:active, .ds-split-button[data-fill="primary"] .ds-split-button__aux:active, .ds-split-button[data-fill="primary"] .ds-split-button__aux[aria-expanded="true"] { background: var(--ds-primary-fill-hover); color: inherit; } .ds-split-button[data-fill="primary"]:has(> .ds-split-button__main:disabled), .ds-split-button[data-fill="primary"][data-state="disabled"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); box-shadow: none; --_divider: var(--ds-rule); } .ds-split-button[data-fill="tint"] { background: var(--ds-surface-2); border-color: transparent; box-shadow: none; } .ds-split-button[data-fill="tint"]:hover { border-color: transparent; } .ds-split-button[data-fill="tint"] .ds-split-button__main:hover, .ds-split-button[data-fill="tint"] .ds-split-button__aux:hover { background: var(--ds-surface-3); } .ds-split-button[data-size] { --_h: var(--ds-size-h); --_pad-x: calc(var(--ds-size-pad-x) + var(--ds-space-1)); } .ds-split-button[data-variant="v0-outline-split"] { --_h: calc(var(--ds-control-h-sm) + var(--ds-space-0-5)); --_w: min(258px, 100%); --_radius: var(--ds-radius-sm); --_aux-w: var(--ds-control-h); } .ds-split-button[data-variant="synara-run-split"] { --_h: var(--ds-control-h-sm); --_radius: var(--ds-radius-md); --_aux-w: calc(var(--ds-control-h-sm) - var(--ds-space-2)); } .ds-split-button[data-variant="synara-run-split"] .ds-split-button__main { --_pad-x: var(--ds-space-2); padding-inline: var(--ds-space-2); } .ds-split-button[data-variant="clickup-add-task-split"] { --_h: calc(var(--ds-control-h-sm) - var(--ds-space-2)); --_pad-x: var(--ds-space-2); --_radius: var(--ds-radius-xs); --_aux-w: calc(var(--ds-control-h-sm) - var(--ds-space-2)); font-size: var(--ds-text-sm); } .ds-split-button[data-variant="navattic-88-save-split"] { --_h: var(--ds-control-h-sm); --_pad-x: var(--ds-space-3); --_radius: var(--ds-radius-md); --_aux-w: calc(var(--ds-control-h-sm) - var(--ds-space-1)); box-shadow: inset 0 var(--ds-border-width) 0 0 color-mix(in srgb, var(--ds-ink-on-primary) 18%, transparent), var(--ds-shadow-lift); } .ds-split-button[data-variant="heron-label-divider-arrow"] { --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_pad-x: var(--ds-space-4); --_radius: 0; --_aux-w: var(--_h); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: .12em; text-transform: uppercase; box-shadow: none; } .ds-split-button[data-variant="heron-label-divider-arrow"] .ds-split-button__aux { border-inline-start-style: dashed; } .ds-split-button[data-variant="heron-label-divider-arrow"][data-fill="primary"] { --_divider: color-mix(in srgb, var(--ds-ink-on-accent) 60%, transparent); color: var(--ds-ink-on-accent); background: var(--ds-accent); border-color: var(--ds-accent); box-shadow: none; } .ds-split-button[data-variant="heron-label-divider-arrow"][data-fill="primary"] .ds-split-button__main:hover, .ds-split-button[data-variant="heron-label-divider-arrow"][data-fill="primary"] .ds-split-button__aux:hover { background: var(--ds-accent-hover); } .ds-stat svg[fill="none"] { fill: none; stroke: currentColor; } .ds-stat { --_value-size: var(--ds-text-2xl); --_value-weight: var(--ds-weight-semibold); --_label-size: var(--ds-text-sm); --_gap: var(--ds-space-1); --_pad: 0px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label side" "value side" "meta side" "ratio side"; align-items: start; column-gap: var(--ds-space-4); row-gap: var(--_gap); min-width: 0; padding: var(--_pad); color: var(--ds-ink); text-decoration: none; text-align: start; font-variant-numeric: tabular-nums; } .ds-stat:has(> .ds-stat__subject) { grid-template-areas: "label side" "value side" "subject side" "meta side" "ratio side"; } button.ds-stat { border: 0; background: transparent; font: inherit; } .ds-stat[data-size="sm"] { --_value-size: var(--ds-text-xl); --_label-size: var(--ds-text-xs); } .ds-stat[data-size="lg"] { --_value-size: var(--ds-text-3xl); --_label-size: var(--ds-text-md); } .ds-stat__label { grid-area: label; font-family: var(--ds-font-label); font-size: var(--_label-size); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-stat__value { grid-area: value; display: inline-flex; align-items: baseline; gap: 0; min-width: 0; font-size: var(--_value-size); font-weight: var(--_value-weight); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); } .ds-stat__prefix { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-stat__unit { margin-inline-start: var(--ds-space-0-5); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); } .ds-stat__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); min-width: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); color: var(--ds-ink-muted); } .ds-stat__subject { grid-area: subject; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); min-width: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); color: var(--ds-ink-2); overflow-wrap: anywhere; } .ds-stat__subject > .ds-stat__delta { font-size: var(--ds-text-sm); } .ds-stat__avatar { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-space-5); block-size: var(--ds-space-5); border-radius: var(--ds-radius-pill); background: var(--_av-tint, var(--ds-surface-3)); color: var(--_av-ink, var(--ds-ink-2)); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); line-height: 1; } .ds-stat__avatar[data-hue="1"] { --_av-tint: var(--ds-data-1-tint); --_av-ink: var(--ds-data-1-ink); } .ds-stat__avatar[data-hue="2"] { --_av-tint: var(--ds-data-2-tint); --_av-ink: var(--ds-data-2-ink); } .ds-stat__avatar[data-hue="3"] { --_av-tint: var(--ds-data-3-tint); --_av-ink: var(--ds-data-3-ink); } .ds-stat__avatar[data-hue="4"] { --_av-tint: var(--ds-data-4-tint); --_av-ink: var(--ds-data-4-ink); } .ds-stat__legend { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); } .ds-stat__swatch { flex: none; inline-size: 8px; block-size: 8px; border-radius: var(--ds-radius-pill); background: var(--_swatch, var(--ds-accent)); } .ds-stat__swatch[data-hue="1"] { --_swatch: var(--ds-data-1); } .ds-stat__swatch[data-hue="2"] { --_swatch: var(--ds-data-2); } .ds-stat__swatch[data-hue="3"] { --_swatch: var(--ds-data-3); } .ds-stat__swatch[data-hue="4"] { --_swatch: var(--ds-data-4); } .ds-stat__swatch[data-hue="5"] { --_swatch: var(--ds-data-5); } .ds-stat__swatch[data-hue="6"] { --_swatch: var(--ds-data-6); } .ds-stat__swatch[data-hue="7"] { --_swatch: var(--ds-data-7); } .ds-stat__swatch[data-hue="8"] { --_swatch: var(--ds-data-8); } .ds-stat__swatch[data-hue="comparison"] { --_swatch: var(--ds-chart-comparison); } .ds-stat__delta { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; color: var(--ds-ink-muted); } .ds-stat__delta::before { content: ""; inline-size: 0; block-size: 0; border-inline: 4px solid transparent; border-block-end: 6px solid currentColor; } .ds-stat__delta[data-trend="down"]::before { transform: rotate(180deg); } .ds-stat__delta[data-trend="flat"]::before { inline-size: 8px; block-size: 2px; border: 0; background: currentColor; border-radius: 1px; } .ds-stat__delta[data-tone="positive"] { color: var(--ds-success-ink); } .ds-stat__delta[data-tone="negative"] { color: var(--ds-danger-ink); } .ds-stat__delta[data-tone="neutral"] { color: var(--ds-ink-muted); } .ds-stat__comparator { grid-area: side; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); white-space: nowrap; } .ds-stat__ratio { grid-area: ratio; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); font-variant-numeric: tabular-nums; color: var(--ds-success-ink); } .ds-stat__ratio[data-tone="neutral"] { color: var(--ds-ink-muted); } .ds-stat__ratio[data-tone="negative"] { color: var(--ds-danger-ink); } .ds-stat__num { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); font-variant-numeric: tabular-nums; } .ds-stat-group { display: grid; gap: var(--_gap, var(--ds-card-gap)); grid-template-columns: repeat(auto-fit, minmax(min(var(--_min, 160px), 100%), 1fr)); min-width: 0; } .ds-stat-group > * { min-width: 0; } .ds-stat-group[data-layout="quartet"] { --_min: 200px; column-gap: var(--ds-space-20); row-gap: var(--ds-space-8); } .ds-stat-group[data-layout="tiles"] { --_min: 200px; --_gap: var(--ds-space-3); } .ds-stat-group[data-layout="pair"] { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .ds-stat-group[data-divided] > * + * { border-inline-start: var(--ds-border-width) solid var(--ds-rule); padding-inline-start: var(--ds-card-gap); } .ds-stat[data-variant="jstov"], .ds-stat[data-variant="origin-label-number-legend"] { --_value-size: var(--ds-text-3xl); --_gap: var(--ds-space-1-5); } .ds-stat[data-variant="retool-stat-strip-in-chart-card"] { --_label-size: var(--ds-text-xs); --_value-weight: var(--ds-weight-bold); --_gap: var(--ds-space-2); } .ds-stat[data-variant="retool-stat-strip-in-chart-card"] .ds-stat__label { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-transform: none; letter-spacing: 0; } .ds-stat[data-variant="manychat-zero-state-tile"] { display: flex; flex-direction: column; justify-content: space-between; min-block-size: 128px; --_pad: var(--ds-space-3); --_label-size: var(--ds-text-md); --_value-weight: var(--ds-weight-bold); border-radius: var(--ds-radius-md); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); } .ds-stat[data-variant="manychat-zero-state-tile"] .ds-stat__label { font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; } .ds-stat[data-variant="manychat-headline-metric-pair"] { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "value ratio" "label label" "subject subject" "meta meta"; align-items: baseline; column-gap: var(--ds-space-6); --_value-size: var(--ds-text-xl); --_value-weight: var(--ds-weight-bold); --_label-size: var(--ds-text-md); } .ds-stat[data-variant="manychat-headline-metric-pair"] .ds-stat__ratio { justify-self: end; font-size: var(--_value-size); font-weight: var(--_value-weight); line-height: var(--ds-lh-tight); } .ds-stat[data-variant="manychat-headline-metric-pair"] .ds-stat__label { font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; color: var(--ds-ink-2); } .ds-stat[data-variant="manychat-two-tier-metric-cell"] { --_value-size: var(--ds-text-lg); --_label-size: var(--ds-text-xs); --_gap: var(--ds-space-0-5); } .ds-stat[data-variant="attio-stat-quartet"] { grid-template-areas: "value side" "label side" "subject side" "meta side"; --_value-size: var(--ds-text-3xl); --_value-weight: var(--ds-weight-regular); --_label-size: var(--ds-text-sm); --_gap: var(--ds-space-2); padding-inline-start: var(--ds-space-4); border-inline-start: 2px solid var(--ds-accent-line); } .ds-stat[data-variant="attio-stat-quartet"] .ds-stat__value { letter-spacing: var(--ds-display-tracking); } .ds-stat[data-variant="attio-stat-quartet"] .ds-stat__label { font-weight: var(--ds-weight-regular); } .ds-stat[data-variant="7shifts-label-value-subject"] { grid-template-areas: "label side" "value side" "subject side" "meta side"; --_value-size: var(--ds-text-2xl); --_label-size: var(--ds-text-md); --_gap: var(--ds-space-1); } .ds-stat[data-variant="7shifts-label-value-subject"] .ds-stat__label { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); text-transform: none; letter-spacing: 0; } .ds-stat[data-variant="7shifts-label-value-subject"] .ds-stat__subject { font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-stat[data-variant="xero-subject-delta-line"] { grid-template-areas: "label side" "value side" "subject side" "meta side"; --_value-size: var(--ds-text-2xl); --_gap: var(--ds-space-1); } .ds-stat[data-variant="xero-subject-delta-line"] .ds-stat__label { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-transform: none; letter-spacing: 0; } .ds-stat[data-variant="xero-subject-delta-line"] .ds-stat__subject { flex-wrap: nowrap; justify-content: flex-start; font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-stat[data-variant="xero-subject-delta-line"] .ds-stat__subject > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-stat[data-variant="xero-subject-delta-line"] .ds-stat__subject > .ds-stat__delta { flex: none; } .ds-stat[data-variant="klaviyo-entity-chip"] { grid-template-areas: "value side" "label side" "subject side" "meta side"; --_pad: var(--ds-space-4); --_value-size: var(--ds-text-2xl); --_label-size: var(--ds-text-md); --_gap: var(--ds-space-1); border-radius: var(--ds-radius-md); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); } .ds-stat[data-variant="klaviyo-entity-chip"] .ds-stat__label { color: var(--ds-ink); font-weight: var(--ds-weight-medium); text-transform: none; letter-spacing: 0; } .ds-stat[data-variant="klaviyo-entity-chip"] .ds-stat__subject { justify-self: start; margin-block-start: var(--ds-space-1); padding: var(--ds-space-0-5) var(--ds-space-2) var(--ds-space-0-5) var(--ds-space-0-5); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); } .ds-stat[data-variant="klaviyo-entity-chip"] .ds-stat__avatar { inline-size: var(--ds-space-5); block-size: var(--ds-space-5); } .ds-stat[data-variant="airbnb-numeral-over-label"] { grid-template-areas: "value side" "label side" "subject side" "meta side"; align-content: center; --_value-size: var(--ds-text-xl); --_label-size: var(--ds-text-xs); --_gap: var(--ds-space-0-5); } .ds-stat[data-variant="airbnb-numeral-over-label"] .ds-stat__label { color: var(--ds-ink-2); font-weight: var(--ds-weight-semibold); } .ds-stat[data-variant="homerun-sentence-stat-tile"] { display: flex; align-items: center; gap: var(--ds-space-4); min-block-size: 96px; --_pad: var(--ds-space-6); border-radius: var(--ds-radius-lg); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); } .ds-stat__icon { flex: none; inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); color: var(--ds-ink-2); } .ds-stat__icon svg { inline-size: 100%; block-size: 100%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-stat__sentence { min-width: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); color: var(--ds-ink); } .ds-stat__sentence .ds-stat__num { font-weight: var(--ds-weight-regular); } .ds-stat[data-variant="braintrust-zero-as-cta"] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-4); min-block-size: 48px; --_value-size: var(--ds-text-xl); } .ds-stat[data-variant="braintrust-zero-as-cta"] .ds-stat__label { font-size: var(--ds-text-md); } .ds-stat__divider { align-self: stretch; inline-size: var(--ds-border-width); min-block-size: var(--ds-space-6); background: var(--ds-rule-strong); } .ds-stat[data-variant="braintrust-zero-as-cta"] .ds-stat__icon { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); align-self: center; color: var(--ds-data-6); } .ds-stat__action { display: inline-flex; align-items: center; min-block-size: var(--ds-control-h-lg); padding-inline: var(--ds-space-5); border: var(--ds-border-width) solid var(--ds-primary-border); border-radius: var(--ds-radius-button); background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); text-decoration: none; cursor: pointer; box-shadow: var(--ds-shadow-lip); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-stat__action:hover { background: var(--ds-primary-fill-hover); } .ds-stat[data-variant="synara-usage-micro-table"] { display: flex; flex-direction: column; gap: var(--ds-space-0-5); font-size: var(--ds-text-xs); line-height: var(--ds-lh-list); color: var(--ds-ink-muted); } .ds-stat__row { display: flex; justify-content: space-between; gap: var(--ds-space-3); margin: 0; } .ds-stat__key { font-family: var(--ds-font-label); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } .ds-stat[data-variant="synara-usage-micro-table"] .ds-stat__num { font-size: inherit; } .ds-stat[data-variant="perplexity-quota-sentence"] { display: block; font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); } .ds-stat[data-variant="contra-progress-ring"] { display: flex; align-items: center; gap: var(--ds-space-3); --_ring-size: 44px; --_ring-w: 4px; --_progress: 0; --_track: var(--ds-rule-strong); --_arc: conic-gradient(var(--ds-accent), var(--ds-accent-2), var(--ds-data-5), var(--ds-data-4)); } .ds-stat__ring { position: relative; flex: none; display: grid; place-items: center; inline-size: var(--_ring-size); block-size: var(--_ring-size); border-radius: var(--ds-radius-pill); background: var(--_track); } .ds-stat__ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--_arc); mask: conic-gradient(currentColor calc(var(--_progress) * 360deg), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--_ring-w)), currentColor calc(100% - var(--_ring-w) + .5px)); -webkit-mask: conic-gradient(currentColor calc(var(--_progress) * 360deg), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--_ring-w)), currentColor calc(100% - var(--_ring-w) + .5px)); mask-composite: intersect; -webkit-mask-composite: source-in; } .ds-stat__ring::after { content: ""; position: absolute; inset: var(--_ring-w); border-radius: inherit; background: var(--ds-surface); } .ds-stat[data-variant="contra-progress-ring"] .ds-stat__value { position: relative; z-index: 1; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); } .ds-stat[data-variant="contra-progress-ring"] .ds-stat__label { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); text-transform: none; letter-spacing: 0; } .ds-stat:is(a, button) { cursor: pointer; border-radius: var(--ds-radius-md); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-stat:is(a, button):not([data-variant="manychat-zero-state-tile"]):not([data-variant="homerun-sentence-stat-tile"]):not([data-variant="klaviyo-entity-chip"]) { --_pad: var(--ds-space-2); margin: calc(-1 * var(--ds-space-2)); } .ds-stat:is(a, button):hover, .ds-stat:is(a, button)[data-state="hover"] { background: var(--ds-hover-bg); box-shadow: var(--ds-hover-shadow); border-color: var(--ds-border-strong); } .ds-stat[data-variant="homerun-sentence-stat-tile"]:is(a, button) .ds-stat__sentence::after { content: "→"; margin-inline-start: var(--ds-space-2); color: var(--ds-ink-muted); transition: transform var(--ds-dur-fast) var(--ds-ease-out); display: inline-block; } .ds-stat[data-variant="homerun-sentence-stat-tile"]:is(a, button):hover .ds-stat__sentence::after { transform: translateX(2px); } .ds-stat[aria-busy="true"] :is(.ds-stat__label, .ds-stat__value, .ds-stat__meta, .ds-stat__subject, .ds-stat__ratio, .ds-stat__sentence, .ds-stat__row) { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); min-inline-size: 3em; } .ds-stat[aria-busy="true"] :is(.ds-stat__label, .ds-stat__value, .ds-stat__meta, .ds-stat__subject, .ds-stat__ratio, .ds-stat__sentence, .ds-stat__row) > * { visibility: hidden; } .ds-stat[aria-busy="true"] .ds-stat__ring::before { background: var(--ds-skeleton); mask: none; -webkit-mask: none; } .ds-stat[aria-busy="true"] .ds-stat__icon { color: var(--ds-skeleton); } .ds-stat[data-state="empty"] .ds-stat__value { font-style: italic; font-weight: var(--ds-weight-regular); font-size: var(--ds-text-md); color: var(--ds-ink-muted); letter-spacing: 0; } .ds-stat[data-state="empty"] .ds-stat__sentence { color: var(--ds-ink-muted); } .ds-stat[data-state="empty"] .ds-stat__subject { font-style: italic; font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-stat[data-state="error"] .ds-stat__value { font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); color: var(--ds-danger-ink); letter-spacing: 0; } .ds-stat[data-state="error"] .ds-stat__meta { color: var(--ds-danger-ink); } .ds-stat[data-state="error"] .ds-stat__meta a { color: var(--ds-ink-link); } .ds-stat[aria-disabled="true"] { cursor: not-allowed; } .ds-stat[aria-disabled="true"] :is(.ds-stat__label, .ds-stat__value, .ds-stat__meta, .ds-stat__subject, .ds-stat__ratio, .ds-stat__sentence) { color: var(--ds-ink-faint); } .ds-status-badge svg[fill="none"] { fill: none; stroke: currentColor; } .ds-status-badge { --_h: 20px; --_pad-x: var(--ds-space-2); --_radius: var(--ds-radius-xs); --_gap: var(--ds-space-1); --_size: var(--ds-text-xs); --_weight: var(--ds-weight-medium); --_case: uppercase; --_tracking: .04em; --_hue: var(--ds-ink-muted); --_fill: transparent; --_ink: var(--ds-ink-muted); --_edge: var(--ds-border); --_glyph: var(--_hue); display: inline-flex; align-items: center; gap: var(--_gap); min-block-size: var(--_h); padding-inline: var(--_pad-x); border-radius: var(--_radius); border: var(--ds-border-width) solid var(--_edge); background: var(--_fill); color: var(--_ink); font-family: var(--ds-font-label); font-size: var(--_size); font-weight: var(--_weight); line-height: 1; letter-spacing: var(--_tracking); text-transform: var(--_case); white-space: nowrap; vertical-align: middle; max-inline-size: 100%; } .ds-status-badge__label { overflow: hidden; text-overflow: ellipsis; } .ds-status-badge[data-size="sm"] { --_h: 18px; --_pad-x: var(--ds-space-1-5); } .ds-status-badge[data-size="lg"] { --_h: 24px; --_pad-x: var(--ds-space-3); --_size: var(--ds-text-sm); } .ds-status-badge[data-tone="success"] { --_hue: var(--ds-success); --_fill: var(--ds-success-tint); --_ink: var(--ds-success-ink); --_edge: transparent; } .ds-status-badge[data-tone="danger"] { --_hue: var(--ds-danger); --_fill: var(--ds-danger-tint); --_ink: var(--ds-danger-ink); --_edge: transparent; } .ds-status-badge[data-tone="warning"] { --_hue: var(--ds-warning); --_fill: var(--ds-warning-tint); --_ink: var(--ds-warning-ink); --_edge: transparent; } .ds-status-badge[data-tone="info"] { --_hue: var(--ds-info); --_fill: var(--ds-info-tint); --_ink: var(--ds-info-ink); --_edge: transparent; } .ds-status-badge[data-tone="accent"] { --_hue: var(--ds-accent); --_fill: var(--ds-accent-tint); --_ink: var(--ds-accent-ink); --_edge: transparent; } .ds-status-badge[data-tone="accent-2"] { --_hue: var(--ds-accent-2); --_fill: var(--ds-accent-2-tint); --_ink: var(--ds-accent-2-ink); --_edge: transparent; } .ds-status-badge[data-tone="live"] { --_hue: var(--ds-live); --_fill: var(--ds-live); --_ink: var(--ds-ink-on-semantic); --_edge: transparent; --_glyph: currentColor; } .ds-status-badge[data-hue="1"] { --_hue: var(--ds-data-1); --_fill: var(--ds-data-1-tint); --_ink: var(--ds-data-1-ink); --_edge: transparent; } .ds-status-badge[data-hue="2"] { --_hue: var(--ds-data-2); --_fill: var(--ds-data-2-tint); --_ink: var(--ds-data-2-ink); --_edge: transparent; } .ds-status-badge[data-hue="3"] { --_hue: var(--ds-data-3); --_fill: var(--ds-data-3-tint); --_ink: var(--ds-data-3-ink); --_edge: transparent; } .ds-status-badge[data-hue="4"] { --_hue: var(--ds-data-4); --_fill: var(--ds-data-4-tint); --_ink: var(--ds-data-4-ink); --_edge: transparent; } .ds-status-badge[data-hue="5"] { --_hue: var(--ds-data-5); --_fill: var(--ds-data-5-tint); --_ink: var(--ds-data-5-ink); --_edge: transparent; } .ds-status-badge[data-hue="6"] { --_hue: var(--ds-data-6); --_fill: var(--ds-data-6-tint); --_ink: var(--ds-data-6-ink); --_edge: transparent; } .ds-status-badge[data-hue="7"] { --_hue: var(--ds-data-7); --_fill: var(--ds-data-7-tint); --_ink: var(--ds-data-7-ink); --_edge: transparent; } .ds-status-badge[data-hue="8"] { --_hue: var(--ds-data-8); --_fill: var(--ds-data-8-tint); --_ink: var(--ds-data-8-ink); --_edge: transparent; } .ds-status-badge[data-emphasis="outlined"] { --_fill: transparent; --_edge: var(--ds-border); } .ds-status-badge[data-emphasis="outlined"]:not([data-tone]):not([data-hue]) { --_ink: var(--ds-ink-muted); } .ds-status-badge[data-emphasis="tint"]:not([data-tone]):not([data-hue]) { --_fill: var(--ds-surface-2); --_ink: var(--ds-ink-2); --_edge: transparent; } .ds-status-badge[data-emphasis="filled"] { --_fill: var(--_hue); --_ink: var(--ds-ink-on-semantic); --_edge: transparent; --_glyph: currentColor; } .ds-status-badge[data-emphasis="filled"]:not([data-tone]):not([data-hue]) { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); } .ds-status-badge[data-emphasis="filled"][data-tone="accent"] { --_ink: var(--ds-ink-on-accent); } .ds-status-badge[data-emphasis="filled"][data-tone="warning"] { --_fill: var(--ds-warning-tint); --_ink: var(--ds-warning-ink); --_glyph: var(--_hue); } .ds-status-badge[data-emphasis="inverse"] { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); --_edge: transparent; --_glyph: currentColor; } .ds-status-badge[data-emphasis="quiet"] { --_fill: transparent; --_edge: transparent; --_pad-x: 0px; } .ds-status-badge[data-emphasis="quiet"]:not([data-tone]):not([data-hue]) { --_ink: var(--ds-ink-muted); } .ds-status-badge[data-emphasis="quiet"][data-tone] { --_ink: var(--_hue); } .ds-status-badge[data-emphasis="quiet"][data-tone="success"] { --_ink: var(--ds-success-ink); } .ds-status-badge[data-emphasis="quiet"][data-tone="danger"] { --_ink: var(--ds-danger-ink); } .ds-status-badge[data-emphasis="quiet"][data-tone="warning"] { --_ink: var(--ds-warning-ink); } .ds-status-badge[data-emphasis="quiet"][data-tone="info"] { --_ink: var(--ds-info-ink); } .ds-status-badge__glyph { flex: none; position: relative; display: inline-grid; place-items: center; inline-size: 8px; block-size: 8px; border-radius: var(--ds-radius-pill); background: var(--_glyph); color: var(--_glyph); } .ds-status-badge__glyph[data-shape="check"] { inline-size: 12px; block-size: 12px; background: transparent; } .ds-status-badge__glyph[data-shape="check"]::before { content: ""; inline-size: 3px; block-size: 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); } .ds-status-badge__glyph[data-shape="icon"] { inline-size: 12px; block-size: 12px; background: transparent; border-radius: 0; } .ds-status-badge__glyph[data-shape="icon"] svg { inline-size: 100%; block-size: 100%; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-status-badge__glyph[data-shape="ring"] { inline-size: 14px; block-size: 14px; background: transparent; border: 1.5px solid var(--_glyph); box-sizing: border-box; } .ds-status-badge__glyph[data-shape="ring"][data-fill="dashed"] { border-style: dashed; } .ds-status-badge__glyph[data-shape="ring"][data-fill="partial"]::before { content: ""; position: absolute; inset: 2px; border-radius: inherit; background: conic-gradient(var(--_glyph) 50%, transparent 0); } .ds-status-badge__glyph[data-shape="ring"][data-fill="filled"] { background: var(--_glyph); } .ds-status-badge__glyph[data-shape="ring"][data-fill="filled"]::before { content: ""; inline-size: 3px; block-size: 6px; border-inline-end: 1.5px solid var(--ds-ink-on-semantic); border-block-end: 1.5px solid var(--ds-ink-on-semantic); transform: translateY(-1px) rotate(45deg); } .ds-status-badge[data-tone="live"] .ds-status-badge__glyph[data-shape="dot"] { animation: ds-status-badge-pulse calc(1.6s * var(--ds-motion-scale)) var(--ds-ease-standard) infinite; } @keyframes ds-status-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .ds-status-badge[data-variant="manychat-live-filled-red"] { --_h: 22px; --_size: var(--ds-text-sm); --_weight: var(--ds-weight-medium); --_tracking: .02em; --_fill: var(--ds-surface-2); --_ink: var(--ds-ink-muted); --_edge: transparent; } .ds-status-badge[data-variant="manychat-live-filled-red"][data-tone="live"] { --_weight: var(--ds-weight-semibold); --_fill: var(--ds-live); --_ink: var(--ds-ink-on-semantic); } .ds-status-badge[data-variant="manychat-draft-quiet-outlined"] { --_h: 24px; --_radius: var(--ds-radius-sm); --_size: var(--ds-text-sm); --_tracking: .06em; --_edge: var(--ds-rule); --_fill: transparent; --_ink: var(--ds-ink-muted); } .ds-status-badge[data-variant="clickup-group-status-pill"] { --_size: var(--ds-text-sm); --_weight: var(--ds-weight-bold); --_tracking: .02em; --_edge: transparent; } .ds-status-badge[data-variant="clickup-group-status-pill"]:not([data-tone]):not([data-hue]) { --_fill: var(--ds-surface-2); --_ink: var(--ds-ink-2); } .ds-status-badge[data-variant="origin-inline-coloured-word"] { display: inline; min-block-size: 0; padding: 0; border: 0; background: transparent; font: inherit; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--_ink); } .ds-status-badge[data-variant="origin-inline-coloured-word"]::before { content: "("; } .ds-status-badge[data-variant="origin-inline-coloured-word"]::after { content: ")"; } .ds-status-badge[data-variant="origin-inline-coloured-word"] .ds-status-badge__glyph { display: none; } .ds-status-badge[data-variant="navattic-tonal-default"] { --_radius: var(--ds-radius-sm); --_size: var(--ds-text-sm); --_case: none; --_tracking: 0; --_fill: var(--ds-surface-2); --_ink: var(--ds-ink); --_edge: transparent; --_glyph: var(--ds-ink-2); --_gap: var(--ds-space-1-5); } .ds-status-badge[data-variant="perplexity-pro-dark-caps"] { --_h: 16px; --_pad-x: var(--ds-space-1); --_radius: var(--ds-radius-xs); --_weight: var(--ds-weight-semibold); --_tracking: .06em; --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); --_edge: transparent; } .ds-status-badge[data-variant="descript-new-tint-pill"] { --_radius: var(--ds-radius-pill); --_size: var(--ds-text-sm); --_case: none; --_tracking: 0; --_fill: var(--ds-accent-tint); --_ink: var(--ds-accent-ink); --_edge: transparent; } .ds-status-badge[data-variant="elevenlabs-two-emphasis-levels"] { --_h: 22px; --_radius: var(--ds-radius-pill); --_size: var(--ds-text-sm); --_case: none; --_tracking: 0; --_pad-x: var(--ds-space-2); --_fill: var(--ds-surface-2); --_ink: var(--ds-ink-2); --_edge: transparent; } .ds-status-badge[data-variant="elevenlabs-two-emphasis-levels"][data-emphasis="inverse"] { --_fill: var(--ds-surface-inverse); --_ink: var(--ds-ink-inverse); } .ds-status-badge[data-variant="vercel-mono-boxed-new"] { --_h: 16px; --_pad-x: var(--ds-space-1); --_radius: var(--ds-radius-xs); --_tracking: .06em; --_fill: var(--ds-surface); --_ink: var(--ds-ink); --_edge: var(--ds-ink); font-family: var(--ds-font-mono); margin-inline-start: var(--ds-space-2); } .ds-status-badge[data-variant="attio-status-chip-vocabulary"] { --_h: 22px; --_radius: var(--ds-radius-pill); --_size: var(--ds-text-sm); --_case: none; --_tracking: 0; --_gap: var(--ds-space-1-5); --_pad-x: var(--ds-space-2); --_fill: var(--ds-surface); --_ink: var(--ds-ink-2); --_edge: var(--ds-rule); } .ds-status-badge[data-variant="plane-state-ring"] { --_h: 20px; --_pad-x: 0px; --_size: var(--ds-text-md); --_weight: var(--ds-weight-medium); --_case: none; --_tracking: 0; --_gap: var(--ds-space-2); --_fill: transparent; --_edge: transparent; --_ink: var(--ds-ink); --_glyph: var(--ds-ink-muted); } .ds-status-badge[data-variant="plane-state-ring"][data-tone="warning"] { --_glyph: var(--ds-warning); } .ds-status-badge[data-variant="plane-state-ring"][data-tone="success"] { --_glyph: var(--ds-success); } .ds-status-badge[data-variant="oku-premium-accent-pill"] { --_h: 24px; --_pad-x: var(--ds-space-3); --_weight: var(--ds-weight-bold); --_tracking: .05em; --_fill: var(--ds-accent); --_ink: var(--ds-ink-on-accent); --_edge: transparent; } .ds-status-badge[data-variant="manychat-trial-on-avatar"] { --_h: 16px; --_pad-x: var(--ds-space-1-5); --_radius: var(--ds-radius-pill); --_weight: var(--ds-weight-bold); --_tracking: .04em; --_fill: var(--ds-accent); --_ink: var(--ds-ink-on-accent); --_edge: var(--ds-surface); border-width: 2px; } .ds-status-badge[aria-busy="true"] { --_fill: var(--ds-skeleton); --_edge: transparent; color: transparent; min-inline-size: 48px; } .ds-status-badge[aria-busy="true"] > * { visibility: hidden; } .ds-suggestion-chips svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-suggestion-chips { --_h: var(--ds-control-h-sm); --_gap: var(--ds-space-2); --_radius: var(--ds-radius-pill); --_edge: var(--ds-border); --_fill: var(--ds-surface); --_ink: var(--ds-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap); min-width: 0; max-width: 100%; font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); } .ds-suggestion-chips[data-align="center"] { justify-content: center; } .ds-suggestion-chips[data-align="start"] { justify-content: flex-start; } .ds-suggestion-chips[data-state="hidden"] { display: none; } .ds-suggestion-chips__label { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--_h); padding-inline: var(--ds-space-1); color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); white-space: nowrap; } .ds-suggestion-chips__label svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-suggestion-chips__chip { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--_h); max-width: 100%; min-width: 0; padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--_edge); border-radius: var(--_radius); background: var(--_fill); color: var(--_ink); font: inherit; font-size: var(--ds-text-sm); text-align: start; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-suggestion-chips__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-suggestion-chips__icon { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); } .ds-suggestion-chips__icon svg { inline-size: 100%; block-size: 100%; } .ds-suggestion-chips__emoji { flex: none; font-size: var(--ds-text-md); line-height: 1; } .ds-suggestion-chips__chip:hover, .ds-suggestion-chips__chip[data-state="hover"] { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); color: var(--ds-ink); } .ds-suggestion-chips__chip:hover .ds-suggestion-chips__icon { color: var(--ds-ink); } .ds-suggestion-chips__chip:active, .ds-suggestion-chips__chip[data-state="pressed"] { background: var(--ds-surface-2); } .ds-suggestion-chips__chip:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-suggestion-chips__chip:disabled, .ds-suggestion-chips__chip[aria-disabled="true"] { background: var(--ds-surface-3); border-color: var(--ds-rule); color: var(--ds-ink-faint); cursor: not-allowed; } .ds-suggestion-chips__chip:disabled .ds-suggestion-chips__icon { color: var(--ds-ink-faint); } .ds-suggestion-chips__chip[aria-busy="true"] { pointer-events: none; color: transparent; } .ds-suggestion-chips__chip[aria-busy="true"] .ds-suggestion-chips__text { border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); min-inline-size: 8em; } .ds-suggestion-chips__chip[aria-busy="true"] .ds-suggestion-chips__icon { color: var(--ds-ink-faint); } .ds-suggestion-chips__empty { display: inline-flex; align-items: center; min-height: var(--_h); padding-inline: var(--ds-space-3); border: var(--ds-border-width) dashed var(--ds-border); border-radius: var(--_radius); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-suggestion-chips[data-variant="perplexity-label-chip-plus-question-chips"] { --_fill: var(--ds-ground); --_edge: var(--ds-rule); --_ink: var(--ds-ink-2); justify-content: center; } .ds-suggestion-chips[data-variant="perplexity-label-chip-plus-question-chips"] .ds-suggestion-chips__chip { padding-inline: var(--ds-space-3); } .ds-suggestion-chips[data-variant="origin-question-of-the-day-card"] { flex-direction: column; align-items: stretch; gap: var(--ds-space-4); padding: var(--ds-card-pad); border-radius: var(--ds-radius-lg); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); } .ds-suggestion-chips[data-variant="origin-question-of-the-day-card"] .ds-suggestion-chips__label { min-height: 0; padding: 0 0 var(--ds-space-3); border-block-end: var(--ds-border-width) solid var(--ds-rule); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); letter-spacing: .12em; text-transform: uppercase; white-space: normal; } .ds-suggestion-chips__question { margin: 0; font-size: var(--ds-text-xl); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-heading); color: var(--ds-ink); text-wrap: balance; } .ds-suggestion-chips[data-variant="origin-question-of-the-day-card"] .ds-suggestion-chips__chip { --_h: var(--ds-control-h-lg); justify-content: center; gap: var(--ds-space-2); inline-size: 100%; border-color: var(--ds-border-strong); color: var(--ds-ink); font-family: var(--ds-font-label); font-size: var(--ds-text-sm); letter-spacing: .12em; text-transform: uppercase; } .ds-suggestion-chips[data-variant="origin-question-of-the-day-card"] .ds-suggestion-chips__chip .ds-suggestion-chips__icon { color: var(--ds-ink); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-3)); --_edge: var(--ds-rule); --_fill: transparent; --_ink: var(--ds-ink-muted); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip { gap: var(--ds-space-3); inline-size: 100%; padding-inline: var(--ds-space-3); border-width: var(--ds-border-width) 0 0; border-radius: 0; font-size: var(--ds-text-md); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__text b { font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__icon[data-hue="1"] { color: var(--ds-data-1); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__icon[data-hue="2"] { color: var(--ds-data-2); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__icon[data-hue="3"] { color: var(--ds-data-3); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__icon[data-hue="4"] { color: var(--ds-data-4); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__icon[data-hue="5"] { color: var(--ds-data-5); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip:is(:hover, [data-state="hover"]) { border-color: var(--ds-rule); background: var(--ds-hover-bg); color: var(--ds-ink-2); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip:is(:hover, [data-state="hover"]) .ds-suggestion-chips__text b { color: var(--ds-ink); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip:is(:focus-visible, [data-state="focus"]) { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip:disabled { border-color: var(--ds-rule); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip:disabled .ds-suggestion-chips__text b { color: var(--ds-ink-faint); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip[aria-busy="true"] .ds-suggestion-chips__text { min-inline-size: 16em; block-size: var(--ds-text-sm); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__chip[data-kind="more"] { font-size: var(--ds-text-sm); } .ds-suggestion-chips__arrow { flex: none; display: inline-block; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); transition: transform var(--ds-dur-fast) var(--ds-ease-out); } .ds-suggestion-chips__chip:is(:hover, [data-state="hover"]) .ds-suggestion-chips__arrow { transform: translateX(2px); } .ds-suggestion-chips[data-variant="sana-divided-prompt-rows"] .ds-suggestion-chips__empty { border-radius: var(--ds-radius-sm); min-height: var(--_h); } .ds-suggestion-chips[data-size="sm"] { --_h: var(--ds-space-7); font-size: var(--ds-text-xs); } .ds-suggestion-chips[data-size="sm"] .ds-suggestion-chips__chip { font-size: var(--ds-text-xs); padding-inline: var(--ds-space-2-5); } .ds-suggestion-chips[data-size="lg"] { --_h: var(--ds-control-h); } .ds-suggestion-chips[data-size="lg"] .ds-suggestion-chips__chip { font-size: var(--ds-text-md); padding-inline: var(--ds-space-4); } .ds-text-link { --_gap: var(--ds-space-1); --_glyph: 1em; display: inline; color: var(--ds-ink-link); font: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: var(--ds-border-width); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; border-radius: var(--ds-radius-xs); cursor: pointer; transition: color var(--ds-dur-fast) var(--ds-ease-standard), text-decoration-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-text-link__glyph { display: inline-block; width: var(--_glyph); height: var(--_glyph); vertical-align: -.12em; margin-inline-start: var(--_gap); transition: transform var(--ds-dur-fast) var(--ds-ease-out); } .ds-text-link__glyph[data-slot="leading"] { margin-inline-start: 0; margin-inline-end: var(--_gap); } .ds-text-link__glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-text-link__label { } .ds-text-link:hover, .ds-text-link[data-state="hover"] { text-decoration-color: currentColor; } .ds-text-link:hover .ds-text-link__glyph:not([data-slot="leading"]) { transform: translateX(var(--ds-space-0-5)); } .ds-text-link:focus-visible, .ds-text-link[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); text-decoration-color: currentColor; } .ds-text-link:active { color: var(--ds-accent-hover); } .ds-text-link[aria-current="page"], .ds-text-link[aria-current="true"] { color: var(--ds-ink); font-weight: var(--ds-weight-medium); text-decoration: none; } .ds-text-link[aria-disabled="true"] { color: var(--ds-ink-faint); text-decoration-color: currentColor; pointer-events: none; cursor: default; } .ds-text-link[data-external] .ds-text-link__glyph { vertical-align: -.05em; } .ds-text-link[data-kind="route"] { display: inline-flex; align-items: center; color: var(--ds-ink); font-weight: var(--ds-weight-medium); text-decoration: none; } .ds-text-link[data-kind="route"]:hover, .ds-text-link[data-kind="route"][data-state="hover"] { color: var(--ds-ink); text-decoration: underline; text-decoration-color: currentColor; } .ds-text-link[data-kind="route"]:active { color: var(--ds-ink-2); } .ds-text-link[data-kind="danger"] { color: var(--ds-danger-ink); } .ds-text-link[data-kind="danger"]:hover, .ds-text-link[data-kind="danger"][data-state="hover"] { color: var(--ds-danger); text-decoration-color: currentColor; } .ds-text-link[data-kind="danger"]:active { color: var(--ds-danger); } .ds-text-link[data-variant="no-underline-coloured"] { text-decoration: none; } .ds-text-link[data-variant="no-underline-coloured"]:hover { text-decoration: underline; text-decoration-color: currentColor; } .ds-text-link[data-variant="underlined-ink"] { color: var(--ds-ink); text-decoration-color: currentColor; text-underline-offset: .2em; } .ds-text-link[data-variant="underlined-ink"]:hover { color: var(--ds-ink-2); text-decoration-thickness: 2px; } .ds-text-link[data-variant="hue-plus-trailing-chevron"] { --_gap: var(--ds-space-2); display: inline-flex; align-items: center; text-decoration: none; } .ds-text-link[data-variant="hue-plus-trailing-chevron"]:hover { color: var(--ds-accent-hover); } .ds-text-link[data-variant="arrow-suffix-route-link"] { display: inline-flex; align-items: center; color: var(--ds-ink); text-decoration: none; } .ds-text-link[data-variant="arrow-suffix-route-link"]:hover { text-decoration: underline; text-decoration-color: currentColor; } .ds-text-link[data-variant="muted-underlined-in-system-text"] { color: var(--ds-ink-muted); text-decoration-color: currentColor; } .ds-text-link[data-variant="muted-underlined-in-system-text"]:hover { color: var(--ds-ink); } .ds-text-link[data-variant="quiet-ink-cta"] { color: var(--ds-ink-2); text-decoration: none; } .ds-text-link[data-variant="quiet-ink-cta"]:hover { text-decoration: underline; text-decoration-color: currentColor; } .ds-text-link[data-variant="mono-caps-underlined"] { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-ink); text-decoration-color: currentColor; text-underline-offset: .25em; } .ds-text-link[data-variant="mono-caps-underlined"]:hover { color: var(--ds-ink-2); } button.ds-text-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .ds-tooltip-affordance svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-tooltip-affordance { --_glyph: var(--ds-icon-size); --_hit: var(--ds-space-6); --_gap: var(--ds-space-1); --_max: 240px; --_offset: var(--ds-space-2); position: relative; display: inline-flex; align-items: center; vertical-align: middle; max-inline-size: 100%; } .ds-tooltip-affordance__term { min-inline-size: 0; } .ds-tooltip-affordance__trigger { appearance: none; display: inline-grid; place-items: center; inline-size: var(--_hit); block-size: var(--_hit); margin: calc((var(--_glyph) - var(--_hit)) / 2); margin-inline-start: calc(var(--_gap) + (var(--_glyph) - var(--_hit)) / 2); padding: 0; border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-ink-muted); cursor: help; transition: color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-tooltip-affordance__trigger svg { inline-size: var(--_glyph); block-size: var(--_glyph); } .ds-tooltip-affordance__trigger:hover, .ds-tooltip-affordance[data-state="open"] .ds-tooltip-affordance__trigger { color: var(--ds-ink); } .ds-tooltip-affordance__trigger:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: 0; } .ds-tooltip-affordance__trigger:disabled { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-tooltip-affordance[data-kind="term"] .ds-tooltip-affordance__trigger { inline-size: auto; block-size: auto; margin: 0; padding: 0; border-radius: var(--ds-radius-xs); display: inline; font: inherit; color: var(--ds-ink-2); text-decoration: underline dotted; text-decoration-thickness: var(--ds-border-width); text-underline-offset: .2em; text-decoration-color: var(--ds-ink-muted); } .ds-tooltip-affordance[data-kind="term"] .ds-tooltip-affordance__trigger:hover { color: var(--ds-ink); text-decoration-color: currentColor; } .ds-tooltip-affordance[data-kind="help"] .ds-tooltip-affordance__trigger { color: var(--ds-ink-muted); } .ds-tooltip-affordance[data-kind="warning"] .ds-tooltip-affordance__trigger { color: var(--ds-warning); cursor: pointer; } .ds-tooltip-affordance[data-kind="warning"] .ds-tooltip-affordance__trigger:hover { color: var(--ds-warning-ink); } .ds-tooltip-affordance__tip { position: absolute; z-index: var(--ds-z-tooltip); inline-size: max-content; max-inline-size: min(var(--_max), calc(100vw - 2 * var(--ds-space-4))); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); background: var(--ds-surface-raised); color: var(--ds-ink-2); border: var(--ds-border-width) solid var(--ds-rule); box-shadow: var(--ds-shadow-float); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); letter-spacing: 0; text-transform: none; text-align: start; white-space: normal; overflow-wrap: anywhere; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--ds-dur-fast) var(--ds-ease-out), visibility 0s linear var(--ds-dur-fast); } .ds-tooltip-affordance__tip strong { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-tooltip-affordance:hover .ds-tooltip-affordance__tip, .ds-tooltip-affordance:focus-within .ds-tooltip-affordance__tip, .ds-tooltip-affordance[data-state="open"] .ds-tooltip-affordance__tip { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .ds-tooltip-affordance[data-tone="inverse"] .ds-tooltip-affordance__tip { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); border-color: transparent; } .ds-tooltip-affordance[data-tone="inverse"] .ds-tooltip-affordance__tip strong { color: inherit; } .ds-tooltip-affordance:not([data-placement]) .ds-tooltip-affordance__tip, .ds-tooltip-affordance[data-placement="bottom-start"] .ds-tooltip-affordance__tip { inset-block-start: calc(100% + var(--_offset)); inset-inline-start: 0; } .ds-tooltip-affordance[data-placement="bottom"] .ds-tooltip-affordance__tip { inset-block-start: calc(100% + var(--_offset)); inset-inline-start: 50%; transform: translateX(-50%); } .ds-tooltip-affordance[data-placement="bottom-end"] .ds-tooltip-affordance__tip { inset-block-start: calc(100% + var(--_offset)); inset-inline-end: 0; } .ds-tooltip-affordance[data-placement="top-start"] .ds-tooltip-affordance__tip { inset-block-end: calc(100% + var(--_offset)); inset-inline-start: 0; } .ds-tooltip-affordance[data-placement="top"] .ds-tooltip-affordance__tip { inset-block-end: calc(100% + var(--_offset)); inset-inline-start: 50%; transform: translateX(-50%); } .ds-tooltip-affordance[data-placement="top-end"] .ds-tooltip-affordance__tip { inset-block-end: calc(100% + var(--_offset)); inset-inline-end: 0; } .ds-tooltip-affordance[data-placement="end"] .ds-tooltip-affordance__tip { inset-inline-start: calc(100% + var(--_offset)); inset-block-start: 50%; transform: translateY(-50%); } .ds-tooltip-affordance[data-placement="start"] .ds-tooltip-affordance__tip { inset-inline-end: calc(100% + var(--_offset)); inset-block-start: 50%; transform: translateY(-50%); } .ds-tooltip-affordance[data-caret] .ds-tooltip-affordance__tip::before { content: ""; position: absolute; inline-size: 8px; block-size: 8px; background: inherit; border: inherit; border-inline-end: 0; border-block-end: 0; transform: rotate(45deg); inset-block-start: -5px; inset-inline-start: var(--ds-space-3); } .ds-tooltip-affordance[data-caret][data-placement^="top"] .ds-tooltip-affordance__tip::before { inset-block-start: auto; inset-block-end: -5px; transform: rotate(225deg); } .ds-tooltip-affordance[data-caret][data-placement="top"] .ds-tooltip-affordance__tip::before, .ds-tooltip-affordance[data-caret][data-placement="bottom"] .ds-tooltip-affordance__tip::before { inset-inline-start: calc(50% - 4px); } .ds-tooltip-affordance[data-caret][data-placement$="end"] .ds-tooltip-affordance__tip::before { inset-inline-start: auto; inset-inline-end: var(--ds-space-3); } .ds-tooltip-affordance[data-kind="footnote"] { display: flex; align-items: flex-start; gap: var(--ds-space-2); } .ds-tooltip-affordance__note { display: flex; align-items: flex-start; gap: var(--ds-space-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); max-inline-size: var(--ds-measure); } .ds-tooltip-affordance__note svg { flex: none; inline-size: var(--_glyph); block-size: var(--_glyph); margin-block-start: 1px; color: var(--ds-ink-muted); } .ds-tooltip-affordance[data-variant="jasper-underline-plus-info-icon"] .ds-tooltip-affordance__trigger { color: var(--ds-ink); } .ds-tooltip-affordance[data-variant="jasper-underline-plus-info-icon"] .ds-tooltip-affordance__term { color: var(--ds-ink-2); text-decoration: underline; text-decoration-thickness: var(--ds-border-width); text-underline-offset: .15em; } .ds-tooltip-affordance[data-variant="navattic-88-trailing-(i)"] { --_glyph: 16px; --_gap: var(--ds-space-1-5); } .ds-tooltip-affordance[data-variant="manychat-warning-triangle-no-message"] { --_glyph: var(--ds-icon-size-row); --_hit: var(--ds-control-h-sm); } .ds-tooltip-affordance[data-variant="manychat-warning-triangle-no-message"] .ds-tooltip-affordance__trigger { color: var(--ds-danger); } .ds-tooltip-affordance[data-variant="luma-consequence-footnote"] .ds-tooltip-affordance__note { line-height: var(--ds-lh-prose); } .ds-tooltip-affordance[data-variant="origin-inline-help-?"] { --_gap: var(--ds-space-2); } .ds-tree-table { --_cols: minmax(200px, 1.6fr) repeat(var(--_n, 3), minmax(96px, 1fr)); --_slot: var(--ds-control-h-sm); --_indent: 0px; --_pad-x: var(--ds-space-2); --_row-h-1: var(--ds-row-h); --_row-h-2: var(--ds-control-h); --_row-h-3: var(--ds-control-h-sm); display: flex; flex-direction: column; min-width: 0; background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-md); color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); } .ds-tree-table svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-tree-table__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-radius: inherit; background: linear-gradient(to left, var(--ds-surface) 40%, transparent) 100% 0 / var(--ds-space-8) 100% no-repeat local, linear-gradient(to left, var(--ds-rule), transparent) 100% 0 / var(--ds-space-4) 100% no-repeat scroll; } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__scroll, .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__scroll { background: none; } .ds-tree-table__scroll > * { min-width: var(--_min-w, 0); } .ds-tree-table__header, .ds-tree-table__row { display: grid; grid-template-columns: var(--_cols); align-items: center; column-gap: var(--ds-space-3); min-width: 0; padding-inline: var(--_pad-x); } .ds-tree-table__header { min-height: var(--ds-control-h-sm); border-block-end: var(--ds-border-width) solid var(--ds-rule); font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); white-space: nowrap; } .ds-tree-table__header > :first-child { padding-inline-start: var(--_slot); } .ds-tree-table__header > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-tree-table__header .ds-tree-table__num { text-align: end; } .ds-tree-table__heading { font-family: var(--ds-font-sans); font-size: var(--ds-text-xl); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); text-transform: none; color: var(--ds-ink); } .ds-tree-table__list, .ds-tree-table__group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; } .ds-tree-table__list { padding-block: var(--ds-space-1); } .ds-tree-table__item { display: flex; flex-direction: column; min-width: 0; } .ds-tree-table__item[aria-level="1"] { --_level: 1; --_row-h: var(--_row-h-1); } .ds-tree-table__item[aria-level="2"] { --_level: 2; --_row-h: var(--_row-h-2); } .ds-tree-table__item[aria-level="3"] { --_level: 3; --_row-h: var(--_row-h-3); } .ds-tree-table__item[aria-level="4"] { --_level: 4; --_row-h: var(--_row-h-3); } .ds-tree-table__item[aria-expanded="false"] > .ds-tree-table__group { display: none; } .ds-tree-table__row { min-height: var(--_row-h, var(--_row-h-1)); border-radius: var(--ds-radius-xs); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-tree-table__label { display: flex; align-items: center; align-self: stretch; gap: 0; min-width: 0; position: relative; padding-inline-start: calc(var(--_indent) * (var(--_level, 1) - 1)); } .ds-tree-table__label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-tree-table__item[aria-level="1"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-medium); } .ds-tree-table__item[aria-level="3"] > .ds-tree-table__row .ds-tree-table__label-text, .ds-tree-table__item[aria-level="4"] > .ds-tree-table__row .ds-tree-table__label-text { color: var(--ds-ink-muted); } .ds-tree-table__item[aria-level="3"] > .ds-tree-table__row .ds-tree-table__num, .ds-tree-table__item[aria-level="4"] > .ds-tree-table__row .ds-tree-table__num { color: var(--ds-ink-muted); } .ds-tree-table__item[data-kind="total"] > .ds-tree-table__row :is(.ds-tree-table__label-text, .ds-tree-table__num) { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); } .ds-tree-table__toggle, .ds-tree-table__slot { flex: none; display: inline-grid; place-items: center; width: var(--_slot); height: var(--ds-control-h-sm); } .ds-tree-table__toggle { appearance: none; padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: none; color: var(--ds-ink-muted); cursor: pointer; } .ds-tree-table__toggle:hover { color: var(--ds-ink); background: var(--ds-surface-hover); } .ds-tree-table__toggle svg { width: 12px; height: 12px; transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-tree-table__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); } .ds-tree-table__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-tree-table__empty-value { color: var(--ds-ink-muted); } .ds-tree-table[data-figures="mono"] .ds-tree-table__row .ds-tree-table__num { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: end; } .ds-tree-table[data-figures="mono"] .ds-tree-table__header .ds-tree-table__num { text-align: end; } .ds-tree-table__row:hover, .ds-tree-table__row[data-state="hover"] { background: var(--ds-hover-bg); } .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row :is(.ds-tree-table__label-text, .ds-tree-table__num) { color: inherit; } .ds-tree-table__row:focus-visible { outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-tree-table__item[aria-disabled="true"] > .ds-tree-table__row { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-tree-table__item[aria-disabled="true"] > .ds-tree-table__row :is(.ds-tree-table__label-text, .ds-tree-table__num, .ds-tree-table__toggle) { color: var(--ds-ink-faint); } .ds-tree-table[aria-busy="true"] .ds-tree-table__list { pointer-events: none; } .ds-tree-table__skeleton { display: inline-block; height: var(--ds-space-3); width: var(--_w, 96px); max-width: 100%; border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); vertical-align: middle; } .ds-tree-table__num > .ds-tree-table__skeleton { margin-inline-start: auto; display: block; } .ds-tree-table[data-state="empty"] { border-style: dashed; border-color: var(--ds-rule-strong); } .ds-tree-table__empty { display: flex; align-items: center; justify-content: center; min-height: calc(var(--ds-control-h-lg) * 2); padding: var(--ds-space-4); text-align: center; color: var(--ds-ink-muted); } .ds-tree-table__empty > span { max-width: var(--ds-measure); } .ds-tree-table__empty a { color: var(--ds-ink-link); } .ds-tree-table[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-tree-table__error { display: flex; align-items: center; gap: var(--ds-space-1-5); padding: var(--ds-space-2) var(--ds-space-3); border-block-start: var(--ds-border-width) solid var(--ds-rule); color: var(--ds-danger-ink); font-size: var(--ds-text-sm); } .ds-tree-table__error svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; } .ds-tree-table:not([data-variant]) .ds-tree-table__list, .ds-tree-table[data-variant="default"] .ds-tree-table__list, .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__list { padding: var(--ds-space-2); gap: var(--ds-space-2); } .ds-tree-table:not([data-variant]) .ds-tree-table__item[aria-level="1"], .ds-tree-table[data-variant="default"] .ds-tree-table__item[aria-level="1"], .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="1"] { background: var(--ds-surface-2); border-radius: var(--ds-radius-xs); } .ds-tree-table:not([data-variant]) .ds-tree-table__item[aria-level="1"] > .ds-tree-table__group, .ds-tree-table[data-variant="default"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__group, .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__group { padding: 0 var(--ds-space-2) var(--ds-space-2); gap: var(--ds-space-2); } .ds-tree-table:not([data-variant]) .ds-tree-table__item[aria-level="2"], .ds-tree-table[data-variant="default"] .ds-tree-table__item[aria-level="2"], .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="2"] { background: var(--ds-surface); border-radius: var(--ds-radius-xs); } .ds-tree-table:not([data-variant]) .ds-tree-table__item[aria-level="2"] > .ds-tree-table__group, .ds-tree-table[data-variant="default"] .ds-tree-table__item[aria-level="2"] > .ds-tree-table__group, .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="2"] > .ds-tree-table__group { padding-block-end: var(--ds-space-1); } .ds-tree-table:not([data-variant]) .ds-tree-table__item[aria-level="2"], .ds-tree-table[data-variant="default"] .ds-tree-table__item[aria-level="2"], .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="2"] { box-shadow: var(--ds-card-shadow); } .ds-tree-table[data-variant="quicken-fill-nested"] { --_cols: 250px repeat(var(--_n, 5), 200px); --_row-h-1: calc(var(--ds-control-h-lg) + var(--ds-space-3)); --_row-h-2: calc(var(--ds-control-h-lg) + var(--ds-space-2)); --_row-h-3: var(--ds-tap-target-min); --_pad-x: var(--ds-space-4); border-radius: var(--ds-radius-lg); font-size: var(--ds-text-lg); } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__header { min-height: calc(var(--ds-control-h-lg) + var(--ds-space-1)); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); text-transform: none; letter-spacing: 0; font-weight: var(--ds-weight-regular); border-block-end: 0; } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__header > :first-child { padding-inline-start: 0; } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__header .ds-tree-table__num { text-align: start; } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__num { text-align: start; font-variant-numeric: normal; } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-regular); } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[aria-level="3"] > .ds-tree-table__row { font-size: var(--ds-text-md); } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__item[data-kind="total"] > .ds-tree-table__row { font-size: var(--ds-text-md); } .ds-tree-table[data-variant="quicken-fill-nested"] .ds-tree-table__toggle svg { width: 10px; height: 10px; fill: currentColor; stroke: none; } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] { --_row-h-1: var(--ds-row-h); --_row-h-2: var(--ds-row-h); --_row-h-3: var(--ds-row-h); --_pad-x: var(--ds-space-2); background: var(--ds-ground-2); border-color: transparent; font-size: var(--ds-text-lg); } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__list { padding: var(--ds-space-1); gap: 1px; } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__row { border-radius: var(--ds-radius-sm); } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__item[aria-level="2"] > .ds-tree-table__row .ds-tree-table__label-text, .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__item[aria-level="3"] > .ds-tree-table__row .ds-tree-table__label-text { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__toggle[aria-expanded="false"] svg { opacity: 0; } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__row:hover .ds-tree-table__toggle svg, .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__toggle:focus-visible svg { opacity: 1; } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-tree-table[data-variant="hsaj-ink-only-nesting"] .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-semibold); } .ds-tree-table[data-variant="clickup-tree-line-indent"] { --_indent: var(--ds-space-4); --_row-h-1: calc(var(--ds-control-h-sm) - var(--ds-space-0-5)); --_row-h-2: var(--_row-h-1); --_row-h-3: var(--_row-h-1); --_pad-x: var(--ds-space-2); font-size: var(--ds-text-sm); background: var(--ds-ground-2); border-color: transparent; } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__list { padding: var(--ds-space-1); gap: 2px; } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__row { min-height: calc(var(--ds-control-h-sm) - var(--ds-space-1)); border-radius: var(--ds-radius-xs); } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__toggle, .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__slot { height: calc(var(--ds-control-h-sm) - var(--ds-space-1)); } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__item:not([aria-level="1"]) > .ds-tree-table__row .ds-tree-table__label::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--_slot) / 2 + var(--_indent) * (var(--_level) - 2)); border-inline-start: var(--ds-border-width) solid var(--ds-rule-strong); pointer-events: none; } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__item:not([aria-level="1"]) > .ds-tree-table__row .ds-tree-table__label-text { color: var(--ds-ink-2); } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row { background: var(--ds-surface-selected); color: var(--ds-ink); } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-medium); } .ds-tree-table[data-variant="clickup-tree-line-indent"] .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row .ds-tree-table__num { font-weight: var(--ds-weight-bold); } .ds-tree-table .ds-tree-table__check { flex: none; display: inline-flex; margin-inline-end: var(--ds-space-1); } .ds-tree-table__meta { flex: none; margin-inline-start: var(--ds-space-2); color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); white-space: nowrap; } .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row .ds-tree-table__meta { color: inherit; } .ds-tree-table__kind, .ds-tree-table__col { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink-2); font-size: var(--ds-text-sm); } .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row :is(.ds-tree-table__kind, .ds-tree-table__col) { color: inherit; } .ds-tree-table__more { min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-link); font: inherit; font-size: var(--ds-text-sm); cursor: pointer; } .ds-tree-table__more:hover { background: var(--ds-hover-bg); } .ds-tree-table[data-select="true"] .ds-tree-table__header > :first-child { padding-inline-start: calc(var(--_slot) + var(--ds-space-6)); } .ds-tree-table[data-variant="jstov"] { --_indent: var(--ds-space-5); --_pad-x: var(--ds-space-3); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__list { padding: 0; } .ds-tree-table[data-variant="jstov"] .ds-tree-table__row { border-radius: 0; } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="1"] + .ds-tree-table__item[aria-level="1"] { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__row { background: var(--ds-ground-2); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-semibold); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="1"] > .ds-tree-table__row:hover { background: var(--ds-hover-bg); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="2"] > .ds-tree-table__row .ds-tree-table__label-text { font-weight: var(--ds-weight-medium); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="3"] > .ds-tree-table__row .ds-tree-table__label-text { color: var(--ds-ink); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-level="3"] > .ds-tree-table__row .ds-tree-table__num { color: var(--ds-ink); } .ds-tree-table[data-variant="jstov"] .ds-tree-table__item[aria-selected="true"] > .ds-tree-table__row .ds-tree-table__label-text { color: inherit; } .ds-validation-marks svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-validation-marks { --_hue: var(--ds-danger); --_ink: var(--ds-danger-ink); --_gap: var(--ds-space-1-5); --_glyph: var(--ds-icon-size); display: inline-flex; align-items: flex-start; gap: var(--_gap); max-inline-size: 100%; min-inline-size: 0; font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); letter-spacing: 0; text-transform: none; color: var(--_ink); } .ds-validation-marks:empty { display: none; } .ds-validation-marks__glyph { flex: none; display: inline-grid; place-items: center; inline-size: var(--_glyph); block-size: var(--_glyph); margin-block-start: 1px; color: var(--_hue); } .ds-validation-marks__glyph svg { inline-size: 100%; block-size: 100%; } .ds-validation-marks__text { min-inline-size: 0; overflow-wrap: anywhere; } .ds-validation-marks__text a { color: inherit; } .ds-validation-marks[data-size="sm"] { --_glyph: 12px; font-size: var(--ds-text-xs); } .ds-validation-marks[data-kind="error"] { --_hue: var(--ds-danger); --_ink: var(--ds-danger-ink); } .ds-validation-marks[data-kind="warning"] { --_hue: var(--ds-warning); --_ink: var(--ds-warning-ink); } .ds-validation-marks[data-kind="success"] { --_hue: var(--ds-success); --_ink: var(--ds-success-ink); } .ds-validation-marks[data-kind="info"] { --_hue: var(--ds-info); --_ink: var(--ds-info-ink); } .ds-validation-marks[data-kind="required"], .ds-validation-marks[data-kind="optional"] { display: inline; gap: 0; font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; } .ds-validation-marks[data-kind="required"] { --_ink: var(--ds-danger-ink); color: var(--_ink); font-weight: var(--ds-weight-semibold); margin-inline-start: var(--ds-space-0-5); } .ds-validation-marks[data-kind="optional"] { --_ink: var(--ds-ink-muted); color: var(--_ink); font-weight: var(--ds-weight-regular); text-transform: none; letter-spacing: 0; margin-inline-start: var(--ds-space-1-5); } .ds-validation-marks[data-kind="optional"]::before { content: "("; } .ds-validation-marks[data-kind="optional"]::after { content: ")"; } .ds-validation-marks[data-placement="below"] { display: flex; margin-block-start: var(--ds-space-1-5); } .ds-validation-marks[data-placement="gutter"] { --_glyph: var(--ds-icon-size-row); position: absolute; inset-inline-start: calc(-1 * (var(--_glyph) + var(--ds-space-2))); inset-block-start: 50%; transform: translateY(-50%); gap: 0; } .ds-validation-marks[data-placement="gutter"] .ds-validation-marks__glyph { margin-block-start: 0; } .ds-validation-marks[data-placement="gutter"] .ds-validation-marks__text { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ds-validation-marks[data-placement="outline"] { position: absolute; inset: 0; z-index: 1; display: block; border-radius: inherit; border: var(--ds-border-width) dashed var(--_hue); background: color-mix(in srgb, var(--ds-danger-tint) 45%, transparent); pointer-events: none; } .ds-validation-marks[data-placement="outline"][data-kind="warning"] { background: color-mix(in srgb, var(--ds-warning-tint) 45%, transparent); } .ds-validation-marks[data-placement="outline"] .ds-validation-marks__glyph { display: none; } .ds-validation-marks[data-placement="outline"] .ds-validation-marks__text { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ds-validation-marks__chip { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: translateY(-100%); display: inline-flex; align-items: center; gap: var(--ds-space-1); block-size: 18px; padding-inline: var(--ds-space-1-5); border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0; background: var(--_hue); color: var(--ds-ink-on-semantic); font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: 1; white-space: nowrap; pointer-events: auto; } .ds-validation-marks__chip svg { inline-size: 12px; block-size: 12px; } .ds-validation-marks[data-placement="outline"][data-kind="warning"] .ds-validation-marks__chip { color: var(--ds-ink-on-warning); } .ds-validation-marks[data-variant="retool-red-asterisk-every-field"] { --_ink: var(--ds-danger); font-weight: var(--ds-weight-regular); margin-inline-start: var(--ds-space-0-5); } .ds-validation-marks[data-variant="manychat-109-warning-gutter"] { --_hue: var(--ds-danger); --_ink: var(--ds-danger-ink); } .ds-validation-marks[data-variant="retool-12-four-signal-error"] { --_hue: var(--ds-danger); } .ds-validation-marks[data-variant="retool-12-four-signal-error"] .ds-validation-marks__chip { border-radius: var(--ds-radius-xs); transform: translate(-1px, calc(-100% - 2px)); } .ds-skeleton-loading { --_fill: var(--ds-skeleton); min-inline-size: 0; max-inline-size: 100%; color: var(--ds-ink-muted); pointer-events: none; } .ds-skeleton-loading a, .ds-skeleton-loading button { pointer-events: auto; } .ds-skeleton-loading__bar, .ds-skeleton-loading__tile, .ds-skeleton-loading__disc, .ds-skeleton-loading__pill { display: block; flex: none; background: var(--_fill); max-inline-size: 100%; } .ds-skeleton-loading__bar { --_w: 100%; --_h: var(--ds-space-3); inline-size: var(--_w); block-size: var(--_h); border-radius: var(--ds-radius-xs); } .ds-skeleton-loading__bar[data-w="short"] { --_w: 32%; } .ds-skeleton-loading__bar[data-w="half"] { --_w: 50%; } .ds-skeleton-loading__bar[data-w="wide"] { --_w: 80%; } .ds-skeleton-loading__bar[data-h="title"] { --_h: var(--ds-space-4); } .ds-skeleton-loading__bar[data-h="display"] { --_h: var(--ds-space-7); } .ds-skeleton-loading__tile { --_ratio: 16 / 9; inline-size: 100%; aspect-ratio: var(--_ratio); border-radius: var(--ds-radius-md); } .ds-skeleton-loading__tile[data-ratio="square"] { --_ratio: 1; } .ds-skeleton-loading__disc { --_size: var(--ds-control-h); inline-size: var(--_size); block-size: var(--_size); border-radius: var(--ds-radius-pill); } .ds-skeleton-loading__pill { --_w: 100%; inline-size: var(--_w); block-size: var(--ds-control-h-sm); border-radius: var(--ds-radius-pill); } .ds-skeleton-loading[data-shimmer] :is(.ds-skeleton-loading__bar, .ds-skeleton-loading__tile, .ds-skeleton-loading__disc, .ds-skeleton-loading__pill) { background: linear-gradient(90deg, var(--_fill) 0%, color-mix(in srgb, var(--_fill) 55%, var(--ds-surface)) 50%, var(--_fill) 100%); background-size: 200% 100%; animation: ds-skeleton-loading-shimmer calc(1.4s * var(--ds-motion-scale)) var(--ds-ease-standard) infinite; } @keyframes ds-skeleton-loading-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .ds-skeleton-loading__spinner { --_size: var(--ds-icon-size-row); flex: none; display: inline-block; inline-size: var(--_size); block-size: var(--_size); border-radius: var(--ds-radius-pill); border: 2px solid var(--ds-ink); border-inline-end-color: transparent; animation: ds-skeleton-loading-spin calc(.9s * var(--ds-motion-scale)) linear infinite; } @keyframes ds-skeleton-loading-spin { to { transform: rotate(360deg); } } .ds-skeleton-loading__status { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; } .ds-skeleton-loading__status strong { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); } .ds-skeleton-loading__link { font-size: var(--ds-text-sm); } .ds-skeleton-loading__art { display: grid; place-items: center; color: var(--ds-ink-muted); } .ds-skeleton-loading[data-kind="list"] .ds-skeleton-loading__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--ds-space-3); min-block-size: var(--ds-row-h); padding-block: var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-skeleton-loading[data-kind="list"] .ds-skeleton-loading__row:last-of-type { border-block-end: 0; } .ds-skeleton-loading[data-kind="list"] .ds-skeleton-loading__row > .ds-skeleton-loading__lines { display: flex; flex-direction: column; gap: var(--ds-space-2); min-inline-size: 0; } .ds-skeleton-loading[data-kind="list"] .ds-skeleton-loading__row > .ds-skeleton-loading__bar:last-child { --_w: 64px; } .ds-skeleton-loading[data-kind="handoff"] { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-4); inline-size: 100%; max-inline-size: 488px; margin-inline: auto; padding: var(--ds-space-6); border-radius: var(--ds-radius-md); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); text-align: center; } .ds-skeleton-loading[data-kind="handoff"] .ds-skeleton-loading__status { justify-content: center; font-size: var(--ds-text-md); color: var(--ds-ink-2); } .ds-skeleton-loading[data-kind="composition"] { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3); padding-block: var(--ds-space-10); text-align: center; isolation: isolate; } .ds-skeleton-loading[data-kind="composition"] .ds-skeleton-loading__title { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); color: var(--ds-ink); text-wrap: balance; } .ds-skeleton-loading[data-kind="composition"] .ds-skeleton-loading__status { justify-content: center; max-inline-size: 40ch; font-size: var(--ds-text-md); } .ds-skeleton-loading[data-kind="composition"] .ds-skeleton-loading__art { margin-block-end: var(--ds-space-2); } .ds-skeleton-loading[data-state="done"] :is(.ds-skeleton-loading__bar, .ds-skeleton-loading__tile, .ds-skeleton-loading__disc, .ds-skeleton-loading__pill, .ds-skeleton-loading__spinner) { opacity: 0; transition: opacity var(--ds-dur-base) var(--ds-ease-out); } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] { display: grid; grid-template-columns: minmax(120px, 242px) minmax(0, 1fr); gap: var(--ds-space-5); } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] .ds-skeleton-loading__rail { display: flex; flex-direction: column; gap: var(--ds-space-7); padding-block-start: var(--ds-space-1-5); } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] .ds-skeleton-loading__rail > .ds-skeleton-loading__pill { block-size: var(--ds-control-h-sm); margin-block: calc(-1 * var(--ds-space-2)) 0; } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] .ds-skeleton-loading__rail > .ds-skeleton-loading__bar { --_w: 100px; } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] .ds-skeleton-loading__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] .ds-skeleton-loading__grid > .ds-skeleton-loading__tile { --_ratio: 1; border-radius: var(--ds-radius-xs); } @media (max-width: 480px) { .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] { grid-template-columns: 1fr; } .ds-skeleton-loading[data-variant="luma-layout-true-skeleton"] .ds-skeleton-loading__rail { flex-direction: row; flex-wrap: wrap; gap: var(--ds-space-3); } } .ds-skeleton-loading[data-variant="origin-fetching-composition"] .ds-skeleton-loading__art { position: relative; margin-block-end: var(--ds-space-6); } .ds-skeleton-loading[data-variant="origin-fetching-composition"] .ds-skeleton-loading__art::after { content: ""; position: absolute; inset: var(--ds-space-2) var(--ds-space-3) calc(-1 * var(--ds-space-2)); z-index: -1; border-radius: var(--ds-radius-md); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); } .ds-skeleton-loading[data-variant="origin-fetching-composition"] .ds-skeleton-loading__title { font-weight: var(--ds-weight-medium); } .ds-skeleton-loading[data-variant="luma-handoff-spinner-card"] { display: flex; align-items: center; gap: var(--ds-space-3); inline-size: 100%; max-inline-size: 488px; min-block-size: 64px; padding: var(--ds-space-5) var(--ds-space-6); border-radius: var(--ds-radius-lg); background: var(--ds-surface-raised); border: var(--ds-border-width) solid var(--ds-rule); } .ds-skeleton-loading[data-variant="synara-durations-as-copy"] .ds-skeleton-loading__status { font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-skeleton-loading[data-variant="synara-durations-as-copy"] .ds-skeleton-loading__status[data-state="done"] { color: var(--ds-ink-muted); font-family: var(--ds-font-mono); } .ds-toast svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-toast-stack { --_w: 320px; position: fixed; z-index: var(--ds-z-toast); display: flex; flex-direction: column; gap: var(--ds-space-3); inline-size: min(var(--_w), calc(100vw - 2 * var(--ds-space-4))); inset-block-end: var(--ds-space-4); inset-inline-end: var(--ds-space-4); pointer-events: none; isolation: isolate; } .ds-toast-stack > * { pointer-events: auto; } .ds-toast-stack[data-anchor="top-end"] { inset-block-end: auto; inset-block-start: var(--ds-space-4); } .ds-toast-stack[data-anchor="bottom-start"] { inset-inline-end: auto; inset-inline-start: var(--ds-space-4); } .ds-toast-stack[data-anchor="top-start"] { inset-block-end: auto; inset-block-start: var(--ds-space-4); inset-inline-end: auto; inset-inline-start: var(--ds-space-4); } .ds-toast-stack[data-anchor="top-center"] { inset-block-end: auto; inset-block-start: var(--ds-space-4); inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); } .ds-toast-stack[data-static] { position: relative; inset: auto; transform: none; z-index: auto; } .ds-toast { --_fill: var(--ds-surface-raised); --_edge: var(--ds-rule); --_ink: var(--ds-ink); --_glyph: var(--ds-ink-muted); --_radius: var(--ds-radius-md); --_pad-y: var(--ds-space-3); --_pad-x: var(--ds-space-4); --_gap: var(--ds-space-3); --_timer: 6s; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon body dismiss" "icon action dismiss" "progress progress progress"; column-gap: var(--_gap); align-items: start; inline-size: 100%; max-inline-size: 100%; padding: var(--_pad-y) var(--_pad-x); border-radius: var(--_radius); background: var(--_fill); border: var(--ds-border-width) solid var(--_edge); box-shadow: var(--ds-shadow-float); color: var(--_ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); overflow: hidden; } .ds-toast:not(:has(> .ds-toast__icon)) { grid-template-areas: "body body dismiss" "action action dismiss" "progress progress progress"; grid-template-columns: minmax(0, 1fr) auto auto; } .ds-toast__icon { grid-area: icon; flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); color: var(--_glyph); } .ds-toast__icon svg { inline-size: 100%; block-size: 100%; } .ds-toast__body { grid-area: body; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ds-space-0-5); } .ds-toast__title { font-weight: var(--ds-weight-semibold); color: var(--_ink); } .ds-toast__text { color: var(--ds-ink-2); overflow-wrap: anywhere; } .ds-toast__text code { font-family: var(--ds-font-mono); font-size: .93em; color: var(--ds-ink-code); } .ds-toast__action { grid-area: action; justify-self: start; margin-block-start: var(--ds-space-1-5); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); } .ds-toast__dismiss { grid-area: dismiss; align-self: start; margin-block: calc(-1 * var(--ds-space-1)); margin-inline-end: calc(-1 * var(--ds-space-2)); } .ds-toast__progress { grid-area: progress; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 2px; background: var(--ds-rule-soft); } .ds-toast__progress::before { content: ""; position: absolute; inset: 0; transform-origin: left; background: var(--_glyph); animation: ds-toast-drain calc(var(--_timer) * var(--ds-motion-scale)) linear forwards; } .ds-toast:hover .ds-toast__progress::before { animation-play-state: paused; } @keyframes ds-toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } } .ds-toast[data-tone="success"] { --_glyph: var(--ds-success); } .ds-toast[data-tone="error"] { --_glyph: var(--ds-danger); } .ds-toast[data-tone="info"] { --_glyph: var(--ds-info); } .ds-toast[data-tone="warning"] { --_glyph: var(--ds-warning); } .ds-toast[data-tone="progress"] { --_glyph: var(--ds-ink-2); } .ds-toast[data-tone="progress"] .ds-toast__text { font-variant-numeric: tabular-nums; } .ds-toast[data-stacked] { overflow: visible; } .ds-toast[data-stacked]::before, .ds-toast[data-stacked]::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--_fill); border: var(--ds-border-width) solid var(--_edge); transform: translateY(-6px) scale(.96); } .ds-toast[data-stacked="3"]::after { transform: translateY(-12px) scale(.92); } .ds-toast[data-stacked="2"]::after { display: none; } .ds-toast[data-state="entering"] { animation: ds-toast-in var(--ds-dur-base) var(--ds-ease-out) both; } .ds-toast[data-state="leaving"] { animation: ds-toast-out var(--ds-dur-fast) var(--ds-ease-in) both; } @keyframes ds-toast-in { from { opacity: 0; transform: translateY(var(--ds-space-2)); } to { opacity: 1; transform: none; } } @keyframes ds-toast-out { to { opacity: 0; transform: translateY(var(--ds-space-1)); } } .ds-toast[data-variant="origin-success-top-right"] { --_radius: var(--ds-radius-xl); --_pad-y: var(--ds-space-4); --_pad-x: var(--ds-space-5); --_edge: transparent; min-block-size: 86px; align-items: center; } .ds-toast[data-variant="origin-success-top-right"] .ds-toast__icon { inline-size: 22px; block-size: 22px; align-self: start; } .ds-toast[data-variant="origin-success-top-right"] .ds-toast__title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-lh-heading); } .ds-toast[data-variant="origin-success-top-right"] .ds-toast__text { font-size: var(--ds-text-lg); } .ds-toast[data-variant="manychat-state-confirmation-bottom-right"] { --_fill: var(--ds-success); --_edge: transparent; --_ink: var(--ds-ink-on-semantic); --_radius: var(--ds-radius-xs); --_pad-y: var(--ds-space-2); min-block-size: 52px; align-items: center; box-shadow: none; } .ds-toast[data-variant="manychat-state-confirmation-bottom-right"] .ds-toast__text { color: var(--_ink); } .ds-toast[data-variant="manychat-state-confirmation-bottom-right"] .ds-toast__dismiss { color: var(--_ink); align-self: center; margin-block: 0; } .ds-toast[data-variant="manychat-state-confirmation-bottom-right"] .ds-toast__dismiss:hover { background: var(--ds-surface-inverse-hover); } .ds-toast[data-variant="retool-error-stacked"] { --_radius: var(--ds-radius-md); --_edge: var(--ds-border); --_pad-y: var(--ds-space-3); --_pad-x: var(--ds-space-4); grid-template-areas: "icon body action" "progress progress progress"; grid-template-columns: auto minmax(0, 1fr) auto; font-size: var(--ds-text-sm); } .ds-toast[data-variant="retool-error-stacked"] .ds-toast__icon { inline-size: 20px; block-size: 20px; } .ds-toast[data-variant="retool-error-stacked"] .ds-toast__title { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); } .ds-toast[data-variant="retool-error-stacked"] .ds-toast__text { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); line-height: var(--ds-lh-prose); color: var(--ds-ink-code); } .ds-toast[data-variant="retool-error-stacked"] .ds-toast__action { grid-area: action; align-self: center; margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-decoration: none; } .ds-toast[data-variant="retool-error-stacked"] .ds-toast__action:hover { color: var(--ds-ink); text-decoration: underline; } .ds-toast[data-variant="descript-no-toast-update-in-place"] { position: static; display: inline-flex; align-items: center; gap: var(--ds-space-1-5); inline-size: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); overflow: visible; } .ds-toast[data-variant="descript-no-toast-update-in-place"] .ds-toast__icon { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-success); } .ds-toast[data-variant="descript-no-toast-update-in-place"] .ds-toast__text { color: inherit; } .ds-toast[data-variant="descript-no-toast-update-in-place"] .ds-toast__action { margin: 0; } .ds-toast[data-variant="origin-toast-as-illustration"] { --_radius: var(--ds-radius-md); --_edge: var(--ds-rule); --_fill: var(--ds-surface); --_pad-y: var(--ds-space-2); --_pad-x: var(--ds-space-3); inline-size: min(302px, 100%); min-block-size: 52px; align-items: center; overflow: visible; pointer-events: none; } .ds-toast[data-variant="origin-toast-as-illustration"]::after { content: ""; position: absolute; inset: var(--ds-space-2) var(--ds-space-3) calc(-1 * var(--ds-space-1-5)); z-index: -1; border-radius: inherit; background: var(--_fill); border: var(--ds-border-width) solid var(--_edge); } .ds-toast[data-variant="origin-toast-as-illustration"] .ds-toast__icon { inline-size: var(--ds-control-h-sm); block-size: var(--ds-control-h-sm); border-radius: var(--ds-radius-pill); background: var(--ds-data-3-tint); color: var(--ds-data-3-ink); } .ds-toast[data-variant="origin-toast-as-illustration"] .ds-toast__icon svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-toast[data-variant="origin-toast-as-illustration"] .ds-toast__title { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); } .ds-toast[data-variant="origin-toast-as-illustration"] .ds-toast__text { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-data-3-ink); } .ds-hero { --_max: var(--ds-container-max); --_inset: clamp(var(--ds-space-4), 4.2vw, var(--ds-space-16)); --_stack: var(--ds-space-6); --_title-size: var(--ds-text-display-fluid, clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 3vw), calc(var(--ds-text-display) * 1.4))); --_title-max: 16ch; --_lede-max: 40ch; --_visual-gap: clamp(var(--ds-space-10), 6vw, var(--ds-space-24)); --_peek: clamp(220px, 30vw, 420px); --_fade: var(--ds-mock-fade); --_frame-radius: var(--ds-media-radius); --_lane-pitch: 2.6; position: relative; isolation: isolate; padding-block-start: var(--ds-section-gap); color: var(--ds-ink); font-family: var(--ds-font-sans); min-width: 0; } .ds-hero svg[fill="none"] { fill: none; stroke: currentColor; } .ds-hero__inner { position: relative; width: 100%; max-width: var(--_max); margin-inline: auto; padding-inline: var(--ds-gutter-page); min-width: 0; } .ds-hero__copy { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: var(--_stack); min-width: 0; } .ds-hero__copy > * { min-width: 0; max-width: 100%; } .ds-hero[data-align="center"] .ds-hero__copy { align-items: center; text-align: center; margin-inline: auto; } .ds-hero[data-align="center"] .ds-hero__works-list { justify-content: center; } .ds-hero[data-align="center"] .ds-hero__actions { justify-content: center; align-items: center; } .ds-hero[data-align="center"] .ds-hero__proof { margin: 0; margin-block-start: var(--ds-space-1); } .ds-hero__pill { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: calc(var(--ds-control-h-sm) - var(--ds-space-2)); padding-inline: var(--ds-space-3); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-decoration: none; transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-hero__pill:hover, .ds-hero__pill[data-state="hover"] { border-color: var(--ds-border-strong); color: var(--ds-ink); } .ds-hero__pill-glyph { color: var(--ds-ink-muted); } .ds-hero__pill[data-tone="accent"] { background: var(--ds-accent-tint); border-color: color-mix(in srgb, var(--ds-accent) 35%, transparent); color: var(--ds-accent-ink); } .ds-hero__pill[data-tone="accent"]:hover, .ds-hero__pill[data-tone="accent"][data-state="hover"] { border-color: var(--ds-accent); color: var(--ds-accent-ink); } .ds-hero__pill[data-tone="accent"] .ds-hero__pill-glyph { color: inherit; opacity: .7; } .ds-hero__works { display: flex; flex-direction: column; gap: var(--ds-space-2); align-items: inherit; } .ds-hero__works-list { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; } .ds-hero__works-slot { position: relative; inline-size: var(--ds-tap-target-min); flex: none; } .ds-hero__works-caption, .ds-hero__eyebrow { margin: 0; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); max-width: 60ch; } .ds-hero__title { margin: 0; max-width: var(--_title-max); font-family: var(--ds-font-display); font-size: var(--_title-size); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); color: var(--ds-ink); text-wrap: balance; } .ds-hero__lede { margin: 0; max-width: var(--_lede-max); font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); color: var(--ds-ink-muted); text-wrap: pretty; } .ds-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); min-width: 0; } .ds-hero__actions > * { max-width: 100%; } .ds-hero__proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-1) var(--ds-space-2); margin: 0; margin-block-start: calc(var(--ds-space-5) - var(--_stack)); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-hero__aphorism { margin: 0; font-family: var(--ds-font-body-alt); font-style: italic; font-size: var(--ds-text-2xl); line-height: var(--ds-lh-heading); color: var(--ds-ink-2); max-width: 24ch; } .ds-hero__cite { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-text-sm); font-style: italic; color: var(--ds-ink-muted); } .ds-hero__support { display: flex; flex-direction: column; gap: var(--ds-space-5); min-width: 0; } .ds-hero__support-text { margin: 0; font-family: var(--ds-font-body-alt); font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); max-width: 45ch; } .ds-hero__lane { margin: 0; padding: 0; list-style: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: .04em; text-transform: uppercase; line-height: var(--_lane-pitch); color: var(--ds-ink); } .ds-hero__spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ds-space-4); margin: 0; font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); line-height: 2.2; font-variant-numeric: tabular-nums; } .ds-hero__spec-key { color: var(--ds-ink-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .ds-hero__spec-value { margin: 0; color: var(--ds-ink); overflow-wrap: anywhere; } .ds-hero__band { display: grid; grid-template-columns: minmax(0, 1fr); border-block: var(--ds-border-width) solid var(--ds-rule); min-width: 0; } .ds-hero__cell { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6) var(--_inset); min-width: 0; } .ds-hero__cell + .ds-hero__cell { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-hero__cell[data-cell="title"] { --_title-max: 18ch; } .ds-hero__cell[data-cell="cta"] { justify-content: flex-end; align-items: flex-start; } .ds-hero__strip { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-6); margin: 0; padding: var(--ds-space-2) var(--_inset); list-style: none; border-block-end: var(--ds-border-width) solid var(--ds-rule); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; text-transform: uppercase; line-height: var(--ds-lh-list); color: var(--ds-ink-muted); } .ds-hero__strip-item { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-width: 0; } .ds-hero__strip-item::before { content: ""; inline-size: var(--ds-space-1-5); block-size: var(--ds-space-1-5); border: var(--ds-border-width) solid var(--ds-rule-strong); flex: none; } .ds-hero__strip[data-markers="none"] { border-block-end: 0; padding-block: 0; } .ds-hero__strip[data-markers="none"] .ds-hero__strip-item::before { display: none; } .ds-hero__visual { position: relative; margin-block-start: var(--_visual-gap); min-width: 0; } .ds-hero[aria-busy="true"] :is(.ds-hero__title, .ds-hero__lede, .ds-hero__eyebrow, .ds-hero__support-text), .ds-hero[aria-busy="true"] :is(.ds-hero__title, .ds-hero__lede) * { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ds-hero__mark { position: absolute; inline-size: var(--ds-space-1-5); block-size: var(--ds-space-1-5); background: var(--ds-accent); pointer-events: none; } .ds-hero__mark[data-corner="tl"] { inset-block-start: 0; inset-inline-start: var(--ds-space-2); } .ds-hero__mark[data-corner="tr"] { inset-block-start: 0; inset-inline-end: var(--ds-space-2); } .ds-hero__mark[data-corner="bl"] { inset-block-end: 0; inset-inline-start: var(--ds-space-2); } .ds-hero__mark[data-corner="br"] { inset-block-end: 0; inset-inline-end: var(--ds-space-2); } .ds-hero__join { position: absolute; inset-block-start: -5px; width: 9px; height: 9px; display: none; pointer-events: none; background: linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) center / 100% 1px no-repeat, linear-gradient(var(--ds-rule-strong), var(--ds-rule-strong)) center / 1px 100% no-repeat; } .ds-hero__join[data-side="start"] { inset-inline-start: -5px; } .ds-hero__join[data-side="end"] { inset-inline-end: -5px; } @media (min-width: 768px) { .ds-hero:not([data-variant]) .ds-hero__inner, .ds-hero[data-variant="jstov"] .ds-hero__inner { padding-inline: 0; } } .ds-hero:not([data-variant]) .ds-hero__band, .ds-hero[data-variant="jstov"] .ds-hero__band { --_title-max: 18ch; } .ds-hero:not([data-variant]) .ds-hero__figure, .ds-hero[data-variant="jstov"] .ds-hero:not([data-variant]) .ds-hero__visual, .ds-hero[data-variant="jstov"] .ds-hero__visual { margin-block-start: 0; padding-block-start: var(--ds-space-2); height: calc(var(--_peek) + var(--ds-space-2)); max-width: var(--_max); margin-inline: auto; } .ds-hero:not([data-variant]), .ds-hero[data-variant="jstov"] { overflow-x: clip; } .ds-hero[data-variant="vercel-annotated-split"] { --_title-size: clamp(var(--ds-text-3xl), 5.2vw, calc(var(--ds-text-display) * 1.5)); --_title-max: 12ch; --_stack: var(--ds-space-8); } .ds-hero[data-variant="vercel-annotated-split"] .ds-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-10); align-items: center; } .ds-hero[data-variant="vercel-annotated-split"] .ds-hero__visual { margin: 0; display: grid; place-items: center; min-height: 240px; } .ds-hero[data-variant="vercel-annotated-split"] .ds-hero__visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, var(--ds-illustration-ground), transparent); pointer-events: none; } .ds-hero[data-variant="vercel-annotated-split"] .ds-hero__visual svg { inline-size: clamp(96px, 30%, 200px); color: var(--ds-ink); } .ds-hero[data-variant="intercom-split-editorial-8-4"] { --_title-max: 22ch; } .ds-hero[data-variant="intercom-split-editorial-8-4"] .ds-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-8); align-items: start; padding-block: var(--ds-space-6); } .ds-hero[data-variant="intercom-split-editorial-8-4"] .ds-hero__support-text a { color: var(--ds-ink); } .ds-hero[data-variant="attio-headline-over-floating-product-window"] { overflow: hidden; --_title-max: 18ch; } .ds-hero[data-variant="attio-headline-over-floating-product-window"] .ds-hero__copy { align-items: center; text-align: center; margin-inline: auto; } .ds-hero[data-variant="attio-headline-over-floating-product-window"] .ds-hero__actions { justify-content: center; } .ds-hero[data-variant="attio-headline-over-floating-product-window"] .ds-hero__visual { margin-block-start: 0; padding-block-start: var(--_visual-gap); padding-inline: var(--ds-gutter-page); height: calc(var(--_peek) + var(--_visual-gap)); background: linear-gradient(to bottom, transparent, var(--ds-illustration-ground)); } .ds-hero[data-variant="attio-headline-over-floating-product-window"] .ds-hero__visual::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, var(--ds-texture-color) 0 1px, transparent 1px 14px); -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 75%); mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 75%); pointer-events: none; } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] { overflow: hidden; --_stack: var(--ds-space-5); --_title-max: 12ch; --_lede-max: 38ch; --_title-size: clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 2.4vw), calc(var(--ds-text-display) * 1.3)); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-10); align-items: start; padding-block-end: var(--ds-space-12); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__title { font-weight: var(--ds-weight-bold); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__lede { font-size: var(--ds-text-md); color: var(--ds-ink-2); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__aphorism { color: var(--ds-accent-ink); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__visual { margin: 0; padding: var(--ds-space-6); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__visual::before { content: ""; position: absolute; inset: 10% -30% -10%; z-index: -1; background: repeating-linear-gradient(to right, var(--ds-texture-color) 0 1px, transparent 1px 40px), repeating-linear-gradient(to bottom, var(--ds-texture-color) 0 1px, transparent 1px 40px); transform: perspective(720px) rotateX(58deg); transform-origin: 50% 0; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 30%, var(--ds-ink) 80%, transparent); mask-image: linear-gradient(to bottom, transparent, var(--ds-ink) 30%, var(--ds-ink) 80%, transparent); pointer-events: none; } .ds-hero[data-variant="synara-painted-copy-safe-zone"] { padding-block-start: 0; overflow: hidden; --_stack: var(--ds-space-8); --_lede-max: 45ch; } .ds-hero__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(60% 90% at 84% 62%, var(--ds-texture-color), transparent 70%), radial-gradient(40% 50% at 70% 20%, var(--ds-texture-color), transparent 70%), var(--ds-illustration-ground); } .ds-hero__backdrop > :is(img, picture, svg, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; } .ds-hero[data-variant="synara-painted-copy-safe-zone"] .ds-hero__inner { padding-block-start: var(--ds-space-16); } .ds-hero[data-variant="synara-painted-copy-safe-zone"] .ds-hero__visual { margin-block-start: var(--ds-space-12); } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] { padding-block-start: 0; } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__inner { padding-inline: 0; } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__band { border-block-start: 0; } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__title { font-weight: var(--ds-weight-bold); --_title-max: 22ch; } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__cell[data-cell="support"] { padding-block-end: 0; gap: var(--ds-space-5); } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__cell[data-cell="support"] > .ds-carousel { margin-block-start: auto; margin-inline: calc(-1 * var(--_inset)); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__support-text { font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); color: var(--ds-ink-2); } .ds-hero[data-variant="givingli-collection-spotlight-slab"] { padding-block-start: var(--ds-space-6); } .ds-hero__slab { --_slab-h: clamp(200px, 22vw, 320px); --_hue-tint: var(--ds-data-1-tint); --_hue-ink: var(--ds-data-1-ink); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: var(--_slab-h); padding: var(--ds-space-6); border-radius: var(--ds-radius-xl); background: var(--_hue-tint); color: var(--_hue-ink); overflow: hidden; min-width: 0; } .ds-hero__slab[data-hue="2"] { --_hue-tint: var(--ds-data-2-tint); --_hue-ink: var(--ds-data-2-ink); } .ds-hero__slab[data-hue="3"] { --_hue-tint: var(--ds-data-3-tint); --_hue-ink: var(--ds-data-3-ink); } .ds-hero__slab[data-hue="6"] { --_hue-tint: var(--ds-data-6-tint); --_hue-ink: var(--ds-data-6-ink); } .ds-hero__slab[data-hue="7"] { --_hue-tint: var(--ds-data-7-tint); --_hue-ink: var(--ds-data-7-ink); } .ds-hero__slab-title { align-self: end; margin: 0; font-family: var(--ds-font-display); font-size: clamp(var(--ds-text-2xl), calc(var(--ds-text-lg) + 2vw), var(--ds-text-display)); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); color: inherit; max-width: 16ch; text-wrap: balance; } .ds-hero__cluster { display: none; position: absolute; inset-block: var(--ds-space-6) auto; inset-inline-end: var(--ds-space-16); gap: 0; list-style: none; margin: 0; padding: 0; } .ds-hero__cluster-item { inline-size: 96px; aspect-ratio: 5 / 7; margin-inline-start: calc(-1 * var(--ds-space-8)); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-sm); background: var(--ds-surface); box-shadow: var(--ds-shadow-object); display: grid; place-items: center; color: var(--ds-ink-muted); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); } .ds-hero__cluster-item:nth-child(1) { transform: rotate(-8deg); } .ds-hero__cluster-item:nth-child(3) { transform: rotate(8deg) translateY(var(--ds-space-2)); } .ds-hero__pager { position: absolute; inset-block-end: var(--ds-space-4); inset-inline-end: var(--ds-space-4); display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: var(--ds-space-0-5); border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; } .ds-hero__pager-btn { display: grid; place-items: center; inline-size: var(--ds-control-h-sm); block-size: calc(var(--ds-control-h-sm) - var(--ds-space-2)); border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-hero__pager-btn svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-hero__pager-btn:hover, .ds-hero__pager-btn[data-state="hover"] { background: var(--ds-surface-inverse-hover); } .ds-hero__pager-btn:disabled { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-hero__pager-count { padding-inline: var(--ds-space-1); } .ds-hero[data-variant="braintrust-onboarding-hero"] { padding-block-start: var(--ds-space-6); --_title-size: var(--ds-text-display); } .ds-hero__greeting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-4) var(--ds-space-6); min-height: var(--ds-control-h-lg); margin-block-end: var(--ds-space-8); } .ds-hero__greeting-title { margin: 0; font-family: var(--ds-font-display); font-size: var(--_title-size); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); } .ds-hero__kpi { display: inline-flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; } .ds-hero__kpi-label { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); } .ds-hero__kpi-rule { inline-size: var(--ds-border-width); block-size: var(--ds-control-h-sm); background: var(--ds-rule-strong); } .ds-hero__kpi-value { font-family: var(--ds-font-mono); font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; color: var(--ds-ink); } .ds-hero__welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-6); padding: var(--ds-space-6); background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); border-radius: var(--ds-radius-lg); min-width: 0; } .ds-hero__welcome-intro { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; max-width: 32ch; } .ds-hero__welcome-intro > .ds-hero__eyebrow { font-family: var(--ds-font-sans); text-transform: none; letter-spacing: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); } .ds-hero__welcome-brand { margin: 0; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-heading); } .ds-hero__welcome-body { margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); color: var(--ds-ink-2); } @media (min-width: 768px) { .ds-hero:not([data-variant]) .ds-hero__inner, .ds-hero[data-variant="jstov"] .ds-hero__inner, .ds-hero[data-variant="heron-hero-visual-sheet-plus-split-headline-band"] .ds-hero__inner { border-inline: var(--ds-border-width) solid var(--ds-rule); } .ds-hero:not([data-variant]) .ds-hero__join, .ds-hero[data-variant="jstov"] .ds-hero__join { display: block; } .ds-hero__cluster { display: flex; } .ds-hero[data-variant="synara-painted-copy-safe-zone"] .ds-hero__copy { max-width: var(--_copy-max, 58%); } } @media (min-width: 1024px) { .ds-hero__band { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto; } .ds-hero__cell + .ds-hero__cell { border-block-start: 0; border-inline-start: var(--ds-border-width) solid var(--ds-rule); } .ds-hero__cell[data-cell="cta"] { min-inline-size: 12rem; } .ds-hero[data-variant="vercel-annotated-split"] .ds-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--ds-space-8); min-height: 60vh; } .ds-hero[data-variant="vercel-annotated-split"] .ds-hero__lane { align-self: center; } .ds-hero[data-variant="intercom-split-editorial-8-4"] .ds-hero__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--ds-space-12); } .ds-hero[data-variant="fibery-split-4-8-screenshot-on-grid"] .ds-hero__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--ds-space-12); } .ds-hero__welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; } } @media (prefers-reduced-motion: reduce) { .ds-hero__cluster-item { transform: none; } } .ds-billing-period-selector { --_gap: var(--ds-space-4); position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--_gap); min-width: 0; } .ds-billing-period-selector[data-align="end"] { justify-content: flex-end; } .ds-billing-period-selector__incentive { margin: 0; font-size: var(--ds-text-md); color: var(--ds-ink-muted); } .ds-billing-period-selector__incentive b { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } .ds-billing-period-selector__control { display: inline-flex; min-width: 0; } .ds-billing-period-selector__hint { flex-basis: 100%; margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-billing-period-selector[data-align="end"] .ds-billing-period-selector__hint { text-align: end; } .ds-billing-period-selector[data-variant="jasper-incentive-outside-control"] .ds-billing-period-selector__incentive b { color: var(--ds-accent-ink); } .ds-billing-period-selector[aria-busy="true"] .ds-billing-period-selector__incentive { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); } .ds-billing-period-selector__options { display: flex; flex-direction: column; gap: var(--ds-space-2); margin: 0; padding: 0; border: 0; min-width: 0; flex: 1 1 100%; } .ds-billing-period-selector__option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); cursor: pointer; font-size: var(--ds-text-sm); } .ds-billing-period-selector__option:hover { background: var(--ds-hover-bg); } .ds-billing-period-selector__option:has(input:checked) { border-color: var(--ds-border-selected); background: var(--ds-selected-bg); } .ds-billing-period-selector__option:has(input:focus-visible) { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-billing-period-selector__option input { margin: 0; accent-color: var(--ds-ink); } .ds-billing-period-selector__option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ds-billing-period-selector__option-title { font-weight: var(--ds-weight-semibold); } .ds-billing-period-selector__option-price { color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; } .ds-billing-period-selector__option-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; font-weight: var(--ds-weight-medium); } .ds-billing-period-selector__option-save { padding: 0 var(--ds-space-1-5); border-radius: var(--ds-radius-pill); background: var(--ds-success-tint); color: var(--ds-success-ink); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); white-space: nowrap; } .ds-billing-period-selector__option-save:empty { display: none; } .ds-billing-period-selector[data-variant="cosmos-option-cards"] .ds-billing-period-selector__option { grid-template-columns: minmax(0, 1fr) auto auto; border-radius: var(--ds-radius-lg); } .ds-billing-period-selector[data-variant="cosmos-option-cards"] .ds-billing-period-selector__option input { order: 9; width: 18px; height: 18px; } .ds-billing-period-selector[data-variant="cosmos-option-cards"] .ds-billing-period-selector__option-title { order: -1; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); color: var(--ds-ink-muted); } .ds-billing-period-selector[data-variant="cosmos-option-cards"] .ds-billing-period-selector__option-price { color: var(--ds-ink); font-size: var(--ds-text-md); } .ds-billing-period-selector[data-variant="cosmos-option-cards"] .ds-billing-period-selector__option-total b { display: none; } .ds-billing-period-selector[data-variant="proton-radio-rows"] .ds-billing-period-selector__option-total b { color: var(--ds-accent-ink); } .ds-billing-period-selector[data-variant="proton-radio-rows"] .ds-billing-period-selector__option-save { background: none; padding: 0; } .ds-billing-period-selector[data-variant="descript-side-by-side"] .ds-billing-period-selector__options { flex-direction: row; } .ds-billing-period-selector[data-variant="descript-side-by-side"] .ds-billing-period-selector__option { flex: 1; grid-template-columns: minmax(0, 1fr); } .ds-billing-period-selector[data-variant="descript-side-by-side"] .ds-billing-period-selector__option input { position: absolute; opacity: 0; } .ds-billing-period-selector[data-variant="descript-side-by-side"] .ds-billing-period-selector__option-total { display: none; } .ds-billing-period-selector[data-variant="descript-side-by-side"] .ds-billing-period-selector__option-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--ds-space-2); } .ds-billing-period-selector[data-variant="descript-side-by-side"] .ds-billing-period-selector__option-price { flex-basis: 100%; } .ds-billing-period-selector:is([data-variant="savee-pill-with-save-line"], [data-variant="clickup-segmented-corner"]) .ds-billing-period-selector__options { flex-direction: row; flex: 0 0 auto; gap: 0; padding: 3px; border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); } .ds-billing-period-selector:is([data-variant="savee-pill-with-save-line"], [data-variant="clickup-segmented-corner"]) .ds-billing-period-selector__option { grid-template-columns: minmax(0, 1fr); padding: var(--ds-space-1) var(--ds-space-4); border: 0; border-radius: var(--ds-radius-pill); background: transparent; box-shadow: none; } .ds-billing-period-selector[data-variant="savee-pill-with-save-line"] .ds-billing-period-selector__option:has(input:checked) { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); } .ds-billing-period-selector[data-variant="clickup-segmented-corner"] .ds-billing-period-selector__option:has(input:checked) { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); box-shadow: var(--ds-shadow-lip); } .ds-billing-period-selector:is([data-variant="savee-pill-with-save-line"], [data-variant="clickup-segmented-corner"]) .ds-billing-period-selector__option input { position: absolute; opacity: 0; } .ds-billing-period-selector:is([data-variant="savee-pill-with-save-line"], [data-variant="clickup-segmented-corner"]) :is(.ds-billing-period-selector__option-price, .ds-billing-period-selector__option-total) { display: none; } .ds-billing-period-selector[data-variant="savee-pill-with-save-line"] { flex-direction: column; justify-content: center; } .ds-billing-period-selector[data-variant="clickup-segmented-corner"] { justify-content: flex-end; } .ds-billing-period-selector[data-variant="clickup-segmented-corner"] .ds-billing-period-selector__option { border-radius: var(--ds-radius-sm); padding-block: 2px; font-size: var(--ds-text-xs); } .ds-billing-period-selector[data-variant="clickup-segmented-corner"] .ds-billing-period-selector__options { border-radius: var(--ds-radius-sm); } .ds-billing-period-selector[data-variant="clickup-segmented-corner"] .ds-billing-period-selector__option-save, .ds-billing-period-selector[data-variant="clickup-segmented-corner"] .ds-billing-period-selector__incentive { display: none; } [data-toc-target] { scroll-margin-block-start: calc(var(--ds-topbar-h) + var(--ds-space-12)); } .ds-toc { --_top: 0px; position: sticky; inset-block-start: var(--_top); z-index: var(--ds-z-sticky); min-width: 0; margin-block: var(--ds-space-4); font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); color: var(--ds-ink-2); } .ds-toc__details { position: relative; min-width: 0; } .ds-toc__summary { position: relative; display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-h-lg); padding: 0 var(--ds-space-4); list-style: none; cursor: pointer; background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: hidden; -webkit-tap-highlight-color: transparent; } .ds-toc__summary::-webkit-details-marker { display: none; } .ds-toc__summary::marker { content: ""; } .ds-toc__summary:hover { background: var(--ds-surface-hover); } .ds-toc__summary:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-toc__title { flex: none; font-weight: var(--ds-weight-medium); color: var(--ds-ink); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } .ds-toc__current { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink-muted); } .ds-toc__current:empty { display: none; } .ds-toc__summary::after { content: ""; flex: none; margin-inline-start: auto; width: 0.5em; height: 0.5em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-toc__details[open] > .ds-toc__summary::after { transform: translateY(0.1em) rotate(-135deg); } .ds-toc__bar { position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; background: var(--ds-rule-soft); } .ds-toc__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--_progress, 0) * 100%); background: var(--ds-primary-fill); } .ds-toc__panel { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--ds-space-1)); max-height: min(60vh, 28rem); overflow: auto; overscroll-behavior: contain; padding: var(--ds-space-2); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-float); } .ds-toc__meter { display: none; } .ds-toc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-space-0-5); } .ds-toc__item { min-width: 0; } .ds-toc__item[data-level="3"] .ds-toc__link { padding-inline-start: var(--ds-space-7); } .ds-toc__link { position: relative; display: block; padding: var(--ds-space-2) var(--ds-space-3); min-height: var(--ds-size-h); color: var(--ds-ink-2); text-decoration: none; border-radius: var(--ds-radius-sm); overflow-wrap: anywhere; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-toc__link:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-toc__link:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-toc__link[aria-current] { color: var(--ds-selected-ink); background: var(--ds-selected-bg); font-weight: var(--ds-selected-weight); } .ds-toc__link[aria-current]::before { content: ""; position: absolute; inset-block: var(--ds-space-1); inset-inline-start: 0; width: 2px; border-radius: var(--ds-radius-pill); background: var(--ds-primary-fill); } .ds-toc-layout { display: block; } .ds-toc-layout > * { min-width: 0; } @media (min-width: 1100px) { .ds-toc-layout { --_col: 15rem; --_gap: var(--ds-space-12); display: grid; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); grid-template-columns: minmax(0, 1fr) var(--_col); column-gap: var(--_gap); align-items: start; } .ds-toc-layout > * { grid-column: 1; } .ds-toc-layout > .ds-toc { grid-column: 2; grid-row: 1 / span 99; align-self: start; } .ds-toc-layout[data-side="start"] { grid-template-columns: var(--_col) minmax(0, 1fr); } .ds-toc-layout[data-side="start"] > * { grid-column: 2; } .ds-toc-layout[data-side="start"] > .ds-toc { grid-column: 1; } .ds-toc { --_top: var(--ds-space-6); margin-block: 0; max-height: calc(100vh - var(--_top) - var(--ds-space-6)); overflow: auto; } .ds-toc__summary { min-height: 0; padding: 0 0 var(--ds-space-3); background: transparent; border: 0; border-radius: 0; overflow: visible; } .ds-toc__summary:hover { background: transparent; } .ds-toc__title { font-size: var(--ds-text-xs); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking-upper); } .ds-toc__current, .ds-toc__bar, .ds-toc__summary::after { display: none; } .ds-toc[data-enhanced] .ds-toc__summary { pointer-events: none; cursor: default; } .ds-toc__panel { position: relative; inset: auto; max-height: none; overflow: visible; padding: 0 0 0 var(--ds-space-3); background: transparent; border: 0; border-radius: 0; box-shadow: none; } .ds-toc__meter { display: block; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: var(--ds-rule-soft); border-radius: var(--ds-radius-pill); } .ds-toc__fill { position: absolute; inset-inline: 0; inset-block-start: 0; height: calc(var(--_progress, 0) * 100%); background: var(--ds-primary-fill); border-radius: var(--ds-radius-pill); } .ds-toc__link { min-height: 0; padding: var(--ds-space-1-5) var(--ds-space-2); } .ds-toc__item[data-level="3"] .ds-toc__link { padding-inline-start: var(--ds-space-5); } .ds-toc__link[aria-current]::before { display: none; } } @media (prefers-reduced-motion: reduce) { .ds-toc__summary::after, .ds-toc__link { transition: none; } } .ds-back-to-top { --_size: var(--ds-control-h-lg); --_inset: var(--ds-space-4); --_clear: 0px; --_position: fixed; --_z: var(--ds-z-sticky); position: var(--_position); inset-block-end: calc(var(--_inset) + var(--_clear) + env(safe-area-inset-bottom, 0px)); inset-inline-end: calc(var(--_inset) + env(safe-area-inset-right, 0px)); z-index: var(--_z); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-width: var(--_size); height: var(--_size); padding: 0; font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: 1; color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border-strong); border-radius: var(--ds-radius-pill); box-shadow: var(--ds-shadow-float); cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 1; transform: none; visibility: visible; transition: opacity var(--ds-dur-base) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-standard), visibility 0s linear 0s; } .ds-back-to-top[hidden] { display: none; } .ds-back-to-top[data-state="hidden"] { opacity: 0; transform: translateY(var(--ds-space-2)); visibility: hidden; pointer-events: none; transition: opacity var(--ds-dur-base) var(--ds-ease-in), transform var(--ds-dur-base) var(--ds-ease-in), visibility 0s linear var(--ds-dur-base); } @media (max-width: 759px) { .ds-back-to-top[data-bottom-nav] { --_clear: var(--ds-topbar-h); } } .ds-back-to-top__glyph, .ds-back-to-top > svg { width: var(--ds-icon-size-row); height: var(--ds-icon-size-row); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-back-to-top__label { white-space: nowrap; } .ds-back-to-top[data-variant="labelled"] { padding-inline: var(--ds-space-4) var(--ds-space-5); } .ds-back-to-top:hover { background: var(--ds-surface-hover); box-shadow: var(--ds-shadow-float), var(--ds-hover-shadow); } .ds-back-to-top:active { background: var(--ds-surface-pressed); } .ds-back-to-top:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } @media (prefers-reduced-motion: reduce) { .ds-back-to-top, .ds-back-to-top[data-state="hidden"] { transform: none; transition: none; } } .ds-back-to-top__link { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); color: var(--ds-ink-link); text-decoration: underline; text-underline-offset: 0.2em; border-radius: var(--ds-radius-sm); } .ds-back-to-top__link svg { display: inline-block; width: var(--ds-icon-size); height: var(--ds-icon-size); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-back-to-top__link:hover { color: var(--ds-ink); } .ds-back-to-top__link:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-sec-atlas-pricing-services { padding-block: var(--ds-section-gap); background: var(--ds-ground); color: var(--ds-ink); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__inner { width: 100%; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); display: grid; gap: var(--ds-space-8); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--ds-space-8); align-items: end; } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__header > div { min-width: 0; display: grid; gap: var(--ds-space-3); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__eyebrow { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__title { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); max-width: 25ch; text-wrap: balance; } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__intro { min-width: 0; font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); max-width: 50ch; } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-6); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item { min-width: 0; display: flex; flex-direction: column; align-items: start; gap: var(--ds-space-4); padding: var(--ds-card-pad); border: var(--ds-border-width) solid var(--ds-card-border); border-radius: var(--ds-radius-lg); background: var(--ds-card-bg); box-shadow: var(--ds-card-shadow); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__label { font-size: var(--ds-text-xs); font-family: var(--ds-font-label); color: var(--ds-ink-muted); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item h3 { font-size: var(--ds-text-xl); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__price { display: grid; gap: var(--ds-space-2); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__price > span:first-child { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-heading); font-variant-numeric: var(--ds-numeric); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__price > span:last-child { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item > p:not([class]) { font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item dl { display: grid; gap: var(--ds-space-4); padding-block: var(--ds-space-4); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item dl > div { display: grid; gap: var(--ds-space-2); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item dt { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); font-family: var(--ds-font-label); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__item dd { font-size: var(--ds-text-sm); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__action { width: 100%; margin-block-start: auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-3); min-block-size: max(var(--ds-control-h-lg), var(--ds-tap-target-min)); padding: var(--ds-space-3) var(--ds-control-pad-x); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-button); background: transparent; color: var(--ds-ink); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-align: center; text-decoration: none; transition: background var(--ds-dur-fast) var(--ds-ease-standard); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__action:hover { background: var(--ds-hover-bg); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__primary-action { background: var(--ds-primary-fill); color: var(--ds-ink-on-primary); border-color: var(--ds-primary-border); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__primary-action:hover { background: var(--ds-primary-fill-hover); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__action:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__note { font-size: var(--ds-text-xs); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); max-width: var(--ds-measure); } @media (max-width: 760px) { .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__header, .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__items { grid-template-columns: minmax(0, 1fr); } .ds-sec-atlas-pricing-services .ds-sec-atlas-pricing-services__header { gap: var(--ds-space-4); } } .ds-sec-atlas-services-grid { padding-block: var(--ds-section-gap); background: var(--ds-ground); color: var(--ds-ink); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__inner { width: 100%; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); display: grid; gap: var(--ds-space-8); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__header { display: grid; gap: var(--ds-space-3); max-width: var(--ds-container-prose); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__eyebrow { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__title { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-heading-weight); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); text-wrap: balance; max-width: 30ch; } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__intro { font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); max-width: 60ch; } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--ds-space-4); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__item { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-card-pad); background: var(--ds-card-bg); border: 1px solid var(--ds-card-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-card-shadow); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__number { color: var(--ds-ink-muted); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__name { font-size: var(--ds-text-xl); font-weight: var(--ds-heading-weight); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); text-wrap: balance; } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__description { font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__outputs { margin-block-start: auto; display: grid; gap: var(--ds-space-2); padding-block-start: var(--ds-space-4); border-block-start: 1px solid var(--ds-rule); color: var(--ds-ink-2); font-size: var(--ds-text-sm); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__outputs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-2); } .ds-sec-atlas-services-grid .ds-sec-atlas-services-grid__outputs li::before { content: "—"; color: var(--ds-ink-muted); } .ds-sec-atlas-process-steps { padding-block: var(--ds-section-gap); background: var(--ds-ground); color: var(--ds-ink); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__inner { width: 100%; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); display: grid; gap: var(--ds-space-8); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--ds-space-8); align-items: end; } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__header > div { min-width: 0; display: grid; gap: var(--ds-space-3); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__eyebrow { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__title { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-heading-weight); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); text-wrap: balance; max-width: 24ch; } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__intro { min-width: 0; color: var(--ds-ink-2); font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); max-width: 45ch; } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-6); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__item { min-width: 0; display: flex; flex-direction: column; align-items: start; gap: var(--ds-space-4); padding-block-start: var(--ds-space-6); border-block-start: 1px solid var(--ds-rule-strong); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__number { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__name { font-size: var(--ds-text-lg); font-weight: var(--ds-heading-weight); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__item > p { font-size: var(--ds-text-sm); color: var(--ds-ink-2); line-height: var(--ds-lh-prose); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__item > .ds-sec-atlas-process-steps__output { width: 100%; display: grid; gap: var(--ds-space-2); margin-block-start: auto; padding-block-start: var(--ds-space-4); font-weight: var(--ds-weight-medium); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__output > span { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } @media (max-width: 900px) { .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__header, .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__items { grid-template-columns: minmax(0, 1fr); } .ds-sec-atlas-process-steps .ds-sec-atlas-process-steps__header { gap: var(--ds-space-4); } } .ds-sec-atlas-faq-grouped { padding-block: var(--ds-section-gap); background: var(--ds-ground); color: var(--ds-ink); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__inner { width: 100%; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); display: grid; gap: var(--ds-space-8); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__header { display: grid; gap: var(--ds-space-3); max-width: var(--ds-container-prose); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__eyebrow { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__title { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); max-width: 28ch; text-wrap: balance; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__intro { font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); max-width: 62ch; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-10); align-items: start; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__group { min-width: 0; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__group > h3 { font-size: var(--ds-text-lg); font-weight: var(--ds-heading-weight); line-height: var(--ds-lh-heading); letter-spacing: var(--ds-heading-tracking); padding-block-end: var(--ds-space-4); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item:last-child { border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-4); min-block-size: var(--ds-tap-target-min); padding: var(--ds-space-4) var(--ds-space-2); list-style: none; font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-body); color: var(--ds-ink); cursor: pointer; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item summary::-webkit-details-marker { display: none; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item summary:hover { background: var(--ds-hover-bg); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item summary:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__indicator { flex: 0 0 auto; font-size: var(--ds-text-xl); color: var(--ds-ink-muted); font-family: var(--ds-font-mono); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__indicator > span:last-child { display: none; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item[open] .ds-sec-atlas-faq-grouped__indicator > span:first-child { display: none; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__item[open] .ds-sec-atlas-faq-grouped__indicator > span:last-child { display: inline; } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__answer { padding: 0 var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-text-sm); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); } .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__note { font-size: var(--ds-text-xs); line-height: var(--ds-lh-body); color: var(--ds-ink-muted); max-width: var(--ds-measure); } @media (max-width: 760px) { .ds-sec-atlas-faq-grouped .ds-sec-atlas-faq-grouped__groups { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-8); } }