.buttonclass{--primary:#00bdd8;--neutral-1:#fff;--neutral-2:#f3f4f6;--radius:16px;cursor:pointer;border-radius:var(--radius);text-shadow:0 1px 1px #0003;letter-spacing:-.2px;border:none;justify-content:center;align-items:center;min-width:180px;height:55px;font-size:17px;font-style:normal;font-weight:600;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:relative;box-shadow:0 1px 1px #fff6,0 12px 24px #00000026,0 4px 8px #0000001a}.buttonclass:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 2px 2px #fff6,0 18px 32px #00000026,0 8px 12px #0000001a}.buttonclass:active{transform:scale(1);box-shadow:0 0 1px 2px #ffffff4d,0 10px 3px -3px #0003}.buttonclass:after{content:"";border-radius:var(--radius);background:linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box, linear-gradient(to bottom, #0000001a, #00000073) border-box;z-index:0;border:2.5px solid #0000;transition:all .4s;position:absolute;inset:0}.buttonclass:hover:after{transform:scale(1.05,1.1);box-shadow:inset 0 -1px 3px #fff}.buttonclass:before{content:"";background:linear-gradient(to top, var(--neutral-1), var(--neutral-2));filter:blur(.5px);z-index:2;border-radius:30px;position:absolute;inset:7px 6px 6px}.state p{justify-content:center;align-items:center;display:flex}.state .icon{justify-content:center;align-items:center;margin:auto;transition:all .3s;display:flex;position:absolute;top:0;bottom:0;left:0;transform:scale(1.25)}.state .icon svg{overflow:visible}.outline{border-radius:inherit;z-index:1;opacity:0;transition:opacity .4s;position:absolute;inset:-2px -3.5px;overflow:hidden}.outline:before{content:"";background:conic-gradient(from 180deg, transparent 60%, var(--primary) 85%, transparent 100%);opacity:.7;animation:2.5s linear infinite paused spin;position:absolute;inset:-100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.buttonclass:hover .outline{opacity:1}.buttonclass:hover .outline:before{animation-play-state:running}.state p span{opacity:0;animation:slideDown .8s ease forwards calc(var(--i) * 30ms);display:block}.buttonclass:hover p span{opacity:1;animation:wave .5s ease forwards calc(var(--i) * 20ms)}.buttonclass:focus p span{opacity:1;animation:disapear .6s ease forwards calc(var(--i) * 30ms)}@keyframes wave{30%{opacity:1;transform:translateY(4px)translate(0)rotate(0)}50%{opacity:1;transform:translateY(-4px)translate(0)rotate(0)}to{opacity:1;transform:translateY(0)translate(0)rotate(0)}}@keyframes slideDown{0%{opacity:0;filter:blur(5px);transform:translateY(-20px)translate(5px)rotate(-90deg)}30%{opacity:1;filter:blur();transform:translateY(4px)translate(0)rotate(0)}50%{opacity:1;transform:translateY(-3px)translate(0)rotate(0)}to{opacity:1;transform:translateY(0)translate(0)rotate(0)}}@keyframes disapear{0%{opacity:1}to{opacity:0;filter:blur(5px);transform:translate(5px)translateY(20px)}}.state--default .icon svg{animation:.6s forwards land}.buttonclass:hover .state--default .icon{transform:rotate(45deg)scale(1.25)}.buttonclass:focus .state--default svg{animation:.8s linear forwards takeOff}.buttonclass:focus .state--default .icon{transform:rotate(0)scale(1.25)}@keyframes takeOff{0%{opacity:1}60%{opacity:1;transform:translate(80px)rotate(45deg)scale(2.2)}to{opacity:0;transform:translate(180px)rotate(45deg)scale(0)}}@keyframes land{0%{opacity:0;filter:blur(3px);transform:translate(-60px)translateY(30px)rotate(-50deg)scale(2)}to{opacity:1;filter:blur();transform:translate(0)translateY(0)rotate(0)}}.state--default .icon:before{content:"";background:linear-gradient(90deg,#0000,#00000080);width:0;height:2px;position:absolute;top:50%;left:-5px}.buttonclass:focus .state--default .icon:before{animation:.8s linear forwards contrail}@keyframes contrail{0%{opacity:1;width:0}8%{width:15px}60%{opacity:.7;width:80px}to{opacity:0;width:160px}}.state{z-index:2;padding-left:29px;display:flex;position:relative}.state--default span:nth-child(4){margin-right:5px}.state--sent{display:none}.state--sent svg{margin-right:8px;transform:scale(1.25)}.buttonclass:focus .state--default{position:absolute}.buttonclass:focus .state--sent{display:flex}.buttonclass:focus .state--sent span{opacity:0;animation:slideDown .8s ease forwards calc(var(--i) * .2s)}.buttonclass:focus .state--sent .icon svg{opacity:0;animation:1.2s .8s forwards appear}@keyframes appear{0%{opacity:0;filter:blur(4px);transform:scale(4)rotate(-40deg)}30%{opacity:1;filter:blur(1px);transform:scale(.6)}50%{opacity:1;filter:blur();transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.transition-none{transition:none!important}