1.toggle-wrapper {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  position: relative;
6  border-radius: 99px;
7  padding: .125em;
8  background-image: linear-gradient(to bottom, #777676, #212121);
9  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
10  /* resize for demo */
11  font-size: 1.5em;
12}
13
14.toggle-checkbox {
15  appearance: none;
16  position: absolute;
17  z-index: 1;
18  border-radius: inherit;
19  width: 100%;
20  height: 100%;
21  /* fix em sizing */
22  font: inherit;
23  opacity: 0;
24  cursor: pointer;
25}
26
27.toggle-container {
28  display: flex;
29  align-items: center;
30  position: relative;
31  border-radius: 99px;
32  width: 3em;
33  height: 1.5em;
34  background-color: #212121;
35  box-shadow: inset 0 0 .0625em .125em rgba(5, 5, 5, 0.2), inset 0 .0625em .125em rgba(0, 0, 0, 0.4);
36  transition: background-color .4s linear;
37}
38
39.toggle-checkbox:checked + .toggle-container {
40  background-color: rgba(11, 108, 253, 0.1);
41}
42
43.toggle-button {
44  display: flex;
45  justify-content: center;
46  align-items: center;
47  position: absolute;
48  left: .0625em;
49  border-radius: 99px;
50  width: 1.375em;
51  height: 1.375em;
52  background-color: #212121;
53  box-shadow: inset 0 -.0625em .0625em .125em rgba(5, 5, 5, 0.2), inset 0 -.125em .0625em rgba(5, 5, 5, 0.2), inset 0 .1875em .0625em rgba(219, 219, 219, 0.3), 0 .125em .125em rgb(0 0 0 / .5);
54  transition: left .4s;
55}
56
57.toggle-checkbox:checked + .toggle-container > .toggle-button {
58  left: 1.5625em;
59}
60
61.toggle-button-circles-container {
62  display: grid;
63  grid-template-columns: repeat(3, min-content);
64  gap: .125em;
65  position: absolute;
66  margin: 0 auto;
67}
68
69.toggle-button-circle {
70  border-radius: 50%;
71  width: .125em;
72  height: .125em;
73  background-image: radial-gradient(circle at 50% 0, #5e5d5d, #807d7d);
74}