@import 'variables';

// Mixins
// -------
.subtle-contextual-motion(@tone, @name) {
  @initialTransform: "animation-@{tone}-initial-transform";
  @bounceTransform: "animation-@{tone}-bounce-transform";
  @settleTransform: "animation-@{tone}-settle-transform";

  @-webkit-keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    30% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-subtle-settle-time-func;
    }

    60%, 100% {
      transform: @@settleTransform;
    }
  }

  @-moz-keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    30% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-subtle-settle-time-func;
    }

    60%, 100% {
      transform: @@settleTransform;
    }
  }

  @-o-keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    30% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-subtle-settle-time-func;
    }

    60%, 100% {
      transform: @@settleTransform;
    }
  }

  @keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    30% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-subtle-settle-time-func;
    }

    60%, 100% {
      transform: @@settleTransform;
    }
  }
}

.subtle-contextual-motion(positive, infoAnimated_motion);
.subtle-contextual-motion(negative, warningAnimated_motion);

.emphasised-contextual-motion(@tone, @name, @bounce1, @bounce2) {
  @initialTransform: "animation-@{tone}-initial-transform";
  @bounceTransform: "animation-@{tone}-bounce-transform";
  @settleTransform: "animation-@{tone}-settle-transform";

  @-webkit-keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    20% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-time-func;
    }

    30% {
      transform: @bounce1;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-back-time-func;
    }

    40% {
      transform: @bounce2;
      animation-timing-function: @animation-contextual-motion-emphasised-settle-time-func;
    }

    60%,100% {
      transform: @animation-positive-settle-transform;
    }
  }

  @-moz-keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    20% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-time-func;
    }

    30% {
      transform: @bounce1;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-back-time-func;
    }

    40% {
      transform: @bounce2;
      animation-timing-function: @animation-contextual-motion-emphasised-settle-time-func;
    }

    60%,100% {
      transform: @animation-positive-settle-transform;
    }
  }

  @-o-keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    20% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-time-func;
    }

    30% {
      transform: @bounce1;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-back-time-func;
    }

    40% {
      transform: @bounce2;
      animation-timing-function: @animation-contextual-motion-emphasised-settle-time-func;
    }

    60%,100% {
      transform: @animation-positive-settle-transform;
    }
  }

  @keyframes @name {
    0% {
      transform: @@initialTransform;
      animation-timing-function: @animation-contextual-motion-in-time-func;
    }

    20% {
      transform: @@bounceTransform;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-time-func;
    }

    30% {
      transform: @bounce1;
      animation-timing-function: @animation-contextual-motion-emphasised-bounce-back-time-func;
    }

    40% {
      transform: @bounce2;
      animation-timing-function: @animation-contextual-motion-emphasised-settle-time-func;
    }

    60%,100% {
      transform: @animation-positive-settle-transform;
    }
  }
}

.emphasised-contextual-motion(positive, successAnimated_motion, translateY(10px), translateY(-6px));
.emphasised-contextual-motion(negative, dangerAnimated_motion, translateX(20px), translateX(-14px));

.contextual-fade(@step, @name) {
  @-webkit-keyframes @name {
    0% {
      opacity: 0;
      animation-timing-function: @animation-fade-in-time-func;
    }

    @{step},
    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes @name {
    0% {
      opacity: 0;
      animation-timing-function: @animation-fade-in-time-func;
    }

    @{step},
    100% {
      opacity: 1;
    }
  }

  @-o-keyframes @name {
    0% {
      opacity: 0;
      animation-timing-function: @animation-fade-in-time-func;
    }

    @{step},
    100% {
      opacity: 1;
    }
  }

  @keyframes @name {
    0% {
      opacity: 0;
      animation-timing-function: @animation-fade-in-time-func;
    }

    @{step},
    100% {
      opacity: 1;
    }
  }
}

.contextual-fade(30%, contextual_subtle_fade);
.contextual-fade(20%, contextual_emphasised_fade);

.animate-info {
  -webkit-animation: infoAnimated_motion 1s, contextual_subtle_fade 1s;
  -moz-animation:    infoAnimated_motion 1s, contextual_subtle_fade 1s;
  -o-animation:      infoAnimated_motion 1s, contextual_subtle_fade 1s;
  animation:         infoAnimated_motion 1s, contextual_subtle_fade 1s;
}

.animate-success {
  -webkit-animation: successAnimated_motion 1s, contextual_emphasised_fade 1s;
  -moz-animation:    successAnimated_motion 1s, contextual_emphasised_fade 1s;
  -o-animation:      successAnimated_motion 1s, contextual_emphasised_fade 1s;
  animation:         successAnimated_motion 1s, contextual_emphasised_fade 1s;
}

.animate-info-emphasised,
.animate-success-emphasised {
  -webkit-animation: successAnimated_motion 1s;
  -moz-animation:    successAnimated_motion 1s;
  -o-animation:      successAnimated_motion 1s;
  animation:         successAnimated_motion 1s;
}

.animate-warning {
  -webkit-animation: warningAnimated_motion 1s, contextual_subtle_fade 1s;
  -moz-animation:    warningAnimated_motion 1s, contextual_subtle_fade 1s;
  -o-animation:      warningAnimated_motion 1s, contextual_subtle_fade 1s;
  animation:         warningAnimated_motion 1s, contextual_subtle_fade 1s;
}

.animate-danger {
  -webkit-animation: dangerAnimated_motion 1s, contextual_emphasised_fade 1s;
  -moz-animation:    dangerAnimated_motion 1s, contextual_emphasised_fade 1s;
  -o-animation:      dangerAnimated_motion 1s, contextual_emphasised_fade 1s;
  animation:         dangerAnimated_motion 1s, contextual_emphasised_fade 1s;
}

.animate-warning-emphasised,
.animate-danger-emphasised {
  -webkit-animation: dangerAnimated_motion 1s;
  -moz-animation:    dangerAnimated_motion 1s;
  -o-animation:      dangerAnimated_motion 1s;
  animation:         dangerAnimated_motion 1s;
}