/* ===== ICON BADGE COMPONENT - BEM ===== */
/* Badges iconographiques pour les statuts et indicateurs visuels */

/* BLOCK: Base icon badge */
.c-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    font-size: inherit;
    color: var(--icon-color, inherit);
    background-color: rgba(var(--icon-color-rgb, 100, 100, 100), 0.1);
    border: 1px solid rgba(var(--icon-color-rgb, 100, 100, 100), 0.2);
    transition: all 0.2s ease;
}

.c-icon-badge:hover {
    transform: scale(1.1);
    background-color: rgba(var(--icon-color-rgb, 100, 100, 100), 0.15);
}

/* MODIFIERS: Color variants */

.c-icon-badge--primary {
    --icon-color: var(--cb-primary, #3182ce);
    --icon-color-rgb: 49, 130, 206;
}

.c-icon-badge--success {
    --icon-color: var(--cb-success, #28a745);
    --icon-color-rgb: 40, 167, 69;
}

.c-icon-badge--danger {
    --icon-color: var(--cb-danger, #dc3545);
    --icon-color-rgb: 220, 53, 69;
}

.c-icon-badge--warning {
    --icon-color: var(--cb-warning, #ffc107);
    --icon-color-rgb: 255, 193, 7;
}

.c-icon-badge--info {
    --icon-color: var(--cb-info, #17a2b8);
    --icon-color-rgb: 23, 162, 184;
}

.c-icon-badge--secondary {
    --icon-color: var(--cb-secondary, #6c757d);
    --icon-color-rgb: 108, 117, 125;
}

.c-icon-badge--muted {
    --icon-color: #999;
    --icon-color-rgb: 153, 153, 153;
}

/* MODIFIERS: Size variants */

.c-icon-badge--small {
    width: 1.5em;
    height: 1.5em;
    font-size: 0.875rem;
}

.c-icon-badge--large {
    width: 2.5em;
    height: 2.5em;
    font-size: 1.25rem;
}

.c-icon-badge--xl {
    width: 3em;
    height: 3em;
    font-size: 1.5rem;
}

/* MODIFIERS: Style variants */

.c-icon-badge--outline {
    background-color: transparent;
    border: 2px solid var(--icon-color, currentColor);
}

.c-icon-badge--outline:hover {
    background-color: rgba(var(--icon-color-rgb, 100, 100, 100), 0.1);
}

.c-icon-badge--filled {
    background-color: var(--icon-color, #999);
    color: white;
    border: none;
}

.c-icon-badge--filled:hover {
    opacity: 0.85;
}

/* ELEMENT: Icon inside (optional) */

.c-icon-badge__icon {
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
}