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

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

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