@import "../variables";

@keyframes cruk-brand {
  0% { background-color: $brand-primary; }
  12.5% { background-color: $brand-secondary; }
  50% { background-color: $brand-tertiary; }
  87.5% { background-color: $brand-primary; }
  100% { background-color: $brand-primary; }
}

@keyframes cruk-input-bounce {
  0% { bottom: 12px; }
  40% { height: 13px; }
  50% { bottom: 2px; height: 6px; }
  60% { height: 13px; }
  100% { bottom: 12px; }
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.cr-animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.cr-animated--infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.cr-animated--hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@keyframes cr-animated-bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -7px, 0);
    transform: translate3d(0, -7px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
}

.cr-animated-bounce {
  @extend .cr-animated;
  animation-name: cr-animated-bounce;
  transform-origin: center bottom;
}

@keyframes cr-animated-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
}

.cr-animated-shake,
.cr-animated-jiggle {
  @extend .cr-animated;
  animation-name: cr-animated-shake;
  animation-duration: 0.7s;
}