.nav-menu-gradient .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-image: linear-gradient(109.6deg, color-mix(in srgb, var(--nav-primary) 13%, transparent) 11.2%, color-mix(in srgb, var(--nav-secondary) 13%, transparent) 91.1%) !important;
    background-color: transparent !important;
}

.nav-menu-gradient .mud-nav-link.active:not(.mud-nav-link-disabled),
.nav-menu-gradient .mud-nav-link.active:hover:not(.mud-nav-link-disabled) {
    background-image: linear-gradient(109.6deg, color-mix(in srgb, var(--nav-primary) 20%, transparent) 11.2%, color-mix(in srgb, var(--nav-secondary) 20%, transparent) 91.1%) !important;
    background-color: transparent !important;
}

.nav-menu-gradient .mud-nav-link.active::before {
    background-color: transparent !important;
}

/* ?? Scrollable nav without a visible scrollbar ??????????????????????????? */

/* Make the gradient wrapper fill the drawer and scroll */
.nav-menu-gradient {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    /* Firefox */
    scrollbar-width: none;
    /* IE / legacy Edge */
    -ms-overflow-style: none;
}

/* Chrome / Safari / newer Edge */
.nav-menu-gradient::-webkit-scrollbar {
    display: none;
}

/* Also suppress any scrollbar the MudDrawer content element itself shows */
#nav-drawer .mud-drawer-content {
    overflow: hidden !important;
}