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;
18}
19
20.container .chevron-down {
21  position: absolute;
22  display: none;
23  animation: keyframes-fill .5s;
24}
25
26/* ------ On check event ------ */
27.container input:checked ~ .chevron-right {
28  display: none;
29}
30
31.container input:checked ~ .chevron-down {
32  display: block;
33}
34
35/* ------ Hide the default checkbox ------ */
36.container input {
37  position: absolute;
38  opacity: 0;
39  cursor: pointer;
40  height: 0;
41  width: 0;
42}
43
44/* ------ Animation ------ */
45@keyframes keyframes-fill {
46  0% {
47    transform: rotate(-90deg) scale(0);
48    opacity: 0;
49  }
50
51  50% {
52    transform: rotate(0deg) scale(1.2);
53  }
54}
55
56@keyframes keyframes-return {
57  0% {
58    transform: rotate(90deg) scale(0);
59    opacity: 0;
60  }
61
62  50% {
63    transform: rotate(0deg) scale(1.2);
64  }
65}