.component-star-rating-select{
  align-items:start;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-bottom:2rem;
}

.component-star-rating-select__input{
  height:0;
  opacity:0;
  position:absolute;
  width:0;
}
[name*=star-rating][value="1"][checked=checked]~.stars :nth-child(5),[name*=star-rating][value="2"][checked=checked]~.stars :nth-child(n+4):nth-child(-n+5),[name*=star-rating][value="3"][checked=checked]~.stars :nth-child(n+3):nth-child(-n+5),[name*=star-rating][value="4"][checked=checked]~.stars :nth-child(n+2):nth-child(-n+5),[name*=star-rating][value="5"][checked=checked]~.stars :nth-child(-n+5){
  animation:pulse .25s ease-in-out forwards;
}

.stars{
  color:#d3d3d3;
  display:flex;
  flex-direction:row-reverse;
}
.stars div,.stars label{
  font-size:20px;
  padding:0 2px;
}
.stars div:hover,.stars div:hover~label,.stars label:hover,.stars label:hover~label{
  color:grey;
}
.stars div:nth-child(5),.stars label:nth-child(5){
  animation-delay:0;
}
.stars div:nth-child(4),.stars label:nth-child(4){
  animation-delay:.05s !important;
}
.stars div:nth-child(3),.stars label:nth-child(3){
  animation-delay:.1s !important;
}
.stars div:nth-child(2),.stars label:nth-child(2){
  animation-delay:.15s !important;
}
.stars div:first-child,.stars label:first-child{
  animation-delay:.2s !important;
}

@keyframes pulse{
  0%{
    color:gray;
    transform:scale(1);
  }
  50%{
    color:#4e7661;
    transform:scale(1.3);
  }
  to{
    transform:scale(1);
    -webkit-text-fill-color:#4e7661;
    -webkit-text-stroke-color:#4e7661;
  }
}