/* Table of Contents
==================================================
# Keyframes
# Spinner
# Colors */

/* # Keyframes
================================================== */
@-webkit-keyframes spinner-beat {
  0% { @include transform(scale(1)); }
  14% { @include transform(scale(1.5)); }
  28% { @include transform(scale(1)); }
  42% { @include transform(scale(1.5)); }
  70% { @include transform(scale(1)); }
}
@keyframes spinner-beat {
  0% { @include transform(scale(1)); }
  14% { @include transform(scale(1.5)); }
  28% { @include transform(scale(1)); }
  42% { @include transform(scale(1.5)); }
  70% { @include transform(scale(1)); }
}
@-webkit-keyframes spinner-circle {
  0%, 80%, 100% { @include transform(scale(0)); }
  40% { @include transform(scale(1)); }
}
@keyframes spinner-circle {
  0%, 80%, 100% { @include transform(scale(0)); }
  40% { @include transform(scale(1)); }
}
@-webkit-keyframes spinner-chase-rotate {
  100% { @include transform(scale(360deg)); }
}
@keyframes spinner-chase-rotate {
  100% { @include transform(scale(360deg)); }
}
@-webkit-keyframes spinner-chase-bounce {
  0%, 100% { @include transform(scale(0)); }
  50% { @include transform(scale(1)); }
}
@keyframes spinner-chase-bounce {
  0%, 100% { @include transform(scale(0)); }
  50% { @include transform(scale(1)); }
}
@-webkit-keyframes spinner-crescent {
  0% { @include transform(rotate(0)); }
  100% { @include transform(rotate(360deg)); }
}
@keyframes spinner-crescent {
  0% { @include transform(rotate(0)); }
  100% { @include transform(rotate(360deg)); }
}
@-webkit-keyframes spinner-cube {
  0%, 70%, 100% { @include transform(scale3D(1,1,1)); }
  35% { @include transform(scale3D(0,0,1)); }
}
@keyframes spinner-cube {
  0%, 70%, 100% { @include transform(scale3D(1,1,1)); }
  35% { @include transform(scale3D(0,0,1)); }
}
@-webkit-keyframes spinner-double-bounce {
  0%, 100% { @include transform(scale(0)); }
  50% { @include transform(scale(1)); }
}
@keyframes spinner-double-bounce {
  0%, 100% { @include transform(scale(0)); }
  50% { @include transform(scale(1)); }
}
@-webkit-keyframes spinner-flower {
  0% {
    @include transform(rotate(0));
    box-shadow: $color-primary 0 0 23px 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0;
  }
  50% {
    @include transform(rotate(1080deg));
    box-shadow: $color-primary 0 0 23px 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0;
  }
}
@keyframes spinner-flower {
  0% {
    @include transform(rotate(0));
    box-shadow: $color-primary 0 0 23px 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0;
  }
  50% {
    @include transform(rotate(1080deg));
    box-shadow: $color-primary 0 0 23px 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0;
  }
}
@-webkit-keyframes spinner-orbit {
  0% { @include transform(rotate(0)); }
  100% { @include transform(rotate(360deg)); }
}
@keyframes spinner-orbit {
  0% { @include transform(rotate(0)); }
  100% { @include transform(rotate(360deg)); }
}
@-webkit-keyframes spinner-pulse {
  0% {
    opacity: 1;
    @include transform(scale(0));
  }
  100% {
    opacity: 0;
    @include transform(scale(1));
  }
}
@keyframes spinner-pulse {
  0% {
    opacity: 1;
    @include transform(scale(0));
  }
  100% {
    opacity: 0;
    @include transform(scale(1));
  }
}
@-webkit-keyframes spinner-rotating-plane {
  0% { @include transform(perspective(120px) rotateX(0) rotateY(0)); }
  50% { @include transform(perspective(120px) rotateX(-180.1deg) rotateY(0)); }
  100% { @include transform(perspective(120px) rotateX(-180deg) rotateY(-179.9deg)); }
}
@keyframes spinner-rotating-plane {
  0% { @include transform(perspective(120px) rotateX(0) rotateY(0)); }
  50% { @include transform(perspective(120px) rotateX(-180.1deg) rotateY(0)); }
  100% { @include transform(perspective(120px) rotateX(-180deg) rotateY(-179.9deg)); }
}
@-webkit-keyframes spinner-triple-bounce {
  0%, 80%, 100% { @include transform(scale(0)); }
  40% { @include transform(scale(1)); }
}
@keyframes spinner-triple-bounce {
  0%, 80%, 100% { @include transform(scale(0)); }
  40% { @include transform(scale(1)); }
}
@-webkit-keyframes spinner-wander {
  25% { @include transform(translateX(50px) rotate(-90deg) scale(0.5)); }
  50% { @include transform(translateX(50px) translateY(50px) rotate(-179deg)); }
  50.1% { @include transform(translateX(50px) translateY(50px) rotate(-180deg)); }
  75% { @include transform(translateX(0px) translateY(50px) rotate(-270deg) scale(0.5)); }
  100% { @include transform(rotate(-360deg)); }
}
@keyframes spinner-wander {
  25% { @include transform(translateX(50px) rotate(-90deg) scale(0.5)); }
  50% { @include transform(translateX(50px) translateY(50px) rotate(-179deg)); }
  50.1% { @include transform(translateX(50px) translateY(50px) rotate(-180deg)); }
  75% { @include transform(translateX(0px) translateY(50px) rotate(-270deg) scale(0.5)); }
  100% { @include transform(rotate(-360deg)); }
}
@-webkit-keyframes spinner-wave {
  0%, 40%, 100% { @include transform(scaleY(0.4)); }
  20% { @include transform(scaleY(1)); }
}
@keyframes spinner-wave {
  0%, 40%, 100% { @include transform(scaleY(0.4)); }
  20% { @include transform(scaleY(1)); }
}
@-webkit-keyframes spinner-wobbler {
  0%  { left: 4px; }
  3%  { left: 104px; }
  6%  { left: 4px; }
  9%  { left: 104px; }
  12% { left: 4px; }
  15% { left: 104px; }
  18% { left: 32px; }
  27% { left: 32px; }
  30% { left: 104px; }
  33% { left: 4px; }
  36% { left: 104px; }
  39% { left: 4px; }
  42% { left: 104px; }
  45% { left: 4px; }
  48% { left: 104px; }
  51% { left: 52px; }
  63% { left: 52px; }
  66% { left: 4px; }
  69% { left: 104px; }
  72% { left: 4px; }
  75% { left: 104px; }
  78% { left: 4px; }
  81% { left: 104px; }
  84% { left: 72px; }
  94% { left: 72px; }
  97% { left: 104px; }
}
@keyframes spinner-wobbler {
  0%  { left: 4px; }
  3%  { left: 104px; }
  6%  { left: 4px; }
  9%  { left: 104px; }
  12% { left: 4px; }
  15% { left: 104px; }
  18% { left: 32px; }
  27% { left: 32px; }
  30% { left: 104px; }
  33% { left: 4px; }
  36% { left: 104px; }
  39% { left: 4px; }
  42% { left: 104px; }
  45% { left: 4px; }
  48% { left: 104px; }
  51% { left: 52px; }
  63% { left: 52px; }
  66% { left: 4px; }
  69% { left: 104px; }
  72% { left: 4px; }
  75% { left: 104px; }
  78% { left: 4px; }
  81% { left: 104px; }
  84% { left: 72px; }
  94% { left: 72px; }
  97% { left: 104px; }
}

