1.toggle-wrapper {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  position: relative;
6  border-radius: .5em;
7  padding: .125em;
8  background-image: linear-gradient(to bottom, #e3f7f7, #7fd4d4);
9  box-shadow: 0 1px 1px rgb(255 255 255 / .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: .375em;
32  width: 3em;
33  height: 1.5em;
34  background-color: #7fd4d4;
35  box-shadow: inset 0 0 .0625em .125em rgb(255 255 255 / .2), inset 0 .0625em .125em rgb(0 0 0 / .4);
36  transition: background-color .4s linear;
37}
38
39.toggle-checkbox:checked + .toggle-container {
40  background-color: #e3f7f7;
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: .3125em;
50  width: 1.375em;
51  height: 1.375em;
52  background-color: #7fd4d4;
53  box-shadow: inset 0 -.0625em .0625em .125em rgb(0 0 0 / .1), inset 0 -.125em .0625em rgb(0 0 0 / .2), inset 0 .1875em .0625em rgb(255 255 255 / .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, #c4f1f1, #7fd4d4);
74}