.heart-container{--heart-color:#ff5b89;width:28px;height:28px;transition:all .3s;position:relative}.heart-container .checkbox{opacity:0;z-index:20;cursor:pointer;width:100%;height:100%;position:absolute}.heart-container .svg-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.heart-container .svg-outline,.heart-container .svg-filled{fill:var(--heart-color);position:absolute}.heart-container .svg-filled{animation:1s keyframes-svg-filled;display:none}.heart-container .svg-celebrate{stroke:var(--heart-color);fill:var(--heart-color);stroke-width:2px;animation:.5s forwards keyframes-svg-celebrate;display:none;position:absolute}.heart-container .checkbox:checked~.svg-container .svg-filled,.heart-container .checkbox:checked~.svg-container .svg-celebrate{display:block}@keyframes keyframes-svg-filled{0%{transform:scale(0)}25%{transform:scale(1.2)}50%{filter:brightness(1.5);transform:scale(1)}}@keyframes keyframes-svg-celebrate{0%{transform:scale(0)}50%{opacity:1;filter:brightness(1.5)}to{opacity:0;display:none;transform:scale(1.4)}}