.rating {
  position: absolute;
  display: inline-block;
  font-size: 0;
}

.rating:not(:checked) > input {
  position: absolute;
  appearance: none;
}

.rating:not(:checked) > label {
  float: right;
  cursor: pointer;
  font-size: 17px;
  fill: #666;
}

.rating:not(:checked) > label > svg {
  fill: #bbbbbb;
  transition: fill 0.3s ease;
}

.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {
  fill: #e58e09;
}

.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
  fill: #ff9e0b;
}

.rating > input:checked ~ label > svg {
  fill: #ffa723;
}