.nav-icon-btn{--time:0.1s;--width:40px;--height:30px;--line-height:1px;--line-margin:2;--color:#000;height:var(--height);width:var(--width);display:flex;justify-content:center;align-items:center}.nav-icon{position:relative}.nav-icon,.nav-icon:after,.nav-icon:before{width:var(--width);height:var(--line-height);background-color:var(--color)}.nav-icon:after,.nav-icon:before{content:"";display:block;position:absolute;left:0;transition:transform var(--time) ease-in,top var(--time) linear var(--time)}.nav-icon:before{top:calc(var(--line-height)*-8)}.nav-icon:after{top:calc(var(--line-height)*8)}.nav-icon.nav-icon--active{background-color:rgba(0,0,0,0)}.nav-icon.nav-icon--active:after,.nav-icon.nav-icon--active:before{top:0;transition:top var(--time) linear,transform var(--time) ease-in var(--time)}.nav-icon.nav-icon--active:before{transform:rotate(45deg)}.nav-icon.nav-icon--active:after{transform:rotate(-45deg)}