: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:none;height:100vh;left:0;margin:0;opacity:0;overflow-y:auto;position:fixed;top:0;translate:-100% 0;width:var(--drawer-width);z-index:9001;transition:translate .3s,opacity .3s,display .3s allow-discrete}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 ul.menu details.submenu{interpolate-size:allow-keywords}frml-drawer frml-drawer-main ul.menu details.submenu summary{align-items:center;border-bottom:1px solid var(--color-surface-dark);color:var(--color-ink);cursor:pointer;display:flex;justify-content:space-between;list-style:none;padding:var(--space-s) 10%}frml-drawer frml-drawer-main ul.menu details.submenu summary::-webkit-details-marker{display:none}frml-drawer frml-drawer-main ul.menu details.submenu summary frml-icon{color:currentColor;transition:rotate .3s;width:16px}frml-drawer frml-drawer-main ul.menu details.submenu summary:hover{background:var(--color-surface-hover)}frml-drawer frml-drawer-main ul.menu details.submenu ul li a{font-size:var(--fs-xs);padding:var(--space-xs) 10% var(--space-xs) 15%;width:75%}frml-drawer frml-drawer-main ul.menu details.submenu::details-content{block-size:0;overflow:hidden;transition:block-size .3s,content-visibility .3s allow-discrete}frml-drawer frml-drawer-main ul.menu details.submenu[open] summary frml-icon{rotate:180deg}frml-drawer frml-drawer-main ul.menu details.submenu[open]::details-content{block-size:auto}frml-drawer frml-drawer-main.right{left:auto;right:0;translate:100% 0}frml-drawer frml-drawer-main.fullscreen{width:100%}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{display:block;opacity:1;translate:0 0}@starting-style{frml-drawer.open frml-drawer-main{opacity:0;translate:-100% 0}frml-drawer.open frml-drawer-main.right{translate:100% 0}}frml-drawer.open frml-drawer-mask{background:rgba(0,0,0,.6);left:0;transition:background-color .3s 0s,left 0s 0s}