.menu .menu-item > a,
.menu .submenu a,
.mobile-menu-item > a,
.mobile-submenu a {
    border-radius: 6px;
    text-decoration: none;
    transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.menu .menu-item:hover > a {
    background-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.menu .submenu a:hover {
    background-color: rgba(128, 0, 128, 0.08) !important;
    color: var(--primary-color, #800080) !important;
    box-shadow: inset 3px 0 0 var(--primary-color, #800080);
}

.mobile-menu-item > a:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--light-text, #fff) !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.75);
    border-radius: 6px;
}

.mobile-submenu a:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--light-text, #fff) !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.75);
    border-radius: 6px;
}

.menu .menu-item > a:focus-visible,
.menu .submenu a:focus-visible,
.mobile-menu-item > a:focus-visible,
.mobile-submenu a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .menu .menu-item > a,
    .menu .submenu a,
    .mobile-menu-item > a,
    .mobile-submenu a {
        transition-duration: 0.01ms;
    }

}