/* ===== OO CounterLabel =====
   Runder Zähler neben einem Text. Die Größe folgt der Schrift der Umgebung (em), damit er in Navigation,
   Tabs und Buttons jeder Größe passt. Mit ButtonStyle kommen Hintergrund und Text aus den --_btn-* Vars.
   ============================ */

.oo-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.6em;
    padding: 0 0.45em;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border-radius: var(--oo-radius-full);
    background-color: color-mix(in oklch, var(--oo-color-text) 10%, transparent);
    color: var(--oo-color-text);
}

.oo-counter--colored {
    background-color: var(--_btn-bg);
    color: var(--_btn-text);
}