/**
* Global Animations
*/

@include keyframes(progress-bar-stripes) {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@include keyframes(backgroundFadeIn) {
  from {
    background: rgba($backgroundDarkenerColor, 0);
  }
  to {
    background: rgba($backgroundDarkenerColor, $backgroundDarkenerFadeOpacity);
  }
}

@include keyframes(fadeOut) {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/**
* Creates a small bounce effect
*/
@include keyframes(bounceIn) {

  0%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.9, .9, .9);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/**
* FadeIn Effect
*/
@include keyframes(fadeIn) {
  0%, 100% {
    animation-timing-function: ease;
  }
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes(darkenerFadeIn) {
  0%, 100% {
    animation-timing-function: ease;
  }
  0% {
    opacity: 0;
  }
  100% {
    opacity: $darkenerFadeOpacity;
  }
}

@include keyframes(darkenerFadeOut) {
  0%, 100% {
    animation-timing-function: ease;
  }
  0% {
    opacity: $darkenerFadeOpacity;
  }
  100% {
    opacity: 0;
  }
}

/**
* Endless spinner, used for loaders
*/
@include keyframes(spin) {
  100% {
    transform: rotate(360deg);
  }
}

/**
* used by alert modals
*/
@include keyframes(fromBottom) {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@include keyframes(tabWobbleLine) {
  0% {
    opacity: 0;
    left: calc(50% - (#{$overallPadding}));
    width: 0%;

  }

  100% {
    opacity: 1;
    left: 0;
    width: calc(100% - (#{$overallPadding*2}));
  }
}

@include keyframes(tabWobbleLineSmall) {
  0% {
    opacity: 0;
    left: calc(50% - (#{$overallPadding}));
    width: 0%;
  }

  100% {
    opacity: 1;
    left: 0;
    width: calc(100% - (#{$tabsSmallPadding*2}));
  }
}

.animate-bounceIn {
  @include animate(bounceIn);
}

.animate-fadeIn {
  @include animate(fadeIn);
}