
@toggle-padding-v: @padding-base-vertical;
@toggle-padding-h: @padding-base-horizontal;
@toggle-font-size: @font-size-base;
@toggle-gutter-size: 4px;
@toggle-height: @line-height-computed + 2*@toggle-padding-v + 2*@toggle-gutter-size;
@toggle-width: @toggle-height - (2*@toggle-gutter-size) + @toggle-padding-h + floor(@toggle-padding-h / 2) + 34px; // 40px is approximately the size of "OFF" text for the current font
@toggle-border-radius: floor(@toggle-height / 2);

.toggle-input {
    position: relative;
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    height: @toggle-height;
    width: @toggle-width;
    padding: @toggle-padding-v @toggle-padding-h;
    border-radius: @toggle-border-radius;
    .box-shadow(inset 0 0 3px 1px rgba(0, 0, 0, 0.25));

    &:before {
        content: " ";
        position: absolute;
        display: block;
        background: @btn-default-bg;
        border-radius: @toggle-border-radius;
        .box-shadow(0 0 3px 1px rgba(0, 0, 0, 0.25));

        top: @toggle-gutter-size;
        width: @toggle-height - (2*@toggle-gutter-size);
        height: @toggle-height - (2*@toggle-gutter-size);
    }

    &.on {
        .toggle-input-on()
    }

    &.off {
        .toggle-input-off()
    }
}

.toggle-input-off() {
    color: @gray-light;
    background: @gray-lighter;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
    padding-left: floor(@toggle-padding-h / 2) + (@toggle-height - (2*@toggle-gutter-size));
    &:before {
        left: @toggle-gutter-size;
    }
}

.toggle-input-on() {
    color: white;
    background: @brand-primary;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    padding-right: floor(@toggle-padding-h / 2) + (@toggle-height - (2*@toggle-gutter-size));

    &:before {
        right: @toggle-gutter-size;
    }
}
