CSS Class Priority in Blazor Webapp

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?