/* Progress Bar — WowVendor DS. Горизонтальный линейный индикатор прогресса.
   Мастер Figma: Progress Bar (3909:83366).

   Оси component set: Size(S/M) × Progress(0…100%, шаг 10). Плюс boolean-проп
   Show Label — подпись справа можно скрыть (просто не выводи .progress-bar__label).

   Анатомия: [трек (flex-1) [заливка]] gap-8 [подпись фикс. ширины].
     S — трек 4px, radius 2px, подпись .text-body-12m (12/16)
     M — трек 6px, radius 8px, подпись .text-body-14m (14/20)
   Подпись левовыровнена; цвет gray-700; трек gray-50; заливка accent-400.

   Габариты, не выведенные в Figma под переменные (приём как в counter/tabs):
   - высота трека 4px = --spacing-4, 6px = --spacing-6 (совпадают точь-в-точь);
   - радиус S в Figma захардкожен 2px, токена --radius-2 в индексе НЕТ; беру
     --radius-4 — на элементе высотой 4px border-radius клампится половиной
     высоты (2px), пиксель-в-пиксель совпадает с эталоном. У M радиус 8px
     (--radius-8) клампится до 3px при высоте 6px — тоже как в Figma;
   - ширина подписи фиксирована (подогнана под строку «100%», чтобы трек не
     дёргался при смене процента): 32px у S = --spacing-32, 41px у M — точного
     токена нет, оставлен px-габаритом.

   Цвет заливки переопределяется контекстно через --progress-fill (например в
   product card — --color-positive-400). Остальные значения — только токены. */

.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  /* Ширина подписи: S по умолчанию */
  --progress-label-width: var(--spacing-32);
}

/* Трек. Самодостаточен: используется и внутри .progress-bar, и отдельно —
   без подписи (сегментированный прогресс product card). */
.progress-bar__track {
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  height: var(--spacing-4);
  border-radius: var(--radius-4);
  background: var(--color-gray-50);
  overflow: hidden;
}

.progress-bar__scale {
  display: block;
  width: 100%;             /* переопредели инлайном для частичного заполнения */
  height: 100%;
  border-radius: inherit;
  background: var(--progress-fill, var(--color-accent-400));
}

.progress-bar__label {
  flex: 0 0 auto;
  width: var(--progress-label-width);
  color: var(--color-gray-700);
}

/* Size=M */
.progress-bar--m { --progress-label-width: 41px; }

.progress-bar--m .progress-bar__track {
  height: var(--spacing-6);
  border-radius: var(--radius-8);
}

/* Контекстный цвет заливки: успех (используется в product card).
   Модификатор работает и на корне, и на голом треке. */
.progress-bar--positive,
.progress-bar__track--positive { --progress-fill: var(--color-positive-400); }