Problems making a button disabled/change color depending on the input. Any advice?

I’ve been tying to work on this code, but can’t find the mistakes (and I’m guessing there are many of them) I’m making.
So far I tried it using querySelector and getElementById and I’ve been rewriting the functions quite a few times, but no luck so far. Any advice?
Thanks in advance.

const btnNext = document.querySelector(".btn-next");
const logIn = document.querySelector(".btn-login");
const inputMail = document.querySelector(".input-mail");
const inputPassword = document.querySelector(".input-password");

function btnLogIn() {
    if (inputMail.value.length && inputPassword.value.length == 0) {
        btnNext.disabled == true;
    } else {
        btnNext.disabled == false;
    }
}
function changeColor() {
    if (document.getElementById("input-mail") !== "") {
        document.getElementById("btn-next").style.background = "gray";
    } else {
        document.getElementById("btn-next").style.background = "blue";  
    }
}

body{
    margin: auto;
    width:50%;
    padding: 0;
    background-color: #eeeeee;
}
form{
    display: flex;
    flex-direction: column;
}
.btn-next{
    margin-top: .5rem;
    background-color: #949aa6;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 18px 119px 18px 119px; 
    font-size: .8rem;
    font-weight: 600;
}
input{
    width: 16.5rem;
    height: 2rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

<body>
     <form>
        <p>Email</p>
        <input type="email" placeholder="Email" class="input-mail" id="input-mail">
        <p>Password</p>
        <input type="password" placeholder="Password" class="input-password" id="input-password"><br>
    </form>    
        <button class="btn-next" id="btn-next">NEXT</button> 
</body>