:root{--anim-menu-btn-width:1em;--anim-menu-btn-gap:.25em;--anim-menu-btn-color:inherit;--anim-menu-btn-size:48px;--anim-menu-btn-transition-duration:.2s;--anim-menu-btn-icon-size:32px;--anim-menu-btn-icon-stroke:1.5px}.anim-menu-btn{cursor:pointer;background-color:transparent;border:none;outline:none;display:flex;justify-content:center;align-items:center;width:var(--anim-menu-btn-size);height:var(--anim-menu-btn-size);}.anim-menu-btn__icon{border-radius:10em;position:relative;display:block;font-size:var(--anim-menu-btn-icon-size);width:var(--anim-menu-btn-width);height:var(--anim-menu-btn-icon-stroke);color:var(--anim-menu-btn-color);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;transform:scale(1)}.anim-menu-btn__icon::before,.anim-menu-btn__icon::after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-image:inherit;border-radius:10em}.anim-menu-btn__icon--close{background-size:100% 100%;will-change:transform,background-size;transition-property:transform,background-size;transition-duration:var(--anim-menu-btn-transition-duration,0.2s)}.anim-menu-btn:active .anim-menu-btn__icon--close{transform:scale(.9)}.anim-menu-btn__icon--close::before,.anim-menu-btn__icon--close::after{will-change:inherit;transition:inherit}.anim-menu-btn__icon--close::before{transform:translateY(calc(var(--anim-menu-btn-gap)*-1)) rotate(0)}.anim-menu-btn__icon--close::after{transform:translateY(var(--anim-menu-btn-gap)) rotate(0)}.anim-menu-btn--state-b .anim-menu-btn__icon--close{background-size:0% 100%}.anim-menu-btn--state-b .anim-menu-btn__icon--close::before{transform:translateY(0) rotate(45deg)}.anim-menu-btn--state-b .anim-menu-btn__icon--close::after{transform:translateY(0) rotate(-45deg)}.anim-menu-btn__icon--arrow-left,.anim-menu-btn__icon--arrow-right,.anim-menu-btn__icon--arrow-up,.anim-menu-btn__icon--arrow-down{border-radius:50em;will-change:transform;transition-property:transform;transition-duration:var(--anim-menu-btn-transition-duration,0.2s)}.anim-menu-btn:active .anim-menu-btn__icon--arrow-left,.anim-menu-btn:active .anim-menu-btn__icon--arrow-right,.anim-menu-btn:active .anim-menu-btn__icon--arrow-up,.anim-menu-btn:active .anim-menu-btn__icon--arrow-down{transform:scale(.9)}.anim-menu-btn__icon--arrow-left::before,.anim-menu-btn__icon--arrow-left::after,.anim-menu-btn__icon--arrow-right::before,.anim-menu-btn__icon--arrow-right::after,.anim-menu-btn__icon--arrow-up::before,.anim-menu-btn__icon--arrow-up::after,.anim-menu-btn__icon--arrow-down::before,.anim-menu-btn__icon--arrow-down::after{transform-origin:calc(var(--anim-menu-btn-icon-stroke)/2) 50%;will-change:transform,width;transition-property:transform,width;transition-duration:var(--anim-menu-btn-transition-duration,0.2s)}.anim-menu-btn__icon--arrow-left::before,.anim-menu-btn__icon--arrow-right::before,.anim-menu-btn__icon--arrow-up::before,.anim-menu-btn__icon--arrow-down::before{transform:translateY(calc(var(--anim-menu-btn-gap)*-1)) rotate(0)}.anim-menu-btn__icon--arrow-left::after,.anim-menu-btn__icon--arrow-right::after,.anim-menu-btn__icon--arrow-up::after,.anim-menu-btn__icon--arrow-down::after{transform:translateY(var(--anim-menu-btn-gap)) rotate(0)}.anim-menu-btn__icon--arrow-right{transform:rotate(180deg)}.anim-menu-btn:active .anim-menu-btn__icon--arrow-right{transform:rotate(180deg) scale(.9)}.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after{width:50%}.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before{transform:translateY(0) rotate(-45deg)}.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after{transform:translateY(0) rotate(45deg)}.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up{transform:rotate(90deg) scale(.9)}.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up{transform:rotate(90deg)}.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down{transform:rotate(-90deg) scale(.9)}.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down{transform:rotate(-90deg)}