:root{--nav-size:60px;--speed:500ms}.icon-button{--button-size:calc(var(--nav-size) * 0.5);width:var(--button-size);height:var(--button-size);background-color:#c4c4c4;border-radius:50%;padding:5px;margin:2px;display:flex;align-items:center;justify-content:center;transition:filter .3s}.icon-button:hover{filter:brightness(1.2)}.dropdown{position:absolute;top:58px;width:300px;transform:translateX(-6%);padding:1rem;overflow:hidden}.menu{width:100%}.menu-item{height:50px;display:flex;align-items:center;transition:background var(--speed)}.menu-item .icon-button{margin-right:.5rem}.menu-item .icon-button:hover{filter:none}.menu-item:hover{color:#525357;cursor:pointer}.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}