.truck-button{--color:#fff;--background:#2b3044;--tick:#16bf78;--base:#0d0f18;--wheel:#2b3044;--wheel-inner:#646b8c;--wheel-dot:#fff;--back:#6d58ff;--back-inner:#362a89;--back-inner-shadow:#2d246b;--front:#a6accd;--front-shadow:#535a79;--front-light:#fff8b1;--window:#2b3044;--window-shadow:#404660;--street:#646b8c;--street-fill:#404660;--box:#dcb97a;--box-shadow:#b89b66;cursor:pointer;text-align:center;width:172px;height:30px;color:var(--color);border-radius:var(--br,5px);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg))translateZ(0);transition:transform .5s,border-radius .3s linear var(--br-d,0s);border:none;outline:none;margin-top:3rem;position:relative}.truck-button:before,.truck-button:after{content:"";background:var(--b,var(--street));transform-origin:0 100%;width:100%;height:6px;transform:rotateX(90deg)scaleX(var(--sy,1));position:absolute;top:0;left:0}.truck-button:after{--sy:var(--progress,0);--b:var(--street-fill)}.default,.success{opacity:var(--o,1);font-size:14px;font-weight:500;line-height:24px;transition:opacity .3s;display:block}.success{--o:0;position:absolute;top:12px;left:0;right:0}.success svg{vertical-align:top;fill:none;width:12px;height:10px;stroke:var(--tick);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:var(--offset,16px);margin:7px 0 0 4px;transition:stroke-dashoffset .4s .45s;display:inline-block}.truck{width:72px;height:28px;transform:rotateX(90deg)translate3d(var(--truck-x,4px),calc(var(--truck-y-n,-26)*1px),12px);position:absolute}.truck:before,.truck:after{content:"";z-index:2;width:10px;height:10px;box-shadow:inset 0 0 0 2px var(--wheel),inset 0 0 0 4px var(--wheel-inner);background:var(--wheel-dot);transform:translateY(calc(var(--truck-y)*-1px))translateZ(0);border-radius:50%;position:absolute;bottom:-6px}.truck:after{left:54px}.truck .wheel,.truck .wheel:before{bottom:var(--b,-6px);left:var(--l,6px);background:var(--wheel);border-radius:50%;width:10px;height:10px;position:absolute;transform:translateZ(0)}.truck .wheel:before{content:"";bottom:0;left:35px}.truck .front,.truck .back,.truck .box{position:absolute}.truck .back{z-index:1;background:linear-gradient(68deg,var(--back-inner)0%,var(--back-inner-shadow)100%);border-radius:1px 1px 0 0;width:47px;height:28px;bottom:0;left:0}.truck .front{clip-path:polygon(55% 0,72% 44%,100% 58%,100% 100%,0 100%,0 0);background:linear-gradient(84deg,var(--front-shadow)0%,var(--front)100%);width:24px;height:22px;bottom:-1px;left:47px}.truck .box{z-index:1;width:13px;height:13px;transform:translate(calc(var(--box-x,-24)*1px),calc(var(--box-y,-6)*1px))scale(var(--box-s,.5));opacity:var(--box-o,0);background:linear-gradient(68deg,var(--box)0%,var(--box-shadow)100%);border-radius:1px;bottom:0;right:56px;overflow:hidden}.truck-button.animation{--rx:-90deg;--br:0}.truck-button.animation .default{--o:0}.truck-button.animation.done{--rx:0deg;--br:5px;--br-d:.2s}.truck-button.animation.done .success{--o:1;--offset:0}.checkmark-circle{justify-content:center;align-items:center;display:flex}.checkmark-circle.checked .circle{animation:1s ease-in-out forwards circle}.checkmark-circle.checked .tick{animation:.8s ease-out .95s forwards tick}.circle{stroke-dasharray:440;stroke-dashoffset:440px}.tick{stroke-dasharray:150;stroke-dashoffset:150px}@keyframes circle{0%{stroke-dashoffset:440px}to{stroke-dashoffset:880px}}@keyframes tick{0%{stroke-dashoffset:150px}to{stroke-dashoffset:0}}