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 .bell-regular {
16  position: absolute;
17  animation: keyframes-fill .5s;
18}
19
20.container .bell-solid {
21  position: absolute;
22  display: none;
23  animation: keyframes-fill .5s;
24}
25
26/* ------ On check event ------ */
27.container input:checked ~ .bell-regular {
28  display: none;
29}
30
31.container input:checked ~ .bell-solid {
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    opacity: 0;
48  }
49
50  25% {
51    transform: rotate(25deg);
52  }
53
54  50% {
55    transform: rotate(-20deg) scale(1.2);
56  }
57
58  75% {
59    transform: rotate(15deg);
60  }
61}