/* ============================================================================
   Stravix brand skin — global only.

   What belongs here: rules that reach MudBlazor's own rendered DOM (which no
   component of ours can), the @font-face declarations, and page-level pseudo
   elements. Everything that styles one of OUR components lives in that
   component's .razor.css instead, bundled into Web.styles.css by the build.

   Load order (App.razor): MudBlazor.min.css -> THIS FILE -> site.css ->
   Web.styles.css. Equal-specificity overrides of MudBlazor win here by order;
   site.css keeps its existing last-wins contract over this file; component
   scoped CSS comes last so a component styling itself outranks both.

   Mode-dependent values ride the --mud-palette-* variables MudThemeProvider
   regenerates on the dark/light flip (palettes in RaptorTheme.cs). Only
   mode-INVARIANT values live as --stx-* custom properties.
   ========================================================================== */

/* ---- Self-hosted variable fonts (OFL) — no CDN: the E2E sandbox blocks
        non-loopback requests and the Google Fonts link was a known issue. ---- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-var.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-var.woff2") format("woff2-variations");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-var.woff2") format("woff2-variations");
}

/* ---- Mode-invariant tokens ---- */
:root {
    --stx-radius-btn: 2px;
    --stx-radius-panel: 6px;
    --stx-radius-pill: 999px;
    --stx-radius-input: 2px;

    --stx-font-display: "Space Grotesk", "Inter", sans-serif;
    --stx-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* No colour lives here. There used to be two: --stx-accent, a second copy of RaptorTheme's
       Primary, and --stx-plate, the always-dark well the logo needed while only a white-on-dark
       lockup existed. Both are gone — the light-mode lockup shipped, and colour is defined in
       RaptorTheme.cs and read from --mud-palette-*. */
}

/* ---- Base ---- */

/* MudIcon renders a Material icon AS the svg, but wraps an icon supplied as raw SVG markup (every
   Font Awesome mark we ship) in a span. Inside that span the svg is an inline element, so it sits
   on the span's text baseline and hangs below it, and a glyph whose viewBox is not square (the
   vehicle marks are 640x512) renders wider than the square box and spills out one side. The result
   is a drawing several pixels down and right of the box that a flex parent is centring — the icon
   looks misaligned against any label beside it. Nothing at a call site can reach this; the span is
   MudBlazor's. Making the svg a block and letting the span take the glyph's real width puts the
   drawing back where the layout thinks it is. */
.mud-icon-root > svg {
    display: block;
}

.mud-icon-root:has(> svg) {
    width: auto;
}

::selection {
    background: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

/* ---- Brand canvas: ink wash + masked 64px grid + ghosted wolf watermark.
        Fixed pseudo-layers behind everything (z-index -1, no hit-testing);
        opaque surfaces (drawer, appbar, papers, tables) sit on top, so the
        canvas reads only in page gutters and transparent regions. ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--mud-palette-primary-rgb), 0.09), transparent),
        linear-gradient(rgba(var(--mud-palette-primary-rgb), 0.04) 1px, transparent 0),
        linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.04) 1px, transparent 0);
    background-size: auto, 64px 64px, 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 0, #000 30%, transparent 80%);
}

/* The wolf watermark is a MainLayout element rather than a body pseudo, because
   one of the two modes always needs the ink flipped and only the layout knows
   which mode is active. The artwork's ink is dark, so it reads on the light
   canvas untouched and all but vanishes on the dark one — hence the flip on
   dark. One opacity serves both: measured as mean composite delta against each
   canvas, light-as-is and dark-flipped both land on 11.9 (dark untouched would
   be 6.8, which is where the mark went missing). */
.stx-watermark {
    position: fixed;
    right: 2%;
    bottom: 0;
    width: 30vw;
    height: 44vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.08;
    background: url("/images/stravix-watermark.png") no-repeat right bottom / contain;
}

.stx-watermark--dark {
    filter: grayscale(1) invert(1);
}

/* .stx-watermark--light needs no rule — the ink is already right for that
   canvas. The class stays on the element as the state hook's other half. */

/* ---- Scrollbars (nav menu keeps hiding its own via site.css) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- Buttons: sentence case comes from the theme; geometry + ghost skin here.
        Ghost = MudBlazor's Outlined variant restyled to a 1px hairline. Accent
        is reserved for the one filled action per surface. ---- */
.mud-button-root.mud-button {
    border-radius: var(--stx-radius-btn);
}

.mud-toggle-group > .mud-toggle-item.mud-button-root.mud-button {
    border-radius: 0;
}

.mud-button-root.mud-button-outlined {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-action-default);
}

