@use "../core/variables" as *;
@use "../core/mixins" as *;

// =============================================================
// Badges — bloc composant .badge pour rôles utilisateur et catégories
// =============================================================

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-xs;
    padding: $spacing-2xs $spacing-sm;
    border-radius: $radius-sm;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    line-height: $line-height-tight;
    text-decoration: none;
}

.badge--admin {
    color: $color-warning-text;
    background: $color-warning-bg;
}

.badge--editor {
    color: $color-info-text;
    background: $color-info-bg;
}

.badge--user {
    color: $color-text-muted;
    background: $color-bg-light;
}

// Badge catégorie — affiché sur les cartes d'articles et les pages de détail
// Cliquable : redirige vers la liste filtrée par catégorie
.badge--category {
    color: $color-primary;
    background: $color-primary-bg;
    vertical-align: middle;

    @include interactive-transition;

    &:hover {
        background: $color-primary-bg-hover;
    }

    &:focus-visible {
        @include focus-ring;
    }
}