.drawer--wrap{--drawer-transition-curve: cubic-bezier(.4, 0, .2, 1);--drawer-transition-timing: .3s;--drawer-width: 400px;position:fixed;inset:0;background:#00000040;z-index:10;opacity:0;pointer-events:none;transition:opacity var(--drawer-transition-timing) var(--drawer-transition-curve);max-width:100%}.drawer--wrap .drawer--inner{width:var(--drawer-width);max-width:100%;position:absolute;top:0;bottom:0;right:0;background:#fff;transform:translate(var(--drawer-width));transition:transform var(--drawer-transition-timing) var(--drawer-transition-curve)}.drawer--wrap .drawer--inner .drawer--content{height:100%;display:flex;flex-direction:column;visibility:hidden;transition:visibility var(--drawer-transition-timing)}.drawer--wrap .drawer--inner .drawer--content .slot--wrap{overflow-y:auto}.drawer--wrap.is--left .drawer--inner{right:auto;left:0;transform:translate(calc(var(--drawer-width) * -1))}.drawer--wrap.is--active{pointer-events:auto;opacity:1}.drawer--wrap.is--active .drawer--inner{transform:translate(0);visibility:visible}.drawer--wrap.is--active .drawer--inner .drawer--content{visibility:visible}