.navButton {
    --Border-navButtonIndicator: var(--tertiary-400);
    --Text-primaryNoneBg: var(--opacity-70b);
}

@media (prefers-color-scheme: dark) {
.navButton {
        --Border-navButtonIndicator: var(--tertiary-400);
        --Text-primaryNoneBg: var(--base-white);
    }
}



.navButton {
    display: inline-flex;
    padding: 0.5rem 0rem;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid transparent;
    gap: 0.5rem;
    position: relative;
    border: 0;
    background: transparent;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;

     color: var(--Text-primaryNoneBg);
}

.navButton:hover {
    background-color: transparent;
}

.navButton.active {
    border-bottom: 3px solid var(--Border-navButtonIndicator);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.navButton[iconleft]::before {
    content: attr(iconleft);
    font-family: 'dr-odds';
    font-size: 1.125rem;

    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;

   
}

.navButton.notification::after {
    content: '';
    width: 0.442rem;
    height: 0.442rem;
    background-color: #F00;

    position: absolute;
    right: -0.221rem;
    top: calc(0.5rem - 0.221rem);
    border-radius: 50%;
}