1.rating {
2  display: flex;
3  flex-direction: row-reverse;
4  gap: 0.3rem;
5  --stroke: #666;
6  --fill: #ffc73a;
7}
8
9.rating input {
10  appearance: unset;
11}
12
13.rating label {
14  cursor: pointer;
15}
16
17.rating svg {
18  width: 3rem;
19  height: 3rem;
20  overflow: visible;
21  fill: transparent;
22  stroke: var(--stroke);
23  stroke-linejoin: bevel;
24  stroke-dasharray: 12;
25  animation: idle 4s linear infinite;
26  transition: stroke 0.2s, fill 0.5s;
27}
28
29@keyframes idle {
30  from {
31    stroke-dashoffset: 24;
32  }
33}
34
35.rating label:hover svg {
36  stroke: var(--fill);
37}
38
39.rating input:checked + svg,
40.rating label:has(input:checked) ~ label svg {
41  transition: 0s;
42  /* Hopefully firefox gets :has support soon w/o feature flag */
43  animation: idle 4s linear infinite, yippee 0.75s backwards;
44  fill: var(--fill);
45  stroke: var(--fill);
46  stroke-opacity: 0;
47  stroke-dasharray: 0;
48  stroke-linejoin: miter;
49  stroke-width: 8px;
50}
51
52@keyframes yippee {
53  0% {
54    transform: scale(1);
55    fill: var(--fill);
56    fill-opacity: 0;
57    stroke-opacity: 1;
58    stroke: var(--stroke);
59    stroke-dasharray: 10;
60    stroke-width: 1px;
61    stroke-linejoin: bevel;
62  }
63
64  30% {
65    transform: scale(0);
66    fill: var(--fill);
67    fill-opacity: 0;
68    stroke-opacity: 1;
69    stroke: var(--stroke);
70    stroke-dasharray: 10;
71    stroke-width: 1px;
72    stroke-linejoin: bevel;
73  }
74
75  30.1% {
76    stroke: var(--fill);
77    stroke-dasharray: 0;
78    stroke-linejoin: miter;
79    stroke-width: 8px;
80  }
81
82  60% {
83    transform: scale(1.2);
84    fill: var(--fill);
85  }
86}
87