.icon-menu{--gap:5px;--height-bar:5px;--pos-y-bar-one:0;--pos-y-bar-three:0;--scale-bar:1;--rotate-bar-one:0;--rotate-bar-three:0;cursor:pointer;display:flex;flex-direction:column;gap:var(--gap);width:36px}.bar,.icon-menu{position:relative}.bar{background-color:#fff;border-radius:.5rem;height:var(--height-bar);width:100%}.bar--1{top:var(--pos-y-bar-one);transform:rotate(var(--rotate-bar-one));transition:top .2s .1s,transform .1s}.bar--2{transform:scaleX(var(--scale-bar));transition:transform .15s .1s}.bar--3{bottom:var(--pos-y-bar-three);transform:rotate(var(--rotate-bar-three));transition:bottom .2s .1s,transform .1s}.check-icon:checked+.icon-menu>.bar--1{transition:top .2s,transform .2s .1s}.check-icon:checked+.icon-menu>.bar--3{transition:bottom .2s,transform .2s .1s}.check-icon:checked+.icon-menu{--pos-y-bar-one:calc(var(--gap) + var(--height-bar));--pos-y-bar-three:calc(var(--gap) + var(--height-bar));--scale-bar:0;--rotate-bar-one:45deg;--rotate-bar-three:-45deg}