1.toggle {
2  --bg-toggle: hsl(0, 0%, 96%);
3  --bg-circle: hsl(96, 85%, 34%);
4  width: 120px;
5  height: 60px;
6  background-color: var(--bg-toggle);
7  box-shadow: 0 .3rem 5rem 0 rgba(125, 125, 125, 0.25);
8  border-radius: 4rem;
9  display: flex;
10  align-items: center;
11  padding: 0 .3rem;
12  transition: background-color 400ms;
13}
14
15.toggle__circle {
16  width: 50px;
17  height: 50px;
18  cursor: pointer;
19  background-color: var(--bg-circle);
20  border-radius: 50%;
21  position: relative;
22  transition: margin 400ms ease-in-out, background-color 1000ms;
23}
24
25.toggle__circle::after,
26.toggle__circle::before {
27  content: '';
28  position: absolute;
29  background-color: var(--bg-toggle);
30  bottom: 118%;
31  transform-origin: bottom left;
32}
33
34.toggle__circle::before {
35  width: 15px;
36  height: 25px;
37  left: 32%;
38  border-radius: 0% 100% 0% 100% / 0% 27% 73% 100%;
39  transform: translateX(-70%) rotate(-2deg);
40}
41
42.toggle__circle::after {
43  width: 25px;
44  height: 30px;
45  left: 48%;
46  border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
47  transform: rotate(-20deg);
48}
49
50#checkbox:checked + .toggle > .toggle__circle {
51  margin-left: calc(120px - (.3rem * 2) - 50px);
52}
53
54#checkbox:checked + .toggle {
55  --bg-toggle: hsl(96, 85%, 34%);
56  --bg-circle: hsl(0, 0%, 96%);
57}