Radio by amikambs

1.rating:not(:checked) > input {
2  position: absolute;
3  appearance: none;
4}
5
6.rating:not(:checked) > label {
7  float: right;
8  cursor: pointer;
9  font-size: 30px;
10  fill: #666;
11}
12
13.rating:not(:checked) > label > svg {
14  fill: #666; /* Set default color for SVG */
15  transition: fill 0.3s ease; /* Add a transition effect */
16}
17
18.rating > input:checked + label:hover,
19.rating > input:checked + label:hover ~ label,
20.rating > input:checked ~ label:hover,
21.rating > input:checked ~ label:hover ~ label,
22.rating > label:hover ~ input:checked ~ label {
23  fill: #e58e09;
24}
25
26.rating:not(:checked) > label:hover,
27.rating:not(:checked) > label:hover ~ label {
28  fill: #ff9e0b;
29}
30
31.rating > input:checked ~ label > svg {
32  fill: #ffa723; /* Set color for selected stars */
33}
34