/*
 * Badge component.
 *
 * A small inline label for status, roles, or counts. Intentionally quiet: a light surface with
 * matching text, not a loud coloured pill. Used sparingly — a page with more than two or three
 * badges has too many.
 */

.badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    background: var(--colour-surface-sunken);
    color: var(--colour-ink-quiet);
    border: var(--border-width) solid var(--colour-border);
}

.badge--success {
    background: var(--colour-success-surface);
    color: var(--colour-success);
    border-color: transparent;
}

.badge--warning {
    background: var(--colour-warning-surface);
    color: var(--colour-warning);
    border-color: transparent;
}

.badge--danger {
    background: var(--colour-error-surface);
    color: var(--colour-error);
    border-color: transparent;
}

.badge--info {
    background: var(--colour-info-surface);
    color: var(--colour-info);
    border-color: transparent;
}

.badge--muted {
    background: var(--colour-surface-sunken);
    color: var(--colour-ink-quiet);
    border-color: var(--colour-border);
}

/* A count, not a label: the unread notifications figure in the header. It is loud where the others are
   quiet, because it is the one badge whose whole job is to be noticed from across the page.

   The minimum width and the round radius make a one-digit count a circle and a longer one a lozenge, rather
   than a shape that changes with every number. Tabular figures stop the width moving as 8 becomes 9, and the
   count is capped at "99+" by the header, so three characters is the widest it ever gets. */
.badge--count {
    min-width: 1.25rem;
    justify-content: center;
    padding: 2px var(--space-1);
    border-radius: var(--radius-full);
    background: var(--colour-primary);
    color: var(--colour-primary-ink);
    border-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* ---- Badge list (for inline badge groups) -------------------------------------------------- */

.badge-list,
.admin-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}