/* *****************************************************************************
*
*  Global animation setup
*
* ***************************************************************************** */
@keyframes slide-from-bottom  {
  from {transform: translate(0,100%);}
}

@keyframes fade-in {
  from {opacity: 0;}
}

@keyframes fade-slide-in {
  from {transform: translateY(5px); opacity: 0}
}
@keyframes fade-slide-in--down {
  from {transform: translateY(-5px); opacity: 0}
}

@keyframes bounce-infinite {
  from {transform: scale(0.97)}
}
@keyframes scroll-down-arrow {
  0% {transform: translateY(-0.1rem); opacity: 0}
  50% { opacity: 1}
  100% { transform: translateY(1rem); opacity: 0}
}

/* ***************************************************************************** */

.vui-anim {
  &--hide {
    display: none;
  }

  &--show {
    display: block;
  }

  &--fade-in {
    @extend .vui-anim--show;
    @include transitions(opacity);
    animation: fade-in $transition-time-base linear;
  }

  &--slide-from-bottom {
    will-change: transform, opacity;

    &.fixed-bottom {
      animation: slide-from-bottom $transition-default;
    }
  }

  &--fade-slide-in {
    @include transitions(transform, opacity);
    animation: fade-slide-in $transition-time-base linear;
  }

  &--fade-slide-in-down {
    @include transitions(transform, opacity);
    animation: fade-slide-in--down $transition-time-base linear;
  }

  &--scroll-down-arrow {
    @include transitions(transform, opacity);
    animation: scroll-down-arrow 1.7s ease-in-out infinite;
  }
  &--bounce-infinite {
    @include transitions(opacity);
    animation: bounce-infinite 1.3s linear infinite alternate;
  }
}