/**
 * @file
 * "Like" button micro-animation.
 *
 * Adds a pop/scale bounce when a Like link is clicked and renders the liked
 * state as a filled thumbs-up. Applies to every Like action link (identified
 * by the data-like-entity-id attribute) across the statistics tools, the
 * entity-data  counts row and the micro community tools templates.
 *
 * @see js/skipta-statistics-like-animation.js
 */

@keyframes skipta-like-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

[data-like-entity-id] svg {
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* Pop bounce on click; the `clicked` class is toggled by the behavior. */
[data-like-entity-id].clicked svg {
  animation: skipta-like-pop 0.3s ease;
}

/* Liked state: filled thumbs-up. */
[data-like-entity-id].active svg path {
  fill: #CB0000;
  stroke: #CB0000;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  [data-like-entity-id].clicked svg {
    animation: none;
  }
}