@mixin nav-normal-state {
        >.wp-block-navigation-item {

                &.current-menu-item>a,
                >a,
                >a:hover,
                &:has(* .current-menu-item)>a {
                        text-decoration: none;
                        position: relative;
                }
        }
}

@mixin nav-item-active {
        >.wp-block-navigation-item {

                >a:hover,
                &.current-menu-item>a {
                        color: var(--wp--preset--color--accent-2);
                }
        }
}

@mixin nav-item-after {
        >.wp-block-navigation-item {

                &:has(* .current-menu-item)>a:after,
                >a:after {
                        content: "";
                        position: absolute;
                        text-decoration: none;

                        background: var(--wp--preset--color--accent-1);
                        /* Color of the underline */

                        width: 0;
                        height: 2px;

                        bottom: 0;
                        /* Position at the bottom */
                        left: 50%;
                        /* Start from the center */
                        transform: translateX(-50%);
                        /* Adjust for true center */
                        transition: width 0.3s ease-out;
                }
        }
}

@mixin nav-item-after-hover {
        >.wp-block-navigation-item {

                &.current-menu-item>a:after,
                &:has(* .current-menu-item)>a:hover:after,
                >a:hover:after {
                        width: 100%;
                }
        }
}

.wp-block-navigation__container {
        >.wp-block-page-list {
                @include nav-normal-state;
                @include nav-item-after;
                @include nav-item-after-hover;
                // @include nav-item-active;
        }

        @include nav-normal-state;
        @include nav-item-after;
        @include nav-item-after-hover;
        // @include nav-item-active;
}

// .wp-block-navigation__container > .wp-block-navigation-item:has(* .current-menu-item) > a,
// .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
// .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > a,
// .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
//         text-decoration: none;
//         position: relative;
// }

// .wp-block-navigation__container > .wp-block-navigation-item:has(* .current-menu-item) > a:after,
// .wp-block-navigation__container > .wp-block-navigation-item > a:after {
//         content: "";
//         position: absolute;
//         text-decoration: none;

//         background: var(--wp--preset--color--accent-1); /* Color of the underline */

//         width: 0;
//         height: 2px;

//         bottom: 0; /* Position at the bottom */
//         left: 50%; /* Start from the center */
//         transform: translateX(-50%); /* Adjust for true center */
//         transition: width 0.3s ease-out;
// }

.wp-block-navigation__container>.wp-block-navigation-item:has(* .current-menu-item)>a:after,
.wp-block-navigation__container>.wp-block-navigation-item>a:hover:after,
.wp-block-navigation__container>.wp-block-navigation-item.current-menu-item>a:after,
.wp-block-navigation__container>.wp-block-navigation-item>a:hover:after {
        width: 100%;
}

@media screen and (min-width: 600px) {
        .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
                background-color: var(--wp--preset--color--accent-1);
                color: var(--wp--preset--color--accent-2);
                text-decoration: none;
        }

        .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
                transition: all 0.2s ease-in;
        }

        .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
                text-decoration: none;
        }

        .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
        }

        .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
        }

        .wp-block-navigation .wp-block-navigation__submenu-container {
                // border: 0 !important;
                border-radius: 8px;
        }
}

@media screen and (max-width: 600px) {
        // .wp-block-navigation__responsive-container {
        //         background-color: var(--wp--preset--color--custom-contrast) !important;
        //         color: var(--wp--preset--color--custom-accent-1) !important;
        // }

        .wp-block-navigation__responsive-container * {
                box-sizing: border-box;
        }

        .wp-block-navigation__responsive-container .wp-block-navigation__container,
        .wp-block-navigation__responsive-container .wp-block-navigation__container>.wp-block-page-list,
        .wp-block-navigation__responsive-container .wp-block-navigation__container li,
        .wp-block-navigation__responsive-container .wp-block-navigation__container li a,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
                width: 100%;
        }

        .wp-block-navigation .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation__submenu-icon {
                display: flex !important;
                margin-left: 15px;
                padding: 0.5rem;
                /* float: right; */
                font-size: 19px;
                line-height: 1;
                position: absolute;
                right: 0rem;
                top: 8px;
                height: 42px;
                width: 42px;
                // border: 1px solid;

                align-items: center;
                justify-content: center;
        }

        .wp-block-navigation .wp-block-navigation__submenu-icon svg {
                height: unset;
                margin-top: unset;
                width: unset;
        }

        .wp-block-navigation .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container {
                width: 100%;
                gap: 0;
                /* margin: 0;
        padding: 0; */
                display: none;
                box-shadow: none;
        }

        .wp-block-navigation .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation-submenu__toggle[aria-expanded="true"]+ul.wp-block-navigation__submenu-container {
                display: block;

                margin-left: 6rem !important;
                padding-left: 2rem;
                border-left: 1px solid currentColor;
                margin: 0;
                padding: 0 0 0 2rem;
        }

        .wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
                gap: 0 !important;
        }

        .wp-block-navigation .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item a {
                padding: 1rem 0;
        }
}