1.toggle-container {
2  --active-color: #1868e3;
3  --inactive-color: #d3d3d6;
4  position: relative;
5  aspect-ratio: 292 / 142;
6  height: 1.875em;
7}
8
9.toggle-input {
10  appearance: none;
11  margin: 0;
12  position: absolute;
13  z-index: 1;
14  top: 0;
15  left: 0;
16  width: 100%;
17  height: 100%;
18  cursor: pointer;
19}
20
21.toggle {
22  width: 100%;
23  height: 100%;
24  overflow: visible;
25}
26
27.toggle-background {
28  fill: var(--inactive-color);
29  transition: fill .4s;
30}
31
32.toggle-input:checked + .toggle .toggle-background {
33  fill: var(--active-color);
34}
35
36.toggle-circle-center {
37  transform-origin: center;
38  transition: transform .6s;
39}
40
41.toggle-input:checked + .toggle .toggle-circle-center {
42  transform: translateX(150px);
43}
44
45.toggle-circle {
46  transform-origin: center;
47  transition: transform .45s;
48  backface-visibility: hidden;
49}
50
51.toggle-circle.left {
52  transform: scale(1);
53}
54
55.toggle-input:checked + .toggle .toggle-circle.left {
56  transform: scale(0);
57}
58
59.toggle-circle.right {
60  transform: scale(0);
61}
62
63.toggle-input:checked + .toggle .toggle-circle.right {
64  transform: scale(1);
65}
66
67.toggle-icon {
68  transition: fill .4s;
69}
70
71.toggle-icon.on {
72  fill: var(--inactive-color);
73}
74
75.toggle-input:checked + .toggle .toggle-icon.on {
76  fill: #fff;
77}
78
79.toggle-icon.off {
80  fill: #eaeaec;
81}
82
83.toggle-input:checked + .toggle .toggle-icon.off {
84  fill: var(--active-color);
85}