Interactive Rating Component Main

This was really challenging. Here are some doubts i had:

HTML:

• Using input elements inside li to make the buttons is the best solution?
• When i shrink the site, the container starts shrinking on the left side first, when i wanted it to do it equally.

CSS:

• I tried using the style-guide colors to make the gradient, but it didn't looked good, so i used chrome extensions to find the exact color. Is this normal or should i always try to use the colors in the guide?

JS:

• I probably used more code than i needed to, if you know a better way to write it please share.

As always, feedback is always appreciated :)