.switcher {
  position: absolute;
  left: -9999px;
}

.slider-v1 {
  margin: auto 0px;
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
}

.slider-v1::before {
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: linear-gradient(#f5f5f5 10%, #eeeeee);
  box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.3em -0.02em rgba(0, 0, 0, 0.25);
}

.switcher:checked + .slider-v1::after {
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #4c6;
  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.12);
}

.switcher:checked + .slider-v1::before {
  left: 22px;
}