/* components/stars.php: five grey stars, and the same five in amber on top,
   cut at the rating (--stars-fill, set inline). */
.stars {
  position: relative;
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}

.stars__row {
  display: inline-flex;
  gap: 2px;
  color: var(--line);
}

.stars__row--on {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--stars-fill);
  overflow: hidden;
  color: var(--amber);
}

.stars__star {
  flex: none;
  fill: currentColor;
  stroke-width: 1.5;
}

.stars--small .stars__star {
  width: 16px;
  height: 16px;
}

.stars--medium .stars__star {
  width: 24px;
  height: 24px;
}

.stars--large .stars__star {
  width: 30px;
  height: 30px;
}