:root {
    --wp--custom--nav-submenu-min-width: 15rem;
    --wp--custom--nav-submenu-padding: var(--wp--custom--nav-submenu-padding-vertical, 1rem) var(--wp--custom--nav-submenu-padding-horizontal, 1rem);
    --wp--custom--nav-animation-speed: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --wp--custom--nav-animation-speed: 0.01ms !important;
    }
}

.cg-navigation {
    line-height: 1rem;
    width: 100%;

    .alignright,
    .alignleft {
        float: none;
    }

    .cg-block-navigation__responsive-container {
        width: 100%;
    }

    .style-as-list.cg-flow-row {
        width: 100%;
    }

    .style-as-list-item.cg-nav-group.cg-parent-flow-column {
        width: 100%;
    }

    .style-as-list-item.cg-nav-group.cg-parent-flow-row {
        width: auto;
        min-width: var(--wp--custom--nav-column-min-width, 200px);;
        margin: 0;
        flex: 0 1 auto;
    }

    /* when building navs that have a desktop view */
    /* show the desktop view in the editor */
    &.cg-nav-desktop {
        .desktop-nav-only {
            display: block;
        }
        .mobile-nav-only {
            display: none;
        }
    }

    /* when building navs that don't have a desktop view */
    /* show the mobile view in the editor */
    &.cg-nav-no-desktop {
        .desktop-nav-only {
            display: none;
        }
        .mobile-nav-only {
            display: block;
        }
    }

    button.cg-nav-button,
    button.link,
    a.link {
        text-decoration: none;
        cursor: pointer;
        display: block;
    }

    button.cg-nav-button:not(.wp-element-button):hover,
    button.cg-nav-button:not(.wp-element-button):focus-visible,
    button.link[aria-current="page"]:not(.wp-element-button),
    button:not(.wp-element-button).link:hover,
    button:not(.wp-element-button).link:focus-visible,
    a.link[aria-current="page"]:not(.wp-element-button),
    a:not(.wp-element-button).link:hover,
    a:not(.wp-element-button).link:focus-visible {
        text-decoration: underline;
    }

    button.link p,
    a.link p {
        margin: 0;
    }

    .style-as-list.cg-block-navigation__submenu-container,
    .style-as-list.cg-block-navigation__submenu-container > div.acf-innerblocks-container {
        position: relative;
        padding: var(--wp--custom--nav-submenu-padding, 1rem);
        border-radius: var(--wp--custom--nav-submenu-border-radius, 0) !important;
        border: var(--wp--custom--nav-submenu-border-style, none) !important;
        color: var(--wp--custom--nav-submenu-color, inherit) !important;
        background-color: var(--wp--custom--nav-submenu-background-color, inherit) !important;
        box-shadow: var(--wp--custom--nav-submenu-box-shadow, none) !important;
    }

    /* submenu toggle button */
    button.cg-nav-button:not(.wp-element-button) {
        display: block;
        position: relative;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
        background-color: inherit;
    }

    span.cg-block-navigation-item__chevron:after {
        display: inline-block;
        transition: var(--wp--custom--nav-animation-speed, .4s) ease-in-out;
        transform: rotate(45deg);
        width: auto;
        height: auto;
        margin-left: -.125rem;
        line-height: 1em;
        text-align: center;
        font-weight: bold;
        background-color: inherit;
        color: inherit;
        vertical-align: middle;
    }

    span.cg-block-navigation-item__chevron.plus:after {
        content: "\00D7";
        transform: rotate(45deg);
    }

    span.cg-block-navigation-item__chevron.chevron:after {
        content: "\25BC";
        transform: rotate(0deg);
    }

    span.cg-block-navigation-item__chevron.none:after {
        content: "";
        transform: rotate(0deg);
        background-image: var(--wp--custom--nav-submenu-chevron, "none");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        width: var(--wp--custom--nav-submenu-chevron-size, 1rem);
        height: var(--wp--custom--nav-submenu-chevron-size, 1rem);
        margin: 0 0.25rem;
    }

    button.cg-block-navigation-submenu__toggle[aria-expanded='true'] span.cg-block-navigation-item__chevron.plus:after {
        transform: rotate(90deg);
    }

    button.cg-block-navigation-submenu__toggle[aria-expanded='true'] span.cg-block-navigation-item__chevron.chevron:after {
        transform: rotate(180deg);
    }

    button.cg-block-navigation-submenu__toggle[aria-expanded='true'] span.cg-block-navigation-item__chevron.none:after {
        transform: rotate(180deg);
    }

    /* Navigation groups */
    .style-as-list-item.cg-nav-group {
        width: 100%;
    }

    &.cg-block-navigation__preview .cg-block-navigation__responsive-container .has-body-font-size, 
    &.cg-block-navigation__preview .cg-block-navigation__responsive-container .has-body-large-font-size, 
    &.cg-block-navigation__preview .cg-block-navigation__responsive-container .has-body-large-font-size a, 
    &.cg-block-navigation__preview .cg-block-navigation__responsive-container {
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        text-align: inherit;
        align-items: inherit;
        justify-content: inherit;
        gap: inherit;
        color: inherit;
        margin: 0;
    }

    /* links which are styled as buttons need to inherit button styling from theme.json */
    /* which cannot override any css so don't apply these styles to button links */
    .style-as-list:not(.wp-block-social-links),
    div.acf-innerblocks-container,
    div,
    span,
    button,
    a:not(.wp-block-button__link),
    .style-as-list-item {
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        text-align: inherit;
        align-items: inherit;
        justify-content: inherit;
        gap: inherit;
        color: inherit;
        margin: 0;
    }

    div.acf-innerblocks-container,
    .style-as-list:not(.wp-block-social-links) {
        list-style-type: none;
        margin: 0;
        padding: 1rem 1rem 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .style-as-list.cg-block-navigation__submenu-container {
        padding: var(--wp--custom--nav-submenu-padding);
    }

    .style-as-list.wp-block-social-links {
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
    }

    /* override backend wordpress styles that are being applied at the wrong levels */
    div.wp-block-acf-cg-submenu {
        text-align: inherit !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: inherit !important;
        font-size: inherit !important;
        color: inherit !important;
        background-color: inherit !important;
    }

    .style-as-list > .acf-innerblocks-container,
    .style-as-list > .block-editor-inner-blocks,
    .style-as-list > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: flex;
        flex-direction: inherit;
        flex-wrap: inherit;
        gap: inherit;
    }

    .style-as-list.cg-flow-row > .block-editor-inner-blocks > .block-editor-block-list__layout > div.block-editor-block-list__block {
        flex: 1 1 33%;
    }

    /* editor styling */
    .block-list-appender {
        z-index: 99;
    }
}

/* special styles for use in the GB editor */
.editor-styles-wrapper .cg-navigation {
    text-align: initial;

    /* GB is setting the colors of anchor tags - override them here */
    .style-as-list .style-as-list-item button.link,
    .style-as-list .style-as-list-item a.link {
        color: inherit;
    }
    * {
        text-align: initial;
    }

    button.cg-block-navigation-item__content,
    a.cg-block-navigation-item__content {
        pointer-events: none;
    }
}