body{font-family:Arial,sans-serif}.offcanvas-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .5);display:none;z-index:100}.offcanvas{--space-top:calc(var(--nav-height) + var(--space-s))}.offcanvas{position:fixed;z-index:1000;display:none;flex-direction:column;align-items:center;margin:0;max-height:calc(100svh - var(--nav-height));width:520px;max-width:calc(100vw - var(--space-xl));overflow-y:auto;transition:0.4s ease all}.offcanvas>*{display:none}.offcanvas[data-anchor="body"]{border-radius:var(--radius-l)}.offcanvas[data-position="left"]{top:var(--space-top);left:var(--space-s);transform:translateX(-100%)}.offcanvas[data-position="right"]{top:var(--space-top);right:0;height:100%;border-radius:var(--radius-l) 0 0 var(--radius-l);transform:translateY(100%)}.offcanvas[data-position="top"]{top:var(--space-top);left:var(--space-s);width:100%;transform:translateY(-100%)}.offcanvas[data-position="top"][data-anchor="body"]{top:var(--nav-height);left:0}.offcanvas[data-position="bottom"]{bottom:var(--space-s);left:var(--space-s);width:100%;transform:translateY(100%)}.offcanvas[data-position="bottom-right"]{bottom:var(--space-s);right:var(--space-s);transform:translate(100%,100%)}.offcanvas[data-position="bottom-left"]{bottom:var(--space-s);left:var(--space-s);transform:translate(-100%,100%)}.offcanvas[data-anchor="self"][data-position="bottom-right"]{border-radius:var(--radius-s) var(--radius-s) var(--radius-l) var(--radius-l);justify-content:center;bottom:unset}.offcanvas[data-anchor="self"][data-position="bottom-left"]{border-radius:var(--radius-s) var(--radius-s) var(--radius-l) var(--radius-l);justify-content:center;bottom:unset}.offcanvas[data-anchor="self"][data-position="top-right"]{border-radius:var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-s);justify-content:center;bottom:unset}.offcanvas[data-anchor="self"][data-position="top-left"]{border-radius:var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-s);justify-content:center;bottom:unset}.offcanvas.show{transform:translate(0,0);display:block}.offcanvas .close-btn{position:absolute;top:10px;right:10px;border:none;background:none;font-size:20px;cursor:pointer}