drawer-component{--drawer-width: 400px;--drawer-background: #ffffff;--drawer-shadow: 0 0 10px rgba(0, 0, 0, .2);--drawer-z-index: 1000;--drawer-header-height: 60px;--drawer-header-border: #eee;--drawer-padding: 20px;--drawer-transition: transform .3s ease-in-out;--overlay-background: rgba(0, 0, 0, .5);--overlay-transition: opacity .3s ease-in-out}drawer-component .drawer-overlay{position:fixed;display:block;top:0;left:0;width:100%;height:100%;background:var(--overlay-background);opacity:0;visibility:hidden;transition:var(--overlay-transition);z-index:calc(var(--drawer-z-index) - 1)}drawer-component .drawer-overlay.open{opacity:1;visibility:visible}drawer-component .drawer{position:fixed;top:0;height:100%;width:var(--drawer-width);background:var(--drawer-background);box-shadow:var(--drawer-shadow);z-index:var(--drawer-z-index);transition:var(--drawer-transition);display:flex;flex-direction:column}drawer-component .drawer[position=right]{right:0;transform:translate(100%)}drawer-component .drawer[position=left]{left:0;transform:translate(-100%)}drawer-component .drawer.open{transform:translate(0)}.drawer-header{height:var(--drawer-header-height);padding:var(--drawer-padding);border-bottom:1px solid var(--drawer-header-border);display:flex;justify-content:space-between;align-items:center}drawer-component .drawer-content{flex:1;padding:var(--drawer-padding);overflow-y:auto;-webkit-overflow-scrolling:touch}drawer-component .drawer-close{padding:8px;background:none;border:none;cursor:pointer;color:inherit;font-size:30px}drawer-component .drawer-close:hover,drawer-component .drawer-close:focus{opacity:.7}@media (max-width: 600px){drawer-component{--drawer-width: 100%}}
/*# sourceMappingURL=/cdn/shop/t/89/assets/drawer-component.css.map */