/*
Toggle Slider

<strong>Deprecated:</strong> Styling for toggle-slider. We'll drop support for the toggle slider after v3.22.0
<p>Use switch styles instead.<p>

*/

.toggle-container {
    display: inline-block;
}

.toggle-container--disabled {
    opacity: @opacity-disabled;
    
    &:hover,
    .toggle-slider-container:hover {
        cursor: not-allowed;
    }
}

.toggle-input {
    width: 35px;
    position: absolute;
    opacity: 0;
}

.toggle-label {
    width: 60px;
    font-size: @font-size--13;
    display: inline-block;
    vertical-align: middle;
}

.toggle-label--off {
    color: @disabled-font-color;
}

.toggle-slider-container {
    background: url("@{icons}toggle-slider-container-on.png");
    display: inline-block;
    cursor: pointer;
    height: 18px;
    width: 42px;
    vertical-align: middle;
    margin-left: -4px;
}

.toggle-slider-container--off {
    background: url("@{icons}toggle-slider-container-off.png");
    margin-left: 0;
}

.toggle-slider {
    background: url("@{icons}toggle-slider.png");
    height: 23px;
    width: 23px;
    margin-top: -3px;
}

.toggle-slider--off {
    margin-left: -2px;
}

.toggle-input:checked + .toggle-slider {
    transform: translateX(90%);
}