1.bauble_box .bauble_label {
2  background: #2c2;
3  background-position: 62px 5px;
4  background-repeat: no-repeat;
5  background-size: auto 5px;
6  border: 0;
7  border-radius: 50px;
8  box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 -1px 0px rgba(0,0,0,.2), inset 0 -1px 0px #fff;
9  cursor: pointer;
10  display: inline-block;
11  font-size: 0;
12  height: 40px;
13  position: relative;
14  -webkit-transition: all 500ms ease;
15  transition: all 500ms ease;
16  width: 90px;
17}
18
19.bauble_box .bauble_label:before {
20  background-color: rgba(255,255,255,.2);
21  background-position: 0 0;
22  background-repeat: repeat;
23  background-size: 30% auto;
24  border-radius: 50%;
25  box-shadow: inset 0 -5px 25px #050, 0 10px 20px rgba(0,0,0,.4);
26  content: '';
27  display: block;
28  height: 30px;
29  left: 5px;
30  position: absolute;
31  top: 6px;
32  -webkit-transition: all 500ms ease;
33  transition: all 500ms ease;
34  width: 30px;
35  z-index: 2;
36}
37
38.bauble_box input.bauble_input {
39  opacity: 0;
40  z-index: 0;
41}
42
43/* Checked */
44.bauble_box input.bauble_input:checked + .bauble_label {
45  background-color: #c22;
46}
47
48.bauble_box input.bauble_input:checked + .bauble_label:before {
49  background-position: 150% 0;
50  box-shadow: inset 0 -5px 25px #500, 0 10px 20px rgba(0,0,0,.4);
51  left: calc( 100% - 35px );
52}
53