/* Independed Rate — виджет рейтинга: ряд из 5 звёзд (сет 10248:17937, ось Rate).
   Девять вариантов: 5, 4+, 4, 3+, 3, 2+, 2, 1+, 1 («+» = половина звезды).
   Цвет заливки зависит от рейтинга (в Figma захардкожен в векторе звезды):
     5 / 4+ / 4  → positive-400 (#00A352)
     3+ / 3      → rating-mid   (#85B129) — в Figma не привязан к Variable
     2+ / 2      → warning-300  (#F78F08)
     1+ / 1      → negative-500 (#DB2424)
   Пустая часть звезды — gray-100. Заливка каждой звезды считается из --rate-value
   (доля = value − индекс звезды, зажатая в 0…100%); --rate-fill на .rate__star
   переопределяет её вручную для произвольных долей (напр. 80%).
   Размеры: 20px (сет, дефолт) и 16px (hero, модификатор .rate--16).
   Зазор 2px — в Figma raw px (токена --spacing-2 нет; приём как габариты counter). */

.rate {
  --rate-value: 5;
  --rate-color: var(--color-positive-400);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* --- Варианты оси Rate --- */
.rate--5   { --rate-value: 5;   --rate-color: var(--color-positive-400); }
.rate--4-5 { --rate-value: 4.5; --rate-color: var(--color-positive-400); }
.rate--4   { --rate-value: 4;   --rate-color: var(--color-positive-400); }
.rate--3-5 { --rate-value: 3.5; --rate-color: var(--color-rating-mid); }
.rate--3   { --rate-value: 3;   --rate-color: var(--color-rating-mid); }
.rate--2-5 { --rate-value: 2.5; --rate-color: var(--color-warning-300); }
.rate--2   { --rate-value: 2;   --rate-color: var(--color-warning-300); }
.rate--1-5 { --rate-value: 1.5; --rate-color: var(--color-negative-500); }
.rate--1   { --rate-value: 1;   --rate-color: var(--color-negative-500); }

.rate__star {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

/* Индекс звезды — сколько целых звёзд закрашено до неё */
.rate__star:nth-child(1) { --rate-index: 0; }
.rate__star:nth-child(2) { --rate-index: 1; }
.rate__star:nth-child(3) { --rate-index: 2; }
.rate__star:nth-child(4) { --rate-index: 3; }
.rate__star:nth-child(5) { --rate-index: 4; }

.rate--16 .rate__star { width: 16px; height: 16px; }

.rate__layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.rate__layer svg { display: block; height: 100%; }

/* Серая база — полная ширина звезды */
.rate__empty {
  width: 100%;
  color: var(--color-gray-100);
}
.rate__empty svg { width: 100%; }

/* Цветная заливка — клип по доле; SVG внутри держит полную ширину звезды */
.rate__fill {
  width: var(--rate-fill, clamp(0%, calc((var(--rate-value) - var(--rate-index)) * 100%), 100%));
  overflow: hidden;
  color: var(--rate-color);
}
.rate__fill svg { width: 20px; }
.rate--16 .rate__fill svg { width: 16px; }