.toggleWrapper {

display: inline-block;
float: right;
position:relative;

input {
  display: none !important;
}

}

.toggle {

cursor: pointer;
display: inline-block;
position: relative;
width:49px;
height: 28px;
background-color: #4FC1E4;
border-radius: 45px - 6;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.toggle__handler {

display: inline-block;
position: relative;
z-index: 1;
top: 3px;
left: 3px;
width: 25px - 3;
height: 25px - 3;
background-color: #FFCF96;
border-radius: 25px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform:  rotate(-45deg);

.crater {
  position: absolute;
  background-color: #E8CDA5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.crater--1 {
  top: 9px;
  left: 5px;
  width: 2px;
  height: 2px;
}

.crater--2 {
  top: 14px;
  left: 11px;
  width: 3px;
  height: 3px;
}

.crater--3 {
  top: 5px;
  left: 12px;
  width: 4px;
  height: 4px;
}

}

.star {

position: absolute;
background-color: #ffffff;
transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;

}

.star–1 {

top: 5px;
left: 17px;
z-index: 0;
width: 15px;
height: 2px;

}

.star–2 {

top: 9px;
left: 14px;
z-index: 1;
width: 15px;
height: 2px;

}

.star–3 {

top: 14px;
left: 20px;
z-index: 0;
width: 15px;
height: 2px;

}

.star–4, .star–5, .star–6 {

opacity: 0;
transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.star–4 {

top: 8px;
left: 6px;
z-index: 0;
width: 2px;
height: 2px;
transform: translate3d(3px,0,0);

}

.star–5 {

top: 16px;
left: 8px;
z-index: 0;
width: 3px;
height: 3px;
transform: translate3d(3px,0,0);

}

.star–6 {

top: 18px;
left: 14px;
z-index: 0;
width: 2px;
height: 2px;
transform: translate3d(3px,0,0);

}

input:checked {

+ .toggle {
  background-color: #637AFE;

  &:before {
    color: #637AFE;
  }

  &:after {
    color: #ffffff;
  }

  .toggle__handler {
    background-color: #FFE5B5;
    transform: translate3d(20px, 0, 0) rotate(0);

    .crater { opacity: 1; }
  }

  .star--1 {
    width: 2px;
    height: 2px;
  }

  .star--2 {
    width: 4px;
    height: 4px;
    transform: translate3d(-5px, 0, 0);
  }

  .star--3 {
    width: 2px;
    height: 2px;
    transform: translate3d(-7px, 0, 0);
  }

  .star--4,
  .star--5,
  .star--6 {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  .star--4 {
    transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .star--5 {
    transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .star--6 {
    transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
}

}