/* Pastille — modèle canonique ; son emploi : canon_badge.md. */

@layer components {
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px var(--canon-space-2);
    }

    .badge {
        border-radius: var(--canon-radius-pill);
        background-color: var(--badge-surface, var(--canon-theme-neutral-surface));
    }

    .badge {
        font-size: var(--canon-size-note);
        font-weight: var(--canon-weight-label);
        line-height: var(--canon-leading-title);
        white-space: nowrap;
        color: var(--badge-color, var(--canon-theme-neutral));
    }
}

@layer components {
    .badge--color-danger {
        --badge-color: var(--canon-theme-danger);
        --badge-surface: var(--canon-theme-danger-surface);
    }
    .badge--color-warning {
        --badge-color: var(--canon-theme-warning);
        --badge-surface: var(--canon-theme-warning-surface);
    }
    .badge--color-success {
        --badge-color: var(--canon-theme-success);
        --badge-surface: var(--canon-theme-success-surface);
    }
    .badge--color-info {
        --badge-color: var(--canon-theme-info);
        --badge-surface: var(--canon-theme-info-surface);
    }
    .badge--color-neutral {
        --badge-color: var(--canon-theme-neutral);
        --badge-surface: var(--canon-theme-neutral-surface);
    }
}