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

@keyframes coinFlip {

  0% {
    transform: translateY(0);
    opacity: 0;
  }
  
  25% {
    transform: translateY(-34px);
    opacity: 1;
  }

  30% {
    transform: translateY(-30px);
  }

  35% {
    transform: translateY(-30px) rotateY(0deg);
  }

  50% {
    transform: translateY(-30px) rotateY(180deg);
  }

  65% {
    transform: translateY(-30px) rotateY(0deg);
  }

  85% {
    transform: translateY(-34px);
    opacity: 1;
  }  

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

.starability-coinFlip {
  @include starability-base;
  will-change: contents;
  
  > label::after {
    @include starability-animation-base;
    bottom: 0;
    left: 0;
    z-index: 2;
  }

  > input:checked + label::after {
    background-position: 0 (-$star-size);
    opacity: 1;
    animation-name: coinFlip;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }
}