.star-rating-widget-container {
  display: flex;
  justify-content: var(--center);
}

.star-rating-widget.rating {
  display: flex;
  gap: var(--gap-ml);
  flex-direction: row-reverse;
  justify-content: var(--center);
}

.star-rating-widget.rating input {
  display: none;
}

.star-rating-widget.rating label {
  font-size: var(--font-size-5xl);
  color: var(--gray-300);
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating-widget.rating label:hover,
.star-rating-widget.rating label:hover ~ label {
  color: var(--warning-200);
}

.star-rating-widget.rating input:checked ~ label {
  color: var(--warning-400);
}