:root {
    --like-button-gray: #c7c7c7;
    --like-button-pink: #fe4f70;
    --like-button-bezier: cubic-bezier(.175, .885, .32, 1.275);
}

.like-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-flow: row wrap;
}

.like-button,
.favorite-button {
    border: 2px solid var(--like-button-gray);
    border-radius: 40px;
    padding: .3rem .65rem;
    color: #8a8a8a;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all .25s var(--like-button-bezier);
    filter: grayscale(100%);
    user-select: none;
    background: transparent;
    cursor: pointer;
}

.like-button.liked,
.favorite-button.saved {
    color: var(--like-button-pink);
    border-color: currentColor;
    filter: grayscale(0);
}

.like-button:hover,
.favorite-button:hover {
    border-color: currentColor;
}

.like-icon {
    width: 18px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 1px;
    font-size: 1.5rem;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') no-repeat center;
    background-size: 100%;
    animation: heartUnlike .25s var(--like-button-bezier) both;
}

.favorite-icon {
    width: 18px;
    height: 16px;
    display: inline-block;
    position: relative;
    bottom: 1px;
    font-size: 1.5rem;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDI1NSwgMTEwLCAxMTEpIiBkPSJNMjU2IDM4LjAxM2MtMjIuNDU4IDAtNjYuNDcyIDExMC4zLTg0LjY0IDEyMy41MDItMTguMTcgMTMuMi0xMzYuNjc0IDIwLjk3NS0xNDMuNjE0IDQyLjMzNC02Ljk0IDIxLjM1OCA4NC4zNjIgOTcuMzAzIDkxLjMwMiAxMTguNjYyIDYuOTQgMjEuMzYtMjIuMjg2IDEzNi40NjUtNC4xMTYgMTQ5LjY2NSAxOC4xNyAxMy4yIDExOC42MS01MC4xNjQgMTQxLjA2OC01MC4xNjQgMjIuNDU4IDAgMTIyLjkgNjMuMzY1IDE0MS4wNjggNTAuMTY0IDE4LjE3LTEzLjItMTEuMDU2LTEyOC4zMDYtNC4xMTYtMTQ5LjY2NSA2Ljk0LTIxLjM2IDk4LjI0Mi05Ny4zMDQgOTEuMzAyLTExOC42NjMtNi45NC0yMS4zNi0xMjUuNDQ0LTI5LjEzNC0xNDMuNjEzLTQyLjMzNS0xOC4xNjgtMTMuMi02Mi4xODItMTIzLjUwMi04NC42NC0xMjMuNTAyeiIvPjwvc3ZnPgo=') no-repeat center;
    background-size: 100%;
    animation: heartUnlike .25s var(--like-button-bezier) both;
}

.like-button.liked .like-icon,
.favorite-button.saved .favorite-icon {
    animation: heartPulse .25s var(--like-button-bezier) both;
}

.like-button:not(.liked):active .like-icon,
.favorite-button:not(.saved):active .favorite-icon {
    animation: heartPulse .25s var(--like-button-bezier) both;
}

.like-button.liked .like-icon [class^="heart-animation-"] {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') no-repeat center;
    background-size: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 14px;
    opacity: 0;
}

.favorite-button.saved .favorite-icon [class^="heart-animation-"] {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDI1NSwgMTEwLCAxMTEpIiBkPSJNMjU2IDM4LjAxM2MtMjIuNDU4IDAtNjYuNDcyIDExMC4zLTg0LjY0IDEyMy41MDItMTguMTcgMTMuMi0xMzYuNjc0IDIwLjk3NS0xNDMuNjE0IDQyLjMzNC02Ljk0IDIxLjM1OCA4NC4zNjIgOTcuMzAzIDkxLjMwMiAxMTguNjYyIDYuOTQgMjEuMzYtMjIuMjg2IDEzNi40NjUtNC4xMTYgMTQ5LjY2NSAxOC4xNyAxMy4yIDExOC42MS01MC4xNjQgMTQxLjA2OC01MC4xNjQgMjIuNDU4IDAgMTIyLjkgNjMuMzY1IDE0MS4wNjggNTAuMTY0IDE4LjE3LTEzLjItMTEuMDU2LTEyOC4zMDYtNC4xMTYtMTQ5LjY2NSA2Ljk0LTIxLjM2IDk4LjI0Mi05Ny4zMDQgOTEuMzAyLTExOC42NjMtNi45NC0yMS4zNi0xMjUuNDQ0LTI5LjEzNC0xNDMuNjEzLTQyLjMzNS0xOC4xNjgtMTMuMi02Mi4xODItMTIzLjUwMi04NC42NC0xMjMuNTAyeiIvPjwvc3ZnPgo=') no-repeat center;
    background-size: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 14px;
    opacity: 0;
}

