I’m having an issue where, no matter what I try, one particular class’s background-color is always the one to be displayed on the screen.

Code:

<style>
.btnClass {
    border-radius:6px;
    padding: 5px;
    text-align:center;
    text-decoration:none;
    display: inline-block;
    font-size:1em;
}
.gray {
    background-color: #494949;
    border: 1px solid black;
    color: white;
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan;
}
</style>

<button class="btnClass @(ExampleBoolean ? "fill" : "fill gray")">Example Button</button>
<button class="btnClass" @onclick="ChangeBool">Change Boolean</button>


@code {
    private bool ExampleBoolean = false;
    
    private void ChangeBool()
    {
        ExampleBoolean = !ExampleBoolean;
    }
}

I first tried taking the fill class out in front of the entire comparison like so:

<button class="btnClass fill @(ExampleBoolean ? "" : "gray")">Example Button</button>

And moving fill to be after gray, both inside and outside the @ bit of code, but none of them have worked. Can anyone explain what is going on and why?