/* # Spinner
================================================== */
.spinner-backdrop {
  background: transparentize($color-white, 0.1);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2040;
}
.spinner {
  @include animation-fill-mode(both);
  margin: 15% auto 0 auto;
  position: relative;
  text-align: center;
}
.spinner-beat,
.spinner-circle,
.spinner-chase,
.spinner-crescent,
.spinner-cube,
.spinner-double-bounce,
.spinner-orbit,
.spinner-pulse {
  height: 60px;
  width: 60px;
}
.spinner-beat,
.spinner-circle-container-1 > div,
.spinner-circle-container-2 > div,
.spinner-circle-container-3 > div,
.spinner-chase-1,
.spinner-chase-2,
.spinner-crescent,
.spinner-cube-1,
.spinner-cube-2,
.spinner-cube-3,
.spinner-cube-4,
.spinner-cube-5,
.spinner-cube-6,
.spinner-cube-7,
.spinner-cube-8,
.spinner-cube-9,
.spinner-double-bounce-1,
.spinner-double-bounce-2,
.spinner-flower,
.spinner-pulse,
.spinner-rotating-plane,
.spinner-orbit,
.spinner-orbit-1,
.spinner-triple-bounce > div,
.spinner-wander-1,
.spinner-wander-2,
.spinner-wave > div,
.spinner-wobbler,
.spinner-wobbler::after  {
  border: 1px solid $color-primary;
  border-radius: 500px;
  box-sizing: border-box;
}
.spinner-beat {
  @include animation(spinner-beat 1.3s infinite ease-in-out);
  background: $color-transparent;
  border-width: 2px;
}
.spinner-circle-container-1 > div,
.spinner-circle-container-2 > div,
.spinner-circle-container-3 > div {
  @include animation(spinner-circle 1.2s infinite ease-in-out);
  background: $color-primary;
  height: 15px;
  position: absolute;
  width: 15px;
}
.spinner-circle .spinner-circle-container {
  position: absolute;
  height: 100%;
  width: 100%;
}
.spinner-circle-container-2 { @include transform(rotateZ(45deg)); }
.spinner-circle-container-3 { @include transform(rotateZ(90deg)); }
.spinner-circle-1,
.spinner-circle-2 { top: 0; }
.spinner-circle-1 { left: 0; }
.spinner-circle-2 { right: 0; }
.spinner-circle-3,
.spinner-circle-4 { bottom: 0; }
.spinner-circle-3 { right: 0; }
.spinner-circle-4 { left: 0; }
.spinner-chase { @include animation(spinner-chase-rotate 2s infinite linear); }
.spinner-chase-1,
.spinner-chase-2 {
  @include animation(spinner-chase-bounce 2s infinite ease-in-out);
  background: $color-primary;
  display: inline-block;
  height: 60%;
  position: absolute;
  top: 0;
  width: 60%;
}
.spinner-chase-2 {
  bottom: 0;
  top: auto;
}
.spinner-crescent {
  @include animation(spinner-crescent 1.2s infinite linear);
  border-width: 9px;
  border-right-color: $color-transparent;
}
.spinner-cube-1,
.spinner-cube-2,
.spinner-cube-3,
.spinner-cube-4,
.spinner-cube-5,
.spinner-cube-6,
.spinner-cube-7,
.spinner-cube-8,
.spinner-cube-9 {
  @include animation(spinner-cube 1.3s infinite ease-in-out);
  background: $color-primary;
  border-color: $color-white;
  float: left;
  height: 33%;
  width: 33%;
}
.spinner-cube-7,
.spinner-cube-8,
.spinner-cube-9 { margin-top: -1px; }
.spinner-double-bounce-1,
.spinner-double-bounce-2 {
  @include animation(spinner-double-bounce 2s infinite ease-in-out);
  background: $color-primary;
  border-radius: 50%;
  height: 100%;
  left: 0;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 100%;
}
.spinner-flower {
  @include animation(spinner-flower 5s infinite ease-in-out);
  background: $color-primary;
  height: 23px;
  @include transform-origin(50% 50%);
  width: 23px;
}
.spinner-orbit { @include animation(spinner-orbit 1s linear infinite); }
.spinner-orbit-1 {
  background: $color-primary;
  height: 20px;
  width: 20px;
}
.spinner-pulse {
  @include animation(spinner-pulse 1s infinite ease-in-out);
  background: $color-primary;
}
.spinner-rotating-plane {
  @include animation(spinner-rotating-plane 1.2s infinite ease-in-out);
  background: $color-primary;
  border-radius: 0;
  height: 100px;
  width: 100px;
}
.spinner-triple-bounce { width: 100px; }
.spinner-triple-bounce > div {
  @include animation(spinner-triple-bounce 1.4s infinite ease-in-out);
  background: $color-primary;
  display: inline-block;
  height: 25px;
  width: 25px;
}
.spinner-wander {
  height: 100px;
  width: 100px;
}
.spinner-wander-1,
.spinner-wander-2 {
  @include animation(spinner-wander 1.8s infinite ease-in-out);
  background: $color-primary;
  border-radius: 0;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}
