<div class="stars">
  <input type="radio" id="star1" name="rating" value="1" /><input type="radio" id="star2" name="rating" value="2" /><input type="radio" id="star3" name="rating" value="3" /><input type="radio" id="star4" name="rating" value="4" /><input type="radio" id="star5" name="rating" value="5" />
  
  <label for="star1" aria-label="Banana">1 star</label><label for="star2">2 stars</label><label for="star3">3 stars</label><label for="star4">4 stars</label><label for="star5">5 stars</label>
</div>

$star-size: 60px;
$color: slategray;

@mixin set-star($border: $color, $fill: transparent) {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{$fill}' stroke='#{$border}' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.stars input {
  position: absolute;
  clip: rect(0,0,0,0);
}

.stars label {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 6px;
  height: $star-size;
  width: $star-size;
  @include set-star;
  font-size: 0;
  cursor: pointer;
}

.stars input:nth-child(1):checked ~ label:nth-of-type(-n + 1),
.stars input:nth-child(2):checked ~ label:nth-of-type(-n + 2),
.stars input:nth-child(3):checked ~ label:nth-of-type(-n + 3),
.stars input:nth-child(4):checked ~ label:nth-of-type(-n + 4),
.stars input:nth-child(5):checked ~ label:nth-of-type(-n + 5) {
  @include set-star($color, $color);
}

/* 
  PRESENTATION ONLY
  Everything below this line is unnecessary
*/

body {
  padding-top: 50px;
  text-align: center;
}