/* The heart next to a news article's comment count (Templates/DateAndComments.cshtml, js/website/news/NewsLikes.js).
   A like turns it red at once, whatever the club's colour, and makes it fly up and land. */
.news-like {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.news-like[disabled] {
    cursor: default;
}

.news-like .fa {
    display: inline-block;
    transition: color .15s;
}

.news-like:not([disabled]):hover .fa,
.news-like.liked .fa {
    color: #f52d5f;
}

.news-like.news-like-fly .fa {
    animation: news-like-fly .3s;
}

@keyframes news-like-fly {
    0% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
    30% { transform: translateY(-30px) scale(1.6); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
    /* The last 15 % of the way down is taken slowly: the heart brakes before it lands */
    65% { transform: translateY(-4.5px) scale(1.09); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .news-like.news-like-fly .fa {
        animation: none;
    }
}