.mud-button-root.mud-button-outlined:hover:not(.mud-button-disabled),
.mud-button-root.mud-button-outlined:focus-visible:not(.mud-button-disabled) {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    color: var(--mud-palette-primary);
    background-color: transparent;
}

/* Danger is the one exception to the neutral ghost. MudBlazor's own .mud-button-outlined-error is a
   single class, so the two-class ghost rule above out-specifies it and greys out the red on every
   labelled destructive button in the app — Delete Case, Delete Asset List, Discard, Unbind. Accent
   is reserved for the filled action and stays neutral here; a warning is not decoration, so it
   keeps its colour. Still a hairline, not a fill: destructive actions should read, not shout. */
.mud-button-root.mud-button-outlined.mud-button-outlined-error {
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    color: var(--mud-palette-error);
}

.mud-button-root.mud-button-outlined.mud-button-outlined-error:hover:not(.mud-button-disabled),
.mud-button-root.mud-button-outlined.mud-button-outlined-error:focus-visible:not(.mud-button-disabled) {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
    background-color: transparent;
}

.mud-button-root.mud-button-filled-primary:hover:not(.mud-button-disabled) {
    background-color: var(--mud-palette-primary-lighten);
}

/* MudBlazor sizes an icon inside a ButtonGroup with
   `.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root { font-size: 1.516rem }`,
   which at (0,4,0) outranks the .mud-icon-size-* class the call site asked for. So the same
   `Size="Small"` row action rendered 20px on a page that stacks its buttons and 24.26px on one that
   groups them — a fifth larger, from markup that reads identically. It cuts both ways: a Large icon
   in a group is pulled DOWN from 36px to the same 24.26px.

   Restating the size at (0,5,0) hands the decision back to the call site. The three values are
   MudBlazor's own, read off the computed style rather than the stylesheet — its CSS declares each
   size twice and only the later declaration survives, so small is 1.25rem (not 1.15) and large is
   2.25rem (not 2). */
.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root.mud-icon-size-small {
    font-size: 1.25rem;
}

.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root.mud-icon-size-medium {
    font-size: 1.5rem;
}

.mud-button-group-root .mud-button-root.mud-icon-button .mud-icon-root.mud-icon-size-large {
    font-size: 2.25rem;
}

/* ---- Tabs + nav rail keep their uppercase chrome voice (buttons dropped it
        via theme Button.TextTransform). ---- */
.mud-tab {
    text-transform: uppercase;
    letter-spacing: .09em;
}

.mud-tabs .mud-tab.mud-tab-active,
.mud-tabs .mud-tab.mud-tab-active .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* Top-level nav labels are authored uppercase in the markup; give them the chrome tracking on the
   display face. MudNavLink takes no Typo and MudBlazor's Typography has no nav slot, so this is
   the only lever — the same reason .mud-tab is here. */
.mud-nav-link .mud-nav-link-text {
    font-family: var(--stx-font-display);
    letter-spacing: .09em;
    font-size: .8125rem;
}

.mud-nav-group .mud-nav-link .mud-nav-link-text {
    letter-spacing: .01em;
}

.mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* ---- Breadcrumbs: the trail's last entry is the current page. Muted, because it is the one entry
        that goes nowhere — text-primary makes it read as another link. MudBlazor's own
        --mud-palette-action-disabled is the other extreme: an alpha sized for a dead control
        rather than for text anyone is meant to read. ---- */
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a {
    color: var(--mud-palette-text-secondary);
}

/* ---- Table headers: header plate + accent hairline underline. ---- */
.mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
    font-weight: 500;
}

/* ---- Row states (moved from site.css — colors now ride the palette).
        Selected rows carry the inset accent bar from the design. !important
        mirrors the original site.css rules: these classes land on <tr> and must
        beat MudTable's own hover/striped selectors. ---- */
.table-row-header {
    background-color: var(--mud-palette-background-gray) !important;
}

.table-row-header:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

.table-row-selected {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.10) !important;
    box-shadow: inset 2px 0 0 var(--mud-palette-tertiary);
}

.table-row-selected:hover {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.14) !important;
}

/* ---- Overlay + dialog chrome ---- */
.mud-overlay-scrim.mud-overlay-dark {
    background-color: var(--mud-palette-overlay-dark);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mud-dialog {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--stx-radius-panel);
}

