.outline-button{--_time:0.7s;--_timimg-function:var(--timing-function);padding:.4rem 1rem .4rem 1.5rem;border-radius:100rem;border:1px solid var(--clr-neutral-900);display:flex;align-items:center;gap:.9rem;width:fit-content;height:min-content;white-space:nowrap;overflow:hidden;position:relative;transition:transform var(--_time) var(--_timimg-function),background-color var(--_time) var(--_timimg-function),clip-path 1.2s var(--_timimg-function)}.outline-button__icon,.outline-button__text{color:#fff;mix-blend-mode:difference;transition:color var(--_time) var(--_timimg-function)}.outline-button:after{content:"";position:absolute;left:0;top:0;display:block;width:100%;height:100%;background-color:var(--clr-neutral-900);transform:translateY(105%);transition:transform var(--_time) var(--_timimg-function);z-index:-1}.outline-button__icon{width:.9rem;height:1.5rem;position:relative;overflow:hidden;scale:1.3;margin-bottom:.06rem}.outline-button__icon:after,.outline-button__icon:before{content:"→";font-family:var(--ff-text-light);position:absolute;display:block;width:auto;height:auto;display:grid;place-items:center;transition:transform var(--_time) var(--_timimg-function)}.outline-button__icon:before{transform:translateX(0)}.outline-button__icon:after{transform:translateX(-1.4rem)}.outline-button:hover:after{transform:translateY(0)}.outline-button:hover .outline-button__icon:before{transform:translateX(1rem)}.outline-button:hover .outline-button__icon:after{transform:translateX(.05rem)}.outline-button:active{transform:scale(.9)}@media(max-width:60rem){.outline-button__icon,.outline-button__text{color:var(--clr-neutral-900);mix-blend-mode:normal}.outline-button:hover{background-color:var(--clr-neutral-900)}.outline-button:hover .outline-button__icon,.outline-button:hover .outline-button__text{color:var(--clr-neutral-100)}.outline-button:after{background-color:rgba(0,0,0,0);display:none}}