// 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: var(--bg-white);
            pointer-events: all;
            width: 40px !important;
            height: 22px !important;
            transition: all 250ms ease;
			border-radius: 18px;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        }
        &:after{
            content: "";
            display: block !important;
            z-index: 6;
            position: absolute;
			top: 2px;
			left: 2px;
            width: 18px !important;
            height: 18px !important;
            transition: all 250ms ease;
            border-radius: 50px !important;
            background-color: #fff;
            transition: all 250ms ease;
            box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.14);
        }
    }    
    .switch-input{
        &:checked~.custom-switch-label{
            &:after{
				transform:translateX(18px)!important;
                -webkit-transform:translateX(18px)!important;
            }
            &:before{
                background-color:var(--primary)!important
            }
        }
    }
}

.mode{
    display: flex;
    align-items: center;
    .custom-switch{
        margin-left: 50px;
    }
    &.style-2{
        .custom-switch{
            margin-left: unset;
        }
    }
}

.dz-mode{
    padding: 5px 20px;
    .theme-btn{
        border-radius: 50px;
        background: var(--bg-white);
        box-shadow: 0px 2px 12px 0px rgba(3, 118, 77, 0.20);
        transform: scale(1.2);
        width: 75px;
        height: 40px;
        z-index: 999;
        border-radius: 50px;
        padding: 12px 2px;
        @include transitionMedium;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &::after{
            content: "";
            width: 30px;
            height: 30px;
            border-radius: 50px;
            position: absolute;
            left: 5px;
            top: 50%;
            background: var(--primary);
            z-index: -1;
            transform: translateY(-50%);
            @include transitionMedium;
        }
        i{
            font-size: 18px;
            display: block;
            margin: auto;
            color: var(--primary);
            &.sun{
                color: #fff;
            }
        }
        &.active{
            &::after{
                left: 38px;
            }
            i{
                color: var(--title);
            }
        }
    }
}