.cg-navigation:not(.cg-nav-mobile) {
    *.desktop-nav-only {
        display: block;
    }

    *.mobile-nav-only {
        display: none !important;
    }

    button.cg-block-navigation__responsive-container-open {
        display: none;
    }

    .cg-block-navigation__responsive-container {
        display: block;
        position: static;
        overflow: unset;
        height: auto;
        left: auto;
        right: auto;
        transform: none !important;
        width: 100%;

        & > .cg-block-navigation__container {
            flex-flow: row wrap;
            padding: 0;
        }
    }

    .style-as-list-item.cg-parent-flow-row {
        margin: 0;
        width: auto;
    }

    /* buttons and links */
    a.link,
    button.link {
        display: block;
    }

    /* submenu positioning and background color */
    .style-as-list-item.cg-submenu {
        position: relative;
    }

    .style-as-list.cg-block-navigation-submenu {
        display: none;
        position: absolute;
        z-index: 20;
        right: 0;
        width: auto;
        height: auto;
    }

    /* submenu positioning */
    /* When desktop is column, submenu opens to the right of the button */
    .style-as-list.cg-flow-column > .style-as-list-item.cg-submenu > .style-as-list.cg-block-navigation-submenu {
        /* default is left */
        /* align left means menu will fly out to the right */
        top: 0;
        bottom: auto;
        left: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem));
        right: auto;
        min-height: var(----wp--custom--nav-submenu-min-width, 0);
        max-width: 0;
        transition: all var(--wp--custom--nav-animation-speed, .4s) ease-in-out;

        &[is-hidden='true'] {
            padding-left: 0;
            padding-right: 0;
        }

        /* align right means menu will fly out to the left */
        &.alignright {
            top: 0;
            bottom: auto;
            left: auto;
            right: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem));
        }

        &.aligncenter {
            top: 50%;
            bottom: auto;
            left: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem));
            right: auto;
            transform: translateY(-50%);    
        }
    }
    .style-as-list.cg-flow-column > .style-as-list-item.cg-submenu.display-as-button > .style-as-list.cg-block-navigation-submenu {
        right: auto;
        left: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem) - var(--wp--custom--button-padding-horizontal, 0px));

        &.alignright {
            left: auto;
            right: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem) - var(--wp--custom--button-padding-horizontal, 0px));
        }
    }

    /* When parent is a row, submenu opens down */
    .style-as-list.cg-flow-row > .style-as-list-item.cg-submenu > .style-as-list.cg-block-navigation-submenu {
        flex-wrap: nowrap;
        top: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem));
        bottom: auto;
        right: auto;
        left: var(--wp--custom--nav-submenu-edge-offset, 0);
        min-width: var(--wp--custom--nav-submenu-min-width, 0);
        max-height: 0;
        transition: all var(--wp--custom--nav-animation-speed, .4s) ease-in-out;

        &[is-hidden='true'] {
            padding-top: 0;
            padding-bottom: 0;
        }

        /* align right will align the right side of the menu with the right side of the button */
        &.alignright {
            bottom: auto;
            right: var(--wp--custom--nav-submenu-edge-offset, 0);
            left: auto;
        }

        &.aligncenter {
            bottom: auto;
            right: auto;
            left: 50%;
            transform: translateX(-50%);
        }
    }   
    .style-as-list.cg-flow-row > .style-as-list-item.cg-submenu.display-as-button > .style-as-list.cg-block-navigation-submenu {
        top: calc(100% + var(--wp--custom--nav-submenu-desktop-spacing, 1rem) - var(--wp--custom--button-padding-vertical, 0px));
    }


    .style-as-list:has(.style-as-list[is-hidden='false']) {
        overflow: visible;
    }

    .style-as-list.cg-full-width {
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        bottom: auto;
        height: fit-content;
        z-index: 20;
    }

    /* top level menu items animated underscores */
    &.cg-animated-underline {
        .cg-block-navigation__responsive-container > .style-as-list > .style-as-list-item.cg-nav-menuitem:not(.display-as-button) > a.cg-block-navigation-item__content,
        .cg-block-navigation__responsive-container > .style-as-list > .style-as-list-item.cg-nav-menuitem:not(.display-as-button) > button.cg-block-navigation-item__content,
        .cg-block-navigation__container.cg-animated-underline > .style-as-list-item.cg-nav-menuitem:not(.display-as-button) > a.cg-block-navigation-item__content,
        .cg-block-navigation__container.cg-animated-underline > .style-as-list-item.cg-nav-menuitem:not(.display-as-button) > button.cg-block-navigation-item__content {
            text-decoration: none;
            position: relative;

            &:after {
                background: var(--wp--custom--nav-underline-color, var(--wp--preset--color--accent, transparent));
                content: "";
                display: inline-block;
                height: var(--wp--custom--nav-underline-thickness, 0.25rem);
                width: 0;
                position: absolute;
                left: 50%;
                bottom: -1rem;
                transition: all var(--wp--custom--nav-animation-speed, .4s) ease-in-out;
            }

            &[aria-current="page"],
            &:focus-visible,
            &:hover,
            &:has(a[aria-current="page"]) {
                &:after {
                    width: 100%;
                    left: 0;
                }
            }
        }

        /* submenus that contain the active page */
        .cg-block-navigation__responsive-container > .style-as-list > .style-as-list-item.cg-nav-menuitem:not(.display-as-button):has(*[aria-current="page"])  > button.cg-block-navigation-item__content:after,
        .cg-block-navigation__container.cg-animated-underline > .style-as-list-item.cg-nav-menuitem:not(.display-as-button):has(*[aria-current="page"])  > button.cg-block-navigation-item__content:after {
            width: 100%;
            left: 0;
        }
    }
}