$slider-radius: 26px;
$transition-time: .4s;
$toggle-color: #0C6482;
$travel-distance: 38px;

.Toggle {
  $root: &;

  position: relative;
  display: inline-block;
  width: 72px;
  height: 34px;
  margin: 5px 0;

  &-input {
    display: none;

    &:checked + #{$root}-slider {
      background-color: $toggle-color;

      &::before {
        -webkit-transform: translateX($travel-distance);
        -ms-transform: translateX($travel-distance);
        transform: translateX($travel-distance);
      }
    }

    &:focus + #{$root}-slider {
      box-shadow: 0 0 1px $toggle-color;
    }
  }

  &-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: $transition-time;
    transition: $transition-time;

    &.round {
      border-radius: 34px;

      &::before {
        border-radius: 50%;
      }
    }

    &::before {
      position: absolute;
      content: "";
      height: $slider-radius;
      width: $slider-radius;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: $transition-time;
      transition: $transition-time;
    }
  }
}