/* ──────────────────────────────────────────────────────────────────────
   Skill Match Graph — Summary Strip Chip Variants

   Color modifiers for SkillMatchGraphDiagram's match-type summary chips.
   Base structure is provided by global-chip-style in chip-styles.css.

   Usage:
     <span class="global-chip-style smg-summary-chip-exact">...</span>
   ────────────────────────────────────────────────────────────────────── */

.smg-summary-chip-exact {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success-darken);
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.smg-summary-chip-alias {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary-darken);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.smg-summary-chip-semantic {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: var(--mud-palette-info-darken);
    border-color: color-mix(in srgb, var(--mud-palette-info) 28%, transparent);
}

.smg-summary-chip-gap {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning-darken);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.smg-summary-chip-extra {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    color: var(--mud-palette-text-secondary);
    border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 22%, transparent);
}