.drawer{z-index:9999;transition:width 0s .3s,height 0s .3s,-ms-transform .3s cubic-bezier(.78,.14,.15,.86),transform .3s cubic-bezier(.78,.14,.15,.86);position:fixed}.drawer>*{transition:-ms-transform .3s cubic-bezier(.78,.14,.15,.86),transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86),box-shadow .3s cubic-bezier(.78,.14,.15,.86)}.drawer.drawer-open{transition:-ms-transform .3s cubic-bezier(.78,.14,.15,.86),transform .3s cubic-bezier(.78,.14,.15,.86)}.drawer .drawer-mask{opacity:0;background:#000;width:100%;height:0;transition:opacity .3s cubic-bezier(.78,.14,.15,.86),height 0s .3s;position:absolute;top:0;left:0}.drawer-content-wrapper{background:#fff;position:absolute}.drawer-content{z-index:1;position:relative;overflow:auto}.drawer-handle{cursor:pointer;z-index:0;text-align:center;background:#fff;justify-content:center;align-items:center;width:41px;height:40px;font-size:16px;line-height:40px;display:flex;position:absolute;top:72px}.drawer-handle-icon{background:#333;width:14px;height:2px;transition:background .3s cubic-bezier(.78,.14,.15,.86);position:relative}.drawer-handle-icon:before,.drawer-handle-icon:after{content:"";background:#333;width:100%;height:2px;transition:-ms-transform .3s cubic-bezier(.78,.14,.15,.86),transform .3s cubic-bezier(.78,.14,.15,.86);display:block;position:absolute}.drawer-handle-icon:before{top:-5px}.drawer-handle-icon:after{top:5px}.drawer-left,.drawer-right{width:0%;height:100%}.drawer-left .drawer-content-wrapper,.drawer-right .drawer-content-wrapper,.drawer-left .drawer-content,.drawer-right .drawer-content{height:100%}.drawer-left.drawer-open,.drawer-right.drawer-open{width:100%}.drawer-left.drawer-open.no-mask,.drawer-right.drawer-open.no-mask{width:0%}.drawer-left{top:0;left:0}.drawer-left .drawer-handle{border-radius:0 4px 4px 0;right:-40px;box-shadow:2px 0 8px rgba(0,0,0,.15)}.drawer-left.drawer-open .drawer-content-wrapper{box-shadow:2px 0 8px rgba(0,0,0,.15)}.drawer-right{top:0;right:0}.drawer-right .drawer-content-wrapper{right:0}.drawer-right .drawer-handle{border-radius:4px 0 0 4px;left:-40px;box-shadow:-2px 0 8px rgba(0,0,0,.15)}.drawer-right.drawer-open .drawer-content-wrapper{box-shadow:-2px 0 8px rgba(0,0,0,.15)}.drawer-right.drawer-open.no-mask{right:1px;-ms-transform:translate(1px);transform:translate(1px)}.drawer-top,.drawer-bottom{width:100%;height:0%}.drawer-top .drawer-content-wrapper,.drawer-bottom .drawer-content-wrapper,.drawer-top .drawer-content,.drawer-bottom .drawer-content{width:100%}.drawer-top .drawer-content,.drawer-bottom .drawer-content,.drawer-top.drawer-open,.drawer-bottom.drawer-open{height:100%}.drawer-top.drawer-open.no-mask,.drawer-bottom.drawer-open.no-mask{height:0%}.drawer-top .drawer-handle,.drawer-bottom .drawer-handle{margin-left:-20px;left:50%}.drawer-top{top:0;left:0}.drawer-top .drawer-handle{border-radius:0 0 4px 4px;top:auto;bottom:-40px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.drawer-top.drawer-open .drawer-content-wrapper{box-shadow:0 2px 8px rgba(0,0,0,.15)}.drawer-bottom{bottom:0;left:0}.drawer-bottom .drawer-content-wrapper{bottom:0}.drawer-bottom .drawer-handle{border-radius:4px 4px 0 0;top:-40px;box-shadow:0 -2px 8px rgba(0,0,0,.15)}.drawer-bottom.drawer-open .drawer-content-wrapper{box-shadow:0 -2px 8px rgba(0,0,0,.15)}.drawer-bottom.drawer-open.no-mask{bottom:1px;-ms-transform:translateY(1px);transform:translateY(1px)}.drawer.drawer-open .drawer-mask{opacity:.3;height:100%;transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.drawer.drawer-open .drawer-handle-icon{background:0 0}.drawer.drawer-open .drawer-handle-icon:before{-ms-transform:translateY(5px)rotate(45deg);transform:translateY(5px)rotate(45deg)}.drawer.drawer-open .drawer-handle-icon:after{-ms-transform:translateY(-5px)rotate(-45deg);transform:translateY(-5px)rotate(-45deg)}