1.label {
2  display: inline-flex;
3  align-items: center;
4  cursor: pointer;
5  color: #394a56;
6}
7
8.label-text {
9  margin-left: 16px;
10}
11
12.toggle {
13  isolation: isolate;
14  position: relative;
15  height: 30px;
16  width: 60px;
17  border-radius: 15px;
18  overflow: hidden;
19  box-shadow: -8px -4px 8px 0px #ffffff,
20    8px 4px 12px 0px #d1d9e6,
21    4px 4px 4px 0px #d1d9e6 inset,
22    -4px -4px 4px 0px #ffffff inset;
23}
24
25.toggle-state {
26  display: none;
27}
28
29.indicator {
30  height: 100%;
31  width: 200%;
32  background: #ecf0f3;
33  border-radius: 15px;
34  transform: translate3d(-75%, 0, 0);
35  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
36  box-shadow: -8px -4px 8px 0px #ffffff,
37    8px 4px 12px 0px #d1d9e6;
38}
39
40.toggle-state:checked ~ .indicator {
41  transform: translate3d(25%, 0, 0);
42}