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