@layer mobilemenu{.mobile-nav{position:absolute;right:0;top:0;width:100vw;height:100vh;overflow:hidden;font-family:var(--ff-headings);z-index:20;pointer-events:none;&[data-navopen] { position: fixed; } .language-icon { fill: var(--color-text-bg); }}.mobile-nav__cover{position:absolute;width:100vw;height:100vh;background-color:var(--color-mobile-menu-cover);backdrop-filter:blur(3px);opacity:0; [data-navopen] & { opacity: 1; pointer-events: auto; }}.mobile-nav__toggle{display:flex;align-items:center;position:absolute;top:var(--gutters);right:var(--gutters);padding:0 .3rem;border-color:var(--color-button-text-hover);z-index:22;pointer-events:auto;&:hover,&:focus-visible,&:active { svg { fill:var(--color-button-text-hover); } }}.mobile-nav__hamburger{fill:var(--color-button-text);width:1.6rem;margin-inline-start:.1rem;.button--outline & { fill: var(--color-button); } rect { transform-origin: center; } [data-navopen] & { rect { y: 45px; &:nth-of-type(1) { transform: rotate(45deg); } &:nth-of-type(2) { opacity: 0; } &:nth-of-type(3) { transform: rotate(-45deg); } } }}.mobile-nav__sheet{visibility:hidden;background-color:var(--color-mobile-menu);width:90vw;height:100vh;padding:2.25rem;transform:translateX(100vw);z-index:21; [data-navopen] & { visibility: visible; pointer-events: auto; box-shadow: -10px 0 10px -10px var(--color-nearblack); transform: translateX(10vw); }}.mobile-nav__region{&:not(:empty) { margin-block-end:.5rem; }}.mobile-nav__navbar{display:flex;flex-direction:column;padding-inline-start:0;margin-block:0;li { list-style: none; } a { display: inline-block; padding-block: .5rem; }}.mobile-nav__cover,.mobile-nav__toggle,.mobile-nav__hamburger>rect,.mobile-nav__sheet{@media(prefers-reduced-motion:no-preference){transition: all 130ms ease-in; [data-navopen] &{transition:all 330ms ease-out}}}}