Stars rating in css only

.html

<div class="rating">
  <input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1">
  <label for="rating-input-1-5" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1">
  <label for="rating-input-1-4" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1">
  <label for="rating-input-1-3" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1">
  <label for="rating-input-1-2" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1">
  <label for="rating-input-1-1" class="rating-star"></label>
</div>

.scss

  .rating {
    width: 185px;
    margin-top: 10px;
    padding: 0;
    height: 33px;
    overflow: hidden;
    display: block;
    margin-left: -18px;
    margin-bottom: 10px;
  }

  .rating-input {
    position: absolute;
    left: 0;
    display: none;
  }

  .rating-star {
    display: block;
    float: right;
    width: 35px;
    height: 30px;
    cursor: pointer;
    background: url("data:image/svg+xml;utf8,<svg width='30px' height='30px' viewBox='-1 -1 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon id='Star-1' stroke='#D2D2D2' stroke-width='1' fill='#F1F1F1' fill-rule='evenodd' points='14.1686062 21.5151407 5.84050841 25.8934808 7.43103355 16.6200077 0.693460945 10.0524976 10.0045573 8.69951608 14.1686062 0.262231507 18.332655 8.69951608 27.6437514 10.0524976 20.9061788 16.6200077 22.4967039 25.8934808'></polygon></svg>");
    background-repeat: no-repeat;
    &:hover, &:hover~.rating-star {
      background: url("data:image/svg+xml;utf8,<svg width='30px' height='30px' viewBox='-1 -1 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon id='Star-1' stroke='#ffc200' stroke-width='1' fill='#ffc200' fill-rule='evenodd' points='14.1686062 21.5151407 5.84050841 25.8934808 7.43103355 16.6200077 0.693460945 10.0524976 10.0045573 8.69951608 14.1686062 0.262231507 18.332655 8.69951608 27.6437514 10.0524976 20.9061788 16.6200077 22.4967039 25.8934808'></polygon></svg>");
      background-repeat: no-repeat;
    }
  }

  .rating-input {
    &:checked~.rating-star {
      background: url("data:image/svg+xml;utf8,<svg width='30px' height='30px' viewBox='-1 -1 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon id='Star-1' stroke='#ffc200' stroke-width='1' fill='#ffc200' fill-rule='evenodd' points='14.1686062 21.5151407 5.84050841 25.8934808 7.43103355 16.6200077 0.693460945 10.0524976 10.0045573 8.69951608 14.1686062 0.262231507 18.332655 8.69951608 27.6437514 10.0524976 20.9061788 16.6200077 22.4967039 25.8934808'></polygon></svg>");
      background-repeat: no-repeat;
    }
  }