.sb{cursor:pointer;outline-offset:3px;--sb-face:var(--color-bg-brand-solid,#6941c6);--sb-base:color-mix(in oklab, var(--color-bg-brand-solid,#6941c6) 60%, #000);background:0 0;border:0;border-radius:14px;padding:0;position:relative}.sb:before{content:"";background:var(--sb-base);border-radius:14px;position:absolute;inset:0}.sb-front{background:var(--sb-face);color:#fff;transition:transform .22s var(--spring-snappy,cubic-bezier(.34, 1.56, .64, 1));isolation:isolate;border-radius:14px;place-items:center;padding:13px 26px;font-weight:600;line-height:1;display:grid;position:relative;overflow:hidden;transform:translateY(-5px)}.sb:active .sb-front{transition:transform 40ms;transform:translateY(-1px)}.sb[data-sb-state=busy] .sb-front,.sb[data-sb-state=done] .sb-front{transform:translateY(-1px)}.sb-faces{z-index:1;display:inline-grid;position:relative}.sb-faces>span{white-space:nowrap;transition:opacity .24s var(--motion-ease-out,ease-out), transform .36s var(--spring-snappy,cubic-bezier(.34, 1.56, .64, 1));grid-area:1/1;justify-content:center;align-items:center;gap:8px;display:inline-flex}.sb-busy,.sb-done{opacity:0;transform:scale(.6)}.sb[data-sb-state=busy] .sb-busy,.sb[data-sb-state=done] .sb-done{opacity:1;transform:none}.sb[data-sb-state=busy] .sb-idle,.sb[data-sb-state=done] .sb-idle,.sb[data-sb-state=done] .sb-busy{opacity:0;transform:scale(.6)}.sb-check{fill:none;stroke:#fff;stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30px;width:1.2em;height:1.2em}.sb[data-sb-state=done] .sb-check{animation:.44s cubic-bezier(.6,0,.3,1) .2s forwards sb-draw}@keyframes sb-draw{to{stroke-dashoffset:0}}.sb-pay .sb-ink{z-index:0;pointer-events:none;background:var(--color-bg-success-solid,#17b26a);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.sb-pay[data-sb-state=busy] .sb-ink{animation:1.4s cubic-bezier(.45,0,.55,1) forwards sb-wipe}.sb-pay[data-sb-state=done] .sb-ink{transform:scaleX(1)}@keyframes sb-wipe{to{transform:scaleX(1)}}.sb-cart .sb-ink{z-index:0;background:var(--color-bg-success-solid,#17b26a);pointer-events:none;border-radius:50%;width:56px;height:56px;margin:-28px;position:absolute;top:50%;left:50%;transform:scale(0)}.sb-cart[data-sb-state=done] .sb-ink{animation:.56s cubic-bezier(.4,0,.2,1) forwards sb-burst}.sb-plus{z-index:2;opacity:0;pointer-events:none;font-size:.82em;font-weight:800;position:absolute;top:3px;right:18px}.sb-cart[data-sb-state=busy] .sb-plus{animation:.9s ease-out sb-plus}@keyframes sb-burst{to{transform:scale(7)}}@keyframes sb-plus{0%{opacity:0;transform:translateY(8px)scale(.5)}30%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-16px)scale(1)}}.sb-send .sb-ink{z-index:0;background:color-mix(in oklab, var(--color-bg-brand-solid,#6941c6) 78%, #fff);pointer-events:none;border-radius:50%;width:56px;height:56px;margin:-28px;position:absolute;top:50%;left:50%;transform:scale(0)}.sb-send[data-sb-state=done] .sb-ink{animation:.56s cubic-bezier(.4,0,.2,1) forwards sb-burst}.sb-streak{flex-direction:column;gap:3px;display:inline-flex}.sb-streak i{opacity:.3;background:currentColor;border-radius:2px;width:12px;height:2px;animation:.7s ease-in-out infinite sb-streak}.sb-streak i:nth-child(2){width:8px;animation-delay:.12s}.sb-streak i:nth-child(3){width:10px;animation-delay:.24s}@keyframes sb-streak{0%,to{opacity:.25;transform:translate(-3px)}50%{opacity:1;transform:translate(4px)}}.sb-like{--sb-face:var(--color-bg-primary,#fff);--sb-base:var(--color-border-secondary,#e4e7ec)}.sb-like .sb-front{color:var(--color-text-secondary,#475467)}.sb-heart{display:inline-flex;position:relative}.sb-heart svg{width:1.3em;height:1.3em}.sb-heart-fill{fill:#f0426a;clip-path:inset(100% 0 0)}.sb-like[data-sb-state=liked] .sb-heart{animation:.82s cubic-bezier(.34,1.56,.64,1) sb-heartbeat}.sb-like[data-sb-state=liked] .sb-heart-fill{animation:.52s ease-out 90ms forwards sb-heart-fill}.sb-heart:after{content:"";opacity:0;pointer-events:none;border:2px solid #f0426a;border-radius:50%;position:absolute;inset:-6px;transform:scale(.5)}.sb-like[data-sb-state=liked] .sb-heart:after{animation:.64s ease-out 60ms sb-hring}@keyframes sb-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.5)}28%{transform:scale(1.12)}44%{transform:scale(1.4)}62%{transform:scale(.94)}80%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes sb-heart-fill{to{clip-path:inset(0)}}@keyframes sb-hring{0%{opacity:.65;transform:scale(.5)}to{opacity:0;transform:scale(2.4)}}@media (prefers-reduced-motion:reduce){.sb-front{transition:none!important;transform:translateY(-3px)!important}.sb:active .sb-front,.sb[data-sb-state=busy] .sb-front,.sb[data-sb-state=done] .sb-front{transform:translateY(-1px)!important}.sb-faces>span{transition:opacity .12s linear!important;transform:none!important}.sb-check{stroke-dashoffset:0!important;animation:none!important}.sb-pay[data-sb-state=busy] .sb-ink,.sb-pay[data-sb-state=done] .sb-ink{animation:none!important;transform:scaleX(1)!important}.sb-cart[data-sb-state=done] .sb-ink,.sb-send[data-sb-state=done] .sb-ink{animation:none!important;transform:scale(7)!important}.sb-plus,.sb-streak i,.sb-like[data-sb-state=liked] .sb-heart,.sb-like[data-sb-state=liked] .sb-heart:after{animation:none!important}.sb-heart-fill{clip-path:inset(0)!important;animation:none!important}}
