.animated-arrow{display:inline-block;height:var(--arrow-height,var(--arrow-size,1em));position:relative;vertical-align:bottom;width:var(--arrow-width,var(--arrow-size,1em))}.animated-arrow:after,.animated-arrow:before{border-bottom-color:transparent;border:var(--arrow-weight,2px) solid transparent;border-bottom:var(--arrow-weight,2px) solid var(--arrow-color,currentColor);box-sizing:border-box;content:"";display:block;height:0;position:absolute;right:0;top:50%;transition:all .1s ease-in;width:100%}.animated-arrow:before{border-left-width:0;transform:translate3d(var(--animated-arrow-hover-width,0),-50%,0)}.animated-arrow:after{border-right-color:var(--arrow-color,currentColor);height:50%;transform:rotate(-45deg) translate(calc(var(--arrow-weight, 2px)*-.75),-50%);transform-origin:top center;width:50%}.animated-arrow__bars{display:block;height:100%;position:relative;transition:all .1s ease-in;width:100%}:focus>.animated-arrow,:hover>.animated-arrow{--animated-arrow-hover-width:0.5em}:focus>.animated-arrow .animated-arrow__bars,:hover>.animated-arrow .animated-arrow__bars{transform:translateX(-3px);transition:all .3s ease-out}:focus>.animated-arrow:after,:focus>.animated-arrow:before,:hover>.animated-arrow:after,:hover>.animated-arrow:before{transition:all .3s ease-out}:focus>.animated-arrow:before,:hover>.animated-arrow:before{width:calc(100% + .5em)}:focus>.animated-arrow:after,:hover>.animated-arrow:after{transform:rotate(-45deg) translate(50%,calc(var(--arrow-weight, 2px)*.75))}.animated-arrow--left{transform:rotate(180deg) translateY(calc(var(--arrow-weight, 2px)*-.75))}