.cg-navigation.cg-nav-mobile {
    position: relative;
    display: flex;
    flex-flow: column nowrap;

    .desktop-nav-only {
        display: none;
    }

    .mobile-nav-only {
        display: block;
    }

    .alignright {
        align-self: flex-end;
    }

    .alignleft {
        align-self: flex-start;
    }

    .aligncenter {
        align-self: center;
    }
    
    /* hamburger button */
    button.cg-block-navigation__responsive-container-open {
        position: absolute;
        margin: 0;
        top: 50%;
        left: 0;
        right: auto;
        bottom: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 99;
        color: var(--wp--custom--nav-hamburger-color, var(--wp--preset--color--accent, #000));
        transform: translateY(-50%);

        &.alignright {
            right: 0;
            left: auto;
        }

        &.aligncenter {
            left: 50%;
            transform: translateX(-50%);
        }

        &.static {
            width: auto;

            span.open:before {
                content: "\f349";
                font-size: var(--wp--custom--nav-hamburger-width, 2rem);
            }
            span.close svg {
                width: var(--wp--custom--nav-hamburger-height, 2rem);
                height: var(--wp--custom--nav-hamburger-height, 2rem);
            }
        }

        &.animated {
            width: var(--wp--custom--nav-hamburger-width, 2rem);
            height: var(--wp--custom--nav-hamburger-height, 2rem);
        }

        &.custom {
            width: var(--wp--custom--nav-hamburger-width, 2rem);
            height: var(--wp--custom--nav-hamburger-height, 2rem);

            span.close,
            span.open {
                display: block;
                width: 100%;
                height: 100%;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            span.open {
                background-image: var(--wp--custom--nav-hamburger-open, url(../images/mobile-menu-icon.svg));
            }
            span.close {
                background-image: var(--wp--custom--nav-hamburger-close, url(../images/mobile-menu-close.svg));
            }
        }
    
        span.anim {
            background: var(--wp--custom--nav-hamburger-color, var(--wp--preset--color--accent, #000));
            display: block;
            height: var(--wp--custom--nav-hamburger-weight, .125rem);
            left: 0;
            opacity: 1;
            position: absolute;
            transform: rotate(0deg);
            transition: var(--wp--custom--nav-animation-speed, .25s) ease-in-out;
            width: 100%;
        }

    
        &[aria-expanded='false'] {
            span.close {
                display: none;
            }
    
            span.anim:first-child {
                top: 4.2%;
            }
    
            span.anim:nth-child(2),
            span.anim:nth-child(3) {
                top: calc(50% - var(--wp--custom--nav-hamburger-weight, .125rem) / 2);
            }
            
            span.anim:last-child {
                bottom: 4.2%;
            }
    
        }
    
        &[aria-expanded='true'] {
            span.open {
                display: none;
            }
    
            span.anim:first-child,
            span.anim:last-child {
                left: 50%;
                top: calc(50% - var(--wp--custom--nav-hamburger-weight, .125rem) / 2);
                width: 0;
            }
    
            span.anim:nth-child(2) {
                transform: rotate(45deg);
            }
    
            span.anim:nth-child(3) {
                transform: rotate(-45deg);
            }
    
        }
    
    }
    
    &.full-screen {
        /* modal menu container */
        .cg-block-navigation__responsive-container {
            display: none;
            position: fixed;
            right: -100%;
            left: auto;
            top: calc(var(--wp--custom--nav-mobile-top, 0px) + var(--wp-admin--admin-bar--height, 0px));
            bottom: calc(var(--wp--custom--nav-mobile-bottom, 0px));
            height: calc(100svh - var(--wp--custom--nav-mobile-top, 0px) - var(--wp-admin--admin-bar--height, 0px) - var(--wp--custom--nav-mobile-bottom, 0px));
            margin: 0;
            transition: var(--wp--custom--nav-animation-speed, .4s) ease-in-out;
            z-index: 88;
            overflow: auto;
    
            &:has(> .style-as-list.alignleft) {
                left: -100%;
                right: auto;
            }
        
            &[is-hidden='false']:has(> .style-as-list.alignleft) {
                left: 0;
                right: auto;
            }
    
            &[is-hidden='false'] {
                right: 0;
            }
        }
    }

    &.drop-down {
        .cg-block-navigation__responsive-container {
            display: none;
            position: absolute;
            right: auto;
            left: -20px;
            top: calc(100% + 2rem);
            height: auto;
            max-height: 0;
            margin: 0;
            transition: var(--wp--custom--nav-animation-speed, .4s) ease-in-out;
            z-index: 88;
            overflow: hidden;

            &[is-hidden='false'] {
                max-height: 100vh;
            }
        }

        button.cg-nav-button.alignright ~ .cg-block-navigation__responsive-container {
            right: -20px;
            left: auto;
        }

        button.cg-nav-button.aligncenter ~ .cg-block-navigation__responsive-container {
            left: 50%;
            right: auto;
            transform: translateX(-50%);
        }   
    }

    /* submenu animated expanding */
    .style-as-list.cg-block-navigation-submenu {
        overflow: hidden;
        max-height: 0;
        transition: var(--wp--custom--nav-animation-speed, .4s) ease-in-out;
    }

    .style-as-list.cg-block-navigation-submenu[is-hidden='true'] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .style-as-list.cg-block-navigation-submenu[is-hidden='false'] {
        max-height: 80vh;
    }

    .style-as-list {
        flex-wrap: nowrap;
    }

    .style-as-list-item {
        width: 100%;
    }

    /* navigation search mobile layout */
    .cg-block-navigation__search form {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        row-gap: 1rem;
        justify-content: space-between;

        input[type='submit'] {
            flex: 0 0 fit-content;
        }

        input[type='search'] {
            flex: 1 1 50%;
            margin-right: 1rem;
        }
}