/* * platform.css — ACS Unified UI design token system (UI-02 / #1286). * * One token system, three INDEPENDENT theming axes (ADR-050 §2-3; design guide §3): * - mode : light (default, in :root) · dark ([data-mode="dark"] — STUBBED, not shipped) * - brand : per-tenant white-label, applied at runtime by ThemeService (overrides --acs-color-primary) * - personality : standard (default) · field ([data-personality="field"] — condensed display + mono data) * * Precedence brand > personality > mode (ADR-050 §3): brand is applied as inline custom properties by * ThemeService (highest specificity); personality + mode are attribute-scoped here. * * RULES: * - Components reference --acs-* tokens (or the mapped Fluent tokens) ONLY. Literal colour is permitted * ONLY in these token definitions — never in component or inline styles (ADR-050 §1). * - The --acs-status-* palette is LOCKED and tenant-independent — never overridden by brand, personality, * or mode (ADR-050 §4). Status colour is always paired with text/icon, never colour alone. * - Light-first: dark values exist as a scope for UI-03 to wire, but no toggle ships them (ADR-050 §6). */ :root { /* ── Spacing ─────────────────────────────────────────────────────────── */ --acs-space-1: 4px; --acs-space-2: 8px; --acs-space-3: 12px; --acs-space-4: 16px; --acs-space-6: 24px; --acs-space-8: 32px; /* ── Radius (standard personality; field tightens these) ─────────────── */ --acs-radius-sm: 4px; --acs-radius-md: 6px; --acs-radius-lg: 8px; /* ── Font sizes ──────────────────────────────────────────────────────── */ --acs-fs-sm: 12px; --acs-fs-base: 14px; --acs-fs-lg: 16px; --acs-fs-xl: 20px; --acs-fs-2xl: 28px; /* ── LOCKED status palette — tenant-independent, never overridable (ADR-050 §4) ── */ --acs-status-success: #22c55e; /* OK · done · healthy · level > 50% */ --acs-status-warning: #f59e0b; /* warning · plan needed · level 25-50% */ --acs-status-danger: #ef4444; /* critical · act now · level < 25% */ --acs-status-accent: #f97316; /* highlight · admin action */ --acs-status-special: #a78bfa; /* special / arctic / VIP */ --acs-status-neutral: #64748b; /* unknown · offline · no data */ /* ── Typography — standard personality (field swaps display + mono) ──── */ --acs-font-base: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; --acs-font-display: var(--acs-font-base); --acs-font-mono: ui-monospace, 'Cascadia Mono', 'Cascadia Code', monospace; --acs-display-spacing: 0; --acs-display-transform: none; /* ── Brand intermediates — ACS house default; ThemeService overrides per tenant ── */ --brand-light: #1e40af; --brand-dark: #38bdf8; /* ── Mode = LIGHT (default; light-first). Dark overrides live in [data-mode="dark"]. ── */ --acs-color-bg: #ffffff; --acs-color-surface: #f8fafc; --acs-color-surface-2: #f1f5f9; --acs-color-border: #e2e8f0; --acs-color-text: #1e293b; --acs-color-text-muted: #64748b; --acs-color-primary: var(--brand-light); --acs-color-primary-foreground: #ffffff; --acs-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05); --acs-header-grad: linear-gradient(135deg, #ffffff, #eef2f8); --acs-hover: rgba(30, 64, 175, .06); --acs-color-scrim: rgba(15, 23, 42, .45); --acs-shadow-lg: 0 10px 40px rgba(15, 23, 42, .25); } /* * DARK MODE — STUB scope. Present so UI-03 can wire a toggle (sets data-mode="dark" on ), * but nothing ships it yet (light-first, ADR-050 §6). The locked status palette is intentionally * NOT redefined here — it is mode-independent. */ [data-mode="dark"] { --acs-color-bg: #0a0e14; --acs-color-surface: #0f1520; --acs-color-surface-2: #141d2c; --acs-color-border: #1e2d42; --acs-color-text: #e2e8f0; --acs-color-text-muted: #64748b; --acs-color-primary: var(--brand-dark); --acs-color-primary-foreground: #06121f; --acs-shadow: 0 1px 2px rgba(0, 0, 0, .4); --acs-header-grad: linear-gradient(135deg, #061020, #0a1628 50%, #071830); --acs-hover: rgba(56, 189, 248, .08); --acs-color-scrim: rgba(0, 0, 0, .6); --acs-shadow-lg: 0 10px 40px rgba(0, 0, 0, .5); } /* * FIELD personality — opt-in per surface (ADR-050 §5): condensed display font, mono data font, * uppercase display, tighter radii, denser feel. SiloTrack's look becomes this personality. * Field fonts are referenced with fallbacks; @font-face hosting is added when a field surface ships. */ [data-personality="field"] { --acs-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --acs-font-mono: 'Space Mono', ui-monospace, monospace; --acs-display-spacing: .5px; --acs-display-transform: uppercase; --acs-radius-sm: 2px; --acs-radius-md: 3px; --acs-radius-lg: 4px; } /* * FLUENT UI TOKEN MAPPING — maps --acs-* onto Fluent token names so every Fluent* component inherits * tenant branding + the locked status palette with no per-component changes. var() resolves lazily at * the point of use, so these recompose automatically under brand / [data-mode] / [data-personality]. */ :root { --colorBrandBackground: var(--acs-color-primary); --colorBrandBackgroundHover: var(--acs-color-primary); --colorBrandBackgroundPressed: var(--acs-color-primary); --colorBrandForeground1: var(--acs-color-primary); --colorBrandForeground2: var(--acs-color-primary); --colorCompoundBrandForeground1: var(--acs-color-primary); --colorCompoundBrandStroke: var(--acs-color-primary); --colorBrandStroke1: var(--acs-color-primary); --colorNeutralForegroundOnBrand: var(--acs-color-primary-foreground); --colorBrandForegroundInverted: var(--acs-color-primary-foreground); --colorNeutralBackground1: var(--acs-color-bg); --colorNeutralBackground2: var(--acs-color-surface); --colorNeutralBackground3: var(--acs-color-surface-2); --colorNeutralForeground1: var(--acs-color-text); --colorNeutralForeground2: var(--acs-color-text-muted); --colorNeutralForeground3: var(--acs-color-text-muted); --colorNeutralStroke1: var(--acs-color-border); --colorNeutralStroke2: var(--acs-color-border); --colorStatusSuccessForeground1: var(--acs-status-success); --colorStatusSuccessBackground3: var(--acs-status-success); --colorStatusWarningForeground1: var(--acs-status-warning); --colorStatusWarningBackground3: var(--acs-status-warning); --colorStatusDangerForeground1: var(--acs-status-danger); --colorStatusDangerBackground3: var(--acs-status-danger); --colorPaletteRedForeground1: var(--acs-status-danger); --fontFamilyBase: var(--acs-font-base); --fontFamilyMonospace: var(--acs-font-mono); --borderRadiusSmall: var(--acs-radius-sm); --borderRadiusMedium: var(--acs-radius-md); --borderRadiusLarge: var(--acs-radius-lg); } /* ── AcsCard ─────────────────────────────────────────────────────────────── */ .acs-card { display: flex; flex-direction: column; background-color: var(--acs-color-surface); border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-lg); color: var(--acs-color-text); font-family: var(--acs-font-base); font-size: var(--acs-fs-base); box-shadow: var(--acs-shadow); overflow: hidden; } .acs-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--acs-space-3); padding: var(--acs-space-4); border-bottom: 1px solid var(--acs-color-border); } .acs-card__title { margin: 0; font-family: var(--acs-font-display); font-size: var(--acs-fs-lg); font-weight: 600; letter-spacing: var(--acs-display-spacing); text-transform: var(--acs-display-transform); } .acs-card__body { padding: var(--acs-space-4); } .acs-card__footer { padding: var(--acs-space-4); border-top: 1px solid var(--acs-color-border); } /* ── AcsPageHeader ───────────────────────────────────────────────────────── */ .acs-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--acs-space-4); padding-block: var(--acs-space-4); margin-bottom: var(--acs-space-6); border-bottom: 1px solid var(--acs-color-border); font-family: var(--acs-font-base); color: var(--acs-color-text); } .acs-page-header__title { margin: 0; font-family: var(--acs-font-display); font-size: var(--acs-fs-xl); font-weight: 600; letter-spacing: var(--acs-display-spacing); text-transform: var(--acs-display-transform); } .acs-page-header__description { margin: var(--acs-space-2) 0 0; font-size: var(--acs-fs-base); color: var(--acs-color-text-muted); } .acs-page-header__actions { display: flex; align-items: center; gap: var(--acs-space-2); flex-shrink: 0; } /* ── AcsStatusPill (UI-06 / #1290) ─────────────────────────────────────────── * Status-coloured label: indicator dot (CSS) or custom icon + uppercase mono text. * Colour is taken only from the locked --acs-status-* palette (or brand primary for Info). */ .acs-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--acs-radius-sm); font-family: var(--acs-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; color: var(--acs-status-neutral); background-color: color-mix(in srgb, var(--acs-status-neutral) 16%, transparent); } .acs-status-pill:not(.acs-status-pill--has-icon)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; flex-shrink: 0; } .acs-status-pill__icon { display: inline-flex; align-items: center; } .acs-status-pill--ok { color: var(--acs-status-success); background-color: color-mix(in srgb, var(--acs-status-success) 14%, transparent); } .acs-status-pill--plan { color: var(--acs-status-warning); background-color: color-mix(in srgb, var(--acs-status-warning) 14%, transparent); } .acs-status-pill--critical { color: var(--acs-status-danger); background-color: color-mix(in srgb, var(--acs-status-danger) 14%, transparent); } .acs-status-pill--info { color: var(--acs-color-primary); background-color: color-mix(in srgb, var(--acs-color-primary) 14%, transparent); } .acs-status-pill--offline { color: var(--acs-status-neutral); background-color: color-mix(in srgb, var(--acs-status-neutral) 16%, transparent); } .acs-status-pill--special { color: var(--acs-status-special); background-color: color-mix(in srgb, var(--acs-status-special) 16%, transparent); } /* ── Skeleton loader (shared; UI-06 #1290, reused by UI-06b #1293) ──────────── */ .acs-skeleton { display: block; border-radius: var(--acs-radius-sm); background: linear-gradient(90deg, var(--acs-color-surface-2) 25%, color-mix(in srgb, var(--acs-color-text-muted) 14%, var(--acs-color-surface-2)) 37%, var(--acs-color-surface-2) 63%); background-size: 400% 100%; animation: acs-skeleton-shimmer 1.4s ease infinite; } @keyframes acs-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ── AcsStatCard (UI-06 / #1290) ───────────────────────────────────────────── * KPI card: optional icon + trend row, large display value (optional status tint), * uppercase label, mono sub-text. Loading (skeleton) and error states built in. */ .acs-stat-card { display: flex; flex-direction: column; gap: var(--acs-space-1); background-color: var(--acs-color-surface); border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-lg); padding: var(--acs-space-4); box-shadow: var(--acs-shadow); color: var(--acs-color-text); font-family: var(--acs-font-base); text-align: left; } button.acs-stat-card { width: 100%; cursor: pointer; font: inherit; transition: background-color .15s ease, border-color .15s ease; } button.acs-stat-card:hover { background-color: var(--acs-hover); border-color: var(--acs-color-primary); } button.acs-stat-card:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 2px; } .acs-stat-card__top { display: flex; align-items: center; gap: var(--acs-space-2); min-height: 20px; } .acs-stat-card__icon { display: inline-flex; align-items: center; color: var(--acs-color-text-muted); } .acs-stat-card__trend { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--acs-font-mono); font-size: var(--acs-fs-sm); } .acs-stat-card__trend--positive { color: var(--acs-status-success); } .acs-stat-card__trend--negative { color: var(--acs-status-danger); } .acs-stat-card__trend--neutral { color: var(--acs-color-text-muted); } .acs-stat-card__value { font-family: var(--acs-font-display); font-weight: 800; font-size: var(--acs-fs-2xl); line-height: 1.1; letter-spacing: var(--acs-display-spacing); } .acs-stat-card__value--ok { color: var(--acs-status-success); } .acs-stat-card__value--plan { color: var(--acs-status-warning); } .acs-stat-card__value--critical { color: var(--acs-status-danger); } .acs-stat-card__value--info { color: var(--acs-color-primary); } .acs-stat-card__value--offline { color: var(--acs-color-text-muted); } .acs-stat-card__value--special { color: var(--acs-status-special); } .acs-stat-card__label { font-family: var(--acs-font-display); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--acs-color-text-muted); } .acs-stat-card__sub { font-family: var(--acs-font-mono); font-size: 10px; color: var(--acs-color-text-muted); } .acs-stat-card__error { display: inline-flex; align-items: center; gap: var(--acs-space-2); color: var(--acs-status-danger); font-size: var(--acs-fs-sm); } .acs-stat-card__error-icon { display: inline-flex; flex-shrink: 0; } .acs-stat-card__skeleton-value { width: 60%; height: 28px; margin-bottom: 4px; } .acs-stat-card__skeleton-label { width: 40%; height: 11px; } /* ── AcsAlertBanner (UI-06 / #1290) ────────────────────────────────────────── * Severity-coloured banner: icon + (title/message) + action + dismiss. Title takes * the severity colour; body uses text colour. Critical pulses (reduced-motion aware). */ .acs-alert-banner { display: flex; align-items: center; gap: var(--acs-space-3); padding: 12px 16px; border: 1px solid; border-radius: var(--acs-radius-lg); font-family: var(--acs-font-base); font-size: var(--acs-fs-base); } .acs-alert-banner__icon { display: inline-flex; align-items: center; flex-shrink: 0; } .acs-alert-banner__content { flex: 1; font-size: var(--acs-fs-sm); } .acs-alert-banner__title { font-family: var(--acs-font-display); font-weight: 700; letter-spacing: var(--acs-display-spacing); text-transform: var(--acs-display-transform); color: inherit; margin-right: 4px; } .acs-alert-banner__message { color: var(--acs-color-text); } .acs-alert-banner__action { flex-shrink: 0; } .acs-alert-banner__dismiss { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: inherit; cursor: pointer; border-radius: var(--acs-radius-sm); font-size: 13px; line-height: 1; } .acs-alert-banner__dismiss:hover { background-color: color-mix(in srgb, currentColor 14%, transparent); } .acs-alert-banner__dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .acs-alert-banner--info { color: var(--acs-color-primary); border-color: color-mix(in srgb, var(--acs-color-primary) 30%, transparent); background-color: color-mix(in srgb, var(--acs-color-primary) 8%, transparent); } .acs-alert-banner--warning { color: var(--acs-status-warning); border-color: color-mix(in srgb, var(--acs-status-warning) 30%, transparent); background-color: color-mix(in srgb, var(--acs-status-warning) 8%, transparent); } .acs-alert-banner--critical{ color: var(--acs-status-danger); border-color: color-mix(in srgb, var(--acs-status-danger) 35%, transparent); background-color: color-mix(in srgb, var(--acs-status-danger) 9%, transparent); } .acs-alert-banner--pulse { animation: acs-alert-pulse 1.8s ease-in-out infinite; } @keyframes acs-alert-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acs-status-danger) 18%, transparent); } } /* Honour reduced-motion for all kit animation (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce) { .acs-skeleton { animation: none; } .acs-alert-banner--pulse { animation: none; } button.acs-stat-card { transition: none; } } /* ── AcsCard accent-left variants (UI-07 / #1291) ──────────────────────────── * Optional 3px status-coloured left border. Colour only from the locked --acs-status-* * palette (or brand primary for the Info/brand accent). */ .acs-card--accent { border-left-width: 3px; border-left-style: solid; } .acs-card--accent-ok { border-left-color: var(--acs-status-success); } .acs-card--accent-plan { border-left-color: var(--acs-status-warning); } .acs-card--accent-critical { border-left-color: var(--acs-status-danger); } .acs-card--accent-info { border-left-color: var(--acs-color-primary); } .acs-card--accent-offline { border-left-color: var(--acs-status-neutral); } .acs-card--accent-special { border-left-color: var(--acs-status-special); } /* ── AcsDataTable (UI-07 / #1291) ──────────────────────────────────────────── * Dense table: uppercase display headers, hover rows, right-aligned mono numerics, * optional sort hook. Wrapped in a horizontal-scroll container for narrow surfaces. */ .acs-data-table__scroll { width: 100%; overflow-x: auto; } .acs-data-table { width: 100%; border-collapse: collapse; font-family: var(--acs-font-base); font-size: 13px; color: var(--acs-color-text); } .acs-data-table caption.acs-data-table__caption { text-align: left; padding: 0 12px var(--acs-space-2); font-family: var(--acs-font-display); font-size: var(--acs-fs-sm); color: var(--acs-color-text-muted); } .acs-data-table th { font-family: var(--acs-font-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; color: var(--acs-color-text-muted); padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--acs-color-border); white-space: nowrap; } .acs-data-table td { padding: 10px 12px; border-bottom: 1px solid var(--acs-color-border); vertical-align: middle; } .acs-data-table tbody tr:hover td { background-color: var(--acs-hover); } .acs-data-table th.acs-data-table__cell--num, .acs-data-table td.acs-data-table__cell--num { text-align: right; } .acs-data-table td.acs-data-table__cell--num { font-family: var(--acs-font-mono); } .acs-data-table__sort { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .acs-data-table__sort:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 2px; } .acs-data-table__sort-arrow { color: var(--acs-color-text-muted); } /* ── AcsForm + fields (UI-08 / #1292) ──────────────────────────────────────── * Form layout + field wrappers (label, control, hint, message) over the standard * Blazor Input* components, styled with --acs-* tokens. */ .acs-form { display: flex; flex-direction: column; gap: var(--acs-space-4); font-family: var(--acs-font-base); color: var(--acs-color-text); } .acs-field { display: flex; flex-direction: column; gap: var(--acs-space-1); } .acs-field__label { font-family: var(--acs-font-display); font-size: var(--acs-fs-sm); font-weight: 600; letter-spacing: var(--acs-display-spacing); color: var(--acs-color-text); } .acs-field__required { color: var(--acs-status-danger); margin-left: 2px; } .acs-field__control { width: 100%; box-sizing: border-box; font-family: var(--acs-font-base); font-size: var(--acs-fs-base); color: var(--acs-color-text); background-color: var(--acs-color-surface-2); border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-md); padding: 8px 10px; } .acs-field__control:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 1px; border-color: var(--acs-color-primary); } .acs-field__control:disabled { opacity: .6; cursor: not-allowed; } .acs-field--invalid .acs-field__control { border-color: var(--acs-status-danger); } .acs-field__check { display: flex; align-items: center; gap: var(--acs-space-2); } .acs-field__checkbox { width: 16px; height: 16px; accent-color: var(--acs-color-primary); } .acs-field__check-label { font-family: var(--acs-font-base); font-size: var(--acs-fs-base); color: var(--acs-color-text); } .acs-field__hint { font-size: var(--acs-fs-sm); color: var(--acs-color-text-muted); } .acs-field__message { display: flex; flex-direction: column; gap: 2px; font-size: var(--acs-fs-sm); color: var(--acs-status-danger); } .acs-validation-summary { border: 1px solid color-mix(in srgb, var(--acs-status-danger) 35%, transparent); background-color: color-mix(in srgb, var(--acs-status-danger) 8%, transparent); border-radius: var(--acs-radius-md); padding: var(--acs-space-3); color: var(--acs-status-danger); font-size: var(--acs-fs-sm); } .acs-validation-summary__title { font-family: var(--acs-font-display); font-weight: 700; letter-spacing: var(--acs-display-spacing); text-transform: var(--acs-display-transform); margin-bottom: var(--acs-space-1); } .acs-validation-summary__list { margin: 0; padding-left: var(--acs-space-4); } /* ── Buttons (shared primitive; introduced with the form submit control) ───── */ .acs-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--acs-space-2); font-family: var(--acs-font-display); font-weight: 700; font-size: 13px; letter-spacing: .3px; text-transform: var(--acs-display-transform); padding: 8px 16px; border: 1px solid transparent; border-radius: var(--acs-radius-md); cursor: pointer; } .acs-button:disabled { opacity: .55; cursor: not-allowed; } .acs-button:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 2px; } .acs-button--primary { background-color: var(--acs-color-primary); color: var(--acs-color-primary-foreground); } .acs-button--secondary { background-color: transparent; border-color: var(--acs-color-border); color: var(--acs-color-text); } .acs-button--subtle { background-color: transparent; color: var(--acs-color-primary); } .acs-button--subtle:hover { background-color: var(--acs-hover); } .acs-button--danger { background-color: var(--acs-status-danger); color: var(--acs-color-primary-foreground); } /* Sizes (AcsButton, PLAT-052 / #1347) — 28 / 36 / 44px; 44 = field/touch target. */ .acs-button--small { min-height: 28px; padding: 4px 10px; font-size: 12px; } .acs-button--medium { min-height: 36px; } .acs-button--large { min-height: 44px; padding: 11px 22px; font-size: 14px; } /* Loading: a decorative spinner (the button carries aria-busy). Reuses @keyframes acs-spin. */ .acs-button__spinner { inline-size: 1em; block-size: 1em; flex-shrink: 0; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: acs-spin .7s linear infinite; } .acs-button__icon { display: inline-flex; align-items: center; } .acs-button--loading .acs-button__label { opacity: .8; } @media (prefers-reduced-motion: reduce) { .acs-button__spinner { animation: none; } } /* ── AcsLevelBar (UI-05 / #1289) ───────────────────────────────────────────── * Neutral track + level→colour fill. Fill colour only from the locked --acs-status-* palette. */ .acs-level-bar { display: flex; align-items: center; gap: var(--acs-space-2); } .acs-level-bar__track { flex: 1; height: 8px; background-color: var(--acs-color-surface-2); border-radius: var(--acs-radius-sm); overflow: hidden; } .acs-level-bar--thick .acs-level-bar__track { height: 14px; } .acs-level-bar__fill { height: 100%; border-radius: var(--acs-radius-sm); transition: width .6s ease; } .acs-level-bar--ok .acs-level-bar__fill { background-color: var(--acs-status-success); } .acs-level-bar--plan .acs-level-bar__fill { background-color: var(--acs-status-warning); } .acs-level-bar--critical .acs-level-bar__fill { background-color: var(--acs-status-danger); } .acs-level-bar--offline .acs-level-bar__fill { background-color: var(--acs-status-neutral); } .acs-level-bar__value { font-family: var(--acs-font-mono); font-size: var(--acs-fs-sm); color: var(--acs-color-text-muted); min-width: 3ch; text-align: right; } /* ── AcsLevelRing (UI-05 / #1289) ──────────────────────────────────────────── * SVG gauge: track = border, arc = level→colour, centre label = display font. Sizes 40/48/64. */ .acs-level-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .acs-level-ring__svg { display: block; } .acs-level-ring__track { stroke: var(--acs-color-border); } .acs-level-ring__arc { transition: stroke-dasharray .6s ease; } .acs-level-ring--ok .acs-level-ring__arc { stroke: var(--acs-status-success); } .acs-level-ring--plan .acs-level-ring__arc { stroke: var(--acs-status-warning); } .acs-level-ring--critical .acs-level-ring__arc { stroke: var(--acs-status-danger); } .acs-level-ring--offline .acs-level-ring__arc { stroke: var(--acs-status-neutral); } .acs-level-ring__label { position: absolute; font-family: var(--acs-font-display); font-weight: 700; color: var(--acs-color-text); letter-spacing: var(--acs-display-spacing); } .acs-level-ring--small .acs-level-ring__label { font-size: 10px; } .acs-level-ring--medium .acs-level-ring__label { font-size: var(--acs-fs-sm); } .acs-level-ring--large .acs-level-ring__label { font-size: var(--acs-fs-lg); } /* Reduced-motion: freeze the level transitions. */ @media (prefers-reduced-motion: reduce) { .acs-level-bar__fill, .acs-level-ring__arc { transition: none; } } /* ── AcsSpinner (UI-06b / #1293) ───────────────────────────────────────────── * Token-driven spinner with size presets and an optional parent-covering overlay. */ .acs-spinner { display: inline-flex; align-items: center; gap: var(--acs-space-2); color: var(--acs-color-text-muted); } .acs-spinner__circle { width: var(--acs-spinner-size, 24px); height: var(--acs-spinner-size, 24px); flex-shrink: 0; border: 2px solid color-mix(in srgb, var(--acs-color-primary) 25%, transparent); border-top-color: var(--acs-color-primary); border-radius: 50%; animation: acs-spin .7s linear infinite; } .acs-spinner--small { --acs-spinner-size: 16px; } .acs-spinner--medium { --acs-spinner-size: 24px; } .acs-spinner--large { --acs-spinner-size: 40px; } .acs-spinner__label { font-size: var(--acs-fs-sm); } .acs-spinner--overlay { position: absolute; inset: 0; flex-direction: column; justify-content: center; z-index: 10; background-color: color-mix(in srgb, var(--acs-color-bg) 60%, transparent); } @keyframes acs-spin { to { transform: rotate(360deg); } } /* ── AcsSkeleton circle variant (UI-06b / #1293; base .acs-skeleton from #1290) ── */ .acs-skeleton--circle { border-radius: 50%; } /* ── AcsModal (UI-06b / #1293) ─────────────────────────────────────────────── * Scrim + centered dialog. Colour from tokens only (scrim + large shadow tokens). */ .acs-modal__overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--acs-space-4); background-color: var(--acs-color-scrim); } .acs-modal { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 2 * var(--acs-space-6)); background-color: var(--acs-color-surface); color: var(--acs-color-text); border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-lg); box-shadow: var(--acs-shadow-lg); font-family: var(--acs-font-base); overflow: hidden; } .acs-modal--small { max-width: 360px; } .acs-modal--medium { max-width: 520px; } .acs-modal--large { max-width: 760px; } .acs-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--acs-space-3); padding: var(--acs-space-4); border-bottom: 1px solid var(--acs-color-border); } .acs-modal__title { margin: 0; font-family: var(--acs-font-display); font-size: var(--acs-fs-lg); font-weight: 700; letter-spacing: var(--acs-display-spacing); text-transform: var(--acs-display-transform); } .acs-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: var(--acs-color-text-muted); cursor: pointer; border-radius: var(--acs-radius-sm); font-size: 14px; line-height: 1; } .acs-modal__close:hover { background-color: var(--acs-hover); color: var(--acs-color-text); } .acs-modal__close:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 1px; } .acs-modal__body { padding: var(--acs-space-4); overflow-y: auto; } .acs-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--acs-space-2); padding: var(--acs-space-4); border-top: 1px solid var(--acs-color-border); } .acs-confirm-dialog__message { margin: 0; font-size: var(--acs-fs-base); color: var(--acs-color-text); } /* ── AcsErrorBoundary (UI-06b / #1293) ───────────────────────────────────────── */ .acs-error-boundary { display: flex; align-items: center; gap: var(--acs-space-3); padding: var(--acs-space-4); border: 1px solid color-mix(in srgb, var(--acs-status-danger) 35%, transparent); background-color: color-mix(in srgb, var(--acs-status-danger) 8%, transparent); border-radius: var(--acs-radius-lg); color: var(--acs-color-text); font-family: var(--acs-font-base); } .acs-error-boundary__icon { display: inline-flex; flex-shrink: 0; color: var(--acs-status-danger); } .acs-error-boundary__content { flex: 1; } .acs-error-boundary__title { font-family: var(--acs-font-display); font-weight: 700; color: var(--acs-status-danger); letter-spacing: var(--acs-display-spacing); text-transform: var(--acs-display-transform); } .acs-error-boundary__message { margin-top: 2px; font-size: var(--acs-fs-sm); color: var(--acs-color-text-muted); } /* Reduced-motion: freeze the spinner (still a visible ring). */ @media (prefers-reduced-motion: reduce) { .acs-spinner__circle { animation: none; } } /* ════════════════════════════════════════════════════════════════════════════ * Two-tier adaptive shell (UI-10 / #1295) — breadcrumb + content frame. * Presentational primitives only; the host composes the chrome around them. * ════════════════════════════════════════════════════════════════════════════ */ /* ── BreadcrumbBar (Module › Section › record) ─────────────────────────────── * Separators are pseudo-elements, kept out of the a11y tree; the current page is * plain text with aria-current="page". */ .acs-breadcrumb { font-family: var(--acs-font-base); font-size: var(--acs-fs-sm); } .acs-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--acs-space-1); margin: 0; padding: 0; list-style: none; } .acs-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--acs-space-1); } .acs-breadcrumb__item:not(:first-child)::before { content: '/'; color: var(--acs-color-text-muted); padding-inline-end: var(--acs-space-1); } .acs-breadcrumb__link { color: var(--acs-color-text-muted); text-decoration: none; border-radius: var(--acs-radius-sm); } .acs-breadcrumb__link:hover { color: var(--acs-color-primary); text-decoration: underline; } .acs-breadcrumb__link:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 2px; } .acs-breadcrumb__text { color: var(--acs-color-text-muted); } .acs-breadcrumb__current { color: var(--acs-color-text); font-weight: 600; } /* ── ContentFrame (the "blade") ────────────────────────────────────────────── * Stacks breadcrumb, optional Tier-2 tab strip, and the page body. */ .acs-content-frame { display: flex; flex-direction: column; gap: var(--acs-space-4); min-width: 0; padding: var(--acs-space-4); font-family: var(--acs-font-base); color: var(--acs-color-text); background-color: var(--acs-color-bg); } .acs-content-frame__tabs { min-width: 0; } .acs-content-frame__body { min-width: 0; } /* ── AcsNavRail (Tier-1 — collapsible, grouped module rail) ─────────────────── * Module entries are ordinary links (natural Tab order); the collapse control is a * real button with aria-expanded. Collapsed = icon-only (label hidden, tooltip via * title; accessible name preserved through the link's aria-label). */ .acs-rail { display: flex; flex-direction: column; gap: var(--acs-space-2); width: 240px; padding: var(--acs-space-2); box-sizing: border-box; background-color: var(--acs-color-surface); border-right: 1px solid var(--acs-color-border); font-family: var(--acs-font-base); font-size: var(--acs-fs-base); color: var(--acs-color-text); } .acs-rail--collapsed { width: 56px; } .acs-rail__toggle { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--acs-radius-md); background: transparent; color: var(--acs-color-text-muted); cursor: pointer; } .acs-rail--collapsed .acs-rail__toggle { align-self: center; } .acs-rail__toggle:hover { background-color: var(--acs-hover); color: var(--acs-color-primary); } .acs-rail__toggle:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 2px; } /* Hamburger glyph drawn with currentColor (no token needed — inherits the button colour). */ .acs-rail__toggle-icon { width: 16px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .acs-rail__group { display: flex; flex-direction: column; gap: var(--acs-space-1); } .acs-rail__group-header { font-family: var(--acs-font-display); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--acs-color-text-muted); padding: var(--acs-space-2) var(--acs-space-2) var(--acs-space-1); } .acs-rail--collapsed .acs-rail__group-header { display: none; } .acs-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .acs-rail__item { display: flex; align-items: center; gap: var(--acs-space-3); padding: 8px 10px; border-radius: var(--acs-radius-md); color: var(--acs-color-text); text-decoration: none; white-space: nowrap; overflow: hidden; } .acs-rail__item:hover { background-color: var(--acs-hover); color: var(--acs-color-primary); } .acs-rail__item:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: 2px; } .acs-rail__item--active { background-color: var(--acs-hover); color: var(--acs-color-primary); font-weight: 600; } .acs-rail__item--active .acs-rail__icon { color: var(--acs-color-primary); } .acs-rail__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--acs-color-text-muted); } .acs-rail__label { overflow: hidden; text-overflow: ellipsis; } .acs-rail--collapsed .acs-rail__item { justify-content: center; gap: 0; } .acs-rail--collapsed .acs-rail__label { display: none; } /* Responsive: on narrow surfaces the rail floats as an overlay drawer over the content * (design guide §8.4). The host finalises breakpoints/scrim at mount (#1340). */ @media (max-width: 768px) { .acs-rail { position: fixed; inset: 0 auto 0 0; z-index: 40; box-shadow: var(--acs-shadow); } } /* ── AcsTabStrip (Tier-2 — in-module section tabs) ─────────────────────────── * role="tablist" of navigation links; the active section underlines in the brand * primary. Overflow scrolls horizontally on narrow surfaces (design guide §8.4). */ .acs-tabstrip { display: flex; gap: var(--acs-space-1); overflow-x: auto; border-bottom: 1px solid var(--acs-color-border); font-family: var(--acs-font-base); font-size: var(--acs-fs-base); scrollbar-width: thin; } .acs-tab { display: inline-flex; align-items: center; padding: 8px 14px; margin-bottom: -1px; /* overlap the strip's bottom border so the active underline aligns */ color: var(--acs-color-text-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .acs-tab:hover { color: var(--acs-color-primary); } .acs-tab:focus-visible { outline: 2px solid var(--acs-color-primary); outline-offset: -2px; } .acs-tab--active { color: var(--acs-color-primary); border-bottom-color: var(--acs-color-primary); font-weight: 600; } /* ── AcsEmptyState (PLAT-050 / #1342) ───────────────────────────────────────── * Centred no-data placeholder: optional icon, title, optional description, optional * actions. Token-driven and muted; no status colour (the locked palette is untouched). */ .acs-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--acs-space-3); padding: var(--acs-space-8) var(--acs-space-4); text-align: center; font-family: var(--acs-font-base); color: var(--acs-color-text); } .acs-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--acs-color-text-muted); } .acs-empty-state__title { margin: 0; font-family: var(--acs-font-display); font-size: var(--acs-fs-lg); font-weight: 600; letter-spacing: var(--acs-display-spacing); color: var(--acs-color-text); } .acs-empty-state__description { margin: 0; max-width: 42ch; font-size: var(--acs-fs-base); color: var(--acs-color-text-muted); } .acs-empty-state__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--acs-space-2); margin-top: var(--acs-space-2); } /* ── AcsIcon wrapper (UI-04 / #1288) ───────────────────────────────────────── * The uniform sizing + theming container for registry-resolved icons. The contract (IIconRegistry) * stays dumb — it returns a fragment; this wrapper gives every icon one size (1em or an explicit px * via ) and inherits theme colour through currentColor, regardless of icon source. */ .acs-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 1em; block-size: 1em; color: currentColor; flex-shrink: 0; } .acs-icon > svg { inline-size: 100%; block-size: 100%; display: block; } /* ── AcsBadge (PLAT-052 / #1347) ───────────────────────────────────────────── * Count/label/dot indicator. Tinted tone language (saturated text on a light tint), consistent with * AcsStatusPill; colour only from the locked --acs-status-* palette + brand. */ .acs-badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 18px; block-size: 18px; padding: 0 6px; font-family: var(--acs-font-mono); font-size: 11px; font-weight: 700; line-height: 1; border-radius: 999px; } .acs-badge--neutral { color: var(--acs-color-text-muted); background-color: var(--acs-color-surface-2); } .acs-badge--brand { color: var(--acs-color-primary); background-color: color-mix(in srgb, var(--acs-color-primary) 14%, transparent); } .acs-badge--success { color: var(--acs-status-success); background-color: color-mix(in srgb, var(--acs-status-success) 16%, transparent); } .acs-badge--warning { color: var(--acs-status-warning); background-color: color-mix(in srgb, var(--acs-status-warning) 16%, transparent); } .acs-badge--danger { color: var(--acs-status-danger); background-color: color-mix(in srgb, var(--acs-status-danger) 16%, transparent); } /* Dot variant — a bare solid status dot (no content). */ .acs-badge--dot { min-inline-size: 8px; inline-size: 8px; block-size: 8px; padding: 0; border-radius: 50%; } .acs-badge--dot.acs-badge--neutral { background-color: var(--acs-color-text-muted); } .acs-badge--dot.acs-badge--brand { background-color: var(--acs-color-primary); } .acs-badge--dot.acs-badge--success { background-color: var(--acs-status-success); } .acs-badge--dot.acs-badge--warning { background-color: var(--acs-status-warning); } .acs-badge--dot.acs-badge--danger { background-color: var(--acs-status-danger); } /* ── AcsAvatar (PLAT-054 / #1362) ───────────────────────────────────────────── * Circular image-or-initials tile in three size presets. Neutral surface tokens only. */ .acs-avatar { --acs-avatar-size: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: var(--acs-avatar-size); block-size: var(--acs-avatar-size); overflow: hidden; border-radius: 50%; background-color: var(--acs-color-surface-2); color: var(--acs-color-text-muted); font-family: var(--acs-font-display); font-weight: 600; line-height: 1; user-select: none; } .acs-avatar--small { --acs-avatar-size: 24px; font-size: 11px; } .acs-avatar--medium { --acs-avatar-size: 32px; font-size: 13px; } .acs-avatar--large { --acs-avatar-size: 48px; font-size: 18px; } .acs-avatar__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .acs-avatar__initials { text-transform: uppercase; letter-spacing: .5px; } /* ── AcsTooltip (PLAT-054 / #1362) ──────────────────────────────────────────── * CSS-only reveal on hover/focus-within; inverted (text-on-bg) bubble from tokens. */ .acs-tooltip { position: relative; display: inline-flex; } .acs-tooltip__bubble { position: absolute; z-index: 30; inline-size: max-content; max-inline-size: 220px; padding: var(--acs-space-1) var(--acs-space-2); border-radius: var(--acs-radius-sm); background-color: var(--acs-color-text); color: var(--acs-color-bg); font-size: var(--acs-fs-sm); line-height: 1.3; box-shadow: var(--acs-shadow); visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility .12s ease; pointer-events: none; } .acs-tooltip:hover > .acs-tooltip__bubble, .acs-tooltip:focus-within > .acs-tooltip__bubble { visibility: visible; opacity: 1; } .acs-tooltip--top > .acs-tooltip__bubble { inset-block-end: calc(100% + 6px); inset-inline-start: 50%; transform: translateX(-50%); } .acs-tooltip--bottom > .acs-tooltip__bubble { inset-block-start: calc(100% + 6px); inset-inline-start: 50%; transform: translateX(-50%); } .acs-tooltip--left > .acs-tooltip__bubble { inset-inline-end: calc(100% + 6px); inset-block-start: 50%; transform: translateY(-50%); } .acs-tooltip--right > .acs-tooltip__bubble { inset-inline-start: calc(100% + 6px); inset-block-start: 50%; transform: translateY(-50%); } @media (prefers-reduced-motion: reduce) { .acs-tooltip__bubble { transition: none; } } /* ── AcsAccordion (PLAT-054 / #1362) ────────────────────────────────────────── * Collapsible sections; native button + region. Surface/border tokens only. */ .acs-accordion { border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-md); overflow: hidden; } .acs-accordion__item + .acs-accordion__item { border-block-start: 1px solid var(--acs-color-border); } .acs-accordion__heading { margin: 0; } .acs-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--acs-space-2); inline-size: 100%; padding: var(--acs-space-3) var(--acs-space-4); background-color: transparent; border: 0; cursor: pointer; font-family: var(--acs-font-display); font-size: var(--acs-fs-base); font-weight: 600; color: var(--acs-color-text); text-align: start; } .acs-accordion__trigger:hover { background-color: var(--acs-hover); } .acs-accordion__trigger:disabled { color: var(--acs-color-text-muted); cursor: not-allowed; } .acs-accordion__chevron { inline-size: 9px; block-size: 9px; flex-shrink: 0; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; } .acs-accordion__item--open .acs-accordion__chevron { transform: rotate(225deg); } .acs-accordion__body { padding: var(--acs-space-3) var(--acs-space-4); color: var(--acs-color-text); } @media (prefers-reduced-motion: reduce) { .acs-accordion__chevron { transition: none; } } /* ── AcsTabs (PLAT-054 / #1362) ─────────────────────────────────────────────── * Content-area tabs (role=tablist/tab/tabpanel). Underline-active; brand + neutral tokens. */ .acs-tabs { display: block; } .acs-tabs__list { display: flex; gap: var(--acs-space-1); border-block-end: 1px solid var(--acs-color-border); } .acs-tabs__tab { padding: var(--acs-space-2) var(--acs-space-3); margin-block-end: -1px; background-color: transparent; border: 0; border-block-end: 2px solid transparent; cursor: pointer; font-family: var(--acs-font-display); font-size: var(--acs-fs-base); font-weight: 600; color: var(--acs-color-text-muted); } .acs-tabs__tab:hover { color: var(--acs-color-text); } .acs-tabs__tab:disabled { opacity: .5; cursor: not-allowed; } .acs-tabs__tab--active { color: var(--acs-color-primary); border-block-end-color: var(--acs-color-primary); } .acs-tabs__panel { padding-block: var(--acs-space-4); color: var(--acs-color-text); } /* ── AcsPagination (PLAT-054 / #1362) ───────────────────────────────────────── * Page navigator (pairs with AcsDataTable). Neutral tokens; active page = brand. */ .acs-pagination { display: inline-flex; align-items: center; gap: var(--acs-space-1); } .acs-pagination__page, .acs-pagination__nav { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 32px; block-size: 32px; padding: 0 var(--acs-space-2); background-color: transparent; border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-sm); cursor: pointer; font-family: var(--acs-font-mono); font-size: var(--acs-fs-sm); color: var(--acs-color-text); } .acs-pagination__page:hover:not(:disabled), .acs-pagination__nav:hover:not(:disabled) { background-color: var(--acs-hover); } .acs-pagination__page--active { background-color: var(--acs-color-primary); border-color: var(--acs-color-primary); color: var(--acs-color-primary-foreground); } .acs-pagination__page:disabled, .acs-pagination__nav:disabled { opacity: .5; cursor: not-allowed; } .acs-pagination__ellipsis { min-inline-size: 24px; text-align: center; color: var(--acs-color-text-muted); } .acs-pagination__chevron { inline-size: 7px; block-size: 7px; border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor; } .acs-pagination__chevron--prev { transform: rotate(-45deg); } .acs-pagination__chevron--next { transform: rotate(135deg); } /* ── AcsMenu (PLAT-054 / #1362) ─────────────────────────────────────────────── * Action menu: trigger + popup of menuitems. Outside-click via a transparent backdrop (no JS). * Surface/border/shadow tokens only. */ .acs-menu { position: relative; display: inline-block; } .acs-menu__trigger { display: inline-flex; align-items: center; gap: var(--acs-space-2); padding: var(--acs-space-2) var(--acs-space-3); background-color: var(--acs-color-surface); border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-sm); cursor: pointer; font-family: var(--acs-font-display); font-size: var(--acs-fs-base); font-weight: 600; color: var(--acs-color-text); } .acs-menu__trigger:hover { background-color: var(--acs-hover); } /* Transparent full-viewport outside-click catcher (sits below the popup). */ .acs-menu__backdrop { position: fixed; inset: 0; z-index: 40; } .acs-menu__list { position: absolute; z-index: 50; inset-block-start: calc(100% + 4px); inset-inline-start: 0; min-inline-size: 180px; display: flex; flex-direction: column; padding: var(--acs-space-1); background-color: var(--acs-color-surface); border: 1px solid var(--acs-color-border); border-radius: var(--acs-radius-md); box-shadow: var(--acs-shadow-lg); } .acs-menu__item { display: flex; align-items: center; gap: var(--acs-space-2); inline-size: 100%; padding: var(--acs-space-2) var(--acs-space-3); background-color: transparent; border: 0; border-radius: var(--acs-radius-sm); cursor: pointer; font-family: var(--acs-font-base); font-size: var(--acs-fs-base); color: var(--acs-color-text); text-align: start; } .acs-menu__item:hover:not(:disabled) { background-color: var(--acs-hover); } .acs-menu__item:disabled { color: var(--acs-color-text-muted); cursor: not-allowed; } /* ── AcsToast (PLAT-054 / #1362) ────────────────────────────────────────────── * Transient notifications: fixed corner stack, severity accent on the leading border (locked * status palette + brand), CSS close glyph. Surface/shadow tokens only. */ .acs-toast-host { position: fixed; inset-block-end: var(--acs-space-4); inset-inline-end: var(--acs-space-4); z-index: 1100; display: flex; flex-direction: column; gap: var(--acs-space-2); pointer-events: none; } .acs-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--acs-space-2); min-inline-size: 240px; max-inline-size: 360px; padding: var(--acs-space-3); background-color: var(--acs-color-surface); border: 1px solid var(--acs-color-border); border-inline-start: 3px solid var(--acs-color-border); border-radius: var(--acs-radius-md); box-shadow: var(--acs-shadow-lg); color: var(--acs-color-text); } .acs-toast--info { border-inline-start-color: var(--acs-color-primary); } .acs-toast--success { border-inline-start-color: var(--acs-status-success); } .acs-toast--warning { border-inline-start-color: var(--acs-status-warning); } .acs-toast--error { border-inline-start-color: var(--acs-status-danger); } .acs-toast__body { flex: 1 1 auto; } .acs-toast__title { margin: 0 0 2px; font-family: var(--acs-font-display); font-weight: 700; font-size: var(--acs-fs-base); color: var(--acs-color-text); } .acs-toast__message { margin: 0; font-size: var(--acs-fs-sm); color: var(--acs-color-text); } .acs-toast__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; padding: 0; background-color: transparent; border: 0; border-radius: var(--acs-radius-sm); cursor: pointer; color: var(--acs-color-text-muted); } .acs-toast__close:hover { color: var(--acs-color-text); background-color: var(--acs-hover); } .acs-toast__close-glyph { position: relative; inline-size: 12px; block-size: 12px; } .acs-toast__close-glyph::before, .acs-toast__close-glyph::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 100%; block-size: 2px; background-color: currentColor; } .acs-toast__close-glyph::before { transform: rotate(45deg); } .acs-toast__close-glyph::after { transform: rotate(-45deg); }