Add Favorite

<button class="btn btn-favorite"

        x-data="{isFavorite: false, isActivated: false}"

        :class="{'is-favorite' : isFavorite}"

        @click="isFavorite = !isFavorite; isActivated = true"

>

    <span class="scall-100"

          :class="{

            'animate-favorite-remove': !isFavorite && isActivated

        }">

        <svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">

            <path d="M13.4911 24.3119L13.4896 24.3106C9.6067 20.8567 6.46584 18.0608 4.28366 15.4437C2.11233 12.8397 1 10.5387 1 8.09264C1 4.13112 4.16404 1 8.25 1C10.5643 1 12.7959 2.06165 14.2449 3.73076L15 4.60062L15.7551 3.73076C17.2041 2.06165 19.4357 1 21.75 1C25.836 1 29 4.13112 29 8.09264C29 10.5388 27.8877 12.8398 25.7161 15.4458C23.5345 18.0639 20.3951 20.8624 16.514 24.322L16.5118 24.3241L16.5096 24.326L15.0025 25.6616L13.4911 24.3119Z" fill="#DEE0E7" stroke="#FFFFFF" stroke-width="2"/>

        </svg>

    </span>

    <span class="absolute scale-0"

          :class="{

            'animate-favorite-add': isFavorite

          }"

    >

        <svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">

            <path d="M13.4911 24.3119L13.4896 24.3106C9.6067 20.8567 6.46584 18.0608 4.28366 15.4437C2.11233 12.8397 1 10.5387 1 8.09264C1 4.13112 4.16404 1 8.25 1C10.5643 1 12.7959 2.06165 14.2449 3.73076L15 4.60062L15.7551 3.73076C17.2041 2.06165 19.4357 1 21.75 1C25.836 1 29 4.13112 29 8.09264C29 10.5388 27.8877 12.8398 25.7161 15.4458C23.5345 18.0639 20.3951 20.8624 16.514 24.322L16.5118 24.3241L16.5096 24.326L15.0025 25.6616L13.4911 24.3119Z" fill="#FF6464" stroke="#FF6464" stroke-width="2"/>

        </svg>

    </span>

</button>