@import './variables/index.scss';

.animated {
  animation-duration: $slow-transition-time;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  @extend .animated;
  animation-name: fadeIn;
}

.slow-fade-in {
  @extend .fade-in;
  animation-duration: $super-slow-time;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fade-in-right {
  @extend .animated;
  animation-name: fadeInRight;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.fade-out-right {
  @extend .animated;
  animation-name: fadeOutRight;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spin {
    animation: spinner $super-slow-time linear infinite;
}

// Pulse animation
@mixin pulse-template($name, $attribute, $color) {
  @keyframes #{$name} {
    @content
    0%, 100% {
      #{$attribute}: inherit;
    }
    50% {
      #{$attribute}: #{$color};
    }
  }
}

@include pulse-template(pulse-red, color, $red)
@include pulse-template(pulse-green, color, $green)
@include pulse-template(pulse-blue, color, $blue)
@include pulse-template(pulse-yellow, color, $yellow)

@include pulse-template(pulse-red-bg, background-color, $red) {
  50% {
    color: $white;
  }
}

@include pulse-template(pulse-yellow-bg, background-color, $yellow) {
  50% {
    color: $white;
  }
}

// Ripple animation
@keyframes ripple {
  0% {
    color: $yellow;
  }
  50% {
    color: radial-gradient(circle closest-side, $yellow, $yellow);
  }
  75% {
    color: radial-gradient(circle closest-side, $yellow, $yellow);
  }
  100% {
    color: inherit;
  }
}

.device-search-animation {
  color: inherit;
  -webkit-animation: ripple 3s infinite;
  animation: ripple 3s infinite;
  z-index: 3;
}

.recording-animation {
  animation: pulse-red 2s infinite;
}

.stream-has-error {
  animation: pulse-red-bg 2s infinite;
}

.stream-has-warning {
  animation: pulse-yellow-bg 2s infinite;
}


