.button{text-transform:uppercase;color:var(--base-400);align-items:center;gap:.5rem;text-decoration:none;display:flex;position:relative}.button .button-label{width:max-content;color:var(--base-400);-webkit-font-smoothing:antialiased;letter-spacing:-.025rem;font-family:PP Pangram Sans;font-size:1rem;font-weight:900;display:inline-block;position:relative;transform:translateY(.1rem)}.button .button-label:after{content:"";background:var(--base-400);transform-origin:100% 100%;will-change:transform;width:100%;height:.1rem;transition:transform .25s ease-out;position:absolute;bottom:-.35rem;left:0;transform:scaleX(0)}.button:hover .button-label:after{transform-origin:0 100%;transform:scaleX(1)}.button .button-icon{transform-style:preserve-3d;perspective:1000px;will-change:transform;justify-content:center;align-items:center;transition:transform .6s ease-out;display:flex}.button .button-icon-inner{background-color:var(--base-400);width:1.5rem;height:1.5rem;color:var(--base-100);border-radius:10rem;justify-content:center;align-items:center;display:flex}.button:hover .button-icon{animation:.8s ease-out forwards flipTwice}.button:not(:hover) .button-icon{animation:.8s ease-out forwards flipBack}@keyframes flipTwice{0%{transform:rotateY(0)}to{transform:rotateY(720deg)}}@keyframes flipBack{0%{transform:rotateY(720deg)}to{transform:rotateY(0)}}.button--light,.button--light .button-label{color:var(--base-100)}.button--light .button-label:after{background:var(--base-100)}.button--light .button-icon-inner{background-color:var(--base-100);color:var(--base-400)}@media (max-width:1000px){.button .button-label:after{display:none}.button:hover .button-icon,.button:not(:hover) .button-icon{animation:none}}.button .line{will-change:transform;margin-bottom:-.2em;padding-bottom:.2em;position:relative;transform:translateY(100%)}