.mud-dialog .mud-dialog-title {
    font-family: var(--stx-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---- Popovers / menus: hairline ring over the surface color. An inset
        outline, not a border: a border shrinks the popover's border-box
        content area by 2px while the inner .mud-list still inherits the full
        max-height, and that 2px overflow gives every Select/Autocomplete a
        second outer scrollbar next to the list's own. (Not box-shadow either —
        that would override the .mud-elevation-* drop shadow on the same
        element.) ---- */
.mud-popover {
    outline: 1px solid var(--mud-palette-lines-default);
    outline-offset: -1px;
}

/* ---- Snackbar: quiet severity-tinted surface + 3px severity spine instead of
        a loud fill. The tint carries the severity at a glance (a 2px spine
        alone was indistinguishable at the corner of the eye, especially the
        dark green on the dark surface); the mix ratio keeps text-primary
        readable on every severity in both palettes. ---- */
.mud-snackbar {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.mud-snackbar.mud-alert-filled-normal {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-error {
    color: var(--mud-palette-text-primary);
}

.mud-snackbar.mud-alert-filled-info {
    background-color: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-info);
}

.mud-snackbar.mud-alert-filled-success {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-success);
}

.mud-snackbar.mud-alert-filled-warning {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-warning);
}

.mud-snackbar.mud-alert-filled-error {
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-error);
}

.mud-snackbar.mud-alert-filled-info .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-info); }
.mud-snackbar.mud-alert-filled-success .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-success); }
.mud-snackbar.mud-alert-filled-warning .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-warning); }
.mud-snackbar.mud-alert-filled-error .mud-alert-icon-left .mud-icon-root { color: var(--mud-palette-error); }

/* ============================================================================
   Stravix primitives — consumed by the SharedKernel wrapper components.
   Inert until the wrappers land; defined here so the skin reviews as one file.
   ========================================================================== */

/* Holds a loading placeholder back for 200ms. A render that finishes inside that window replaces the
   placeholder before it is ever painted, instead of flashing it — the empty discovery page settles in
   ~130ms, so it would flash on every visit.

   The hold is opacity on a wrapper rather than a delay on MudSkeleton itself: the skeleton's own
   `animation` property carries its pulse, and re-declaring that to add a delay would restate a
   MudBlazor default. The element still occupies its space throughout, so nothing reflows when it
   appears. */
@keyframes stx-skeleton-hold {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.stx-skeleton-hold {
    animation: stx-skeleton-hold 120ms ease-out 200ms both;
}

/* Header plate for panels, dialogs and card headers. It reads as part of the surface it caps,
   separated by the hairline alone — a header tinted away from its own panel is the thing the eye
   lands on first, and it is never the thing worth looking at. */
.stx-brand-bar {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}

.stx-data {
    font-family: var(--stx-font-mono);
    font-size: .9em;
}

.mud-button-root.stx-selected,
.stx-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    border-color: var(--mud-palette-primary);
}

.mud-toggle-item.mud-toggle-item-selected {
    background-color: var(--mud-palette-background-gray) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
    box-shadow: inset 0 -1px 0 var(--mud-palette-text-primary);
}

.stx-strip-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stx-strip-rule {
    width: 1px;
    height: 20px;
    flex: 0 0 auto;
    background: var(--mud-palette-lines-inputs);
}

/* Table toolbar: what the 44px bar does to the field sitting in it. 8px top and bottom in place of
   MudBlazor's dense 10.5px, which is sized for a form row rather than a fixed-height bar.

   Four classes, so it outranks MudBlazor's own `.mud-input > input.mud-input-root-outlined
   .mud-input-root-margin-dense` without !important. Class-only, so it reaches the <input> and the
   slot <div> alike. */
.stx-table-toolbar .mud-input-root.mud-input-root-outlined.mud-input-root-margin-dense {
    font-size: .975em;
    padding-top: 5.5px;
    padding-bottom: 5.5px;
}

.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-radius: var(--stx-radius-input);
}

.mud-data-grid .mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
    --mud-internal-toolbar-height: 44px;
}

/* ---- Detection inspector (the Detection Details overlay) ---- */

/* ---- Neutral: the treatments the palette cannot carry ----
   What changes below is how much of the accent gets used, never which colour it is — every value is
   still a palette lookup. Scoped to the theme; Light and Dark keep the quieter chrome. The marker is
   set in MainLayout.razor. ---- */

