// studio animations & keyframes
// ====================

// rotate clockwise
@mixin rotateClockwise {
  0% {
    @include transform(rotate(0deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}

// ====================

// notifications slide up
@mixin notificationsSlideUp {
  0% {
    @include transform(translateY(0));
  }

  90% {
    @include transform(translateY(-($notification-height)));
  }

  100% {
    @include transform(translateY(-($notification-height*0.99)));
  }
}

@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@keyframes notificationsSlideUp { @include notificationsSlideUp();}

// ====================

// notifications slide down
@mixin notificationsSlideDown {
  0% {
    @include transform(translateY(-($notification-height*0.99)));
  }

  10% {
    @include transform(translateY(-($notification-height)));
  }

  100% {
    @include transform(translateY(0));
  }
}

@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@keyframes notificationsSlideDown { @include notificationsSlideDown();}

// ====================

// notifications slide up then down
@mixin notificationsSlideUpDown {
  0%, 100% { 
    @include transform(translateY(0));
  }

  15%, 85% {
    @include transform(translateY(-($notification-height)));
  }

  20%, 80% {
    @include transform(translateY(-($notification-height*0.99)));
  }
}

@-moz-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@-webkit-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}

// ====================

// bounce in
@mixin bounce-in {
  0% {
    opacity: 0;
    @include transform(scale(.3));
  }

  50% {
    opacity: 1;
    @include transform(scale(1.05));
  }

  100% {
    @include transform(scale(1));
  }
}

@-moz-keyframes bounce-in { @include bounce-in(); }
@-webkit-keyframes bounce-in { @include bounce-in(); }
@-o-keyframes bounce-in { @include bounce-in(); }
@keyframes bounce-in { @include bounce-in();}

@mixin bounce-in-animation($duration, $timing: ease-in-out) {
  @include animation-name(bounce-in);
  @include animation-duration($duration);
  @include animation-timing-function($timing);
  @include animation-fill-mode(both);
}