1/* switch settings 👇 */
2
3.switch {
4  /* slider */
5  --slider-width: 32px;
6  --slider-height: 14px;
7  --slider-border-radius: 999px;
8  --slider-bg: rgba(128, 128, 128, 0.5);
9  /* circle */
10  --circle-diameter: 20px;
11  --circle-bg: rgb(128, 128, 128);
12  --circle-checked-bg: #fff;
13  --circle-position: calc((var(--circle-diameter) - var(--slider-height)) / 2);
14  --circle-transition-duration: .2s;
15  --circle-shadow: 0 0 3px rgba(166, 166, 166, 0.445);
16  /* icons */
17  --icon-size: 10px;
18  --icon-play-color: #000;
19  --icon-pause-color: var(--circle-checked-bg);
20}
21
22.switch input {
23  display: none;
24}
25
26.switch .slider svg {
27  -webkit-transition: all var(--circle-transition-duration);
28  -o-transition: all var(--circle-transition-duration);
29  transition: all var(--circle-transition-duration);
30  width: var(--icon-size);
31  color: var(--icon-pause-color);
32  height: auto;
33  display: inline-block;
34  vertical-align: top;
35  position: absolute;
36}
37
38.switch .slider svg.play {
39  color: var(--icon-play-color);
40  opacity: 0;
41  visibility: hidden;
42  margin-left: 2px;
43}
44
45.switch .slider {
46  width: var(--slider-width);
47  height: var(--slider-height);
48  border-radius: var(--slider-border-radius);
49  background: var(--slider-bg);
50  position: relative;
51}
52
53.switch .circle {
54  width: var(--circle-diameter);
55  height: var(--circle-diameter);
56  background: var(--circle-bg);
57  left: calc(var(--circle-position) * -1);
58  top: calc(var(--circle-position) * -1);
59  -webkit-transition: all var(--circle-transition-duration);
60  -o-transition: all var(--circle-transition-duration);
61  transition: all var(--circle-transition-duration);
62  -webkit-box-shadow: var(--circle-shadow);
63  box-shadow: var(--circle-shadow);
64  border-radius: inherit;
65  position: absolute;
66  display: -webkit-box;
67  display: -ms-flexbox;
68  display: flex;
69  -webkit-box-align: center;
70  -ms-flex-align: center;
71  align-items: center;
72  -webkit-box-pack: center;
73  -ms-flex-pack: center;
74  justify-content: center;
75}
76
77/* actions */
78
79.switch input:checked+.slider .circle {
80  left: calc(100% - var(--circle-position) - var(--slider-height));
81  background: var(--circle-checked-bg);
82}
83
84.switch input:checked+.slider .circle svg.pause {
85  opacity: 0;
86  visibility: hidden;
87}
88
89.switch input:checked+.slider .circle svg.play {
90  opacity: 1;
91  visibility: visible;
92}