/* Counter — WowVendor DS. Числовой счётчик значений/параметров для ячеек,
   кнопок и чипсов. «Размер определяется содержимым»: одиночная цифра даёт
   круг (min-width = высоте), многозначное значение растёт по ширине.

   Оси: Size (s/m/l) × Variants (primary/secondary) × Interaction
        (default/disabled/error).

   Геометрия мастер-компонента Figma:
     S 16×16 (текст 11m), M 20×20 (12m), L 24×24 (14m), радиус — пилюля.
   В Figma внутренний вертикальный отступ 2px и min-ширину задаёт «Hack»-нода;
   переменных под эти значения в системе нет, поэтому воспроизводим геометрию
   через фиксированную высоту-токен (--spacing-16/20/24) + центрирование — без
   выдуманных значений.

   Значения — только токены. Типографика — utility-классами в разметке
   (.text-body-11m / .text-body-12m / .text-body-14m). */

.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); }

/* ==== Primary: сплошная заливка, текст белый ==== */
.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); }

/* ==== Secondary: светлый фон, текст в цвет ==== */
.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); }