.animated-submit-button:after{content:"";position:absolute;inset:0;border-radius:14px;border:2.5px solid transparent;background:linear-gradient(hsl(197,75%,45%),hsl(197,82%,52%)) padding-box,linear-gradient(180deg,rgba(39,170,225,.3),rgba(39,170,225,.6)) border-box;z-index:0;transition:all .4s ease}.animated-submit-button:hover:not(:disabled):after{box-shadow:inset 0 -1px 3px 0 rgba(39,170,225,.8)}.animated-submit-button:before{content:"";inset:7px 6px 6px 6px;position:absolute;background:linear-gradient(0deg,hsl(197,75%,45%),hsl(197,82%,52%));border-radius:30px;filter:blur(.5px);z-index:2;pointer-events:none}.state .icon,.state p{display:flex;align-items:center;justify-content:center;color:white}.state .icon{position:absolute;left:0;top:0;bottom:0;margin:auto;transform:scale(1.25);transition:all .3s ease}.state .icon svg{overflow:visible}.outline{position:absolute;border-radius:inherit;overflow:hidden;z-index:1;opacity:0;transition:opacity .4s ease;inset:-2px -3.5px}.outline:before{content:"";position:absolute;inset:-100%;background:conic-gradient(from 180deg,transparent 60%,rgba(39,170,225,.8) 80%,transparent 100%);animation:spin 2s linear infinite;animation-play-state:paused}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animated-submit-button:hover:not(:disabled) .outline{opacity:1}.animated-submit-button:hover:not(:disabled) .outline:before{animation-play-state:running}.state p span{display:block;opacity:0;animation:slideDown .8s ease forwards calc(var(--i) * .03s);color:white}.animated-submit-button:hover:not(:disabled) .state p span{opacity:1;animation:wave .5s ease forwards calc(var(--i) * .02s)}.animated-submit-button[data-state=sent] .state--default p span{opacity:1;animation:disappear .6s ease forwards calc(var(--i) * .03s)}@keyframes wave{30%{opacity:1;transform:translateY(4px) translateX(0) rotate(0)}50%{opacity:1;transform:translateY(-3px) translateX(0) rotate(0);color:rgba(255,255,255,.9)}to{opacity:1;transform:translateY(0) translateX(0) rotate(0);color:white}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px) translateX(5px) rotate(-90deg);color:rgba(255,255,255,.7);filter:blur(5px)}30%{opacity:1;transform:translateY(4px) translateX(0) rotate(0);filter:blur(0)}50%{opacity:1;transform:translateY(-3px) translateX(0) rotate(0)}to{opacity:1;transform:translateY(0) translateX(0) rotate(0);color:white}}@keyframes disappear{0%{opacity:1;color:white}to{opacity:0;transform:translateX(5px) translateY(20px);color:rgba(255,255,255,.5);filter:blur(5px)}}.state--default .icon svg{animation:land .6s ease forwards}.animated-submit-button:hover:not(:disabled) .state--default .icon{transform:rotate(45deg) scale(1.25)}.animated-submit-button[data-state=sent] .state--default svg{animation:takeOff .8s linear forwards}.animated-submit-button[data-state=sent] .state--default .icon{transform:rotate(0) scale(1.25)}@keyframes takeOff{0%{opacity:1}60%{opacity:1;transform:translateX(70px) rotate(45deg) scale(2)}to{opacity:0;transform:translateX(160px) rotate(45deg) scale(0)}}@keyframes land{0%{transform:translateX(-60px) translateY(30px) rotate(-50deg) scale(2);opacity:0;filter:blur(3px)}to{transform:translateX(0) translateY(0) rotate(0);opacity:1;filter:blur(0)}}.state--default .icon:before{content:"";position:absolute;top:50%;height:2px;width:0;left:-5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6))}.animated-submit-button[data-state=sent] .state--default .icon:before{animation:contrail .8s linear forwards}@keyframes contrail{0%{width:0;opacity:1}8%{width:15px}60%{opacity:.7;width:80px}to{opacity:0;width:160px}}.state{padding-left:29px;z-index:2;display:flex;position:relative}.state--sent{display:none}.state--sent svg{transform:scale(1.25);margin-right:8px;color:white}.animated-submit-button[data-state=sent] .state--default{position:absolute}.animated-submit-button[data-state=sent] .state--sent{display:flex}.animated-submit-button[data-state=sent] .state--sent span{opacity:0;animation:slideDown .8s ease forwards calc(var(--i) * .2s);color:white}.animated-submit-button[data-state=sent] .state--sent .icon svg{opacity:0;animation:appear 1.2s ease .8s forwards}@keyframes appear{0%{opacity:0;transform:scale(4) rotate(-40deg);color:rgba(255,255,255,.7);filter:blur(4px)}30%{opacity:1;transform:scale(.6);filter:blur(1px)}50%{opacity:1;transform:scale(1.2);filter:blur(0)}to{opacity:1;transform:scale(1);color:white}}