@import '../variables';
@import '../starability-base';
@import '../starability-result';

@keyframes heartbeat {

  0% {
    transform: translateY(0.5 * $star-size);
  }

  30% {
    transform: translateY(0);
    opacity: 1;
  }

  45% {
    transform: translateY(0);
    transform: scale(0.8, 0.8);
  }

  50% {
    transform: scale(0.7, 0.7);
  }

  75% {
    opacity: 0.9;
  }

  100% {
    transform: scale(1.25, 1.25);
    opacity: 0;
  }
}

.starability-heartbeat {
  @include starability-base;
  will-change: contents;

  > label::after {
    @include starability-animation-base($img-heart, $img-heart-2x);
    bottom: $star-size;
    left: 0;
    z-index: 2;
  }

  > input:checked + label::after {
    opacity: 1;
    animation-name: heartbeat;
    animation-timing-function: cubic-bezier(.19,1,.69,1.35);
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
}