1/*------ Settings ------*/
2.container {
3  --color: #a5a5b0;
4  --size: 30px;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  position: relative;
9  cursor: pointer;
10  font-size: var(--size);
11  user-select: none;
12  fill: var(--color);
13}
14
15.container .chevron-right {
16  position: absolute;
17  animation: keyframes-return .5s backwards;
18}
19
20/* ------ On check event ------ */
21.container input:checked ~ .chevron-right {
22  animation: keyframes-rotate .5s backwards;
23  transform: rotate(180deg);
24}
25
26/* ------ Hide the default checkbox ------ */
27.container input {
28  position: absolute;
29  opacity: 0;
30  cursor: pointer;
31  height: 0;
32  width: 0;
33}
34
35/* ------ Animation ------ */
36@keyframes keyframes-rotate {
37  0% {
38    transform: rotate(0deg);
39    opacity: 0;
40  }
41
42  100% {
43    transform: rotate(180deg);
44  }
45}
46
47@keyframes keyframes-return {
48  0% {
49    transform: rotate(180deg);
50    opacity: 0;
51  }
52
53  100% {
54    transform: rotate(0deg);
55  }
56}