.like-icon {
    transform-origin: center;
}

.like-icon .contour {
    transition: fill 0.1s linear;
}

.like-icon .core {
    fill: transparent;
    transition: fill 0.3s linear 0.03s;
}

.like-icon .main-body {
    fill: transparent;
    transition: fill 0.3s linear;
}

.like-icon .sparks {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.like-icon:hover .core,
.like-icon:hover .main-body {
    fill: var(--animation-hover-color);
}

.like-icon:active .core {
    fill: var(--animation-fill-color);
    transition: fill 0.3s linear;
}

.like-icon:active .main-body {
    fill: var(--animation-fill-color);
    transition: fill 0.3s linear 0.05s;
}

.like-icon.is-liked .core {
    transition: fill 0.3s linear;
}

.like-icon.is-liked .main-body {
    transition: fill 0.3s linear 0.05s;
}

.like-icon.is-liked .core,
.like-icon.is-liked .main-body {
    fill: var(--animation-fill-color);
}

.like-icon.is-liked .contour {
    fill: var(--animation-fill-color);
    transition: fill 0.3s linear 0.06s;
}

@keyframes heart-scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

.like-icon.is-liked {
    animation: heart-scale 0.3s ease-in 0.1s 1;
}

@keyframes sparks-flash {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.like-icon.is-liked .sparks {
    animation: sparks-flash 0.3s ease-in 0.3s 1;
}