.applause-button-frame{color:var(--applause-color,green);flex-direction:column;align-items:center;gap:.2rem;display:inline-flex}.applause-button{cursor:pointer;color:var(--applause-color,green);-webkit-tap-highlight-color:transparent;background:0 0;border:0;outline:none;padding:0;display:block;position:relative}.applause-button .style-root{color:var(--applause-color,green);fill:var(--applause-color,green);stroke:var(--applause-color,green);position:absolute;inset:0}.applause-button .style-root:after{content:" ";background:radial-gradient(circle, hsl(var(--primary) / .16) 0%, transparent 58%);opacity:0;border-radius:50%;transition:opacity .18s,transform .22s cubic-bezier(.22,1,.36,1);display:block;position:absolute;inset:-10%;transform:scale(.74)}.applause-button:hover:not(.clap-limit-exceeded) .style-root:after,.applause-button:focus-visible:not(.clap-limit-exceeded) .style-root:after{opacity:1;transform:scale(1)}.applause-button:focus-visible{box-shadow:0 0 0 2px hsl(var(--ring) / .45);border-radius:9999px}.applause-button.loading{opacity:.5}.applause-button .shockwave{border-radius:50%;position:absolute;inset:0}.applause-button svg{opacity:.8;stroke:none;width:60%;height:60%;margin-top:20%;margin-left:20%;transition:opacity .18s,transform .22s cubic-bezier(.22,1,.36,1);position:absolute;inset:0;overflow:visible!important}.applause-button:hover:not(.clap-limit-exceeded) svg{opacity:1;transform:translateY(-1px)scale(1.06)rotate(-3deg)}.applause-button svg g.flat{visibility:hidden}.applause-button svg g.outline{visibility:visible}.applause-button.clap-limit-exceeded{cursor:inherit}.applause-button:disabled{cursor:default}.applause-button.clap-limit-exceeded .style-root{fill:gray!important;stroke:gray!important;color:gray!important}.applause-button.clapped svg g.flat{visibility:visible}.applause-button.clapped svg g.outline{visibility:hidden}.applause-button .count-container{z-index:2;width:auto;min-width:2rem;color:var(--applause-color,green);text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:.72rem;font-weight:800;line-height:1;position:absolute;top:-.95rem;left:50%;transform:translate(-50%)}.applause-button .count-container .count{text-align:center}.applause-total{min-height:1rem;color:hsl(var(--muted-foreground));-webkit-user-select:none;user-select:none;font-size:.68rem;font-weight:700;line-height:1}.applause-button g.sparkle circle{opacity:0;stroke-width:0}.applause-button g.sparkle g:first-child{transform:rotate(0)translate(10px)}.applause-button g.sparkle g:nth-child(2){transform:rotate(72deg)translate(10px)}.applause-button g.sparkle g:nth-child(3){transform:rotate(144deg)translate(10px)}.applause-button g.sparkle g:nth-child(4){transform:rotate(216deg)translate(10px)}.applause-button g.sparkle g:nth-child(5){transform:rotate(288deg)translate(10px)}.applause-button:hover:not(.clapped):not(.clap-limit-exceeded) .shockwave{animation-name:applause-hover-ring;animation-duration:1.35s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-iteration-count:infinite}.applause-button.clap{animation-name:pulse;animation-duration:.5s;animation-iteration-count:1}.applause-button.clap .sparkle circle{animation-name:explode;animation-duration:.5s;animation-iteration-count:1}.applause-button.clap .count{animation-name:hideThenShow;animation-duration:.5s;animation-iteration-count:1}@keyframes explode{0%{opacity:0;transform:translate(10px)}20%{opacity:1}50%{opacity:1}to{opacity:0;transform:translate(25px)}}@keyframes shockwave{0%{opacity:1;transform:scale(1);box-shadow:0 0 2px}to{opacity:0;transform:scale(1);box-shadow:0 0 50px,inset 0 0 10px}}@keyframes applause-hover-ring{0%{opacity:.5;box-shadow:0 0 0 0 hsl(var(--primary) / .2);transform:scale(.72)}70%{opacity:0;box-shadow:0 0 0 12px hsl(var(--primary) / 0);transform:scale(1.35)}to{opacity:0;box-shadow:0 0 0 12px hsl(var(--primary) / 0);transform:scale(1.35)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes hideThenShow{0%{opacity:1;transform:translateY(0)}20%{opacity:0;transform:translateY(-10px)}50%{transform:translateY(10px)}80%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
