:root {
  --m-fivestar-rating-star-size: 0.8125rem;
  --m-fivestar-rating-star-color-scale: #ccc;
  --m-fivestar-rating-star-color-votes: #000;
  --m-fivestar-rating-result: 0;
  --m-fivestar-rating-votes-spacing-x: 0.375rem;
  --m-fivestar-rating-star-icon-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.13' d='m9 13.3 3.85 2.36a.6.6 0 0 0 .88-.64l-1.05-4.42 3.43-2.95a.6.6 0 0 0-.34-1.04l-4.5-.37-1.73-4.19a.59.59 0 0 0-1.08 0l-1.74 4.2-4.49.36a.6.6 0 0 0-.34 1.04l3.43 2.96L4.27 15a.6.6 0 0 0 .88.65L9 13.3Z'/%3E%3C/svg%3E");
  --m-fivestar-rating-star-icon-votes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%23000' d='m16.49 8.04-3.17 2.77.95 4.12a1.13 1.13 0 0 1-1.68 1.22L9 13.97l-3.58 2.18a1.13 1.13 0 0 1-1.68-1.22l.95-4.12-3.17-2.77a1.13 1.13 0 0 1 .64-1.97l4.18-.36 1.63-3.9a1.12 1.12 0 0 1 2.08 0l1.63 3.9 4.18.36a1.13 1.13 0 0 1 .64 1.97Z'/%3E%3C/svg%3E");
}

.fivestar-rating {
  display: flex;
  align-items: center;
  gap: var(--m-fivestar-rating-votes-spacing-x);
}

.fivestar-rating__result {
  position: relative;
  display: block;
  width: calc(5 * var(--m-fivestar-rating-star-size));
  height: var(--m-fivestar-rating-star-size);
}

.fivestar-rating__result:before,
.fivestar-rating__result:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--m-fivestar-rating-star-size);
  mask-position: left center;
  mask-repeat: repeat-x;
  mask-size: var(--m-fivestar-rating-star-size);
}

.fivestar-rating__result:before {
  background-color: var(--m-fivestar-rating-star-color-votes);
  width: calc(var(--m-fivestar-rating-result) * var(--m-fivestar-rating-star-size));
  mask: var(--m-fivestar-rating-star-icon-votes);
  z-index: 1;
}

.fivestar-rating__result:after {
  background-color: var(--m-fivestar-rating-star-color-scale);
  width: calc(5 * var(--m-fivestar-rating-star-size));
  mask: var(--m-fivestar-rating-star-icon-scale);
  z-index: 0;
}

[data-fivestar-rating-result="0"]   { --m-fivestar-rating-result: 0; }
[data-fivestar-rating-result="0.5"] { --m-fivestar-rating-result: 0.5; }
[data-fivestar-rating-result="1"]   { --m-fivestar-rating-result: 1; }
[data-fivestar-rating-result="1.5"] { --m-fivestar-rating-result: 1.5; }
[data-fivestar-rating-result="2"]   { --m-fivestar-rating-result: 2; }
[data-fivestar-rating-result="2.5"] { --m-fivestar-rating-result: 2.5; }
[data-fivestar-rating-result="3"]   { --m-fivestar-rating-result: 3; }
[data-fivestar-rating-result="3.5"] { --m-fivestar-rating-result: 3.5; }
[data-fivestar-rating-result="4"]   { --m-fivestar-rating-result: 4; }
[data-fivestar-rating-result="4.5"] { --m-fivestar-rating-result: 4.5; }
[data-fivestar-rating-result="5"]   { --m-fivestar-rating-result: 5; }