.nav-icon-btn{--time:.1s;--width:40px;--height:30px;--line-height:1px;--line-margin:2;--color:#fff;height:var(--height);width:var(--width);justify-content:center;align-items:center;display:flex}.nav-icon{width:var(--width);height:var(--line-height);background-color:var(--color);position:relative}.nav-icon:before,.nav-icon:after{content:"";width:var(--width);height:var(--line-height);background-color:var(--color);transition:transform var(--time) ease-in,top var(--time) linear var(--time);display:block;position:absolute;left:0}.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:#0000}.nav-icon.nav-icon--active:before,.nav-icon.nav-icon--active:after{transition:top var(--time) linear,transform var(--time) ease-in var(--time);top:0}.nav-icon.nav-icon--active:before{transform:rotate(45deg)}.nav-icon.nav-icon--active:after{transform:rotate(-45deg)}