@switch-circle-diameter: 16px;
@switch-inner-padding: 2px;
@switch-width: 34px;
@switch-height: @switch-circle-diameter + @switch-inner-padding +
  @switch-inner-padding;
@switch-circle-translate-x: @switch-width - @switch-circle-diameter -
  @switch-inner-padding - @switch-inner-padding;
@switch-circle-wrapper-border-radius: @switch-height / 2;
@switch-transition: 0.4s;

.switch-input {
  position: relative;
  display: inline-block;
  width: @switch-width;
  height: @switch-height;

  input.invisible-input {
    opacity: 0;
    width: 0;
    height: 0;

    // span.switch -> circle "wrapper"
    & + span.switch {
      background-color: @ol-blue-gray-4;
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: @switch-transition;
      border-radius: @switch-circle-wrapper-border-radius;
    }

    // span.switch::before is the circle itself
    & + span.switch::before {
      position: absolute;
      content: '';
      height: @switch-circle-diameter;
      width: @switch-circle-diameter;
      left: @switch-inner-padding;
      bottom: @switch-inner-padding;
      background-color: @white;
      transition: @switch-transition;
      border-radius: 50%;
    }

    &:checked + span.switch {
      background-color: @ol-green;
    }

    // when input is checked, move circle to the right
    &:checked + span.switch::before {
      transform: translateX(@switch-circle-translate-x);
    }
  }

  &.disabled {
    input.invisible-input + span.switch {
      background-color: @gray-light;
    }
  }
}