//animations

.icon-property {
  @include transition($slow-transition-time, $transition-bezier);
  position: relative;
  display: inline-block;
}

#animated-buttons {
  .btn {
    i {
      position: relative;
      top: 3px;
      margin-top: -3px;
    }
  }
}

.btn-rotate {
  i {
    @extend .icon-property;
  }

  &:hover,
  &:focus {
    i {
      @include rotate-53();
    }
  }
}

.btn-magnify {
  i {
    @extend .icon-property;
  }

  &:hover,
  &:focus {
    i {
      @include transform-scale(1.22);
    }
  }
}

.btn-move-left {
  i {
    @extend .icon-property;
    margin-right: 0;
  }

  &:hover,
  &:focus {
    i {
      @include transform-translate-x(-5px);
    }
  }
}

.btn-move-right {
  i {
    @extend .icon-property;
    margin-right: 0;
  }

  &:hover,
  &:focus {
    i {
      @include transform-translate-x(5px);
    }
  }
}