:root{--drawer-bg:#fff;--drawer-radius:24px;--drawer-backdrop:#0006;--drawer-backdrop-blur:4px;--drawer-max-height:96dvh;--drawer-modal-width:fit-content;--drawer-modal-height:fit-content;--drawer-handle-bg:#ccc;--drawer-handle-bg-hover:#999;--drawer-handle-width:48px;--drawer-handle-width-hover:56px;--drawer-handle-height:5px;--drawer-handle-padding-block:1rem .5rem;--drawer-handle-padding-inline:0;--drawer-shadow-bottom:0 -10px 60px #0000001f, 0 -4px 20px #00000014;--drawer-shadow-top:0 10px 60px #0000001f, 0 4px 20px #00000014;--drawer-shadow-right:-10px 0 60px #0000001f, -4px 0 20px #00000014;--drawer-shadow-left:10px 0 60px #0000001f, 4px 0 20px #00000014;--drawer-shadow-modal:0 25px 50px -12px #00000040;--drawer-duration:.5s;--drawer-duration-close:.35s;--drawer-ease:cubic-bezier(.32, .72, 0, 1);--drawer-nested-scale:.94;--drawer-nested-offset:20px;--drawer-nested-brightness:.92;--drawer-nested-backdrop:#00000026}@media (prefers-color-scheme:dark){:root{--drawer-bg:#1f1f1f;--drawer-handle-bg:#595959;--drawer-handle-bg-hover:gray;--drawer-shadow-bottom:0 -10px 60px #0006, 0 -4px 20px #0000004d;--drawer-shadow-top:0 10px 60px #0006, 0 4px 20px #0000004d;--drawer-shadow-right:-10px 0 60px #0006, -4px 0 20px #0000004d;--drawer-shadow-left:10px 0 60px #0006, 4px 0 20px #0000004d;--drawer-shadow-modal:0 25px 50px -12px #00000080}}body{transition:scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);transform-origin:top}body:has(.drawer[open]){scale:var(--drawer-nested-scale);border-radius:var(--drawer-radius)}body:has(.drawer[open]:not([data-scroll-lock=false])){overflow:hidden}.drawer{background:var(--drawer-bg);opacity:0;max-width:100%;max-height:100%;transition:display var(--drawer-duration-close) allow-discrete, overlay var(--drawer-duration-close) allow-discrete, translate var(--drawer-duration-close) var(--drawer-ease), scale var(--drawer-duration-close) var(--drawer-ease), filter var(--drawer-duration-close) ease, opacity var(--drawer-duration-close) ease;--_translate-closed:0 100%;--_border-radius:var(--drawer-radius) var(--drawer-radius) 0 0;width:var(--drawer-width,100%);max-width:var(--drawer-max-width,none);height:var(--drawer-height,auto);max-height:var(--drawer-max-height,96dvh);border-radius:var(--drawer-border-radius,var(--_border-radius));box-shadow:var(--drawer-shadow-bottom);translate:var(--_translate-closed);margin:0;border:none;margin-inline:auto;padding:0;position:fixed;inset:auto 0 0;overflow:hidden}.drawer::backdrop{background:var(--drawer-backdrop);opacity:0;-webkit-backdrop-filter:blur(var(--drawer-backdrop-blur));transition:display var(--drawer-duration-close) allow-discrete, overlay var(--drawer-duration-close) allow-discrete, opacity var(--drawer-duration-close) ease}.drawer[open]{opacity:1;transition:display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, translate var(--drawer-duration) var(--drawer-ease), scale var(--drawer-duration) var(--drawer-ease), filter var(--drawer-duration) ease, opacity .15s ease;translate:0}.drawer[open]::backdrop{opacity:1;transition:display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity .2s ease}@starting-style{.drawer[open]{opacity:0;translate:var(--_translate-closed)}.drawer[open]::backdrop{opacity:0}}.drawer[data-direction=right]{--_translate-closed:100% 0;--_border-radius:var(--drawer-radius) 0 0 var(--drawer-radius);width:var(--drawer-width,500px);max-width:var(--drawer-max-width,90%);height:var(--drawer-height,100dvh);max-height:100dvh;box-shadow:var(--drawer-shadow-right);margin:0;inset:0 0 0 auto}.drawer[data-direction=left]{--_translate-closed:-100% 0;--_border-radius:0 var(--drawer-radius) var(--drawer-radius) 0;width:var(--drawer-width,500px);max-width:var(--drawer-max-width,90%);height:var(--drawer-height,100dvh);max-height:100dvh;box-shadow:var(--drawer-shadow-left);margin:0;inset:0 auto 0 0}.drawer[data-direction=top]{--_translate-closed:0 -100%;--_border-radius:0 0 var(--drawer-radius) var(--drawer-radius);width:var(--drawer-width,100%);max-width:var(--drawer-max-width,none);height:var(--drawer-height,auto);max-height:var(--drawer-max-height,96dvh);box-shadow:var(--drawer-shadow-top);margin-inline:auto;inset:0 0 auto}.drawer[data-direction=modal]{--_translate-closed:0 0;--_border-radius:var(--drawer-radius);width:var(--drawer-modal-width,fit-content);max-width:var(--drawer-max-width,90%);height:var(--drawer-modal-height,fit-content);max-height:var(--drawer-max-height,96dvh);box-shadow:var(--drawer-shadow-modal);scale:var(--drawer-nested-scale);margin:auto;inset:0}.drawer[data-direction=modal][open]{scale:1}@starting-style{.drawer[data-direction=modal][open]{scale:var(--drawer-nested-scale)}}.drawer[open]:has(~.drawer[open]){scale:var(--drawer-nested-scale);translate:0 calc(-1 * var(--drawer-nested-offset));border-radius:var(--drawer-radius);filter:brightness(var(--drawer-nested-brightness));pointer-events:none}.drawer[open]:has(~.drawer[open]~.drawer[open]){scale:calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));translate:0 calc(-2 * var(--drawer-nested-offset));filter:brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)))}.drawer[open]:has(~.drawer[open]~.drawer[open]~.drawer[open]){scale:calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));translate:0 calc(-3 * var(--drawer-nested-offset));filter:brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)))}.drawer[open]:has(~.drawer[open]~.drawer[open]~.drawer[open]~.drawer[open]){scale:calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));translate:0 calc(-4 * var(--drawer-nested-offset));filter:brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)))}.drawer[open]:has(~.drawer[open]~.drawer[open]~.drawer[open]~.drawer[open]~.drawer[open]){scale:calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));translate:0 calc(-5 * var(--drawer-nested-offset));filter:brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)))}.drawer[open]~.drawer[open]::backdrop{background:var(--drawer-nested-backdrop);-webkit-backdrop-filter:none;backdrop-filter:none}.drawer-handle{padding-block:var(--drawer-handle-padding-block);padding-inline:var(--drawer-handle-padding-inline);cursor:grab;justify-content:center;display:flex}.drawer-handle:before{content:"";width:var(--drawer-handle-width);height:var(--drawer-handle-height);background:var(--drawer-handle-bg);transition:width .2s var(--drawer-ease), height .2s var(--drawer-ease), background .2s ease;border-radius:100px}.drawer-handle:hover:before{width:var(--drawer-handle-width-hover);background:var(--drawer-handle-bg-hover)}.drawer[data-direction=left] .drawer-handle,.drawer[data-direction=right] .drawer-handle{padding-block:var(--drawer-handle-padding-inline);padding-inline:var(--drawer-handle-padding-block);writing-mode:vertical-lr;flex-direction:column;justify-content:center;align-items:center;height:100%;position:absolute;top:0}.drawer[data-direction=left] .drawer-handle{right:0}.drawer[data-direction=right] .drawer-handle{left:0}.drawer[data-direction=left] .drawer-handle:before,.drawer[data-direction=right] .drawer-handle:before{width:var(--drawer-handle-height);height:var(--drawer-handle-width)}.drawer[data-direction=left] .drawer-handle:hover:before,.drawer[data-direction=right] .drawer-handle:hover:before{width:var(--drawer-handle-height);height:var(--drawer-handle-width-hover)}.drawer-content{overscroll-behavior:contain;flex:1;min-height:0;overflow:hidden auto}.drawer[data-direction=left] .drawer-content,.drawer[data-direction=right] .drawer-content{height:100%}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}body:has(.drawer[open]){scale:1}:is(.drawer[open]:has(~.drawer[open]),.drawer[open]:has(~.drawer[open]~.drawer[open]),.drawer[open]:has(~.drawer[open]~.drawer[open]~.drawer[open]),.drawer[open]:has(~.drawer[open]~.drawer[open]~.drawer[open]~.drawer[open]),.drawer[open]:has(~.drawer[open]~.drawer[open]~.drawer[open]~.drawer[open]~.drawer[open])){filter:none;translate:0;scale:1}}