// Default Switch
.form-switch{
    .form-check-input{
        width: 2.25rem;
        height: 1.125rem;
        margin-right: 14px;
        &.form-check-primary{
            &:checked {
                background-color: var(--primary);    
                border-color: var(--primary);    
            }
        }
        &.form-check-warning{
            &:checked {
                background-color: $warning;    
                border-color: $warning;    
            }
        }
        &.form-check-success{
            &:checked {
                background-color: $success;    
                border-color: $success;    
            }
        }
        &.form-check-danger{
            &:checked {
                background-color: $danger;    
                border-color: $danger;    
            }
        }
        &.form-check-info{
            &:checked {
                background-color: $info;    
                border-color: $info;    
            }
        }
        &.form-check-dark{
            &:checked {
                background-color: $dark;    
                border-color: $dark;    
            }
        }
    }        
}



// Custom Switch
.custom-switch{
    position: relative;
    line-height: 1;
    input{
        display: none;
    }
    label{
        cursor: pointer;
        &:before{
            content: "";
            display: block !important;
            background-color: #e8e9ea;
            pointer-events: all;
            width: 55px !important;
            height: 27px !important;
            border: solid 1px rgba(152, 152, 152, 0.4);
            border-radius: 50px !important;
            box-shadow: inset 0 0 6px 0 #a6aeb5;
            transition: all 250ms ease;
        }
        &:after{
            content: "";
            display: block !important;
            z-index: 6;
            position: absolute;
            top: 1px;
            left: 1px;
            width: 25px !important;
            height: 25px !important;
            transition: all 250ms ease;
            border-radius: 50px !important;
            background-color: #fff;
            border: solid 1px rgba(152, 152, 152, 0.4);
            transition: all 250ms ease;
        }
    }    
    .switch-input{
        &:checked~.custom-switch-label{
            &:after{
                -webkit-transform:translateX(28px)!important;
            }
            &:before{
                background-color:var(--secondary)!important
            }
        }
    }
}

.mode{
    display: flex;
    align-items: center;
    .custom-switch{
        margin-left: auto;
    }
    span + span {
        color: #000;
    }
}