Switch by Admin12121

1.switch,
2.switch__input {
3  --hue: 223;
4  --bg: hsl(var(--hue), 90%, 60%);
5  --fg: hsl(var(--hue), 90%, 10%);
6  --primary: hsl(var(--hue), 90%, 50%);
7  --trans-dur: 0.3s;
8  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
9  font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320));
10  position: relative;
11  -webkit-tap-highlight-color: transparent;
12}
13.switch {
14  display: block;
15  filter: grayscale(0.9);
16  margin: auto;
17  transition: filter var(--trans-dur) var(--trans-timing);
18  width: 6em;
19  height: 2.75em;
20}
21.switch:has(:checked) {
22  filter: grayscale(0);
23}
24.switch__input {
25  cursor: pointer;
26  outline: transparent;
27  width: 100%;
28  height: 100%;
29  -webkit-appearance: none;
30  appearance: none;
31  z-index: 2;
32}
33.switch__bg {
34  background: radial-gradient(
35    7.75em 7.75em at 50% 4.0625em,
36    hsla(var(--hue), 90%, 90%, 0) 29.9%,
37    hsl(var(--hue), 90%, 90%) 30.1% 31.9%,
38    hsl(0, 0%, 100%) 32.1% 35.2%,
39    hsl(var(--hue), 50%, 80%) 35.4% 36%,
40    hsl(var(--hue), 90%, 70%) 36.2% 41.8%,
41    hsl(var(--hue), 90%, 65%) 42% 43.6%,
42    hsl(var(--hue), 50%, 80%) 43.8% 44.4%,
43    hsl(0, 0%, 100%) 44.6% 46.6%,
44    hsl(var(--hue), 90%, 90%) 46.8% 49.3%,
45    hsl(var(--hue), 90%, 98%) 49.5% 49.8%,
46    hsla(var(--hue), 90%, 98%, 0) 49.9%
47  );
48  clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
49  display: block;
50  position: absolute;
51  inset: 0;
52  z-index: 1;
53}
54.switch:before,
55.switch:after,
56.switch__input:before {
57  content: "";
58  display: block;
59  position: absolute;
60  top: 0;
61  left: 0;
62}
63.switch:before,
64.switch:after {
65  background: radial-gradient(
66      60% 60% at 50% 50%,
67      hsla(var(--hue), 50%, 80%, 0) 34%,
68      hsl(var(--hue), 50%, 80%) 35% 40.5%,
69      hsl(0, 0%, 100%) 41.5% 49%,
70      hsla(0, 0%, 100%, 0) 50%
71    ),
72    linear-gradient(
73        hsla(var(--hue), 90%, 65%, 0) 30%,
74        hsl(var(--hue), 90%, 65%) 30% 40%,
75        hsla(var(--hue), 90%, 65%, 0) 40%
76      )
77      50% 0 / 40% 100% no-repeat,
78    radial-gradient(
79      50% 50% at 50% 50%,
80      hsl(var(--hue), 90%, 70%) 41%,
81      hsla(var(--hue), 90%, 70%, 0) 42%
82    ),
83    radial-gradient(
84      75% 75% at 50% 52.5%,
85      hsl(0, 0%, 100%) 49.8%,
86      hsla(0, 0%, 100%, 0) 50%
87    ),
88    radial-gradient(
89      112% 112% at 50% 55%,
90      hsl(var(--hue), 90%, 98%, 0) 46.8%,
91      hsl(var(--hue), 90%, 98%) 47% 49.8%,
92      hsla(var(--hue), 90%, 98%, 0) 50%
93    ),
94    radial-gradient(
95      100% 100% at 50% 50%,
96      hsl(var(--hue), 90%, 90%) 49.8%,
97      hsla(var(--hue), 90%, 90%, 0) 50%
98    );
99  border-radius: 50%;
100  top: auto;
101  bottom: 0.0625em;
102  width: 1.5625em;
103  height: 1.5625em;
104}
105.switch:before {
106  transform: rotate(-45deg);
107}
108.switch:after {
109  right: 0;
110  left: auto;
111  transform: rotate(45deg);
112}
113.switch__input:before {
114  background-color: hsl(0, 0%, 100%);
115  border-radius: 50%;
116  box-shadow: 0 0 0 0.5em hsla(var(--hue), 90%, 40%, 0),
117    0 0.25em 0.5em 0.125em hsl(var(--hue), 90%, 50%);
118  top: 3.5em;
119  left: calc(50% - 0.625em);
120  width: 1.25em;
121  height: 1.25em;
122  transform: rotate(-45deg) translateY(-3.125em) rotate(45deg);
123  transition: background-color var(--trans-dur) var(--trans-timing),
124    box-shadow 0.15s var(--trans-timing),
125    transform var(--trans-dur) var(--trans-timing);
126}
127.switch__input:checked:before {
128  background-color: hsl(var(--hue), 90%, 70%);
129  transform: rotate(45deg) translateY(-3.125em) rotate(-45deg);
130}
131.switch__input:focus-visible:before {
132  box-shadow: 0 0 0 0.5em hsla(var(--hue), 90%, 40%, 0.5),
133    0 0.25em 0.5em 0.125em hsl(var(--hue), 90%, 50%);
134}
135.switch__label {
136  overflow: hidden;
137  position: absolute;
138  width: 1px;
139  height: 1px;
140}
141