.i-drawer__container{position:fixed;width:100vw;height:100vh;z-index:1000;transition:width 1ms,height 1ms}.i-drawer__container.i-drawer__close{transition-delay:600ms}.i-drawer__container.i-drawer__close .i-drawer__mask{opacity:0}.i-drawer__container.i-drawer__close .i-drawer__content{opacity:0}.i-drawer__container.i-drawer__close.right>.i-drawer__content{transform:translateX(100%)}.i-drawer__container.i-drawer__close.left>.i-drawer__content{transform:translateX(-100%)}.i-drawer__container.i-drawer__close.right,.i-drawer__container.i-drawer__close.left{width:0}.i-drawer__container.i-drawer__close.bottom>.i-drawer__content{transform:translateY(100%)}.i-drawer__container.i-drawer__close.top>.i-drawer__content{transform:translateY(-100%)}.i-drawer__container.i-drawer__close.top,.i-drawer__container.i-drawer__close.bottom{height:0}.i-drawer__container.i-drawer__open .i-drawer__mask{opacity:1}.i-drawer__container.i-drawer__open .i-drawer__content{opacity:1}.i-drawer__container.i-drawer__open.right,.i-drawer__container.i-drawer__open.left{width:100%}.i-drawer__container.i-drawer__open.right .i-drawer__content,.i-drawer__container.i-drawer__open.left .i-drawer__content{transform:translateX(0)}.i-drawer__container.i-drawer__open.bottom,.i-drawer__container.i-drawer__open.top{height:100%}.i-drawer__container.i-drawer__open.bottom .i-drawer__content,.i-drawer__container.i-drawer__open.top .i-drawer__content{transform:translateY(0)}.i-drawer__container.bottom{bottom:0}.i-drawer__container.bottom .i-drawer__content{max-height:80vh;border-top-left-radius:5px;border-top-right-radius:5px;top:auto;left:0;right:0;bottom:0}.i-drawer__container.top{top:0}.i-drawer__container.top .i-drawer__content{max-height:80vh;border-bottom-left-radius:5px;border-bottom-right-radius:5px;bottom:auto;left:0;right:0;top:0}.i-drawer__container.right{right:0}.i-drawer__container.right .i-drawer__content{width:200px;border-top-left-radius:5px;border-bottom-left-radius:5px;left:auto;top:0;right:0;bottom:0}.i-drawer__container.left{left:0}.i-drawer__container.left .i-drawer__content{width:200px;border-top-right-radius:5px;border-bottom-right-radius:5px;right:auto;top:0;left:0;bottom:0}.i-drawer__container .i-drawer__content{transition:transform 300ms,opacity 600ms;padding:20px;box-sizing:border-box;background-color:#fff;position:absolute}.i-drawer__container .i-drawer__mask{background-color:rgba(0,0,0,.3);transition:opacity 600ms;position:absolute;height:100%;width:100%}