pf-counter {
  @apply inline-flex size-7 shrink-0
    items-center justify-center
    rounded-full
    text-sm font-medium
    text-white;
}

pf-counter[active] {
  background-color: var(--color-counter-active);
}

pf-counter:not([active]) {
  background-color: var(--color-counter-inactive);
}