// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

// slide in and show ==================================
.pf-animation-slide-in {
  -moz-animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-name: pfSlideIn;
  -webkit-animation-name: pfSlideIn;
  position:relative;
}

@include keyframes(pfSlideIn){
  from {
    opacity: 0;
    top: -20px;
  }

  to {
    opacity: 1;
    top:0px;
  }
};

// pulse-out ==========================================

.pf-animation-pulse-success{
  @include animation( pulseBackgroundSuccess 1.5s 1 );
  @include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );

  .sorting_1{
    @include animation( pulseBackgroundSuccessActive 1.5s 1 );
    @include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );
  }
}

.pf-animation-pulse-warning{
  @include animation( pulseBackgroundWarning 1.5s 1 );
  @include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );

  .sorting_1{
    @include animation( pulseBackgroundWarningActive 1.5s 1 );
    @include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );
  }
}

@include keyframes(pulseBackgroundSuccess){
  0%   {}
  5%  {
    background-color: $green-dark;
    color: $gray-dark;
  }
  100% {}
};
@include keyframes(pulseBackgroundSuccessActive){
  0%   {}
  5%  {
    background-color: darken($green-dark, 5%);
    color: $gray-dark;
  }
  100% {}
};

@include keyframes(pulseBackgroundWarning){
  0%   {}
  5%  {
    background-color: $orange;
    color: $gray-darker;
  }
  100% {}
};
@include keyframes(pulseBackgroundWarningActive){
  0%   {}
  5%  {
    background-color: darken($orange, 5%);
    color: $gray-darker;
  }
  100% {}
};

// rotate =============================================
.pf-animate-rotate{
  @include transition( all 0.08s linear );
}

.pf-animate-rotate.right{
  @include rotate( 90deg );
}