@loading-anim-delay: 0.16s;

.loading {
  background-color: fade(@shadow, 50%);
  color: @shadow-inverted;

  &__inner,
  &__inner:before,
  &__inner:after {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    animation-fill-mode: both;
    animation: loading 1.25s infinite ease-in-out;
  }

  &__inner {
    position: absolute;
    top: 51%;
    left: 0;
    right: 0;
    margin: auto;
    text-indent: -9999rem;
    animation-delay: -@loading-anim-delay;
    .transform(translateZ(0));
  }

  &__inner:before,
  &__inner:after {
    content: "";
    position: absolute;
    top: 0;
  }

  &__inner:before {
    left: -3rem;
    animation-delay: -@loading-anim-delay * 2;
  }

  &__inner:after {
    left: 3rem;
  }
}

@keyframes loading {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5rem 0 -1.3rem;
  }
  40% {
    box-shadow: 0 2.5rem 0 0;
  }
}
