/* Icon Bob */
@include keyframes(#{$nameSpace}-icon-bob) {
  0% {
    @include prefixed(transform, translateY(-6px));
  }
  50% {
    @include prefixed(transform, translateY(-2px));
  }
  100% {
    @include prefixed(transform, translateY(-6px));
  }
}

@include keyframes(#{$nameSpace}-icon-bob-float) {
  100% {
    @include prefixed(transform, translateY(-6px));
  }
}

@mixin icon-bob {
  @include hacks();
  @include prefixed(transition-duration, $mediumDuration);

  .animated-icon {
    @include prefixed(transform, translateZ(0));
  }

  &:hover,
  &:focus,
  &:active {
    .animated-icon {
      @include prefixed(
        animation-name,
        '#{$nameSpace}-icon-bob-float, #{$nameSpace}-icon-bob'
      );
      @include prefixed(animation-duration, '.3s, 1.5s');
      @include prefixed(animation-delay, '0s, .3s');
      @include prefixed(animation-timing-function, 'ease-out, ease-in-out');
      @include prefixed(animation-iteration-count, '1, infinite');
      @include prefixed(animation-fill-mode, 'forwards');
      @include prefixed(animation-direction, 'normal, alternate');
    }
  }
}