[data-stx-theme="neutral"] {
    --stx-radius-btn: 6px;
}

/* Secondary actions read as buttons rather than bare words. Filled primary is untouched. */
[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined {
    background-color: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-action-default);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined:hover:not(:disabled),
[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-dark);
    border-color: color-mix(in srgb, var(--mud-palette-lines-inputs) 70%, var(--mud-palette-text-disabled));
    color: var(--mud-palette-action-default);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined-secondary:not(:disabled) {
    background-color: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-secondary:hover:not(:disabled),
[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-secondary:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-dark);
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 70%, var(--mud-palette-text-disabled));
    color: var(--mud-palette-text-secondary);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-warning:not(:disabled) {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    color: var(--mud-palette-warning);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-warning:hover:not(:disabled),
[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-warning:focus-visible:not(:disabled) {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-error:not(:disabled) {
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    color: var(--mud-palette-error);
}

[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-error:hover:not(:disabled),
[data-stx-theme="neutral"] .mud-button-root.mud-button-outlined.mud-button-outlined-error:focus-visible:not(:disabled) {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

[data-stx-theme="neutral"] .mud-button-root.stx-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* Active nav becomes a solid block instead of a 10% wash. The fill wants the ramp's darkest step,
   which has no MudBlazor slot, so it is mixed from the palette rather than restated as a literal. */
[data-stx-theme="neutral"] .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-drawer-background));
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

/* MudNavMenu is rendered Bordered="true"; zeroing the width here rather than dropping the flag keeps
   Light and Dark as they were. Spelled out to MudBlazor's full selector because specificity is decided
   before source order. */
[data-stx-theme="neutral"] .mud-navmenu.mud-navmenu-bordered .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-width: 0;
}

[data-stx-theme="neutral"] .mud-nav-link.active .mud-icon-root,
[data-stx-theme="neutral"] .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Must be the cell's own border, not an inset shadow: MudBlazor's 1px border-bottom draws over an
   inset shadow. */
[data-stx-theme="neutral"] .mud-table-head > *:first-child .mud-table-cell {
    border-bottom: 2px solid var(--mud-palette-lines-inputs);
    box-shadow: none;
}

[data-stx-theme="neutral"] .mud-table-head .mud-table-cell {
    box-shadow: none;
}

/* ---- Print: brand furniture off, content unaffected. ---- */
@media print {
    body::before,
    .stx-watermark {
        display: none !important;
    }
}

/* ---- Chip ----
   Restyles .mud-chip itself rather than a class Controls/Pill opts into. Pill is the only thing that
   can render one: RawMudComponentConventionTests bans <MudChip> outside Controls/. MudChipSet is a
   container (.mud-chip-container { display: contents }) and is unaffected.

   Nothing here is a restated default. .mud-chip ships margin: 4px, border: none, padding: 0 12px;
   .mud-chip-size-* ship a fixed height, radius and font-size.

   .mud-chip-outlined.mud-clickable:hover is left alone — it is the hover affordance for a pressable
   pill. */
.mud-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--stx-font-mono);
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-secondary);
}

/* Two classes, to outrank .mud-chip.mud-chip-size-small's fixed metrics. min-height, not height,
   because a pill hosting a close button has to grow to hold it. */
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
    height: auto;
    min-height: 20px;
    padding: 2px 10px;
    border-radius: var(--stx-radius-pill);
    font-size: 10px;
}

/* MudBlazor tints these borders with --mud-palette-border-opacity, too faint on a 10px capsule. */
.mud-chip.mud-chip-color-primary { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }

.mud-chip.mud-chip-color-secondary { border-color: var(--mud-palette-secondary); color: var(--mud-palette-secondary); }

.mud-chip.mud-chip-color-tertiary { border-color: var(--mud-palette-tertiary); color: var(--mud-palette-tertiary); }

.mud-chip.mud-chip-color-success { border-color: var(--mud-palette-success); color: var(--mud-palette-success); }

.mud-chip.mud-chip-color-warning { border-color: var(--mud-palette-warning); color: var(--mud-palette-warning); }

.mud-chip.mud-chip-color-error { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }

.mud-chip.mud-chip-color-info { border-color: var(--mud-palette-info); color: var(--mud-palette-info); }

/* The chip's glyphs inherit the pill's colour and size, so they read as part of the capsule. */
.mud-chip .mud-icon-root {
    font-size: 12px;
    color: inherit;
}