Dmx-class toggle confusion

Can someone help me to understand this please.

I have used this code in a number of places within my navbar component to switch classes from one thing to another dependent on a condition

So this is what I am finding odd

<dmx-value id="var_mobile_nav_is_open" dmx-bind:value="0"></dmx-value>

<!-- navbar-dark class default for desktop and laptop, when browser viewport size reduces to less than 992 AND the burger menu's onclick sets the variable to 1, then toggle navbar-dark OFF and navbar-light ON. BREAKS -->
<nav class="navbar navbar-expand-lg justify-content-between navbar-dark" dmx-class:navbar-light="(browser1.viewport.width < 992) && (var_mobile_nav_is_open.value == 1)" dmx-class:navbar-dark="(browser1.viewport.width < 992) && (var_mobile_nav_is_open.value == 1)">
	<a class="navbar-brand" href="/">
		<!-- Changes the image source to black when browser viewport size reduces to less than 992 AND the burger menu's onclick sets the variable to 1, else defaults to white logo source. WORKS -->
		<img class="img-fluid" dmx-bind:src="((browser1.viewport.width < 992) && (var_mobile_nav_is_open.value == 1)) ? '/travel-images/common-images/pukka_logo_small_dark.svg' : '/travel-images/common-images/pukka_logo_small_light.svg'" height="53" width="108">
	</a>
	<!-- onclick checks if variable is equal to 1 and sets it to 0 else back to 0. WORKS -->
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation" dmx-on:click="var_mobile_nav_is_open.value == 1 ? var_mobile_nav_is_open.setValue(0) : var_mobile_nav_is_open.setValue(1)">
		<span class="navbar-toggler-icon"></span>
	</button>
	
	<div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
		<!-- align-items-center class default for desktop and laptop, when browser viewport size reduces to less than 992 AND the burger menu's onclick sets the variable to 1, then toggle align-items-center OFF. WORKS -->
		<div class="align-items-center navbar-nav pkt-nav" dmx-class:align-items-center="(browser1.viewport.width < 992) && (var_mobile_nav_is_open.value == 1)">
			<!-- text-white class default for desktop and laptop, when browser viewport size reduces to less than 992 AND the burger menu's onclick sets the variable to 1, then toggle text-white OFF and text-dark ON. WORKS -->
			<a class="nav-item nav-link pkt-din-font-regular text-white" dmx-class:text-white="(browser1.viewport.width < 992) && (var_mobile_nav_is_open.value == 1)" dmx-class:text-dark="(browser1.viewport.width < 992) && (var_mobile_nav_is_open.value == 1)" href="/<%=_('$_PARAM.pageida.default("en-us")',locals)%>/meet-our-team/">ABOUT</a>
		</div>
	</div>
</nav>

So I have used very similar conditions all over that code and they all work, except for the first one.

What this does is remove the class navbar-dark from all the viewport sizes, and when the burger menu is clicked then it adds both classes together so I land up with

<nav class="navbar navbar-expand-lg justify-content-between navbar-light navbar-dark">

Anyone got any clue what I could be missing or doing wrong here.