.like-button.liked .like-icon .heart-animation-1,
.favorite-button.saved .favorite-icon .heart-animation-1 {
    animation: heartFloatMain-1 1s var(--like-button-bezier) both;
}

.like-button.liked .like-icon .heart-animation-1::before,
.like-button.liked .like-icon .heart-animation-1::after,
.favorite-button.saved .favorite-icon .heart-animation-1::before,
.favorite-button.saved .favorite-icon .heart-animation-1::after {
    content: '';
    background: inherit;
    background-size: 100%;
    width: inherit;
    height: inherit;
    display: inherit;
    position: relative;
    top: inherit;
    left: inherit;
    opacity: 0;
}

.like-button.liked .like-icon .heart-animation-1::before,
.favorite-button.saved .favorite-icon .heart-animation-1::before {
    width: 12px;
    height: 10px;
    visibility: hidden;
    opacity: .6;
    animation: heartFloatSub-1 1s .25s var(--like-button-bezier) both;
}

.like-button.liked .like-icon .heart-animation-1::after,
.favorite-button.saved .favorite-icon .heart-animation-1::after {
    width: 12px;
    height: 10px;
    visibility: hidden;
    animation: heartFloatSub-2 1s .15s var(--like-button-bezier) both;
    opacity: .75;
}

.like-button.liked .like-icon .heart-animation-2,
.favorite-button.saved .favorite-icon .heart-animation-2 {
    animation: heartFloatMain-2 1s .1s var(--like-button-bezier) both;
}

.like-button.liked .like-icon .heart-animation-2::before,
.like-button.liked .like-icon .heart-animation-2::after,
.favorite-button.saved .favorite-icon .heart-animation-2::before,
.favorite-button.saved .favorite-icon .heart-animation-2::after {
    content: '';
    background: inherit;
    background-size: 100%;
    width: inherit;
    height: inherit;
    display: inherit;
    position: relative;
    top: inherit;
    left: inherit;
    opacity: 0;
}

.like-button.liked .like-icon .heart-animation-2::before,
.favorite-button.saved .favorite-icon .heart-animation-2::before {
    width: 10px;
    height: 8px;
    visibility: hidden;
    animation: heartFloatSub-3 1s .25s var(--like-button-bezier) both;
    opacity: .25;
}

.like-button.liked .like-icon .heart-animation-2::after,
.favorite-button.saved .favorite-icon .heart-animation-2::after {
    width: 10px;
    height: 8px;
    visibility: hidden;
    animation: heartFloatSub-4 1s .15s var(--like-button-bezier) both;
    opacity: .4;
}

/* Animations */
@keyframes heartPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

@keyframes heartUnlike {
    50% {
        transform: scale(.75);
    }
}

@keyframes heartFloatMain-1 {
    0% {
        opacity: 0;
        transform: translate(0) rotate(0);
    }
    50% {
        opacity: 1;
        transform: translate(0, -25px) rotate(-20deg);
    }
}

@keyframes heartFloatMain-2 {
    0% {
        opacity: 0;
        transform: translate(0) rotate(0) scale(0);
    }
    50% {
        opacity: .9;
        transform: translate(-10px, -38px) rotate(25deg) scale(1);
    }
}

@keyframes heartFloatSub-1 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(13px, -13px) rotate(30deg);
    }
}

@keyframes heartFloatSub-2 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(18px, -10px) rotate(55deg);
    }
}

@keyframes heartFloatSub-3 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(-10px, -10px) rotate(-40deg);
    }
    100% {
        transform: translate(-50px, 0);
    }
}

@keyframes heartFloatSub-4 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(2px, -18px) rotate(-25deg);
    }
}

.like-count,
.favorite-count {
    margin-left: 5px;
    font-size: 0.9rem;
}