@layer theme {
    html.noscroll.menu-open {
        overflow: clip;
    }
    [data-main-menu] {

        [data-menu-button] {
            appearance: none;
            background: none;
            border: none;
            padding: 0;
            color: inherit;
            z-index: 10;
            position: fixed;
            inset: .5em 0 auto auto;
            cursor: pointer;

            @media screen and (max-width: 44.99999em) {
                &[aria-expanded="true"] {
                    color: var(--accent, red);
                }
            }

            @media screen and (min-width: 45em) {
                display: none;
            }
        }

        [data-menu] {
            display: flex;
            flex-direction: column;
            justify-content: center;
            justify-items: center;
            align-items: center;
            transition: translate 1s cubic-bezier(0.77, 0, 0.175, 1);

            @media screen and (max-width: 44.99999em) {
                background-color: var(--white);
                position: fixed;
                inset: 0;
                padding-block-start: 2.5rem;
                height: calc(100svh - 0rem);
                font-size: 1.5em;

                &[hidden] {
                    translate: 0 calc(-120% - 2.5rem);
                }
            }

            @media screen and (min-width: 45em) {
                flex-direction: row;
                justify-content: center;
            }

            /* &[hidden] {
                translate: 0;
            } */
        }
    }
    [data-menu-button] {
        svg {
            border-radius: .4em;
        }
        path[fill="none"] {
            fill: rgba(255, 255, 255, 0.5);
        }
    }
}