:root .header-container {
    anchor-name: --header-anchor;

    & .header-container__main-menu {
        --menu-item-hover-color: var(--ejk-primary-d-2);

        @media (max-width: 989px) {
            display: none;
        }

        position: relative;
        anchor-scope: --li;

        &::before {
            content: "";
            position: absolute;
            position-anchor: --li;

            left: calc(anchor(left) - 0.5rem);
            right: calc(anchor(right) - 0.5rem);
            bottom: calc(anchor(bottom) - 0.3rem);

            height: 0.25em;
            background: var(--menu-item-hover-color);

            transition: left 400ms ease,
            right 600ms ease;
        }

        & li.menu-item {
            display: inline-flex;
            justify-content: center;
            padding-inline-start: calc(var(--at-space--s) + 1rem);
            padding-inline-end: calc(var(--at-space--s) + 1rem);
            padding-block-start: var(--at-space--3xs);
            padding-block-end: var(--at-space--3xs);
            border-radius: var(--at-radius--m);
            margin: 0;
            list-style: none;

            & > a,
            & > .brx-submenu-toggle,
            & > .brx-submenu-toggle > a {
                font-size: var(--at-text--xs);
                font-family: "Montserrat", sans-serif;
                white-space: nowrap;
                transition: color 500ms ease 200ms;
            }

            & > a {
                color: var(--ejk-primary-d-10);
                font-weight: 600;
            }
        }

        & li.menu-item:is(:hover, .current-menu-item) {
            & > a, & > .brx-submenu-toggle {
                anchor-name: --li;
                color: var(--menu-item-hover-color);
            }

            & > .brx-submenu-toggle > a {
                color: var(--menu-item-hover-color);
            }
        }

        &:has(> li.menu-item:hover) > li.menu-item.current-menu-item:not(:hover) {
            & > a, & > .brx-submenu-toggle {
                anchor-name: none;
                color: var(--menu-item-hover-color);
            }
        }

        & li.menu-item.brx-has-megamenu {
            & > .brx-submenu-toggle > a {
                color: var(--ejk-text-white);
                font-weight: 600;
            }
        }

        & li.menu-item > .brx-submenu-toggle {
            justify-content: flex-end;
            color: var(--ejk-primary-d-10);
            font-weight: 700;
        }

        & li.menu-item.current-menu-item {
            background-color: color-mix(in oklab, var(--ejk-primary-l-2) 5%, transparent);

            & > a {
                color: var(--ejk-primary-d-2);
            }
        }

        @supports not (anchor-name: --test) {
            &::before {
                display: none;
            }

            & li.menu-item {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: calc(var(--at-space--s) + 0.5rem);
                    right: calc(var(--at-space--s) + 0.5rem);
                    height: 0.3em;
                    background: var(--menu-item-hover-color);
                    opacity: 0;
                    transition: opacity 600ms ease;
                }

                &:is(:hover, .current-menu-item)::after {
                    opacity: 1;
                }
            }
        }
    }
}