/* ──────────────────────────────────────────────────────────────────────
   Chip Styles — reusable pill-shaped chips (similar to global-button-style).

   Provides structure and typography only; callers add a color modifier
   class for the specific context (e.g. smg-summary-chip-exact).

   Usage:
     <span class="global-chip-style smg-summary-chip-exact">
         <Icon />
         <span class="global-chip-count">4</span>
         <span class="global-chip-label">exact</span>
     </span>
   ────────────────────────────────────────────────────────────────────── */

.global-chip-style {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    border: 1px solid transparent;
}

.global-chip-style .mud-icon-root {
    font-size: 0.95rem !important;
    opacity: 0.85;
}

.global-chip-count {
    font-weight: 700;
}

.global-chip-label {
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

/* ──────────────────────────────────────────────────────────────────────
   MudChip styling — off-white outlined chip used across the app.
   Apply to MudChip via Class="global-mudchip" with Variant.Outlined.
   ────────────────────────────────────────────────────────────────────── */

.mud-chip.global-mudchip {
    border-color: #f5f1e8 !important;
    color: #f5f1e8 !important;
}

.mud-chip.global-mudchip .mud-chip-close-button,
.mud-chip.global-mudchip .mud-chip-icon {
    color: #f5f1e8 !important;
}

.mud-chip.global-mudchip.preference-placeholder-chip {
    border-style: dashed !important;
    opacity: 0.58;
}

.mud-chip.global-mudchip.preference-placeholder-chip .mud-chip-content {
    font-style: italic;
}