.rating-stars {
display: inline-block;
  aspect-ratio: 5;
  height: 1em;
  background-color: color-mix(in hsl, var(--text-bright-color) 25%, transparent 75%);
  background-image: linear-gradient(to right, var(--rating-stars), var(--rating-stars) var(--_rating), transparent var(--_rating), transparent);
  mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M10 0L12.9389 5.95492L19.5106 6.90983L14.7553 11.5451L15.8779 18.0902L10 15L4.12215 18.0902L5.24472 11.5451L0.489435 6.90983L7.06108 5.95492L10 0Z' fill='%23FFB300'/%3e%3c/svg%3e");
}


.rating-stars[data-rating="0,0"] {
    --_rating: 0%;
}
.rating-stars[data-rating="0,5"] {
    --_rating: 10%;
}
.rating-stars[data-rating="1,0"] {
    --_rating: 20%;
}
.rating-stars[data-rating="1,5"] {
    --_rating: 30%;
}
.rating-stars[data-rating="2,0"] {
    --_rating: 40%;
}
.rating-stars[data-rating="2,5"] {
    --_rating: 50%;
}
.rating-stars[data-rating="3,0"] {
    --_rating: 60%;
}
.rating-stars[data-rating="3,5"] {
    --_rating: 70%;
}
.rating-stars[data-rating="4,0"] {
    --_rating: 80%;
}
.rating-stars[data-rating="4,5"] {
    --_rating: 90%;
}
.rating-stars[data-rating="5,0"] {
    --_rating: 100%;
}