.radio-stars
  input.sr-only#radio-5 [type="radio" name="radio-star" value="5"]
  label.radio-star [for="radio-5"] 5

  input.sr-only#radio-4 [type="radio" name="radio-star" value="4" checked]
  label.radio-star [for="radio-4"] 4

  input.sr-only#radio-3 [type="radio" name="radio-star" value="3"]
  label.radio-star [for="radio-3"] 3

  input.sr-only#radio-2 [type="radio" name="radio-star" value="2"]
  label.radio-star [for="radio-2"] 2

  input.sr-only#radio-1 [type="radio" name="radio-star" value="1"]
  label.radio-star [for="radio-1"] 1

  span.radio-star-total

$star-selected-color: orange;
$star-empty-color: rgba(0,0,0,.25);
$font-size: 40px;

.radio-stars {
  display: inline-block;
  position: relative;
  
  unicode-bidi: bidi-override;
  direction: rtl;
  
  counter-reset: star-rating;

  font-size: 0; // remove extraneous padding

  &:hover {
    // Stars to the right of cursor
    .radio-star::before {
      content: '☆';
    }

    // Stars under and to the left of cursor
    .radio-star:hover {
      &::before,
      ~ .radio-star::before {
        content: '★';
      }
    }
  }
}

.radio-star {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  
  padding: 0 2px;
  width: .9em;

  direction: ltr;
  color:  $star-empty-color;
  font-size: $font-size;
  white-space: nowrap;

  &::before {
    content: '☆';
  }

  &:hover,
  &:hover ~ &,
  input:checked ~ & {
    color: $star-selected-color;
  }


  input:checked ~ & {
    counter-increment: star-rating;

    &::before {
      content: '★';
    }
  }
}


.radio-star-total {
  pointer-events: none; // Don’t trigger hover
  direction: ltr;
  unicode-bidi: bidi-override;
  
  position: absolute;
  right: -2em;
  bottom: .5em;
  
  color: gray;
  color: white;
  font-size: $font-size / 2;

  &::before {
    content: counter(star-rating) '/5';
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  clip: rect(0,0,0,0);
  border: 0;  
}

html {
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: dodgerblue;
  height: 100%;
  font-family: Avenir Next;
}