component-drawer>dialog{--drawer-max-width: 475px;--drawer-preserve-context-margin: 56px;--drawer-top: 0px;--transition-duration: .2s;position:fixed;margin:0;padding:0;border:0;outline:none;width:100%;max-width:var(--drawer-max-width, 29rem);height:auto;max-height:none;color:inherit;background:var(--background-color);box-shadow:0 4px 4px #00000040;transform:translate(var(--drawer-offset));transition:transform var(--transition-duration) ease}component-drawer>dialog>*{height:100%}component-drawer[side=right]>dialog{--drawer-offset: 100%;inset:var(--drawer-top) 0 0 auto}component-drawer[side=left]>dialog{--drawer-offset: -100%;inset:var(--drawer-top) auto 0 0}component-drawer>dialog[open]:not(.state--closing){transform:translate(0)}component-drawer>dialog::backdrop{top:var(--drawer-top);background-color:#0009;opacity:0;transition:opacity var(--transition-duration) ease}component-drawer>dialog[open]:not(.state--closing)::backdrop{opacity:1}@starting-style{component-drawer>dialog[open]:not(.state--closing){transform:translate(var(--drawer-offset))}component-drawer>dialog[open]:not(.state--closing)::backdrop{opacity:0}}body:has(component-drawer>dialog[open]){overflow:hidden}component-drawer[preserve-context=true]>dialog{width:calc(100vw - var(--drawer-preserve-context-margin))}@media(max-width:767px){component-drawer:not([preserve-context=true])>dialog{max-width:none}}
/*# sourceMappingURL=/cdn/shop/t/42/assets/component-drawer.css.map */