.spinner-wave { height: 100px; }
.spinner-wave > div {
  @include animation(spinner-wave 1.2s infinite ease-in-out);
  background: $color-primary;
  border-radius: 0;
  display: inline-block;
  height: 100%;
  width: 6px;
}
.spinner-wobbler {
  height: 26px;
  width: 150px;
}
.spinner-wobbler::after {
  @include animation(spinner-wobbler 15s infinite ease-in-out);
  background: $color-primary;
  content: '';
  height: 20px;
  left: 5px;
  position: absolute;
  top: 2px;
  width: 20px;
}
.spinner-circle > .spinner-circle-container-2 .spinner-circle-1,
.spinner-wave > .spinner-wave-2 { @include animation-delay(-1.1s); }
.spinner-circle > .spinner-circle-container-3 .spinner-circle-1,
.spinner-circle > .spinner-circle-container-3 .spinner-circle-4,
.spinner-chase-2,
.spinner-double-bounce-2,
.spinner-wave > .spinner-wave-3 { @include animation-delay(-1s); }
.spinner-circle > .spinner-circle-container-1 .spinner-circle-2,
.spinner-wander > .spinner-wander-2,
.spinner-wave > .spinner-wave-4 { @include animation-delay(-0.9s); }
.spinner-circle > .spinner-circle-container-2 .spinner-circle-2,
.spinner-wave > .spinner-wave-5 { @include animation-delay(-0.8s); }
.spinner-circle > .spinner-circle-container-3 > .spinner-circle-2 { @include animation-delay(-0.7s); }
.spinner-circle > .spinner-circle-container-1 > .spinner-circle-3 { @include animation-delay(-0.6s); }
.spinner-circle > .spinner-circle-container-2 > .spinner-circle-3 { @include animation-delay(-0.5s); }
.spinner-circle > .spinner-circle-container-3 > .spinner-circle-3 { @include animation-delay(-0.4s); }
.spinner-circle > .spinner-circle-container-1 > .spinner-circle-4 { @include animation-delay(-0.3s); }
.spinner-circle > .spinner-circle-container-2 > .spinner-circle-4 { @include animation-delay(-0.2s); }
.spinner-cube > .spinner-cube-7 { @include animation-delay(0s); }
.spinner-cube > .spinner-cube-4,
.spinner-cube > .spinner-cube-8 { @include animation-delay(0.1s); }
.spinner-cube > .spinner-cube-1,
.spinner-cube > .spinner-cube-5,
.spinner-cube > .spinner-cube-9 { @include animation-delay(0.2s); }
.spinner-cube > .spinner-cube-2,
.spinner-cube > .spinner-cube-6 { @include animation-delay(0.3s); }
.spinner-cube > .spinner-cube-3 { @include animation-delay(0.4s); }
.spinner-triple-bounce > .spinner-triple-bounce-1 { @include animation-delay(-0.32s); }
.spinner-triple-bounce > .spinner-triple-bounce-2 { @include animation-delay(-0.16s); }

/* # Colors
================================================== */
.spinner-dark.spinner-backdrop { background: transparentize($color-black, 0.1); }
.spinner-light.spinner-backdrop { background: transparentize($color-haze, 0.1); }