/* The unread counter: a number on the account color, grey when the room is muted, @ for a mention, a dot for unread with no count. */
.ds-counter {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 5px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-status-font-sm);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--ds-cta);
  color: var(--ds-on-cta);
}

.ds-counter[hidden] { display: none; }
.ds-counter--quiet { background: var(--ds-text-muted); color: var(--ds-bg-pure); }
.ds-counter--mention { padding-inline: 0; font-weight: var(--ds-weight-bold); background: var(--ds-negative); color: var(--ds-bg-pure); }
.ds-counter--dot { min-inline-size: 8px; block-size: 8px; padding: 0; background: var(--ds-negative); }

/* v5: everything unread speaks in the account's ink, and the dot is the badge's 7 px. */
:where(html[data-visual="v5"]) .ds-counter--mention { background: var(--ds-cta); color: var(--ds-on-cta); }
:where(html[data-visual="v5"]) .ds-counter--dot { min-inline-size: 7px; block-size: 7px; background: var(--ds-cta); }