@import 'mixins';

@mixin fade-slide-in {
  $name: fade-slide-in-anim;
  $duration: 200ms;
  $offset: 40px;

  @include prefixed(animation, $name $duration ease-out);

  @include keyframes($name) {
    0% {
      @include prefixed(transform, translateX($offset));
      opacity: 0;
    }

    100% {
      @include prefixed(transform, translateX(0));
      opacity: 1;
    }
  }
}

.fade-slide-in {
  @include fade-slide-in;
}

@mixin pulse($name, $c1, $c2, $duration: 1000ms) {
  @include prefixed(animation, $name $duration cubic-bezier(0.4, 0, 0.2, 1) infinite);
  @include keyframes($name) {
    0% {
      color: $c1;
    }
    50% {
      color: $c2;
    }
    100% {
      color: $c1;
    }
  }
}

@keyframes buzz {
	50% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	100% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}
}

@mixin buzz {
  @include prefixed(animation-name, buzz);
  @include prefixed(animation-duration, .15s);
  @include prefixed(animation-timing-function, linear);
  @include prefixed(animation-iteration-count, infinite);
}
