.favorite-button {
    height: 48px;
    width: 48px;
    border-radius: 8px;
    border: none;
    background: var(--white--white100, #FFFFFF);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.favorite-button:hover {
    background: var(--grey--grey80, #D7D7D7);
}
.favorite-button__icon {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.favorite-heart {
    display: inline-flex;
}
.favorite-heart svg {
    width: 100%;
    height: auto;
}
.favorite-heart-main {
    width: 22px;
    height: 18px;
    transform-origin: center;
}
.favorite-heart-main--outline {
    position: relative;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.favorite-heart-main--filled {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.js-toggle-favorite.is-active .favorite-heart-main--outline {
    opacity: 0;
}
.js-toggle-favorite.is-active .favorite-heart-main--filled {
    opacity: 1;
}
.js-toggle-favorite.is-animating .favorite-heart-main--filled {
    animation: favorite-main-pop 400ms ease-out forwards;
}

@keyframes favorite-main-pop {
    0%   { transform: scale(0.8); }
    40%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.favorite-heart-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 10px;
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    pointer-events: none;
}
/* запускаем вылет только во время анимации */
.js-toggle-favorite.is-animating .heart-burst-1 {
    animation: heart-burst-1 1s ease-out forwards;
    animation-delay: .2s;
}
.js-toggle-favorite.is-animating .heart-burst-2 {
    animation: heart-burst-2 1s ease-out forwards;
    animation-delay: .2s;
}
.js-toggle-favorite.is-animating .heart-burst-3 {
    animation: heart-burst-3 1s ease-out forwards;
    animation-delay: .2s;
}
/* три направления вылета */
@keyframes heart-burst-1 {
    0%   { transform: translate(-50%, -50%) scale(0.6) rotate(-30deg); opacity: 0; }
    40% { transform: translate(-150%, -220%) scale(0.6) rotate(-30deg); opacity: 1; }
    100% { transform: translate(-150%, -220%) scale(0.6) rotate(-30deg); opacity: 0; }
}
@keyframes heart-burst-2 {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    40% { transform: translate(-50%, -200%) scale(0.4); opacity: 1; }
    100% { transform: translate(-50%, -200%) scale(0.4); opacity: 0; }
}
@keyframes heart-burst-3 {
    0%   { transform: translate(-50%, -50%) scale(0.6) rotate(30deg); opacity: 0; }
    40% { transform: translate(50%, -220%) scale(0.6) rotate(30deg); opacity: 1; }
    100% { transform: translate(50%, -220%) scale(0.6) rotate(30deg); opacity: 0; }
}