input[type="radio"].toggle-btn,
input[type="checkbox"].toggle-btn {
  padding: 0px !important;

  &:not(.xsmall-btn):before {
    margin: 10px;
  }

  &.xsmall-btn:before {
    margin: 4px 5px 5px;
  }
}

.toggle-btn {
  width: @toggleWidth;
  height: @toggleHeight;
  border-radius: @toggleBorderRadius;
  border: 0;
  outline: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  &:before,
  &:after {
    content: "";
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }

  &:before {
    background-color: @toggleSwitchColor;
    border-radius: 50%;
    display: inline-block;
    height: calc(@toggleWidth / 2.25);
    width: calc(@toggleWidth / 2.25);
    transition: all 0.5s ease;
    transform: @toggleSwitchOffPosition;
  }

  &:after {
    background-color: @toggleOffBgColor;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;
    transition-delay: 0.2s;
    left: 0;
    top: 0;
    z-index: -1;
  }

  &:checked:before {
    transform: @toggleSwitchOnPosition;
  }

  &:checked:after {
    background-color: @toggleOnBgColor;
  }

  &.xsmall-btn {
    width: @toggleWidthSmall;
    height: @toggleHeightSmall;
    border-radius: @toggleBorderRadiusSmall;

    &:checked:before {
      transform: @toggleSwitchOnPositionSmall;
    }

    &:before {
      height: calc(@toggleWidthSmall / 2.25);
      width: calc(@toggleWidthSmall / 2.25);
      transform: @toggleSwitchOffPositionSmall;
      margin-top: -1px;
    }

    &.toggle-on-btn {
      &:before {
        transform: @toggleSwitchOnPositionSmall;
      }

      &:active:before {
        transform: @toggleSwitchOffPositionSmall;
      }
    }

    .toggle-off-btn {
      &:before {
        transform: @toggleSwitchOffPositionSmall;
      }
      &:active:before {
        transform: @toggleSwitchOnPositionSmall;
      }
    }
  }
}

.toggle-on-btn {
  &:before {
    transform: @toggleSwitchOnPosition;
  }

  &:after {
    background-color: @toggleOnBgColor;
  }

  &:active:before {
    transform: @toggleSwitchOffPosition;
  }

  &:active:after {
    background-color: @toggleOffBgColor;
  }
}

.toggle-off-btn {
  &:before {
    transform: @toggleSwitchOffPosition;
  }

  &:after {
    background-color: @toggleOffBgColor;
  }

  &:active:before {
    transform: @toggleSwitchOnPosition;
  }

  &:active:after {
    background-color: @toggleOnBgColor;
  }
}