1.toggleWrapper {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  overflow: hidden;
6  padding: 0 200px;
7  transform: translate3d(-50%, -50%, 0);
8  color: white;
9}
10
11.toggleWrapper input {
12  position: absolute;
13  left: -99em;
14}
15
16.toggle {
17  cursor: pointer;
18  display: inline-block;
19  position: relative;
20  width: 90px;
21  height: 50px;
22  background-color: #83d8ff;
23  border-radius: 84px;
24  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
25}
26
27.toggle:before {
28  content: 'AM';
29  position: absolute;
30  left: -50px;
31  top: 15px;
32  font-size: 18px;
33}
34
35.toggle:after {
36  content: 'PM';
37  position: absolute;
38  right: -48px;
39  top: 15px;
40  font-size: 18px;
41  color: #749ed7;
42}
43
44.toggle__handler {
45  display: inline-block;
46  position: relative;
47  z-index: 1;
48  top: 3px;
49  left: 3px;
50  width: 44px;
51  height: 44px;
52  background-color: #ffcf96;
53  border-radius: 50px;
54  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
55  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
56  transform: rotate(-45deg);
57}
58
59.toggle__handler .crater {
60  position: absolute;
61  background-color: #e8cda5;
62  opacity: 0;
63  transition: opacity 200ms ease-in-out;
64  border-radius: 100%;
65}
66
67.toggle__handler .crater--1 {
68  top: 18px;
69  left: 10px;
70  width: 4px;
71  height: 4px;
72}
73
74.toggle__handler .crater--2 {
75  top: 28px;
76  left: 22px;
77  width: 6px;
78  height: 6px;
79}
80
81.toggle__handler .crater--3 {
82  top: 10px;
83  left: 25px;
84  width: 8px;
85  height: 8px;
86}
87
88.star {
89  position: absolute;
90  background-color: #fff;
91  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
92  border-radius: 50%;
93}
94
95.star--1 {
96  top: 10px;
97  left: 35px;
98  z-index: 0;
99  width: 30px;
100  height: 3px;
101}
102
103.star--2 {
104  top: 18px;
105  left: 28px;
106  z-index: 1;
107  width: 30px;
108  height: 3px;
109}
110
111.star--3 {
112  top: 27px;
113  left: 40px;
114  z-index: 0;
115  width: 30px;
116  height: 3px;
117}
118
119.star--4, .star--5, .star--6 {
120  opacity: 0;
121  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
122}
123
124.star--4 {
125  top: 16px;
126  left: 11px;
127  z-index: 0;
128  width: 2px;
129  height: 2px;
130  transform: translate3d(3px, 0, 0);
131}
132
133.star--5 {
134  top: 32px;
135  left: 17px;
136  z-index: 0;
137  width: 3px;
138  height: 3px;
139  transform: translate3d(3px, 0, 0);
140}
141
142.star--6 {
143  top: 36px;
144  left: 28px;
145  z-index: 0;
146  width: 2px;
147  height: 2px;
148  transform: translate3d(3px, 0, 0);
149}
150
151input:checked + .toggle {
152  background-color: #749dd6;
153}
154
155input:checked + .toggle:before {
156  color: #749ed7;
157}
158
159input:checked + .toggle:after {
160  color: #fff;
161}
162
163input:checked + .toggle .toggle__handler {
164  background-color: #ffe5b5;
165  transform: translate3d(40px, 0, 0) rotate(0);
166}
167
168input:checked + .toggle .toggle__handler .crater {
169  opacity: 1;
170}
171
172input:checked + .toggle .star--1 {
173  width: 2px;
174  height: 2px;
175}
176
177input:checked + .toggle .star--2 {
178  width: 4px;
179  height: 4px;
180  transform: translate3d(-5px, 0, 0);
181}
182
183input:checked + .toggle .star--3 {
184  width: 2px;
185  height: 2px;
186  transform: translate3d(-7px, 0, 0);
187}
188
189input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 {
190  opacity: 1;
191  transform: translate3d(0, 0, 0);
192}
193
194input:checked + .toggle .star--4 {
195  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
196}
197
198input:checked + .toggle .star--5 {
199  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
200}
201
202input:checked + .toggle .star--6 {
203  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
204}
205