/*
 * Badges d'état Refactia.
 *
 * Référence : badges de statut de la liste des factures
 * (orderdocs-state-badge, list/list-global_v2.css).
 * Ton    : --neutral (défaut) | --success | --warning | --info | --danger | --brand
 * Taille : (défaut) 28px | --sm 22px
 * Un badge affiche un état, il n'est pas cliquable : pour une action,
 * utiliser .app-btn.
 * Valeurs : foundation/tokens.css. Registre : doc/design-system/README.md
 */

.app-badge {
    --app-badge-bg: var(--ds-neutral-bg);
    --app-badge-fg: var(--ds-neutral-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-6);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 28px;
    margin: 0;
    padding: var(--ds-space-4) 9px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--app-badge-bg);
    color: var(--app-badge-fg);
    font-family: var(--ds-font);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-bold);
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

.app-badge__icon {
    display: inline-flex;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: currentColor;
}

.app-badge__icon > :is(svg, img) {
    width: 15px;
    height: 15px;
}

.app-badge__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-badge--success {
    --app-badge-bg: var(--ds-success-bg);
    --app-badge-fg: var(--ds-success-fg);
}

.app-badge--warning {
    --app-badge-bg: var(--ds-warning-bg);
    --app-badge-fg: var(--ds-warning-fg);
}

.app-badge--info {
    --app-badge-bg: var(--ds-info-bg);
    --app-badge-fg: var(--ds-info-fg);
}

.app-badge--danger {
    --app-badge-bg: var(--ds-danger-bg);
    --app-badge-fg: var(--ds-danger-fg);
}

.app-badge--brand {
    --app-badge-bg: var(--ds-tint-2);
    --app-badge-fg: var(--ds-accent-deep);
}

.app-badge--sm {
    min-height: 22px;
    padding: 2px var(--ds-space-8);
    font-size: var(--ds-text-xs);
}

.app-badge--sm .app-badge__icon {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
}