.vlCheckbox{
    .vlSwitch{
        height: var(--form-checkbox-height);
        width: var(--form-checkbox-height);
        border-radius: var(--form-control-border-radius);
        @extend .flex-center;
        >i{
            display: none;
            color: white;
        }
    }
    .vlChecked{
        background-color: var(--primary);
        >i {
            display: block;
        }        
    }
}
.vlMultiCheckbox{
    &.vlHorizontalMutiCheckbox>div{
        display: flex;
        flex-wrap: wrap;
        > * ~ * {
            margin-left: 1rem;
        }
    }
}

.vlToggle,.vlToggleInput {
    >div{
        position: relative;
    }
    .vlSwitch{
        height: var(--form-toggle-height);
        width: calc(1.75 * var(--form-toggle-height));
        border-radius: 9999px;
        border: 1px solid transparent;
        background-color: var(--form-control-border-color);
    }
    .vlDot{
        position: absolute;
        top: calc(0.125 * var(--form-toggle-height));
        left: calc(0.125 * var(--form-toggle-height));
        width: calc( var(--form-toggle-height) * 0.75);
        height: calc( var(--form-toggle-height) * 0.75);
        background-color: white;
        border-radius: 50%;
        transition: all .15s ease-in-out;
    }
    input:checked ~ .vlSwitch{
        background-color: var(--primary);
    }
    input:checked ~ .vlDot{
        -webkit-transform: translateX( 100% );
        transform: translateX( 100% );
    }
    input:focus ~ .vlSwitch{
        border-color: var(--form-control-border-color-focused);
        box-shadow: var(--focus-box-shadow);
    }
    input:checked:focus ~ .vlSwitch{
        border-color: var(--body-color);
    }
}

.vlToggleInput {
    .vlInputWrapper{
        margin-top: var(--form-control-padding-t);
        order: 3;
        width: 100%;
    }
}

//Common properties
.vlCheckbox,.vlToggle,.vlToggleInput {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .vlFormLabel{
        margin-bottom: 0;
        margin-left: var(--form-control-padding-l);
        order: 2;
        cursor: pointer;
        //To ensure the label doesn't wrap
        width: calc(100% - var(--remaining));
        flex-shrink: 1;
    }
    .vlSwitch{
        cursor: pointer;
        order: 1;
    }
    .vlFormComment{
        order: 3;
    }
    input[type=checkbox]{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border-width: 0;
    }
}
.vlCheckbox,.vlMultiCheckbox{    
    &.vlDirtyField .vlInputWrapper:focus-within{
        border: 1px solid transparent;
    }
}

.vlCheckbox .vlFormLabel{
    --remaining: calc(var(--form-checkbox-height) + var(--form-control-padding-l) + 4px);
}

.vlToggle .vlFormLabel,.vlToggleInput .vlFormLabel{
    --remaining: calc(1.75 * var(--form-toggle-height) + var(--form-control-padding-l) + 4px);
}