/* Heart colors stay independent of the selected palette. */
.heart-icon > path {
  fill: #e52d48;
  stroke: none;
}

.heart-icon > .heart-highlight {
  fill: #ff707d;
}

[data-favorite][aria-pressed="false"] svg.heart-icon {
  opacity: .82;
}

@media (prefers-reduced-motion: no-preference) {
  .heart-icon:not(.heart-icon--static) {
    transform-origin: center;
    animation: heart-beat 2s ease-in-out infinite;
  }
}

@keyframes heart-beat {
  0%, 24%, 52%, 100% { transform: scale(1); }
  12% { transform: scale(1.14); }
  37% { transform: scale(1.09); }
}