.counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--radius-24);
  font-family: var(--font-family-base);
  text-align: center;
  white-space: nowrap;
}

.counter--s { min-width: var(--spacing-16); height: var(--spacing-16); padding-inline: var(--spacing-4); }
.counter--m { min-width: var(--spacing-20); height: var(--spacing-20); padding-inline: var(--spacing-6); }
.counter--l { min-width: var(--spacing-24); height: var(--spacing-24); padding-inline: var(--spacing-8); }

.counter--primary { color: var(--color-gray-0); }
.counter--primary.counter--default  { background: var(--color-accent-400); }
.counter--primary.counter--disabled { background: var(--color-gray-100); }
.counter--primary.counter--error    { background: var(--color-negative-500); }

.counter--secondary.counter--default  { background: var(--color-gray-25);     color: var(--color-gray-900); }
.counter--secondary.counter--disabled { background: var(--color-gray-0);      color: var(--color-gray-100); }
.counter--secondary.counter--error    { background: var(--color-negative-25); color: var(--color-negative-500); }