:root{--bg:#fff;--bg-accent:#484a4d;--text-color:#dadce1;--nav-size:60px;--border:1px solid #474a4d;--border-radius:8px;--speed:500ms}.icon-button{--button-size:calc(var(--nav-size) * 0.5);width:var(--button-size);height:var(--button-size);background-color:#e0e0e0;border-radius:10px;padding:5px;margin:2px;display:flex;align-items:center;justify-content:center;transition:filter .3s}.icon-button:hover{filter:brightness(1.2)}.icon-button svg{fill:var(--text-color);width:20px;height:20px}.dropdown-user-menu{position:absolute;z-index:50;height:auto!important;top:58px;width:300px;transform:translateX(-75%);background-color:#fff;border-radius:10px;padding:1rem;overflow:hidden;transition:height var(--speed) ease;box-shadow:0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1),inset 0 0 0 1px hsla(0,0%,100%,.05)}@media(max-width:768px){.dropdown-user-menu{transform:translateX(-10px)}}.menu{width:100%}.menu-item{height:auto;display:flex;align-items:center;border-radius:var(--border-radius);transition:background var(--speed);padding:.5rem}.menu-item .icon-button{margin-right:.5rem}.menu-item .icon-button:hover{filter:none}.menu-item:hover{background-color:#eee}.icon-right{margin-left:auto}.menu-primary-enter{position:absolute;transform:translateX(-110%)}.menu-primary-enter-active{transform:translateX(0);transition:all var(--speed) ease}.menu-primary-exit{position:absolute}.menu-primary-exit-active{transform:translateX(-110%);transition:all var(--speed) ease}.menu-secondary-enter{transform:translateX(110%)}.menu-secondary-enter-active{transform:translateX(0);transition:all var(--speed) ease}.menu-secondary-exit-active{transform:translateX(110%);transition:all var(--speed) ease}