:root{--drawer-bg: #fff;--drawer-radius: 24px;--drawer-backdrop: hsl(0 0% 0% / .4);--drawer-backdrop-blur: 4px;--drawer-max-width: 500px;--drawer-max-height: 96dvh;--drawer-handle-bg: hsl(0 0% 80%);--drawer-handle-bg-hover: hsl(0 0% 60%);--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 hsl(0 0% 0% / .12), 0 -4px 20px hsl(0 0% 0% / .08);--drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / .12), 0 4px 20px hsl(0 0% 0% / .08);--drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / .12), -4px 0 20px hsl(0 0% 0% / .08);--drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / .12), 4px 0 20px hsl(0 0% 0% / .08);--drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / .25);--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: hsl(0 0% 0% / .15)}@media(prefers-color-scheme:dark){:root{--drawer-bg: hsl(0 0% 12%);--drawer-handle-bg: hsl(0 0% 35%);--drawer-handle-bg-hover: hsl(0 0% 50%);--drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / .4), 0 -4px 20px hsl(0 0% 0% / .3);--drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / .4), 0 4px 20px hsl(0 0% 0% / .3);--drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / .4), -4px 0 20px hsl(0 0% 0% / .3);--drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / .4), 4px 0 20px hsl(0 0% 0% / .3);--drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / .5)}}body{transition:scale var(--drawer-duration) var(--drawer-ease),border-radius var(--drawer-duration) var(--drawer-ease);transform-origin:center top}body:has(.drawer[open]){overflow:hidden;scale:var(--drawer-nested-scale);border-radius:var(--drawer-radius)}.drawer{border:none;padding:0;margin:0;max-width:100%;max-height:100%;position:fixed;background:var(--drawer-bg);overflow:hidden;opacity:0;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;inset:auto 0 0;margin-inline:auto;width:100%;max-width:var(--drawer-max-width);height:auto;max-height:var(--drawer-max-height);border-radius:var(--drawer-border-radius, var(--_border-radius));box-shadow:var(--drawer-shadow-bottom);translate:var(--_translate-closed)}.drawer::backdrop{background:var(--drawer-backdrop);opacity:0;backdrop-filter:blur(var(--drawer-backdrop-blur));-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;translate:0 0;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}.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);inset:0 0 0 auto;margin:0;width:100%;max-width:var(--drawer-max-width);height:100dvh;max-height:100dvh;box-shadow:var(--drawer-shadow-right)}.drawer[data-direction=left]{--_translate-closed: -100% 0;--_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;inset:0 auto 0 0;margin:0;width:100%;max-width:var(--drawer-max-width);height:100dvh;max-height:100dvh;box-shadow:var(--drawer-shadow-left)}.drawer[data-direction=top]{--_translate-closed: 0 -100%;--_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);inset:0 0 auto;margin-inline:auto;width:100%;max-width:var(--drawer-max-width);height:auto;max-height:var(--drawer-max-height);box-shadow:var(--drawer-shadow-top)}.drawer[data-direction=modal]{--_translate-closed: 0 0;--_border-radius: var(--drawer-radius);inset:0;margin:auto;width:fit-content;max-width:var(--drawer-max-width);height:fit-content;max-height:var(--drawer-max-height);box-shadow:var(--drawer-shadow-modal);scale:var(--drawer-nested-scale)}.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{display:flex;justify-content:center;padding-block:var(--drawer-handle-padding-block);padding-inline:var(--drawer-handle-padding-inline);cursor:grab}.drawer-handle:before{content:"";width:var(--drawer-handle-width);height:var(--drawer-handle-height);background:var(--drawer-handle-bg);border-radius:100px;transition:width .2s var(--drawer-ease),height .2s var(--drawer-ease),background .2s ease}.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{flex-direction:column;align-items:center;justify-content:center;padding-block:var(--drawer-handle-padding-inline);padding-inline:var(--drawer-handle-padding-block);height:100%;position:absolute;top:0;writing-mode:vertical-lr}.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{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}.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}.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]){scale:1;translate:0 0;filter:none}}