// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

// animation mixin
@mixin animation($delay, $duration, $animation) {
  animation: $animation $duration $delay forwards cubic-bezier(.33, 1.02, .18, 1.4);
}

// TRANSITIONS

// adds transition
@mixin transitions {
  transition: all 0.2s ease-in-out;
}

// adds transition for opacity only
@mixin transition-opacity {
  transition: opacity 0.2s ease-in-out;
}

// mixin for animations
@mixin transition-color {
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

// ANIMATIONS

// animates to come down (page elements)
@include keyframes(moveDown) {
  0% {
    transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

// animates to fade up (results container)
@include keyframes(fadeUp) {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -10%);
    opacity: 0;
  }
}

// animates to come up (modal content)
@include keyframes(moveUp) {
  0% {
    transform: translate(0, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

// animates to move center-down (modal content)
@include keyframes(moveDownDown) {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 50%);
    opacity: 0;
  }
}

// animates to move to the right (submit button)
@include keyframes(moveRight) {
  0% {
    transform: translate(-30%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

// animates to move to the left (submit button)
@include keyframes(moveLeft) {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-30%, 0);
    opacity: 0;
  }
}

// fades out
@include keyframes(fadeOut) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// removing items moves them away
@include keyframes(remove) {
  0% {
    opacity: 0;
    width: 20%;
  }
  100% {
    opacity: 1;
    width: 3px;
  }
}

// adding items creates them
@include keyframes(add) {
  0% {
    opacity: 0;
    width: 3px;
  }
  100% {
    opacity: 1;
    width: 20%;
  }
}

// ELEMENTS THAT HAVE ANIMATIONS

// top container (info/results)
.container__top,
.result-container {
  @include animation(0s, 0.3s, moveDown);
}

// when hiding the top container
.container__top.hiding {
  @include animation(0s, 0.3s, fadeUp);
}

// TV show input container
.container__inputs {
  @include animation(0.15s, 0.3s, moveDown);
}

// list of movies
.container__list-of-movies {
  @include animation(0.4s, 0.3s, moveDown);
}

// moves up the content
.show.container__top__previous-show-time {
  @include animation(0s, 0.3s, moveDown);
}

// moves down down the content
.hiding.container__top__previous-show-time {
  @include animation(0s, 0.3s, fadeUp);
}

// shows submit button (because comes from display: none)
// but in order to animate need following properties
.showing.submit {
  display: inline-block;
  opacity: 0;
}

// hiding
.hiding.submit {
  display: none;
  @include animation(0s, 0.3s, moveLeft);
}

// shows submit button
.show.submit {
  display: inline-block;
  @include animation(0s, 0.3s, moveRight);
}

// shows submit button (because comes from display: none)
.showing.show-to-add {
  display: inline-block;
  width: 3px !important; // browser bug (0px shifts other TV shows)
  opacity: 0;
}

// shows submit button
.show.show-to-add {
  @include animation(0s, 0.3s, add);
}

// hidden by default
.about__content__inner {
  opacity: 0;
}

// moves up the content
.show .about__content__inner {
  @include animation(0s, 0.3s, moveUp);
}

// moves down down the content
.hiding .about__content__inner {
  @include animation(0s, 0.15s, moveDownDown);
}

// removes TV show from list
.remove-tv-show {
  opacity: 0;
  @include animation(0s, 0.5s, remove);
}

// mimic a button
.btn {
  @include transitions;
}

// on active mimic a button
.btn:active {
  transform: scale(.8);
}