/* ============================================================
   Rating Stars Component
   ============================================================ */
.rating {
  --stars: 5;
  --value: 3.5;
  --size: 20px;
  --color: #f5a623;
  --bg: #d8d8d8;

  inline-size: calc(var(--size) * var(--stars));
  block-size: var(--size);
  display: inline-block;
  position: relative;
}

.rating::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color) calc(var(--value) / var(--stars) * 100%),
    var(--bg) 0
  );

  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2l3.09 6.26L22 9.27l-5 4.85L18.18 22 12 18.6 5.82 22 7 14.12 2 9.27l6.91-1.01L12 2z"/>\
</svg>') repeat-x;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 2l3.09 6.26L22 9.27l-5 4.85L18.18 22 12 18.6 5.82 22 7 14.12 2 9.27l6.91-1.01L12 2z"/>\
</svg>') repeat-x;

  -webkit-mask-size: var(--size) var(--size);
  mask-size: var(--size) var(--size);
}