.heart{fill:gray;pointer-events:none;transition:fill .5s,transform .5s}.heart-btn{background:transparent;position:relative}.heart-btn.liked .heart{fill:var(--primary-lighter-clr)}.heart-btn.liked .heart-icon{transform:scale(1.2)}.heart-btn.liked .heart-pop{animation-direction:normal}.heart-btn:active{box-shadow:0 0 4px #00000040}.heart-pop{animation:popHeart 1s ease reverse forwards;left:0;opacity:0;position:absolute;width:30%}.heart-pop.one{animation-delay:.45;left:1%;transform:rotate(-10deg)}.heart-pop.two{animation-delay:.25s;left:15%;transform:rotate(8deg)}.heart-pop.three{animation-delay:0;left:30%;transform:rotate(-5deg)}.heart-pop.four{animation-delay:.3s;left:50%;transform:rotate(-8deg)}.heart-pop.five{animation-delay:.9s;left:60%;transform:rotate(-10deg)}.heart-pop.six{animation-delay:.2;left:70%;transform:rotate(-8deg)}.heart-pop.seven{animation-delay:.35s;left:85%;transform:rotate(6deg)}.heart-pop.eight{animation-delay:.5s;left:90%;transform:rotate(-4deg)}.heart-pop.nine{animation-delay:.2s;left:95%;transform:rotate(8deg)}@keyframes popHeart{0%{left:calc(50% - 7px);top:10px}20%{opacity:1}80%{top:-20px}to{opacity:0}}