/*
 * Globale enum-badge kleurstijlen.
 * Gedeeld door EnumBadgeComponent (property editor) én KanbanComponent.
 * Scoped interactie-stijlen (.enum-badge-option, .enum-badge-select, enz.)
 * blijven in EnumBadgeComponent.razor.css.
 */

.enum-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 400;
    border: 1px solid transparent;
    white-space: nowrap;
}

.enum-badge-readonly {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-top: 5px;
}

/* ── Kleurvarianten ──────────────────────────────────────────────────────── */

.enum-badge-neutral {
    background: color-mix(in srgb, var(--dxds-neutral-120) 15%, var(--fc-surface));
    color: var(--dxds-neutral-170);
    border-color: color-mix(in srgb, var(--dxds-neutral-120) 35%, var(--fc-border));
}

.enum-badge-default {
    background: color-mix(in srgb, var(--dxds-neutral-120) 15%, var(--fc-surface));
    color: var(--dxds-neutral-170);
    border-color: color-mix(in srgb, var(--dxds-neutral-120) 35%, var(--fc-border));
}

.enum-badge-muted {
    background: color-mix(in srgb, var(--dxds-neutral-90) 20%, var(--fc-surface));
    color: var(--dxds-neutral-150);
    border-color: color-mix(in srgb, var(--dxds-neutral-90) 40%, var(--fc-border));
}

.enum-badge-info {
    background: color-mix(in srgb, var(--dxds-info-80) 18%, var(--fc-surface));
    color: var(--dxds-info-130);
    border-color: color-mix(in srgb, var(--dxds-info-80) 45%, var(--fc-border));
}

.enum-badge-success {
    background: color-mix(in srgb, var(--dxds-success-90) 15%, var(--fc-surface));
    color: var(--dxds-success-130);
    border-color: color-mix(in srgb, var(--dxds-success-90) 35%, var(--fc-border));
}

.enum-badge-warning {
    background: color-mix(in srgb, var(--dxds-warning-80) 22%, var(--fc-surface));
    color: var(--dxds-warning-130);
    border-color: color-mix(in srgb, var(--dxds-warning-80) 45%, var(--fc-border));
}

.enum-badge-danger {
    background: color-mix(in srgb, var(--dxds-danger-90) 15%, var(--fc-surface));
    color: var(--dxds-danger-120);
    border-color: color-mix(in srgb, var(--dxds-danger-90) 35%, var(--fc-border));
}

.enum-badge-primary {
    background: color-mix(in srgb, var(--fc-primary) 20%, var(--fc-surface));
    color: var(--dxds-primary-120);
    border-color: color-mix(in srgb, var(--fc-primary) 50%, var(--fc-border));
}

.enum-badge-secondary {
    background: color-mix(in srgb, var(--dxds-secondary-100) 22%, var(--fc-surface));
    color: var(--dxds-secondary-150);
    border-color: color-mix(in srgb, var(--dxds-secondary-100) 50%, var(--fc-border));
}

.enum-badge-purple {
    background: color-mix(in srgb, var(--dxds-info-120) 20%, var(--fc-surface));
    color: var(--dxds-info-140);
    border-color: color-mix(in srgb, var(--dxds-info-120) 50%, var(--fc-border));
}

.enum-badge-indigo {
    background: color-mix(in srgb, var(--dxds-info-110) 18%, var(--fc-surface));
    color: var(--dxds-info-140);
    border-color: color-mix(in srgb, var(--dxds-info-110) 45%, var(--fc-border));
}

.enum-badge-teal {
    background: color-mix(in srgb, var(--dxds-primary-70) 20%, var(--fc-surface));
    color: var(--dxds-primary-120);
    border-color: color-mix(in srgb, var(--dxds-primary-70) 48%, var(--fc-border));
}

.enum-badge-orange {
    background: color-mix(in srgb, var(--dxds-warning-90) 20%, var(--fc-surface));
    color: var(--dxds-warning-130);
    border-color: color-mix(in srgb, var(--dxds-warning-90) 50%, var(--fc-border));
}

.enum-badge-pink {
    background: color-mix(in srgb, var(--dxds-danger-80) 18%, var(--fc-surface));
    color: var(--dxds-danger-120);
    border-color: color-mix(in srgb, var(--dxds-danger-80) 45%, var(--fc-border));
}

.enum-badge-cyan {
    background: color-mix(in srgb, var(--dxds-info-80) 20%, var(--fc-surface));
    color: var(--dxds-info-130);
    border-color: color-mix(in srgb, var(--dxds-info-80) 50%, var(--fc-border));
}