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

/* сердцевина */
.like-icon .core {
    transition: fill 0.3s linear 0.03s;
}

/* основное тело */
.like-icon .main-body {
    transition: fill 0.3s linear 0s;
}

.like-icon .sparks {
    opacity: 0;
}

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

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


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

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

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

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

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


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

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

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

@keyframes heart-sparks {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

.button {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.button:focus {
    outline: none;
}

.button:focus-visible {
    outline: none;
    box-shadow: 2px 2px 0 0 var(--color-border);
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;

    background-color: var(--button-overlay-color);

    transform-origin: left;
    transform: scaleX(0);

    transition: transform 0.5s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.button:hover::before {
    transform: scaleX(1);
}

.button__text,
.button__icon {
    position: relative;
    z-index: 1;
    mix-blend-mode: difference;
}

.card__icon-button {
    transition: border-color 0.3s ease;
}

.card__icon-button:focus {
    outline: none;
}

.card__icon-button:focus-visible {
    border-color: var(--color-border);
}