drawer-dialog{--drawer-transition:0.3s cubic-bezier(0.25,0.46,0.45,0.94);--drawer-bg:#fff;--overlay-bg:rgba(0,0,0,.4);--drawer-width-side:1024px;--drawer-height-vertical:50vh;bottom:0;display:flex;left:0;position:fixed;top:var(--drawer-top,0);visibility:hidden;width:100%;z-index:-1}drawer-dialog[open]{visibility:visible}drawer-dialog .drawer__overlay{background-color:var(--overlay-bg);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity var(--drawer-transition);width:100%}drawer-dialog[open] .drawer__overlay{opacity:1}drawer-dialog[closing=true] .drawer__overlay{opacity:0}drawer-dialog .drawer__content{background-color:var(--drawer-bg);box-shadow:0 0 15px rgba(0,0,0,.1);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;position:relative;transition:transform var(--drawer-transition)}@media screen and (max-width:1024px){drawer-dialog .drawer__content::-webkit-scrollbar{display:none}drawer-dialog .drawer__content{-ms-overflow-style:none;scrollbar-width:none}}drawer-dialog:not([placement]),drawer-dialog[placement=right]{justify-content:flex-end}drawer-dialog:not([placement]) .drawer__content,drawer-dialog[placement=right] .drawer__content{height:100%;max-width:var(--drawer-width-side);transform:translateX(100%);width:100%}drawer-dialog[placement=left]{justify-content:flex-start}drawer-dialog[placement=left] .drawer__content{height:100%;max-width:var(--drawer-width-side);transform:translateX(-100%);width:100%}drawer-dialog[placement=top]{align-items:flex-start;flex-direction:column}drawer-dialog[placement=top] .drawer__content{height:var(--drawer-height-vertical);transform:translateY(-100%);width:100%}drawer-dialog[placement=bottom]{align-items:flex-end;flex-direction:column;justify-content:flex-end}drawer-dialog[placement=bottom] .drawer__content{height:var(--drawer-height-vertical);transform:translateY(100%);width:100%}drawer-dialog[open] .drawer__content{transform:translate(0)}drawer-dialog[placement=right][closing=true] .drawer__content{transform:translateX(100%)}drawer-dialog[placement=left][closing=true] .drawer__content{transform:translateX(-100%)}drawer-dialog[placement=top][closing=true] .drawer__content{transform:translateY(-100%)}drawer-dialog[placement=bottom][closing=true] .drawer__content{transform:translateY(100%)}