.counter {
  --counter-size: 1.25rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--counter-size);
  block-size: var(--counter-size);
  padding-inline: calc(var(--counter-size) / 4);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-fill);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-thick);
  line-height: var(--line-height-label);
  white-space: nowrap;
}

.counter[hidden],
.counter__capped {
  display: none;
}

@media (width <= 48rem) {
  .counter__capped {
    display: inline;
  }

  .counter:has(.counter__capped) .counter__exact {
    display: none;
  }
}

.counter--entering {
  transition:
    opacity var(--duration-enter) var(--easing-enter),
    scale var(--duration-enter) var(--easing-enter);
}

@starting-style {
  .counter--entering {
    opacity: 0;
    scale: var(--scale-recessed);
  }
}

@media (forced-colors: active) {
  .counter {
    outline: var(--border-width) solid currentcolor;
  }
}