:root{--drawer-width: 300px}frml-drawer{display:block}frml-drawer button.menu frml-icon{width:28px}frml-drawer frml-drawer-main{background:var(--color-surface);display:block;height:100vh;left:calc(var(--drawer-width)*-1);margin:0;opacity:0;position:fixed;top:0;width:var(--drawer-width);z-index:9001;transition:left .3s,right .3s,opacity .3s}frml-drawer frml-drawer-main div.header{align-items:center;background:var(--color-surface-xdark);display:flex;justify-content:space-between;padding:var(--space-s) 10%;width:80%}frml-drawer frml-drawer-main div.header h2{color:var(--color-ink);font-size:20px;margin:0;vertical-align:middle}frml-drawer frml-drawer-main div.header h2 img{height:36px;margin:0 15px 0 0;vertical-align:middle}frml-drawer frml-drawer-main ul.menu{border-top:1px solid var(--color-surface-dark);margin-bottom:40px}frml-drawer frml-drawer-main ul.menu li a{border-bottom:1px solid var(--color-surface-dark);color:var(--color-ink);display:block;padding:var(--space-s) 10%;width:80%}frml-drawer frml-drawer-main ul.menu li a:hover{background:var(--color-surface-hover)}frml-drawer frml-drawer-main.right{left:auto;right:calc(var(--drawer-width)*-1)}frml-drawer frml-drawer-main.fullscreen{left:-100vw;width:100%}frml-drawer frml-drawer-main.fullscreen.right{left:auto;right:-100vw}frml-drawer frml-drawer-mask{background:rgba(0,0,0,0);display:block;height:100vh;left:-9999px;position:fixed;top:0;width:100%;z-index:9000;transition:background-color .3s 0s,left 0s .3s}frml-drawer.open frml-drawer-main{opacity:1}frml-drawer.open frml-drawer-main.left{left:0px}frml-drawer.open frml-drawer-main.right{right:0px}frml-drawer.open frml-drawer-mask{background:rgba(0,0,0,.6);left:0;transition:background-color .3s 0s,left 0s 0s}