:root{--tdm-drawer-width: 300px;--tdm-drawer-speed: .2s;--tdm-drawer-background: #eee;--tdm-backdrop-background: rgba(0,0,0,.5)}drawer-menu,[data-drawer-backdrop]{top:0;left:0;position:fixed;display:block;height:100%}drawer-menu{z-index:99999;margin-left:calc(var(--tdm-drawer-width) * -1);width:var(--tdm-drawer-width);transition:margin-left var(--tdm-drawer-speed);background:var(--tdm-drawer-background)}[data-drawer-backdrop]{z-index:99998;width:100%;visibility:hidden;opacity:0;background:var(--tdm-backdrop-background);transition-property:opacity, visibility;transition-duration:var(--tdm-drawer-speed),0s;transition-delay:0s,var(--tdm-drawer-speed)}[data-drawer="true"]{height:100%;width:100%;overflow:hidden}[data-drawer="true"] [data-drawer-backdrop]{visibility:visible;opacity:1;transition-property:visibility, opacity;transition-duration:0s,var(--tdm-drawer-speed);transition-delay:0s, 0s}[data-drawer="true"] drawer-menu{margin-left:0;transition:margin-left var(--tdm-drawer-speed)}[data-drawer-backdrop]:before{content:'';height:2rem;width:2rem;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");background-size:2rem;display:block;margin-top:1rem;margin-left:calc(var(--tdm-drawer-width) + 1rem);opacity:.5}