// ---------------------------------------------------------------------------
// imports

@import "compass/css3/animation";
@import "compass/css3/transform";
@import "compass/css3/opacity";

// ---------------------------------------------------------------------------
// fadeIn

@mixin animate-fadeIn(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeIn;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInUp

@mixin animate-fadeInUp(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInUp;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        @include translateY(20px);
        opacity: 0;
      }
      100% {
        @include translateY(0);
        opacity: 1;
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInDown

@mixin animate-fadeInDown(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInDown;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        @include translateY(-20px);
        opacity: 0;
      }
      100% {
        @include translateY(0);
        opacity: 1;
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInRight

@mixin animate-fadeInRight(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInRight;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        @include translateX(20px);
        opacity: 0;
      }
      100% {
        @include translateX(0);
        opacity: 1;
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInLeft

@mixin animate-fadeInLeft(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInLeft;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        @include translateX(-20px);
        opacity: 0;
      }
      100% {
        @include translateX(0);
        opacity: 1;
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInUpBig

@mixin animate-fadeInUpBig(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInUpBig;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        @include translateY(2000px);
        opacity: 0;
      }
      100% {
        @include translateY(0);
        opacity: 1;
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInDownBig

@mixin animate-fadeInDownBig(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInDownBig;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        opacity: 0;
        @include translateY(-2000px);
      }
      100% {
        opacity: 1;
        @include translateY(0);
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInRightBig

@mixin animate-fadeInRightBig(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInRightBig;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        opacity: 0;
        @include translateX(2000px);
      }
      100% {
        opacity: 1;
        @include translateX(0);
      }
    }
  }
  @include animation-class($name, $class) {}
}

// ---------------------------------------------------------------------------
// fadeInLeftBig

@mixin animate-fadeInLeftBig(
  $class      : $default-animation-class-mode,
  $keyframes  : $default-keyframes-output
) {
  $name: fadeInLeftBig;
  @if $keyframes {
    @include keyframes($name) {
      0% {
        opacity: 0;
        @include translateX(-2000px);
      }
      100% {
        opacity: 1;
        @include translateX(0);
      }
    }
  }
  @include animation-class($name, $class) {}
}