:root{--sidebar-width: 350px;--gutter-width: var(--spacing-6, 20px);--transition-speed: 0.3s}body{--sidebar-offset: 0px}body.collapsed{--sidebar-offset: calc(-1 * var(--sidebar-width))}.button--icon{font-size:var(--icon-size-default, 24px)}#page-wrapper{--page-offset: calc(var(--sidebar-width) + var(--gutter-width));transform:translateX(calc(var(--page-offset) + var(--sidebar-offset)));width:calc(100% - var(--page-offset));transition:transform var(--transition-speed) ease}#page-sidebar{width:var(--sidebar-width);background-color:var(--color-neutral-950);padding:var(--gutter-width);box-shadow:2px 0 10px rgba(0,0,0,.3);position:fixed;top:0;left:0;height:100%;overflow-y:auto;box-sizing:border-box;z-index:1000;transform:translateX(var(--sidebar-offset));transition:transform var(--transition-speed) ease}.appdrawer{display:flex;flex-direction:column;row-gap:var(--gutter-width)}.appdrawer__header{background-color:red}.appdrawer__nav-label{color:var(--color-grey-300);font-size:var(--fs-sm);text-transform:uppercase;display:block;margin-bottom:var(--spacing-3)}.application-menu{list-style:none;margin:0 0 var(--spacing-8) 0;padding:0}.application-menu ul{list-style:none;margin:0;padding:0}.application-menu li{margin:0;padding:0}.application-menu li>div{display:flex;align-items:center;background-color:hsla(0,0%,100%,0);margin-bottom:var(--spacing-min);border-radius:var(--radius-sm);padding-inline-start:var(--spacing-4);color:#fff;block-size:var(--spacing-10);cursor:pointer}.application-menu li>div:hover{background-color:hsla(from var(--color-white) h s l/0.2)}.application-menu li>div:hover>a{color:var(--color-primary)}.application-menu li>div>a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:var(--spacing-2)}.application-menu li>div>button{margin-left:auto}.application-menu li>.submenu{overflow:hidden;height:0;transition:height .3s ease}.application-menu li>.submenu.open{display:block;padding-inline:1rem;padding-block:.5em;border-bottom:1px solid hsla(0,0%,100%,.4)}