.favorite {
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: inline-flex;

    img {
        filter: invert(100%) sepia(93%) saturate(1%) hue-rotate(250deg) brightness(107%) contrast(100%);
    }

    &.active {
        img {
            filter: invert(12%) sepia(90%) saturate(7021%) hue-rotate(359deg) brightness(115%) contrast(118%);
        }
    }
}

nav {
    .favorite {
        &.animate {
            img {
                animation: heartbeat 1s ease;
            }
        }
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.5);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}