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

@keyframes checkmark {

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

  60% {
    opacity: 1;
  }

  70% {
    transform: none;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.starability-checkmark {
  @include starability-base();

  > label {
    z-index: 2;
  }

  > label::after {
    @include starability-animation-base($img-checkmark, $img-checkmark-2x);
    background-image: $img-checkmark;
  }

  $star-count-checkmark: $star-count;

  @while $star-count-checkmark > 0 {
    $star-number: $star-count-checkmark;
    $distance: ($star-count + 1) - $star-count-checkmark;

    > label:nth-of-type(#{$star-number})::after {
      right: -($distance * $star-size) - 0.5 * $star-size;
    }

    $star-count-checkmark: $star-count-checkmark - 1;
  }

  > input:checked + label::after {
    display: inline-block;
    animation-name: checkmark;
    animation-duration: .7s;
    animation-fill-mode: forwards;
  }
}