@keyframes mobile-menu-expand {
    0%      { transform: translateY(-100%); }
    100%    { transform: translateY(0); }
}
@media screen and (min-width: 650px) {
    #site_header {
        &:is([data-state="docked"], [data-state="floating"][style="top: 0px;"]) {
            color: var(--site-foreground-color);
            box-shadow: none;
    
            &::before {
                opacity: 0;
            }
            &::after {
                opacity: 0;
            }
    
            > .content-wrapper {
                background-color: transparent;
            }
    
            .section {
                color: var(--site-foreground-color);
    
                &.secondary {
                    background-color: transparent;
                    border-top-color: rgb(from var(--site-foreground-color) r g b / 0.25);
    
                    li {
                        padding: 12px;
    
                        &:not(:last-child) > * {
                            border-right-color: rgb(from var(--site-foreground-color) r g b / 0.25);
                        }
                        > * {
                            display: inline;
                            padding: 0;
                            padding-right: 24px;
                        }
                    }
                    .title {
                        background-color: transparent;
                        padding-left: 20px;
                        padding-right: 32px;
                    }
                }
            }
        }

        .section.primary {
            flex-basis: 0;
        }
        .section.secondary {
            touch-action: pan-x;
        }
        .section.secondary > .content-wrapper {
            /* padding-right: 8px; */
            overflow-x: auto;
        }
    }
}
@media screen and (max-width: 649px) {
    #site_header {
        font-size: 1.25em;

        &:is([data-state="docked"], [data-state="floating"][style="top: 0px;"]):not([aria-expanded="true"]) {
            color: var(--site-foreground-color);
            box-shadow: none;
    
            &::before {
                opacity: 0;
            }
            &::after {
                opacity: 0;
            }
            
            .persistent::before {
                opacity: 0;
            }
            > .content-wrapper {
                background-color: transparent;
            }
        }

        &[aria-expanded="true"] {
            > .content-wrapper {
                overflow-y: auto;
            }
            .persistent {
                position: fixed;
                top: 0;
                box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
                /* background-color: var(--primary-site-color); */
            }
            .section {
                animation: mobile-menu-expand 0.2s ease-out forwards;

                > .content-wrapper {
                    flex-direction: column;
                    text-align: center;
            
                    li {
                        width: 100%;
            
                        > a, > button {
                            padding: 20px !important;
                        }
                    }
                }
                li:nth-of-type(2n + 1) {
                    background-color: rgb(from var(--site-dark-color) r g b / 0.25);
                }
                .section.secondary button.title {
                    width: 100%;
                }
            }
        }
        &:not([aria-expanded="true"]) {
            .persistent {
                /* box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.25); */
            }
            .section {
                /* display: flex !important;
                position: absolute; */
                animation: mobile-menu-expand 0.2s ease-out reverse forwards;
            }
        }

        .persistent {
            /* background-color: var(--primary-site-color); */
            padding: 8px 16px !important;
            width: 100%;
            z-index: 1;

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                content: "";
                background-color: var(--primary-site-color);
                transition: opacity 0.2s ease-out;
            }
        }
    }
}