.rating {
  --val: 2.5;
  --size: 1rem;

  &.tile {
    --size: 1rem;
  }

  &.detail {
    --size: 1.25rem;
  }

  --mask: conic-gradient(from -18deg at 61% 34.5%, #0000 108deg, #000000 0) 0 / var(--size),
  conic-gradient(from 270deg at 39% 34.5%, #0000 108deg, #000000 0) 0 / var(--size),
  conic-gradient(from 54deg at 68% 56%, #0000 108deg, #000000 0) 0 / var(--size),
  conic-gradient(from 198deg at 32% 56%, #0000 108deg, #000000 0) 0 / var(--size),
  conic-gradient(from 126deg at 50% 69%, #0000 108deg, #000000 0) 0 / var(--size);
  --bg: linear-gradient(90deg, #FFD700 calc(var(--size) * var(--val)), #D9D9D9 0);
  height: var(--size);
  width: calc(var(--size) * 5);
  border: 0; /* Firefox adds a default border to ranges */
  -webkit-appearance: none;
  appearance: none;

  /* Chrome and Safari */

  &::-webkit-slider-runnable-track {
    height: 100%;
    mask: var(--mask);
    mask-composite: intersect;
    background: var(--bg);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  &::-webkit-slider-thumb {
    opacity: 0;
  }

  /* Firefox */

  &::-moz-range-track {
    height: 100%;
    mask: var(--mask);
    mask-composite: intersect;
    background: var(--bg);
    print-color-adjust: exact;
  }

  &::-moz-range-thumb {
    opacity: 0;
  }
}