#checkbox{display:none}.toggle{position:relative;width:22px;cursor:pointer;margin:auto;display:block;height:calc(2px * 3 + 8px * 2)}.bar{position:absolute;left:0;right:0;height:2px;border-radius:calc(4px / 2);background:#000;color:inherit;opacity:1;transition:none .35s cubic-bezier(.5,-.35,.35,1.5) 0s}.bar--top{bottom:calc(50% + 5px + 2px/ 2);transition-property:bottom,margin,transform;transition-delay:calc(0s + .35s),0s,0s}.bar--middle{top:calc(50% - 2px/ 2);transition-property:top,opacity;transition-duration:.35s,0s;transition-delay:calc(0s + .35s * 1.3),calc(0s + .35s * 1.3)}.bar--bottom{top:calc(50% + 5px + 2px/ 2);transition-property:top,transform;transition-delay:0s}#checkbox:checked+.toggle .bar--top{bottom:calc(50% - 5px - 2px);margin-bottom:calc(5px + 2px/ 2);transform:rotate(45deg);transition-delay:calc(0s + .35s * .3),calc(0s + .35s * 1.3),calc(0s + .35s * 1.3)}#checkbox:checked+.toggle .bar--middle{top:calc(50% + 5px);opacity:0;transition-duration:.35s,0s;transition-delay:0s,calc(0s + .35s)}#checkbox:checked+.toggle .bar--bottom{top:calc(50% - 2px/ 2);transform:rotate(-45deg);transition-delay:calc(0s + .35s * 1.3),calc(0s + .35s * 1.3)}