.favorite-button{transition:all .3s ease;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:8px}.favorite-button:hover{transform:scale(1.05)}.favorite-icon{transition:all .3s ease;font-size:16px}.favorite-icon--filled{color:#ff4d4f}.favorite-icon--outlined{color:#8c8c8c}.favorite-button:hover .favorite-icon--outlined{color:#ff4d4f}.favorite-button--animating{animation:favoriteHeartBeat .6s ease-in-out}.favorite-button--animating .favorite-icon{animation:favoriteIconPulse .6s ease-in-out}@keyframes favoriteHeartBeat{0%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1.1)}45%{transform:scale(1.25)}60%{transform:scale(1.1)}75%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes favoriteIconPulse{0%{transform:scale(1);color:#8c8c8c}25%{transform:scale(1.3);color:#ff7875}50%{transform:scale(1.1);color:#ff4d4f}75%{transform:scale(1.2);color:#ff4d4f}to{transform:scale(1);color:#ff4d4f}}.favorite-button--active{background-color:rgba(255,77,79,.1);border-color:#ff4d4f}.favorite-button--active:hover{background-color:rgba(255,77,79,.15);border-color:#ff4d4f}.favorite-button:not(.favorite-button--active):hover{background-color:rgba(255,77,79,.05);border-color:#ff7875}@media (max-width:768px){.favorite-button{width:40px;height:40px;min-width:40px}.favorite-icon{font-size:16px}}