/* MarketFrame dashboard: design-system bc86844 (tokens/base.css, tokens/themes/marketframe-terminal.css, components/_base.css, components/nav-item/nav-item.css, components/search-input/search-input.css, components/breadcrumb/breadcrumb.css, components/global-search/global-search.css, components/sidebar-nav-panel/sidebar-nav-panel.css, components/top-bar/top-bar.css, components/accordion/accordion.css, components/app-shell/app-shell.css, components/card/card.css, components/data-table/data-table.css, components/stat/stat.css, components/status-badge/status-badge.css, components/text-link/text-link.css, components/button-secondary/button-secondary.css, components/button-primary/button-primary.css, components/text-input/text-input.css). Generated by scripts/build-dash-css.mjs; do not edit. */ /* tokens/base.css */ :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; } } /* tokens/themes/marketframe-terminal.css */ [data-theme="marketframe-terminal"], [data-theme="marketframe-terminal"] [data-mode="light"] { color-scheme: dark; --ds-ground: #070a13; --ds-ground-2: #0a0f1a; --ds-surface: #0e1320; --ds-surface-2: #151b28; --ds-surface-3: #1c2231; --ds-surface-raised: #151b28; --ds-surface-hover: #131826; --ds-surface-pressed: #171d2b; --ds-surface-selected: #1d2639; --ds-surface-inverse: #f2f4f8; --ds-surface-inverse-hover: #dfe4ee; --ds-skeleton: #1a202e; --ds-scrim: rgba(0, 0, 0, .60); --ds-ink: #ffffff; --ds-ink-2: #e4e9f1; --ds-ink-muted: #a2adc3; --ds-ink-faint: #566176; --ds-ink-inverse: #070a13; --ds-ink-on-primary: #070a13; --ds-ink-on-accent: #070a13; --ds-ink-code: #e4e9f1; --ds-rule-faint: #111622; --ds-rule-soft: #181d2a; --ds-rule: #212736; --ds-rule-strong: #2f3646; --ds-border: #2a3141; --ds-border-strong: #434c60; --ds-primary-fill: #ffffff; --ds-primary-fill-hover: #dfe4ee; --ds-accent: #ffffff; --ds-accent-hover: #dfe4ee; --ds-accent-ink: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-accent-soft: rgba(255, 255, 255, .40); --ds-accent-2: #e4e9f1; --ds-accent-2-ink: #ffffff; --ds-accent-2-tint: rgba(255, 255, 255, .08); --ds-success: #2bd4bd; --ds-success-tint: #0f332f; --ds-success-ink: #62daca; --ds-danger: #f15f5f; --ds-danger-tint: #3f1818; --ds-danger-ink: #f98b8b; --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: #2bd4bd; --ds-data-3-tint: #0f332f; --ds-data-3-ink: #62daca; --ds-data-primary: #b5c9e3; --ds-data-4: #f15f5f; --ds-data-4-tint: #3f1818; --ds-data-4-ink: #f98b8b; --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: #ffffff; --ds-chart-ramp-2: #a2adc3; --ds-chart-ramp-3: #566176; --ds-shadow-lift: 0 0 0 0 transparent; --ds-shadow-card: 0 0 0 0 transparent; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-modal: 0 32px 96px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-object: 0 8px 24px rgba(0, 0, 0, .60); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(14, 19, 32, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #0e1320; --ds-radius-scale: 0; --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "IBM Plex Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; --ds-font-label: var(--ds-font-mono); --ds-text-base: 14px; --ds-display-weight: 500; --ds-display-tracking: -0.03em; --ds-heading-weight: 500; --ds-label-case: uppercase; --ds-label-tracking-upper: .06em; --ds-label-tracking: var(--ds-label-tracking-upper); --ds-space-unit: 4px; --ds-density-scale: 1; --ds-section-gap-units: 16; --ds-container-max: 1464px; --ds-card-bg: var(--ds-ground); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; --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); --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; } :where([data-theme="marketframe-terminal"]) :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-bg: var(--ds-ground); } [data-theme="marketframe-terminal"][data-mode="dark"], [data-theme="marketframe-terminal"] [data-mode="dark"], [data-theme="marketframe-terminal"] [data-band="dark"] { color-scheme: dark; --ds-ground: #04070d; --ds-ground-2: #070a13; --ds-surface: #0e1320; --ds-surface-2: #151b28; --ds-surface-3: #1c2231; --ds-surface-raised: #151b28; --ds-surface-hover: #131826; --ds-surface-pressed: #171d2b; --ds-surface-selected: #1d2639; --ds-surface-inverse: #f2f4f8; --ds-scrim: rgba(0, 0, 0, .60); --ds-surface-inverse-hover: #dfe4ee; --ds-skeleton: #1a202e; --ds-rule-faint: #111622; --ds-ink: #ffffff; --ds-ink-2: #e4e9f1; --ds-ink-muted: #a2adc3; --ds-ink-faint: #566176; --ds-ink-inverse: #070a13; --ds-ink-on-primary: #070a13; --ds-ink-on-accent: #070a13; --ds-ink-code: #e4e9f1; --ds-rule-soft: #181d2a; --ds-rule: #212736; --ds-rule-strong: #2f3646; --ds-border: #2a3141; --ds-border-strong: #434c60; --ds-primary-fill: #ffffff; --ds-primary-fill-hover: #dfe4ee; --ds-accent: #ffffff; --ds-accent-hover: #dfe4ee; --ds-accent-ink: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-accent-soft: rgba(255, 255, 255, .40); --ds-accent-2: #e4e9f1; --ds-accent-2-ink: #ffffff; --ds-accent-2-tint: rgba(255, 255, 255, .08); --ds-success: #2bd4bd; --ds-success-tint: #0f332f; --ds-success-ink: #62daca; --ds-danger: #f15f5f; --ds-danger-tint: #3f1818; --ds-danger-ink: #f98b8b; --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: #2bd4bd; --ds-data-3-tint: #0f332f; --ds-data-3-ink: #62daca; --ds-data-primary: #b5c9e3; --ds-data-4: #f15f5f; --ds-data-4-tint: #3f1818; --ds-data-4-ink: #f98b8b; --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: #ffffff; --ds-chart-ramp-2: #a2adc3; --ds-chart-ramp-3: #566176; --ds-shadow-lift: 0 0 0 0 transparent; --ds-shadow-card: 0 0 0 0 transparent; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-modal: 0 32px 96px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-object: 0 8px 24px rgba(0, 0, 0, .60); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(14, 19, 32, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #0e1320; } @media (prefers-color-scheme: dark) { :root[data-theme="marketframe-terminal"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="marketframe-terminal"]:not([data-mode="light"]) { color-scheme: dark; --ds-ground: #04070d; --ds-ground-2: #070a13; --ds-surface: #0e1320; --ds-surface-2: #151b28; --ds-surface-3: #1c2231; --ds-surface-raised: #151b28; --ds-surface-hover: #131826; --ds-surface-pressed: #171d2b; --ds-surface-selected: #1d2639; --ds-surface-inverse: #f2f4f8; --ds-scrim: rgba(0, 0, 0, .60); --ds-surface-inverse-hover: #dfe4ee; --ds-skeleton: #1a202e; --ds-rule-faint: #111622; --ds-ink: #ffffff; --ds-ink-2: #e4e9f1; --ds-ink-muted: #a2adc3; --ds-ink-faint: #566176; --ds-ink-inverse: #070a13; --ds-ink-on-primary: #070a13; --ds-ink-on-accent: #070a13; --ds-ink-code: #e4e9f1; --ds-rule-soft: #181d2a; --ds-rule: #212736; --ds-rule-strong: #2f3646; --ds-border: #2a3141; --ds-border-strong: #434c60; --ds-primary-fill: #ffffff; --ds-primary-fill-hover: #dfe4ee; --ds-accent: #ffffff; --ds-accent-hover: #dfe4ee; --ds-accent-ink: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-accent-soft: rgba(255, 255, 255, .40); --ds-accent-2: #e4e9f1; --ds-accent-2-ink: #ffffff; --ds-accent-2-tint: rgba(255, 255, 255, .08); --ds-success: #2bd4bd; --ds-success-tint: #0f332f; --ds-success-ink: #62daca; --ds-danger: #f15f5f; --ds-danger-tint: #3f1818; --ds-danger-ink: #f98b8b; --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: #2bd4bd; --ds-data-3-tint: #0f332f; --ds-data-3-ink: #62daca; --ds-data-primary: #b5c9e3; --ds-data-4: #f15f5f; --ds-data-4-tint: #3f1818; --ds-data-4-ink: #f98b8b; --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: #ffffff; --ds-chart-ramp-2: #a2adc3; --ds-chart-ramp-3: #566176; --ds-shadow-lift: 0 0 0 0 transparent; --ds-shadow-card: 0 0 0 0 transparent; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-modal: 0 32px 96px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-object: 0 8px 24px rgba(0, 0, 0, .60); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(14, 19, 32, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #0e1320; } } /* components/_base.css */ *, *::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); } /* components/nav-item/nav-item.css */ .ds-nav-item { --_pad-x: var(--ds-space-2); --_gap: var(--ds-space-2); --_icon: var(--ds-icon-size-row); --_radius: var(--ds-radius-sm); --_level: 0; --_indent: var(--ds-space-4); --_bar-w: 3px; position: relative; display: flex; align-items: center; gap: var(--_gap); width: 100%; min-height: var(--ds-size-h); padding-block: 0; padding-inline: calc(var(--_pad-x) + var(--_level) * var(--_indent)) var(--_pad-x); border: 0; border-radius: var(--_radius); background: transparent; color: var(--ds-ink-2); font-family: var(--ds-font-sans); font-size: var(--ds-size-text); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); text-align: start; text-decoration: none; text-transform: var(--ds-control-case); cursor: pointer; user-select: none; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard); } .ds-nav-item:hover { text-decoration: none; } .ds-nav-item__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--_icon); height: var(--_icon); color: inherit; font-size: calc(var(--_icon) * .8); line-height: 1; } .ds-nav-item__icon > svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-nav-item__icon[data-kind="square"] { border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); } .ds-nav-item__icon[data-kind="avatar"] { 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); overflow: hidden; } .ds-nav-item__icon[data-kind="avatar"] > img { width: 100%; height: 100%; object-fit: cover; } .ds-nav-item__icon:empty { visibility: hidden; } .ds-nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-nav-item__meta { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); font-size: var(--ds-text-sm); } .ds-nav-item__trailing { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-1); margin-inline-start: auto; color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-nav-item__count { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; color: var(--ds-ink-muted); } .ds-nav-item__value { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-nav-item__dot { width: 8px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-accent); } .ds-nav-item__dot[data-tone="danger"] { background: var(--ds-danger); } .ds-nav-item__tag { padding-inline: var(--ds-space-2); 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-medium); line-height: 1.6; } .ds-nav-item__tag[data-tone="accent"] { background: var(--ds-accent-tint); color: var(--ds-accent-ink); } .ds-nav-item__chevron, .ds-nav-item__add, .ds-nav-item__lock, .ds-nav-item__bookmark, .ds-nav-item__external { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-nav-item__chevron > svg, .ds-nav-item__add > svg, .ds-nav-item__lock > svg, .ds-nav-item__bookmark > svg, .ds-nav-item__external > svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-nav-item__chevron { transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-nav-item[aria-expanded="true"] .ds-nav-item__chevron { transform: rotate(90deg); } .ds-nav-item__add[data-kind="button"] { width: 24px; height: 24px; border-radius: var(--ds-radius-xs); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); color: var(--ds-ink-2); } .ds-nav-item__actions { display: inline-flex; gap: var(--ds-space-0-5); opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-standard); } .ds-nav-item:hover .ds-nav-item__actions, .ds-nav-item:focus-within .ds-nav-item__actions, .ds-nav-item[data-state="hover"] .ds-nav-item__actions { opacity: 1; } .ds-nav-item__actions > button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); } .ds-nav-item__actions > button:hover { background: var(--ds-surface-3); color: var(--ds-ink); } .ds-nav-item__actions > button > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-nav-item:hover, .ds-nav-item[data-state="hover"] { background: var(--ds-hover-bg); box-shadow: var(--ds-hover-shadow); color: var(--ds-ink); } .ds-nav-item:active { background: var(--ds-surface-pressed, var(--ds-surface-3)); } .ds-nav-item[aria-current="page"], .ds-nav-item[aria-current="true"], .ds-nav-item[aria-selected="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); box-shadow: none; } [data-selection="bar"] .ds-nav-item[aria-current="page"]::before, [data-selection="bar"] .ds-nav-item[aria-current="true"]::before, [data-selection="bar"] .ds-nav-item[aria-selected="true"]::before { content: ""; position: absolute; inset-block: var(--ds-space-2); inset-inline-start: 0; width: var(--_bar-w); border-radius: var(--ds-radius-pill); background: var(--ds-selected-line); } [data-selection="underline"] .ds-nav-item[aria-current="page"]::after, [data-selection="underline"] .ds-nav-item[aria-current="true"]::after, [data-selection="underline"] .ds-nav-item[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--_pad-x); inset-block-end: 0; height: 2px; background: var(--ds-selected-line); } .ds-nav-item:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); border-radius: var(--_radius); } .ds-nav-item:disabled, .ds-nav-item[aria-disabled="true"] { color: var(--ds-ink-faint); background: transparent; box-shadow: none; cursor: not-allowed; pointer-events: none; } .ds-nav-item[data-state="locked"] { color: var(--ds-ink-muted); } .ds-nav-item[data-state="locked"] .ds-nav-item__lock { color: var(--ds-ink-muted); } .ds-nav-item[data-kind="add"] { color: var(--ds-ink-muted); font-weight: var(--ds-weight-regular); } .ds-nav-item[data-kind="add"]:hover { color: var(--ds-ink); } .ds-nav-item[aria-busy="true"] { pointer-events: none; } .ds-nav-item__skeleton { display: block; flex: 1 1 auto; height: calc(var(--ds-size-text) * .9); max-width: 60%; border-radius: var(--ds-radius-xs); background: var(--ds-rule-strong); animation: ds-nav-item-pulse var(--ds-dur-slow) var(--ds-ease-standard) infinite alternate; } .ds-nav-item[aria-busy="true"] .ds-nav-item__icon { border-radius: var(--ds-radius-xs); background: var(--ds-rule-strong); color: transparent; visibility: visible; } @keyframes ds-nav-item-pulse { from { opacity: 1; } to { opacity: .55; } } .ds-nav-item[data-variant="tint-pill"] { font-weight: var(--ds-weight-regular); } .ds-nav-item[data-variant="tint-pill"][aria-current="page"], .ds-nav-item[data-variant="tint-pill"][aria-current="true"], .ds-nav-item[data-variant="tint-pill"][aria-selected="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); font-weight: var(--ds-weight-regular); } .ds-nav-item[data-variant="tint-pill"][data-icon="static"] .ds-nav-item__icon { color: var(--ds-ink-muted); } .ds-nav-item[data-variant="tint-pill-plus-weight"] { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-nav-item[data-variant="tint-pill-plus-weight"] .ds-nav-item__icon { color: var(--ds-ink-faint); } .ds-nav-item[data-variant="tint-pill-plus-weight"]:hover .ds-nav-item__icon { color: inherit; } .ds-nav-item[data-variant="tint-pill-plus-weight"][aria-current="page"], .ds-nav-item[data-variant="tint-pill-plus-weight"][aria-current="true"], .ds-nav-item[data-variant="tint-pill-plus-weight"][aria-selected="true"] { background: var(--ds-surface-selected); color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } .ds-nav-item[data-variant="tint-pill-plus-weight"][aria-current] .ds-nav-item__icon, .ds-nav-item[data-variant="tint-pill-plus-weight"][aria-selected="true"] .ds-nav-item__icon { color: inherit; } .ds-nav-item[data-variant="tint-plus-accent"] { font-weight: var(--ds-weight-regular); } .ds-nav-item[data-variant="tint-plus-accent"][aria-current="page"], .ds-nav-item[data-variant="tint-plus-accent"][aria-current="true"], .ds-nav-item[data-variant="tint-plus-accent"][aria-selected="true"] { background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: var(--ds-weight-semibold); } .ds-nav-item[data-variant="tint-plus-accent"][aria-current="page"]::before, .ds-nav-item[data-variant="tint-plus-accent"][aria-current="true"]::before, .ds-nav-item[data-variant="tint-plus-accent"][aria-selected="true"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--_bar-w); border-radius: var(--_radius) 0 0 var(--_radius); background: var(--ds-accent-line); } .ds-nav-item[data-variant="tint-plus-accent"][data-bar="none"]::before { display: none; } .ds-nav-item[data-variant="tint-plus-accent"][aria-current] .ds-nav-item__bookmark { color: var(--ds-accent-ink); } .ds-nav-item[data-variant="full-width-band"] { --_radius: 0; font-weight: var(--ds-weight-regular); margin-inline: calc(-1 * var(--_bleed, 0px)); width: calc(100% + 2 * var(--_bleed, 0px)); padding-inline: calc(var(--_bleed, 0px) + var(--_pad-x)); } .ds-nav-item[data-variant="full-width-band"][aria-current="page"], .ds-nav-item[data-variant="full-width-band"][aria-current="true"], .ds-nav-item[data-variant="full-width-band"][aria-selected="true"] { background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: var(--ds-weight-regular); } .ds-nav-item[data-variant="edge-bar"] { --_radius: 0; font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-nav-item[data-variant="edge-bar"]:hover { background: transparent; color: var(--ds-ink); } .ds-nav-item[data-variant="edge-bar"][aria-current="page"], .ds-nav-item[data-variant="edge-bar"][aria-current="true"], .ds-nav-item[data-variant="edge-bar"][aria-selected="true"] { background: transparent; color: var(--ds-ink); font-weight: var(--ds-weight-bold); } .ds-nav-item[data-variant="edge-bar"][aria-current] .ds-nav-item__icon > svg, .ds-nav-item[data-variant="edge-bar"][aria-selected="true"] .ds-nav-item__icon > svg { fill: currentColor; } .ds-nav-item[data-variant="edge-bar"][aria-current="page"]::after, .ds-nav-item[data-variant="edge-bar"][aria-current="true"]::after, .ds-nav-item[data-variant="edge-bar"][aria-selected="true"]::after { content: ""; position: absolute; inset-inline-end: calc(-1 * var(--_bleed, 0px)); top: 50%; width: 5px; height: 40px; transform: translateY(-50%); border-radius: var(--ds-radius-xs) 0 0 var(--ds-radius-xs); background: var(--ds-ink); } .ds-nav-item[data-variant="gradient-text-bracket"] { --_radius: 0; font-weight: var(--ds-weight-bold); margin-inline: calc(-1 * var(--_bleed, 0px)); width: calc(100% + 2 * var(--_bleed, 0px)); padding-inline: calc(var(--_bleed, 0px) + var(--_pad-x)); } .ds-nav-item[data-variant="gradient-text-bracket"]:hover { background: transparent; } .ds-nav-item[data-variant="gradient-text-bracket"]::before, .ds-nav-item[data-variant="gradient-text-bracket"]::after { content: ""; position: absolute; inset-inline: 0; height: var(--ds-border-width); background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)); } .ds-nav-item[data-variant="gradient-text-bracket"]::before { inset-block-start: 0; } .ds-nav-item[data-variant="gradient-text-bracket"]::after { inset-block-end: 0; } .ds-nav-item[data-variant="gradient-text-bracket"] .ds-nav-item__label { background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ds-nav-item[data-variant="gradient-text-bracket"] .ds-nav-item__trailing { color: var(--ds-accent-2); } .ds-nav-item[data-variant="gradient-text-bracket"][aria-current="page"], .ds-nav-item[data-variant="gradient-text-bracket"][aria-current="true"] { background: transparent; } .ds-nav-item[data-variant="weight-only"] { font-weight: var(--ds-weight-regular); color: var(--ds-ink-2); } .ds-nav-item[data-variant="weight-only"]:hover { background: transparent; color: var(--ds-ink); } .ds-nav-item[data-variant="weight-only"][aria-current="page"], .ds-nav-item[data-variant="weight-only"][aria-current="true"], .ds-nav-item[data-variant="weight-only"][aria-selected="true"] { background: transparent; color: var(--ds-ink); font-weight: var(--ds-weight-bold); } .ds-nav-item-list { display: flex; flex-direction: column; gap: var(--_row-gap, var(--ds-space-1)); list-style: none; margin: 0; padding: 0; min-width: 0; } .ds-nav-item-list > li { min-width: 0; display: flex; } /* components/search-input/search-input.css */ .ds-search-input { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); --_radius: var(--ds-radius-button); --_w: auto; --_icon: var(--ds-icon-size); --_border: var(--ds-border); --_text: var(--ds-size-text); 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(--_text); line-height: var(--ds-lh-list); color: var(--ds-ink); background: var(--ds-surface); border: var(--ds-border-width) solid var(--_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-search-input:hover { border-color: var(--ds-border-strong); } .ds-search-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-overflow: ellipsis; appearance: none; } .ds-search-input__control::placeholder { color: var(--ds-ink-muted); opacity: 1; } .ds-search-input__control::-webkit-search-decoration, .ds-search-input__control::-webkit-search-cancel-button, .ds-search-input__control::-webkit-search-results-button { appearance: none; display: none; } .ds-search-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-search-input__icon { flex: none; display: inline-flex; width: var(--_icon); height: var(--_icon); color: var(--ds-ink-muted); } .ds-search-input__icon svg, .ds-search-input__clear svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-search-input__clear { flex: none; 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-pill); color: var(--ds-ink-muted); cursor: pointer; } .ds-search-input__clear:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-search-input:has(> .ds-search-input__control:placeholder-shown) .ds-search-input__clear { display: none; } .ds-search-input__kbd { flex: none; margin-inline-end: calc(-1 * var(--ds-space-1)); padding: 0 var(--ds-space-1); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); line-height: calc(var(--ds-icon-size) + var(--ds-space-1)); color: var(--ds-ink-muted); background: var(--ds-surface-2); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); white-space: nowrap; } .ds-search-input__kbd[data-style="text"] { background: transparent; border-color: transparent; padding: 0; } .ds-search-input:has(> .ds-search-input__control:not(:placeholder-shown)) .ds-search-input__kbd { display: none; } .ds-search-input__message { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-search-input__message[data-tone="error"] { color: var(--ds-danger-ink); } @supports selector(:has(a)) { .ds-search-input__control:focus-visible { outline: none; } .ds-search-input:has(> .ds-search-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-search-input:has(> .ds-search-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-search-input:has(> .ds-search-input__control:disabled) .ds-search-input__control { cursor: not-allowed; } .ds-search-input:has(> .ds-search-input__control:disabled) .ds-search-input__control::placeholder, .ds-search-input:has(> .ds-search-input__control:disabled) :is(.ds-search-input__icon, .ds-search-input__kbd) { color: var(--ds-ink-faint); } .ds-search-input:has(> .ds-search-input__control[aria-invalid="true"]) { border-color: var(--ds-danger); } .ds-search-input:has(> .ds-search-input__control[aria-invalid="true"]:focus-visible) { border-color: var(--ds-danger); outline-color: var(--ds-danger); } } .ds-search-input[data-state="hover"] { border-color: var(--ds-border-strong); } .ds-search-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-search-input[data-state="error"] { border-color: var(--ds-danger); } .ds-search-input[aria-busy="true"] .ds-search-input__icon svg { display: none; } .ds-search-input[aria-busy="true"] .ds-search-input__icon::after { content: ""; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid var(--ds-rule); border-block-start-color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); animation: ds-search-input-spin calc(var(--ds-dur-slow) * 3) linear infinite; } @keyframes ds-search-input-spin { to { transform: rotate(360deg); } } .ds-search-input[data-size] { --_h: var(--ds-size-h); --_pad-x: var(--ds-size-pad-x); } .ds-search-input[data-variant="bordered-leading-icon"] { --_radius: var(--ds-radius-button); } .ds-search-input[data-variant="tint-pill"] { --_radius: var(--ds-radius-pill); --_pad-x: var(--ds-space-4); --_border: transparent; background: var(--ds-surface-2); } .ds-search-input[data-variant="tint-pill"]:hover { background: var(--ds-surface-hover); border-color: transparent; } .ds-search-input[data-variant="tint-pill"] .ds-search-input__kbd { background: var(--ds-surface); } .ds-search-input[data-variant="with-clear"] { --_h: calc(var(--ds-control-h-lg) + var(--ds-space-1)); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-md); --_icon: var(--ds-icon-size-row); --_w: 100%; --_text: var(--ds-text-lg); gap: var(--ds-space-3); } .ds-search-input[data-variant="with-clear"] .ds-search-input__clear { width: calc(var(--ds-icon-size-row) + var(--ds-space-1)); height: calc(var(--ds-icon-size-row) + var(--ds-space-1)); } .ds-search-input[data-variant="emoji-mart-filled"] { --_h: var(--ds-control-h-lg); --_pad-x: var(--ds-space-4); --_radius: var(--ds-radius-md); --_w: 100%; --_text: var(--ds-text-xl); --_icon: var(--ds-icon-size-row); --_border: transparent; background: var(--ds-surface-3); } .ds-search-input[data-variant="placeholder-at-ink-strength"] { --_radius: var(--ds-radius-pill); --_pad-x: var(--ds-space-4); --_h: calc(var(--ds-control-h) + var(--ds-space-1)); --_border: transparent; background: var(--ds-surface-2); } .ds-search-input[data-variant="placeholder-at-ink-strength"] .ds-search-input__control::placeholder { color: var(--ds-ink); } .ds-search-input[data-variant="placeholder-at-ink-strength"] .ds-search-input__icon { color: var(--ds-ink); } /* components/breadcrumb/breadcrumb.css */ .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); } /* components/global-search/global-search.css */ .ds-global-search svg[fill="none"] { fill: none; } .ds-global-search { --_max: 530px; --_h: var(--ds-size-h); --_radius: var(--ds-radius-sm); --_fill: var(--ds-surface); --_line: var(--ds-border); --_pad: var(--ds-size-pad-x); --_gap: var(--ds-space-2); position: relative; display: inline-flex; align-items: center; gap: var(--_gap); inline-size: 100%; max-inline-size: var(--_max); min-inline-size: 0; min-block-size: var(--_h); padding-inline: var(--_pad); margin: 0; font: inherit; font-size: var(--ds-size-text); line-height: var(--ds-lh-list); color: var(--ds-ink); background: var(--_fill); border: var(--ds-border-width) solid var(--_line); border-radius: var(--_radius); text-align: start; cursor: text; transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard); } button.ds-global-search { cursor: pointer; } .ds-global-search__icon { flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); color: var(--ds-ink-muted); } .ds-global-search__icon svg { inline-size: 100%; block-size: 100%; } .ds-global-search__field { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; outline: none; } .ds-global-search__field::-webkit-search-cancel-button, .ds-global-search__field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .ds-global-search__label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink-muted); } .ds-global-search__hint { flex: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: 0; color: var(--ds-ink-faint); white-space: nowrap; } .ds-global-search__kbd { flex: none; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 34px; block-size: 22px; padding-inline: var(--ds-space-1); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: 0; color: var(--ds-ink-muted); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); } .ds-global-search__ai, .ds-global-search__clear { flex: none; display: inline-grid; place-items: center; inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); margin-inline-end: calc(-1 * var(--ds-space-1)); padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); cursor: pointer; } .ds-global-search__ai svg, .ds-global-search__clear svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-global-search__ai { color: var(--ds-accent-2-ink); } .ds-global-search__ai:hover, .ds-global-search__clear:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-global-search__clear { display: none; } .ds-global-search[data-state="filled"] .ds-global-search__clear { display: inline-grid; } .ds-global-search[data-state="filled"] .ds-global-search__hint, .ds-global-search[data-state="filled"] .ds-global-search__kbd { display: none; } .ds-global-search:hover, .ds-global-search[data-state="hover"] { border-color: var(--ds-border-strong); } button.ds-global-search:hover, button.ds-global-search[data-state="hover"] { background: var(--ds-hover-bg); } .ds-global-search:focus-within, .ds-global-search:focus-visible, .ds-global-search[data-state="focus"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); border-color: var(--ds-ring); } .ds-global-search:focus-within .ds-global-search__hint, .ds-global-search[data-state="focus"] .ds-global-search__hint { visibility: hidden; } .ds-global-search[aria-expanded="true"] { border-color: var(--ds-ring); } .ds-global-search[aria-expanded="true"] .ds-global-search__icon { color: var(--ds-ink); } .ds-global-search:disabled, .ds-global-search[aria-disabled="true"], .ds-global-search:has(.ds-global-search__field:disabled) { background: var(--ds-surface-3); border-color: var(--ds-rule); color: var(--ds-ink-faint); cursor: not-allowed; } .ds-global-search:has(.ds-global-search__field:disabled) .ds-global-search__icon, .ds-global-search[aria-disabled="true"] .ds-global-search__icon, .ds-global-search[aria-disabled="true"] .ds-global-search__label, .ds-global-search:has(.ds-global-search__field:disabled) .ds-global-search__field::placeholder { color: var(--ds-ink-faint); } .ds-global-search__spinner { display: none; flex: none; inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); border-radius: var(--ds-radius-pill); border: 2px solid var(--ds-rule-strong); border-inline-start-color: var(--ds-ink); animation: ds-global-search-spin var(--ds-dur-slow) linear infinite; } .ds-global-search[aria-busy="true"] .ds-global-search__spinner { display: block; } .ds-global-search[aria-busy="true"] .ds-global-search__icon { display: none; } @keyframes ds-global-search-spin { to { transform: rotate(360deg); } } .ds-global-search[aria-invalid="true"] { border-color: var(--ds-danger); } .ds-global-search__error { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-danger-ink); } .ds-global-search[data-variant="descript-tint-pill"] { --_max: 870px; --_fill: var(--ds-surface-2); --_line: transparent; --_radius: var(--ds-radius-md); } .ds-global-search[data-variant="descript-tint-pill"]:hover { --_fill: var(--ds-surface-3); } .ds-global-search[data-variant="retool-kbd-in-field"] { --_fill: var(--ds-surface-2); --_line: var(--ds-rule); --_h: var(--ds-control-h-sm); --_pad: var(--ds-space-2); font-size: var(--ds-text-sm); } .ds-global-search[data-variant="clickup-shortcut-placeholder"] { --_max: 200px; --_radius: var(--ds-radius-pill); --_line: var(--ds-rule); --_h: var(--ds-control-h-sm); --_pad: var(--ds-space-3); font-size: var(--ds-text-sm); } .ds-global-search[data-variant="plane-scope-naming"] { --_max: 420px; --_h: var(--ds-control-h-sm); --_line: var(--ds-rule); } .ds-global-search[data-variant="manychat-centred-scope"] { --_max: 380px; } .ds-global-search[data-variant="v0-nav-row-trigger"] { --_max: 100%; --_fill: transparent; --_line: transparent; --_h: var(--ds-row-h); --_gap: var(--ds-space-3); --_radius: var(--ds-radius-sm); justify-content: flex-start; } .ds-global-search[data-variant="v0-nav-row-trigger"] .ds-global-search__icon { color: var(--ds-ink-2); } .ds-global-search[data-variant="v0-nav-row-trigger"] .ds-global-search__label { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); } .ds-global-search[data-variant="v0-nav-row-trigger"]:hover { --_fill: var(--ds-hover-bg); --_line: transparent; } .ds-global-search[data-variant="hsaj-kbd-chip"] { --_max: 300px; --_h: var(--ds-control-h-lg); --_radius: var(--ds-radius-md); --_pad: var(--ds-space-3); font-size: var(--ds-text-lg); } .ds-global-search[data-variant="perplexity-quiet-primary-with-keycaps"] { --_max: 260px; --_radius: var(--ds-radius-pill); --_fill: var(--ds-ground); --_line: var(--ds-border); --_gap: var(--ds-space-3); font-weight: var(--ds-weight-medium); } .ds-global-search[data-variant="perplexity-quiet-primary-with-keycaps"] .ds-global-search__label { color: var(--ds-ink); flex: 1 1 auto; } .ds-global-search[data-variant="perplexity-quiet-primary-with-keycaps"] .ds-global-search__kbd { min-inline-size: var(--ds-icon-size-rail); block-size: var(--ds-icon-size-rail); padding-inline: var(--ds-space-1); background: var(--ds-surface-2); border-color: var(--ds-rule); border-radius: var(--ds-radius-xs); } .ds-global-search[data-variant="perplexity-quiet-primary-with-keycaps"] .ds-global-search__kbd + .ds-global-search__kbd { margin-inline-start: var(--ds-space-1); } .ds-global-search[data-variant="confluence-fluid-darker-border"] { --_max: 100%; --_h: var(--ds-control-h-sm); --_line: var(--ds-border-strong); --_radius: var(--ds-radius-xs); } .ds-global-search[data-variant="confluence-fluid-darker-border"] .ds-global-search__icon { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); } .ds-global-search[data-variant="grammarly-single-dark-bordered"] { --_max: 356px; --_h: var(--ds-control-h-sm); --_line: var(--ds-border-strong); --_radius: var(--ds-radius-sm); } .ds-global-search[data-variant="grammarly-single-dark-bordered"]:not(:hover):not(:focus-within) { --_line: var(--ds-ink-muted); } [data-buttons="pill"] .ds-global-search:not([data-variant]) { --_radius: var(--ds-radius-button); } @media (max-width: 720px) { .ds-global-search { --_max: 100%; } .ds-global-search__hint { display: none; } } .ds-global-search[data-state="pressed"] { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); border-color: var(--ds-border-strong); } .ds-global-search[data-variant="jstov"] { --_max: 360px; --_fill: var(--ds-surface-2); --_line: transparent; } .ds-global-search[data-variant="jstov"] > .ds-kbd-hint { margin-inline-start: auto; } button.ds-global-search[data-variant="jstov"]:hover { --_fill: var(--ds-surface-3); } .ds-global-search[data-variant="linear-type-column"] { inline-size: var(--ds-control-h-sm); min-block-size: var(--ds-control-h-sm); padding: 0; justify-content: center; --_line: transparent; --_fill: transparent; } .ds-global-search[data-variant="linear-type-column"] :is(.ds-global-search__label, .ds-kbd-hint) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } button.ds-global-search[data-variant="linear-type-column"]:hover { --_fill: var(--ds-hover-bg); } .ds-global-search[data-variant="dash-rich-snippets"] { --_max: 240px; --_fill: var(--ds-surface-2); --_line: transparent; --_radius: var(--ds-radius-md); } .ds-global-search[data-variant="dash-rich-snippets"] .ds-global-search__label { color: var(--ds-ink); } .ds-global-search[data-variant="dash-rich-snippets"] > .ds-kbd-hint .ds-kbd-hint__key { border-color: transparent; background: transparent; box-shadow: none; } .ds-global-search[data-variant="digg-heading-pills"] { --_max: 360px; --_radius: var(--ds-radius-pill); } .ds-global-search[data-variant="digg-heading-pills"] > .ds-kbd-hint { display: none; } .ds-global-search-results { --_max: 880px; display: flex; flex-direction: column; gap: var(--ds-space-3); width: 100%; max-width: var(--_max); min-width: 0; color: var(--ds-ink); } .ds-global-search-results svg { fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ds-global-search-results__head { display: flex; align-items: center; gap: var(--ds-space-2); } .ds-global-search-results__back { display: none; flex: none; place-items: center; width: var(--ds-control-h); height: var(--ds-control-h); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink); } .ds-global-search-results__back svg { width: var(--ds-icon-size); height: var(--ds-icon-size); transform: scaleX(-1); } .ds-global-search-results__query { flex: 1 1 auto; display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; min-height: var(--ds-control-h-lg); 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-muted); } .ds-global-search-results__query:focus-within { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-border-width)); } .ds-global-search-results__query svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; } .ds-global-search-results__query input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--ds-ink); font: inherit; font-size: var(--ds-text-lg); outline: none; } .ds-global-search-results__query input:disabled { color: var(--ds-ink-faint); cursor: not-allowed; } .ds-global-search-results__clear { flex: none; display: inline-grid; place-items: center; width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); padding: 0; border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-ink-muted); font: inherit; cursor: pointer; } .ds-global-search-results__clear:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-global-search-results__title { margin: var(--ds-space-2) 0 0; 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-global-search-results__meta { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-global-search-results__scopes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); border-block-end: var(--ds-border-width) solid var(--ds-rule); } .ds-global-search-results__scope { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-1-5); min-height: var(--ds-control-h); padding-inline: var(--ds-space-3); border: 0; background: transparent; color: var(--ds-ink-muted); font: inherit; font-size: var(--ds-text-sm); cursor: pointer; } .ds-global-search-results__scope:hover { color: var(--ds-ink); } .ds-global-search-results__scope:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-global-search-results__scope[aria-selected="true"] { color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight); } .ds-global-search-results__scope[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--ds-space-2); inset-block-end: -1px; height: 2px; background: var(--ds-primary-fill); } .ds-global-search-results__count { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; } .ds-global-search-results__sort { margin-inline-start: auto; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-global-search-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ds-global-search-results__list > li + li { border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-global-search-results__row { display: grid; grid-template-columns: var(--ds-icon-size-rail) minmax(0, 1fr) auto; grid-template-areas: "icon body when"; align-items: start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-2); border-radius: var(--ds-radius-sm); color: inherit; text-decoration: none; } a.ds-global-search-results__row:hover { background: var(--ds-hover-bg); } a.ds-global-search-results__row:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: calc(-1 * var(--ds-ring-width)); } .ds-global-search-results__kind { display: none; grid-area: kind; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-global-search-results__icon { grid-area: icon; display: inline-grid; place-items: center; width: var(--ds-icon-size-rail); height: var(--ds-icon-size-rail); border-radius: var(--ds-radius-xs); background: var(--ds-surface-2); color: var(--ds-ink-muted); } .ds-global-search-results__icon svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-global-search-results__icon[data-kind="skeleton"] { background: var(--ds-skeleton); } .ds-global-search-results__initials { display: none; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); } .ds-global-search-results__body { grid-area: body; display: flex; flex-direction: column; gap: var(--ds-space-0-5); min-width: 0; } .ds-global-search-results__row-title { font-weight: var(--ds-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-global-search-results__snippet { font-size: var(--ds-text-sm); color: var(--ds-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-global-search-results__where { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-global-search-results__when { grid-area: when; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; } .ds-global-search-results__match { background: var(--ds-accent-tint); color: var(--ds-accent-ink); border-radius: var(--ds-radius-xs); } .ds-global-search-results__skeleton { display: block; height: var(--ds-space-3); width: var(--_w, 60%); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); animation: ds-gsr-pulse var(--ds-dur-slow) var(--ds-ease-standard) infinite alternate; } @keyframes ds-gsr-pulse { to { opacity: .5; } } .ds-global-search-results__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-3); border: var(--ds-border-width) dashed var(--ds-rule-strong); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-global-search-results__note[data-tone="offline"] { border-style: solid; border-color: transparent; background: var(--ds-warning-tint); color: var(--ds-warning-ink); } .ds-global-search-results__note svg { width: var(--ds-icon-size); height: var(--ds-icon-size); flex: none; } .ds-global-search-results__note > span { flex: 1 1 220px; min-width: 0; } .ds-global-search-results__note a, .ds-global-search-results__empty a { color: var(--ds-ink-link); } .ds-global-search-results__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-2); padding: var(--ds-space-8) var(--ds-space-6); border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); } .ds-global-search-results__empty-title { margin: 0; font-weight: var(--ds-weight-semibold); } .ds-global-search-results__empty-text { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-text-sm); } .ds-global-search-results__empty-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); padding-block-start: var(--ds-space-2); } .ds-global-search-results__suggest { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); 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); cursor: pointer; } .ds-global-search-results__suggest svg { width: var(--ds-icon-size); height: var(--ds-icon-size); } .ds-global-search-results__suggest:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-global-search-results__suggest:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } @media (max-width: 560px) { .ds-global-search-results__row { grid-template-columns: var(--ds-icon-size-rail) minmax(0, 1fr); grid-template-areas: "icon body"; } .ds-global-search-results__when, .ds-global-search-results__sort { display: none; } } .ds-global-search-results[data-variant="linear-type-column"] { gap: var(--ds-space-2); } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__query { border-color: transparent; border-block-end-color: var(--ds-rule); border-radius: 0; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__title { font-size: var(--ds-text-md); } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__scopes { border-block-end: 0; gap: var(--ds-space-1-5); } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__scope { min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2-5); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-pill); } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__scope[aria-selected="true"] { background: var(--ds-selected-bg); border-color: transparent; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__scope[aria-selected="true"]::after { content: none; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__list > li + li { border-block-start: 0; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__row { grid-template-columns: 88px var(--ds-icon-size) minmax(0, 1fr) auto; grid-template-areas: "kind icon body when"; align-items: center; padding-block: var(--ds-space-1-5); } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__kind { display: block; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__icon { width: var(--ds-icon-size); height: var(--ds-icon-size); background: transparent; } .ds-global-search-results[data-variant="linear-type-column"] :is(.ds-global-search-results__snippet, .ds-global-search-results__where) { display: none; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__match { background: transparent; color: inherit; font-weight: var(--ds-weight-bold); padding: 0; } @media (max-width: 560px) { .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__row { grid-template-columns: var(--ds-icon-size) minmax(0, 1fr); grid-template-areas: "icon body"; } .ds-global-search-results[data-variant="linear-type-column"] .ds-global-search-results__kind { display: none; } } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__query { min-height: calc(var(--ds-control-h-lg) + var(--ds-space-2)); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-card); } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__query > svg { display: none; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__title { display: none; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__scopes { border-block-end: 0; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__count { display: none; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__list > li + li { border-block-start: 0; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon body"; padding-block: var(--ds-space-4); } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__icon { width: 40px; height: 40px; border-radius: var(--ds-radius-sm); background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__icon svg { display: none; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__initials { display: inline; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__icon[data-kind="skeleton"] { background: var(--ds-skeleton); } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__when { display: none; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__snippet { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ds-global-search-results[data-variant="dash-rich-snippets"] .ds-global-search-results__match { background: transparent; color: inherit; font-weight: var(--ds-weight-bold); padding: 0; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__back { display: inline-grid; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__query { border-radius: var(--ds-radius-pill); min-height: var(--ds-control-h); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__query input { font-size: var(--ds-text-md); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__scopes { border-block-end: 0; gap: var(--ds-space-2); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__scope { min-height: var(--ds-control-h-sm); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__scope[aria-selected="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__scope[aria-selected="true"]::after { content: none; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__sort { display: none; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon body"; padding-block: var(--ds-space-4); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__icon { width: 40px; height: 40px; border-radius: var(--ds-radius-pill); background: var(--ds-data-4-tint); color: var(--ds-data-4-ink); } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__icon svg { display: none; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__initials { display: inline; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__icon[data-kind="skeleton"] { background: var(--ds-skeleton); } .ds-global-search-results[data-variant="digg-heading-pills"] :is(.ds-global-search-results__when, .ds-global-search-results__where) { display: none; } .ds-global-search-results[data-variant="digg-heading-pills"] .ds-global-search-results__match { background: transparent; color: inherit; padding: 0; } .ds-global-search-suggest { --_sg-max: 640px; --_sg-h: 420px; --_sg-pad: var(--ds-space-2); position: relative; display: block; inline-size: 100%; max-inline-size: var(--_sg-max); min-inline-size: 0; color: var(--ds-ink); } .ds-global-search-suggest svg[fill="none"] { fill: none; } .ds-global-search-suggest > .ds-global-search { max-inline-size: none; inline-size: 100%; } .ds-global-search-suggest__panel { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--ds-space-1)); z-index: var(--ds-z-dropdown); display: flex; flex-direction: column; min-inline-size: 0; max-block-size: var(--_sg-h); 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); overflow: hidden; } .ds-global-search-suggest[data-placement="inline"] > .ds-global-search-suggest__panel { position: static; margin-block-start: var(--ds-space-1); } .ds-global-search-suggest:has([role="combobox"][aria-expanded="false"]) > .ds-global-search-suggest__panel { display: none; } .ds-global-search-suggest__body { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; } .ds-global-search-suggest__list { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--_sg-pad); } .ds-global-search-suggest__scopes { display: flex; gap: var(--ds-space-1); margin: var(--_sg-pad) var(--_sg-pad) 0; padding: var(--ds-space-1); background: var(--ds-surface-2); border-radius: var(--ds-radius-md); overflow-x: auto; scrollbar-width: none; } .ds-global-search-suggest__scope { flex: 1 0 auto; min-block-size: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-muted); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); white-space: nowrap; cursor: pointer; } .ds-global-search-suggest__scope:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-global-search-suggest__scope[aria-pressed="true"] { background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-shadow-lift); } .ds-global-search-suggest__group + .ds-global-search-suggest__group { margin-block-start: var(--ds-space-2); } .ds-global-search-suggest__heading { display: flex; align-items: baseline; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-1); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-ink-muted); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); } .ds-global-search-suggest__count { font-weight: var(--ds-weight-regular); font-variant-numeric: tabular-nums; } .ds-global-search-suggest__all { margin-inline-start: auto; padding: 0 var(--ds-space-1); border-radius: var(--ds-radius-xs); color: var(--ds-ink-link); font-weight: var(--ds-weight-medium); text-decoration: none; white-space: nowrap; } .ds-global-search-suggest__all:hover { text-decoration: underline; text-underline-offset: .2em; } .ds-global-search-suggest__note { margin: 0; padding: 0 var(--ds-space-2) var(--ds-space-1); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-global-search-suggest__option { 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: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-sm); color: var(--ds-ink); font-size: var(--ds-text-md); line-height: var(--ds-lh-list); cursor: pointer; scroll-margin-block: var(--ds-space-2); } .ds-global-search-suggest__option:hover { background: var(--ds-hover-bg); } .ds-global-search-suggest__option[aria-selected="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); } .ds-global-search-suggest__option[aria-selected="true"] .ds-global-search-suggest__title { font-weight: var(--ds-selected-weight); } .ds-global-search-suggest__option[aria-disabled="true"] { color: var(--ds-ink-faint); cursor: not-allowed; background: transparent; } .ds-global-search-suggest__lead { 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-2); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); } .ds-global-search-suggest__lead svg { inline-size: var(--ds-icon-size); block-size: var(--ds-icon-size); } .ds-global-search-suggest__lead[data-kind="supplier"] { background: var(--ds-data-1-tint); color: var(--ds-data-1-ink); } .ds-global-search-suggest__lead[data-kind="council"] { background: var(--ds-data-2-tint); color: var(--ds-data-2-ink); } .ds-global-search-suggest__lead[data-kind="category"] { background: var(--ds-data-3-tint); color: var(--ds-data-3-ink); } .ds-global-search-suggest__main { min-inline-size: 0; display: flex; flex-direction: column; } .ds-global-search-suggest__title, .ds-global-search-suggest__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-global-search-suggest__sub { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-global-search-suggest__meta { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; color: var(--ds-ink-2); white-space: nowrap; } .ds-global-search-suggest__meta-note { font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-global-search-suggest__mark { padding: 0 1px; border-radius: var(--ds-radius-xs); background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: var(--ds-weight-semibold); } .ds-global-search-suggest__group[data-kind="family"] > .ds-global-search-suggest__options { margin-inline-start: var(--ds-space-4); padding-inline-start: var(--ds-space-2); border-inline-start: 2px solid var(--ds-rule-strong); } .ds-global-search-suggest__alias { align-self: flex-start; margin-block-start: 2px; padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-info-tint); color: var(--ds-info-ink); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); } .ds-global-search-suggest__foot { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); border-block-start: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-global-search-suggest__foot > :first-child { margin-inline-end: auto; } .ds-global-search-suggest__keys { display: inline-flex; align-items: center; gap: var(--ds-space-1); } .ds-global-search-suggest__key { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); background: var(--ds-surface); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-global-search-suggest__loading { display: none; padding: var(--_sg-pad); } .ds-global-search-suggest__panel[aria-busy="true"] .ds-global-search-suggest__loading { display: block; } .ds-global-search-suggest__panel[aria-busy="true"] :is(.ds-global-search-suggest__list, .ds-global-search-suggest__scopes) { display: none; } .ds-global-search-suggest__skel { display: grid; grid-template-columns: var(--ds-icon-size-rail) minmax(0, 1fr); column-gap: var(--ds-space-3); align-items: center; min-block-size: var(--ds-row-h); padding-inline: var(--ds-space-2); } .ds-global-search-suggest__bar { block-size: var(--ds-space-3); border-radius: var(--ds-radius-xs); background: var(--ds-skeleton); animation: ds-global-search-pulse calc(var(--ds-dur-slow) * 4) var(--ds-ease-standard) infinite alternate; } .ds-global-search-suggest__bar[data-shape="tile"] { block-size: var(--ds-icon-size-rail); } @keyframes ds-global-search-pulse { to { opacity: .45; } } .ds-global-search-suggest__empty { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); margin: var(--_sg-pad); padding: var(--ds-space-6) var(--ds-space-4); border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-sm); text-align: center; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-global-search-suggest__empty strong { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-md); overflow-wrap: anywhere; } .ds-global-search-suggest__empty a { color: var(--ds-ink-link); } .ds-global-search-suggest[data-variant="whop-grouped-counts"] .ds-global-search-suggest__mark { background: transparent; color: var(--ds-accent-ink); padding: 0; } .ds-global-search-suggest[data-variant="whop-grouped-counts"] .ds-global-search-suggest__group + .ds-global-search-suggest__group { border-block-start: var(--ds-border-width) solid var(--ds-rule-soft); padding-block-start: var(--ds-space-1); } .ds-global-search-suggest[data-variant="whop-grouped-counts"] .ds-global-search-suggest__lead { border-radius: var(--ds-radius-sm); } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] { --_sg-pad: var(--ds-space-3); } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] .ds-global-search-suggest__heading { text-transform: uppercase; letter-spacing: .06em; padding-inline: 0; } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] .ds-global-search-suggest__option { min-block-size: calc(var(--ds-row-h) + var(--ds-space-2)); padding-inline: var(--ds-space-1); } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] .ds-global-search-suggest__group + .ds-global-search-suggest__group { border-block-start: var(--ds-border-width) solid var(--ds-rule); padding-block-start: var(--ds-space-1); } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] .ds-global-search-suggest__mark { background: transparent; color: inherit; padding: 0; font-weight: var(--ds-weight-bold); } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] .ds-global-search-suggest__meta { align-items: flex-end; } .ds-global-search-suggest[data-variant="honeybook-entity-meta"] .ds-global-search-suggest__meta strong { padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink); font-weight: var(--ds-weight-semibold); } .ds-global-search-suggest[data-variant="customerio-split-preview"] { --_sg-max: 760px; --_sg-preview-w: 280px; } .ds-global-search-suggest[data-variant="customerio-split-preview"] .ds-global-search-suggest__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--_sg-preview-w); } .ds-global-search-suggest[data-variant="customerio-split-preview"] .ds-global-search-suggest__mark { background: transparent; color: inherit; padding: 0; font-weight: var(--ds-weight-bold); } .ds-global-search-suggest__preview { min-inline-size: 0; padding: var(--ds-space-4); overflow-y: auto; border-inline-start: var(--ds-border-width) solid var(--ds-rule); background: var(--ds-surface-2); } .ds-global-search-suggest__preview[hidden] { display: none; } .ds-global-search-suggest__preview-title { margin: 0 0 var(--ds-space-1); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-heading-tracking); overflow-wrap: anywhere; } .ds-global-search-suggest__preview-sub { margin: 0 0 var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-global-search-suggest__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-2) var(--ds-space-3); margin: 0; font-size: var(--ds-text-sm); } .ds-global-search-suggest__facts dt { color: var(--ds-ink-muted); } .ds-global-search-suggest__facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ds-global-search-suggest[data-variant="superhi-hero-card"] { --_sg-max: 720px; padding: var(--ds-space-3); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-rule); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-float); } .ds-global-search-suggest[data-variant="superhi-hero-card"] > .ds-global-search-suggest__panel { inset-inline: 0; } .ds-global-search-suggest__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-3); padding-inline: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } .ds-global-search-suggest__chip { display: inline-flex; align-items: center; min-block-size: 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-pill); background: transparent; color: var(--ds-ink); font: inherit; font-family: var(--ds-font-label); font-size: var(--ds-text-xs); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); text-decoration: none; cursor: pointer; } .ds-global-search-suggest__chip:hover { background: var(--ds-hover-bg); border-color: var(--ds-border-strong); } .ds-global-search[data-size="xl"] { --_h: calc(var(--ds-control-h-lg) * 1.4); --_pad: var(--ds-space-5); --_gap: var(--ds-space-3); --_radius: var(--ds-radius-lg); --_max: 720px; font-size: var(--ds-text-xl); } .ds-global-search[data-size="xl"] .ds-global-search__icon, .ds-global-search[data-size="xl"] .ds-global-search__spinner { inline-size: calc(var(--ds-icon-size) * 1.4); block-size: calc(var(--ds-icon-size) * 1.4); } .ds-global-search[data-size="xl"] .ds-global-search__clear, .ds-global-search[data-size="xl"] .ds-global-search__ai { inline-size: calc(var(--ds-icon-size-rail) * 1.4); block-size: calc(var(--ds-icon-size-rail) * 1.4); border-radius: var(--ds-radius-sm); } .ds-global-search[data-size="xl"] .ds-global-search__clear svg { inline-size: calc(var(--ds-icon-size) * 1.2); block-size: calc(var(--ds-icon-size) * 1.2); } .ds-global-search[data-size="xl"] .ds-global-search__hint { font-size: var(--ds-text-sm); } .ds-global-search__submit { flex: none; display: inline-grid; place-items: center; inline-size: calc(var(--_h) - var(--ds-space-4)); block-size: calc(var(--_h) - var(--ds-space-4)); margin-inline-end: calc(-1 * var(--_pad) / 2); padding: 0; 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); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-global-search__submit svg { inline-size: var(--ds-icon-size-row); block-size: var(--ds-icon-size-row); } .ds-global-search__submit:hover { background: var(--ds-primary-fill-hover); } .ds-global-search__submit:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-global-search__submit:disabled { background: var(--ds-surface-3); color: var(--ds-ink-faint); border-color: var(--ds-rule); cursor: not-allowed; } .ds-global-search[aria-busy="true"] .ds-global-search__submit { pointer-events: none; opacity: .7; } .ds-global-search[data-state="filled"], .ds-global-search:has(.ds-global-search__field[placeholder]:not(:placeholder-shown)) { border-color: var(--ds-border-strong); } .ds-global-search[data-state="filled"] .ds-global-search__icon, .ds-global-search:has(.ds-global-search__field[placeholder]:not(:placeholder-shown)) .ds-global-search__icon { color: var(--ds-ink); } .ds-global-search:has(.ds-global-search__field[placeholder]:not(:placeholder-shown)) .ds-global-search__clear { display: inline-grid; } .ds-global-search:has(.ds-global-search__field[placeholder]:not(:placeholder-shown)) :is(.ds-global-search__hint, .ds-global-search__kbd) { display: none; } .ds-global-search[data-state="filled"]:focus-within, .ds-global-search:has(.ds-global-search__field[placeholder]:not(:placeholder-shown)):focus-within { border-color: var(--ds-ring); } @media (max-width: 560px) { .ds-global-search-suggest[data-variant="customerio-split-preview"] .ds-global-search-suggest__body { grid-template-columns: minmax(0, 1fr); } .ds-global-search-suggest__preview { display: none; } .ds-global-search-suggest__foot .ds-global-search-suggest__keys:not(:last-child) { display: none; } .ds-global-search-suggest__option { column-gap: var(--ds-space-2); } .ds-global-search-suggest__meta-note { display: none; } .ds-global-search-suggest[data-variant="superhi-hero-card"] { padding: var(--ds-space-2); } .ds-global-search[data-size="xl"] { --_pad: var(--ds-space-3); font-size: var(--ds-text-lg); } } @media (prefers-reduced-motion: reduce) { .ds-global-search-suggest__bar { animation: none; } } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] { --_sg-max: 720px; } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] > .ds-global-search { --_fill: var(--ds-surface-2); --_line: transparent; --_radius: var(--ds-radius-pill); } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] > .ds-global-search:hover { --_fill: var(--ds-surface-3); } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] > .ds-global-search:focus-within { --_fill: var(--ds-surface); } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] > .ds-global-search-suggest__scopes { margin: 0 0 var(--ds-space-3); padding: 0; background: transparent; gap: var(--ds-space-2); flex-wrap: wrap; overflow: visible; } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] .ds-global-search-suggest__scope { flex: 0 0 auto; border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-4); } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] .ds-global-search-suggest__scope[aria-pressed="true"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); box-shadow: none; font-weight: var(--ds-selected-weight); } .ds-global-search-suggest[data-variant="dribbble-scope-tabs"] .ds-global-search-suggest__popular { padding-inline: var(--ds-space-2); } .ds-global-search-suggest[data-variant="vercel-hero-live-dropdown"] { --_sg-max: 720px; --_sg-h: 420px; } .ds-global-search-suggest[data-variant="vercel-hero-live-dropdown"] > .ds-global-search { --_radius: var(--ds-radius-md); } .ds-global-search-suggest[data-variant="vercel-hero-live-dropdown"] > .ds-global-search-suggest__panel { border-radius: var(--ds-radius-lg); } .ds-global-search-suggest[data-variant="vercel-hero-live-dropdown"] .ds-global-search-suggest__mark { background: transparent; color: inherit; padding: 0; font-weight: var(--ds-weight-bold); } .ds-global-search-suggest__hero-head { max-inline-size: 720px; margin: 0 0 var(--ds-space-4); text-align: center; } .ds-global-search-suggest__hero-title { margin: 0; font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight, 1.15); } .ds-global-search-suggest__hero-copy { margin: var(--ds-space-2) 0 0; color: var(--ds-ink-muted); font-size: var(--ds-text-md); } @media (max-width: 560px) { .ds-global-search-suggest__hero-title { font-size: var(--ds-text-2xl); } } /* components/sidebar-nav-panel/sidebar-nav-panel.css */ .ds-sidebar-nav-panel { --_w: calc(var(--ds-sidebar-w) + (var(--ds-space-unit) - 4px) * 16); --_pad: var(--ds-space-3); --_bg: var(--ds-ground); --_rule: var(--ds-rule); --_row-gap: var(--ds-space-1); --_group-gap: var(--ds-space-6); display: flex; flex-direction: column; width: var(--_w); min-width: 0; max-width: 100%; height: 100%; min-height: 0; padding: var(--_pad); background: var(--_bg); border-inline-end: var(--ds-border-width) solid var(--_rule); color: var(--ds-ink-2); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); } .ds-sidebar-nav-panel__header { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h-lg); margin-block-end: var(--ds-space-2); min-width: 0; } .ds-sidebar-nav-panel__header > .ds-workspace-switcher { flex: 1 1 auto; min-width: 0; } .ds-sidebar-nav-panel__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: var(--ds-space-2); color: var(--ds-ink); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-heading-tracking); } .ds-sidebar-nav-panel__header-actions { display: inline-flex; gap: var(--ds-space-0-5); margin-inline-start: auto; } .ds-sidebar-nav-panel__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; } .ds-sidebar-nav-panel__icon-btn:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } .ds-sidebar-nav-panel__icon-btn > 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-sidebar-nav-panel__icon-btn[data-kind="inverse"] { background: var(--ds-surface-inverse); color: var(--ds-ink-inverse); width: auto; padding-inline: var(--ds-space-2); gap: var(--ds-space-1); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); height: 28px; } .ds-sidebar-nav-panel__icon-btn[data-kind="inverse"]:hover { background: var(--ds-primary-fill-hover); color: var(--ds-ink-inverse); } .ds-sidebar-nav-panel__brand { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); padding-inline: var(--ds-space-2); color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-decoration: none; } .ds-sidebar-nav-panel__brand > 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-sidebar-nav-panel__brand[data-lane="serif"] { font-family: var(--ds-font-serif); font-size: var(--ds-text-xl); } .ds-sidebar-nav-panel__primary { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2); width: 100%; min-height: var(--ds-control-h); margin-block-end: var(--ds-space-3); 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-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); text-decoration: none; cursor: pointer; } .ds-sidebar-nav-panel__primary:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-sidebar-nav-panel__primary { white-space: nowrap; overflow: hidden; } .ds-sidebar-nav-panel__primary > .ds-sidebar-nav-panel__primary-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-sidebar-nav-panel__primary 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-sidebar-nav-panel__primary[data-kind="pill"] { border-radius: var(--ds-radius-pill); justify-content: flex-start; min-height: var(--ds-control-h-lg); } .ds-sidebar-nav-panel__primary[data-kind="split"] { padding: 0; } .ds-sidebar-nav-panel__primary[data-kind="split"] > .ds-sidebar-nav-panel__primary-main, .ds-sidebar-nav-panel__primary[data-kind="split"] > .ds-sidebar-nav-panel__primary-more { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .ds-sidebar-nav-panel__primary[data-kind="split"] > .ds-sidebar-nav-panel__primary-main { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); } .ds-sidebar-nav-panel__primary[data-kind="split"] > .ds-sidebar-nav-panel__primary-more { flex: none; border-radius: 0 var(--ds-radius-button) var(--ds-radius-button) 0; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-h); min-height: var(--ds-control-h); border-inline-start: var(--ds-border-width) solid var(--ds-border); color: var(--ds-ink-muted); } .ds-sidebar-nav-panel__kbd { margin-inline-start: auto; display: inline-flex; gap: var(--ds-space-0-5); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); } .ds-sidebar-nav-panel__kbd > kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: var(--ds-space-1); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-xs); background: var(--ds-surface); font: inherit; } .ds-sidebar-nav-panel__search { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); margin-block-end: var(--ds-space-3); 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; text-align: start; cursor: text; width: 100%; } .ds-sidebar-nav-panel__search:hover { border-color: var(--ds-border-strong); } .ds-sidebar-nav-panel__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-sidebar-nav-panel__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-inline: calc(-1 * var(--_pad)); padding-inline: var(--_pad); scrollbar-width: thin; } .ds-sidebar-nav-panel__group { display: flex; flex-direction: column; min-width: 0; } .ds-sidebar-nav-panel__group + .ds-sidebar-nav-panel__group { margin-block-start: var(--_group-gap); } .ds-sidebar-nav-panel__group[data-separator="rule"] + .ds-sidebar-nav-panel__group { margin-block-start: var(--ds-space-2); padding-block-start: var(--ds-space-2); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-sidebar-nav-panel__group-label { display: 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; width: 100%; 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); text-align: start; } button.ds-sidebar-nav-panel__group-label { cursor: pointer; border-radius: var(--ds-radius-sm); } button.ds-sidebar-nav-panel__group-label:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-sidebar-nav-panel__group-label[data-tone="ink"] { color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); letter-spacing: 0; text-transform: none; } .ds-sidebar-nav-panel__group-chevron { display: inline-flex; width: 12px; height: 12px; margin-inline-start: var(--ds-space-0-5); transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-sidebar-nav-panel__group-chevron > svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } .ds-sidebar-nav-panel__group-label[aria-expanded="false"] .ds-sidebar-nav-panel__group-chevron { transform: rotate(-90deg); } .ds-sidebar-nav-panel__group-label[data-chevron="end"] .ds-sidebar-nav-panel__group-chevron { margin-inline-start: auto; } .ds-sidebar-nav-panel__group-action { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-ink-muted); cursor: pointer; } .ds-sidebar-nav-panel__group-action:hover { background: var(--ds-surface-3); color: var(--ds-ink); } .ds-sidebar-nav-panel__group-action > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke); stroke-linecap: round; } .ds-sidebar-nav-panel__group-label[aria-expanded="false"] + .ds-sidebar-nav-panel__list { display: none; } .ds-sidebar-nav-panel__escape { align-self: flex-start; padding: var(--ds-space-1) var(--ds-space-2); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-sidebar-nav-panel__list { display: flex; flex-direction: column; gap: var(--_row-gap); margin: 0; padding: 0; list-style: none; min-width: 0; } .ds-sidebar-nav-panel__list > li { display: flex; min-width: 0; } .ds-sidebar-nav-panel__tree { position: relative; display: flex; flex-direction: column; gap: var(--_row-gap); margin: 0 0 0 var(--ds-space-4); padding: 0 0 0 var(--ds-space-2); list-style: none; border-inline-start: var(--ds-border-width) solid var(--ds-rule); } .ds-sidebar-nav-panel__tree > li { display: flex; min-width: 0; } .ds-sidebar-nav-panel__tree[data-kind="rail"] { margin-inline-start: var(--ds-space-3); border-inline-start-width: 2px; border-inline-start-color: var(--ds-rule-strong); } .ds-sidebar-nav-panel__time-label { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-0-5); color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); } .ds-sidebar-nav-panel__empty { display: flex; align-items: center; justify-content: center; text-align: center; min-height: calc(var(--ds-control-h) * 2 - var(--ds-space-2)); padding: var(--ds-space-2); 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); line-height: var(--ds-lh-body); } .ds-sidebar-nav-panel__group[aria-busy="true"] .ds-sidebar-nav-panel__group-label { color: var(--ds-ink-faint); } .ds-sidebar-nav-panel__footer { margin-block-start: var(--ds-space-3); } .ds-sidebar-nav-panel__footer > .ds-rail-footer-stack { margin-block-start: 0; } .ds-sidebar-nav-panel[data-state="collapsed"] { display: none; } .ds-sidebar-nav-panel :is(button, a):focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-sidebar-nav-panel__primary:focus-visible, .ds-sidebar-nav-panel__search:focus-visible { outline-offset: calc(-1 * var(--ds-border-width)); } .ds-sidebar-nav-panel[data-variant="navattic-grouped-tint-pill"] { --_w: 224px; --_row-gap: var(--ds-space-0-5); --_group-gap: var(--ds-space-5); --_bg: var(--ds-ground); } .ds-sidebar-nav-panel[data-variant="navattic-grouped-tint-pill"] .ds-sidebar-nav-panel__header { min-height: var(--ds-topbar-h); margin-block-end: 0; } .ds-sidebar-nav-panel[data-variant="manychat-section-subnav"] { --_w: 296px; --_pad: var(--ds-space-8); --_bg: var(--ds-ground); --_rule: transparent; --_row-gap: 0; } .ds-sidebar-nav-panel[data-variant="grammarly-grouped-inset-pill"] { --_w: 240px; --_bg: var(--ds-surface); --_row-gap: var(--ds-space-0-5); --_group-gap: var(--ds-space-3); } .ds-sidebar-nav-panel[data-variant="grammarly-grouped-inset-pill"] .ds-sidebar-nav-panel__group-label { color: var(--ds-ink-muted); } .ds-sidebar-nav-panel[data-variant="elevenlabs-trailing-slot"] { --_w: 256px; --_bg: var(--ds-ground); --_row-gap: var(--ds-space-1); --_group-gap: var(--ds-space-4); } .ds-sidebar-nav-panel[data-variant="elevenlabs-trailing-slot"] .ds-sidebar-nav-panel__group-label { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); letter-spacing: 0; text-transform: none; } .ds-sidebar-nav-panel[data-variant="v0-disclosure-sections"] { --_w: 274px; --_pad: var(--ds-space-2); --_bg: var(--ds-ground); --_row-gap: var(--ds-space-0-5); --_group-gap: var(--ds-space-4); } .ds-sidebar-nav-panel[data-variant="oku-grouped-pinned-footer"] { --_w: 224px; --_pad: var(--ds-space-4); --_bg: var(--ds-surface); --_row-gap: 0; --_group-gap: var(--ds-space-4); } .ds-sidebar-nav-panel[data-variant="oku-grouped-pinned-footer"] .ds-sidebar-nav-panel__body { padding-inline: var(--ds-space-2); } .ds-sidebar-nav-panel[data-variant="homerun-two-tier-pitch"] { --_w: 280px; --_pad: var(--ds-space-4); --_bg: var(--ds-ground); --_row-gap: 0; --_group-gap: var(--ds-space-6); font-size: var(--ds-text-lg); } .ds-sidebar-nav-panel[data-variant="homerun-two-tier-pitch"] .ds-sidebar-nav-panel__header { margin-block-end: var(--ds-space-4); } .ds-sidebar-nav-panel[data-variant="hsaj-uniform-pitch-tree"] { --_w: 336px; --_pad: var(--ds-space-4); --_bg: var(--ds-ground-2); --_row-gap: 1px; --_group-gap: var(--ds-space-8); font-size: var(--ds-text-lg); } .ds-sidebar-nav-panel[data-variant="hsaj-uniform-pitch-tree"] .ds-sidebar-nav-panel__group-label { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-regular); letter-spacing: 0; text-transform: none; } .ds-sidebar-nav-panel[data-variant="confluence-two-tier-rail"] { --_w: 320px; --_bg: var(--ds-surface); --_row-gap: 0; --_group-gap: var(--ds-space-3); } .ds-sidebar-nav-panel[data-variant="confluence-two-tier-rail"] .ds-sidebar-nav-panel__group-label { font-weight: var(--ds-weight-semibold); } .ds-sidebar-nav-panel[data-variant="clickup-tree-sidebar"] { --_w: 256px; --_bg: var(--ds-ground); --_row-gap: 0; --_group-gap: var(--ds-space-4); font-size: var(--ds-text-md); } .ds-sidebar-nav-panel[data-variant="perplexity-slot-order"] { --_w: 240px; --_pad: var(--ds-space-4); --_bg: var(--ds-ground-2); --_rule: transparent; --_row-gap: var(--ds-space-1); --_group-gap: var(--ds-space-2); } .ds-sidebar-nav-panel[data-variant="contra-dark-grouped"] { --_w: 280px; --_pad: var(--ds-space-2); --_bg: var(--ds-ground); --_rule: transparent; --_row-gap: 0; --_group-gap: 0; } .ds-sidebar-nav-panel[data-variant="contra-dark-grouped"] .ds-sidebar-nav-panel__body { padding-inline: var(--ds-space-3); } .ds-sidebar-nav-panel[data-variant="contra-dark-grouped"] .ds-sidebar-nav-panel__group + .ds-sidebar-nav-panel__group { margin-block-start: var(--ds-space-2); padding-block-start: var(--ds-space-2); border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-sidebar-nav-panel[data-variant="braintrust-pill-nav"] { --_w: 240px; --_pad: var(--ds-space-4); --_bg: var(--ds-ground); --_rule: transparent; --_row-gap: var(--ds-space-2); font-size: var(--ds-text-lg); } .ds-sidebar-nav-panel[data-variant="braintrust-pill-nav"] .ds-nav-item { --_radius: var(--ds-radius-pill); --_pad-x: var(--ds-space-4); } .ds-sidebar-nav-panel[data-variant="givingli-two-tier-edgebar"] { --_w: 240px; --_pad: var(--ds-space-6) 0 var(--ds-space-6) var(--ds-space-6); --_bg: var(--ds-surface); --_rule: var(--ds-rule-strong); --_row-gap: var(--ds-space-1); } .ds-sidebar-nav-panel[data-variant="givingli-two-tier-edgebar"] .ds-sidebar-nav-panel__body { margin-inline: 0; padding-inline: 0; } .ds-sidebar-nav-panel[data-variant="givingli-two-tier-edgebar"] .ds-sidebar-nav-panel__group[data-tier="utility"] .ds-nav-item { color: var(--ds-ink-2); } .ds-sidebar-nav-panel[data-variant="origin-neutral-pill"] { --_w: 340px; --_pad: var(--ds-space-3); --_bg: var(--ds-ground); --_rule: var(--ds-rule-soft); --_row-gap: var(--ds-space-0-5); font-size: var(--ds-text-lg); } .ds-sidebar-nav-panel[data-variant="origin-neutral-pill"] .ds-nav-item { --_radius: var(--ds-radius-md); --_pad-x: var(--ds-space-4); --_gap: var(--ds-space-6); } .ds-sidebar-nav-panel[data-variant="synara-time-grouped"] { --_w: 230px; --_pad: var(--ds-space-3); --_bg: var(--ds-ground-2); --_rule: var(--ds-rule); --_row-gap: 0; --_group-gap: var(--ds-space-3); font-size: var(--ds-text-sm); } .ds-sidebar-nav-panel[data-variant="synara-time-grouped"] .ds-nav-item { --_icon: var(--ds-icon-size); } .ds-sidebar-nav-panel[data-variant="plane-contextual"] { --_w: 285px; --_pad: var(--ds-space-4); --_bg: var(--ds-surface); --_row-gap: 0; --_group-gap: var(--ds-space-2); } .ds-sidebar-nav-panel[data-variant="plane-contextual"] .ds-sidebar-nav-panel__title { font-size: var(--ds-text-xl); } .ds-sidebar-nav-panel[data-variant="plane-contextual"] .ds-sidebar-nav-panel__primary { border-radius: var(--ds-radius-md); min-height: 38px; justify-content: flex-start; } .ds-sidebar-nav-panel__toggle, .ds-sidebar-nav-panel__scrim, .ds-sidebar-nav-panel__close { display: none; } .ds-sidebar-nav-panel__toggle { align-items: center; gap: var(--ds-space-2); min-height: var(--ds-tap-target-min); 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-md); font-weight: var(--ds-weight-medium); text-transform: var(--ds-control-case); cursor: pointer; max-width: 100%; } .ds-sidebar-nav-panel__toggle:hover { border-color: var(--ds-border-strong); background: var(--ds-hover-bg); } .ds-sidebar-nav-panel__toggle:focus-visible, .ds-sidebar-nav-panel__close:focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); } .ds-sidebar-nav-panel__toggle:disabled, .ds-sidebar-nav-panel__toggle[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-sidebar-nav-panel__toggle > svg, .ds-sidebar-nav-panel__close > 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-sidebar-nav-panel__toggle-chevron > 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-sidebar-nav-panel__toggle-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; } .ds-sidebar-nav-panel__toggle-count { flex: none; color: var(--ds-ink-muted); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; } .ds-sidebar-nav-panel__toggle[aria-busy="true"] .ds-sidebar-nav-panel__toggle-count { color: transparent; min-width: 2ch; border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); animation: ds-snp-pulse 1.2s var(--ds-ease-standard) infinite alternate; } @keyframes ds-snp-pulse { to { opacity: .45; } } .ds-sidebar-nav-panel__toggle-chevron { flex: none; display: inline-flex; transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } .ds-sidebar-nav-panel__toggle[aria-expanded="true"] .ds-sidebar-nav-panel__toggle-chevron { transform: rotate(180deg); } .ds-sidebar-nav-panel__close { 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; } .ds-sidebar-nav-panel__close:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } @media (max-width: 767px) { .ds-sidebar-nav-panel__toggle { display: inline-flex; } .ds-sidebar-nav-panel[data-variant="instacart-scrim-drawer"] { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--ds-z-modal); width: min(var(--_w), 85vw); max-width: 85vw; height: auto; background: var(--ds-surface-raised); border-inline-end: 0; transform: translateX(-100%); visibility: hidden; transition: transform var(--ds-dur-base) var(--ds-ease-in), visibility 0s linear var(--ds-dur-base); } .ds-sidebar-nav-panel[data-variant="instacart-scrim-drawer"]:dir(rtl) { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); } .ds-sidebar-nav-panel[data-variant="instacart-scrim-drawer"][data-state="open"] { transform: none; visibility: visible; box-shadow: var(--ds-shadow-modal); transition: transform var(--ds-dur-base) var(--ds-ease-out), visibility 0s; } .ds-sidebar-nav-panel[data-variant="instacart-scrim-drawer"] .ds-sidebar-nav-panel__close { display: inline-flex; } .ds-sidebar-nav-panel__scrim { display: block; position: fixed; inset: 0; z-index: var(--ds-z-scrim); padding: 0; border: 0; background: var(--ds-scrim); backdrop-filter: var(--ds-scrim-filter); cursor: default; opacity: 0; visibility: hidden; transition: opacity var(--ds-dur-base) var(--ds-ease-standard), visibility 0s linear var(--ds-dur-base); } .ds-sidebar-nav-panel[data-state="open"] ~ .ds-sidebar-nav-panel__scrim { opacity: 1; visibility: visible; transition-delay: 0s; } .ds-sidebar-nav-panel__toggle[data-kind="disclosure"] { display: flex; width: 100%; border-radius: var(--ds-radius-md); box-shadow: none; } .ds-sidebar-nav-panel__toggle[data-kind="disclosure"][aria-expanded="true"] { border-end-start-radius: 0; border-end-end-radius: 0; } .ds-sidebar-nav-panel[data-variant="lloyds-inline-disclosure"] { display: none; width: 100%; max-width: none; height: auto; padding-block-start: var(--ds-space-2); border: var(--ds-border-width) solid var(--ds-border); border-block-start: 0; border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md); } .ds-sidebar-nav-panel[data-variant="lloyds-inline-disclosure"][data-state="open"] { display: flex; } .ds-sidebar-nav-panel[data-variant="lloyds-inline-disclosure"] .ds-sidebar-nav-panel__header { display: none; } .ds-sidebar-nav-panel[data-variant="lloyds-inline-disclosure"] .ds-sidebar-nav-panel__body { max-height: min(60dvh, 440px); } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] { --_pad: var(--ds-space-2); flex-direction: row; align-items: flex-start; gap: var(--ds-space-2); width: 100%; max-width: none; height: auto; padding-inline: var(--ds-space-3) var(--ds-space-2); border-inline-end: 0; border-block-end: var(--ds-border-width) solid var(--_rule); } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] :is(.ds-sidebar-nav-panel__header, .ds-sidebar-nav-panel__primary, .ds-sidebar-nav-panel__search, .ds-sidebar-nav-panel__footer, .ds-sidebar-nav-panel__group-label, .ds-nav-item__icon, .ds-nav-item__trailing) { display: none; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__body { flex-direction: row; flex: 1 1 auto; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(to right, currentColor calc(100% - 24px), transparent); } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__body::-webkit-scrollbar { display: none; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__group { flex-direction: row; margin: 0; padding: 0; border: 0; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__group .ds-sidebar-nav-panel__list { display: flex; flex-direction: row; gap: var(--ds-space-2); } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__list > li { flex: none; scroll-snap-align: start; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-nav-item { --_pad-x: var(--ds-space-3); --_radius: var(--ds-radius-pill); width: auto; min-height: var(--ds-tap-target-min); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); white-space: nowrap; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-nav-item:hover { background: var(--ds-hover-bg); } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-nav-item[aria-current="page"] { background: var(--ds-selected-bg); color: var(--ds-selected-ink); border-color: var(--ds-selected-ink); } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__empty { min-height: var(--ds-tap-target-min); padding-inline: var(--ds-space-4); border-radius: var(--ds-radius-pill); white-space: nowrap; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__toggle { padding-inline: var(--ds-space-2); width: var(--ds-tap-target-min); justify-content: center; border-radius: var(--ds-radius-pill); box-shadow: none; flex: none; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"] .ds-sidebar-nav-panel__toggle-label { display: none; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"][data-state="open"] .ds-sidebar-nav-panel__body { overflow: visible; mask-image: none; } .ds-sidebar-nav-panel[data-variant="yami-chip-strip"][data-state="open"] :is(.ds-sidebar-nav-panel__group, .ds-sidebar-nav-panel__group .ds-sidebar-nav-panel__list) { flex-wrap: wrap; } } /* components/top-bar/top-bar.css */ .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; } } /* components/accordion/accordion.css */ .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); } /* components/app-shell/app-shell.css */ :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; } } /* components/card/card.css */ .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; } /* components/data-table/data-table.css */ .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); } /* components/stat/stat.css */ .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); } /* components/status-badge/status-badge.css */ .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; } /* components/text-link/text-link.css */ .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; } /* components/button-secondary/button-secondary.css */ .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; } /* components/button-primary/button-primary.css */ .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); } /* components/text-input/text-input.css */ .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); }