// RAMEN LOADER COMPONENT
//
//
// Required Global Variables:
//
// None
//
//
// Required Component Variables:
//
// $loader-size: size of the loader dots
// $loader-color: colour of the loader dots
//
//

$loader-size: toRems(10px);
$loader-color: $c-black;

@keyframes loader {
  0%,
  80%,
  100% {
    transform: translateZ(0) scale(0);
  }

  40% {
    transform: translateZ(0) scale(1);
  }
}

@mixin loading-dot {
  animation: loader 1.5s infinite ease-in-out;
  background-color: $loader-color;
  border-radius: 50%;
  content: '';
  height: $loader-size;
  position: absolute;
  top: 0;
  transform: translateZ(0) scale(0);
  width: $loader-size;
}

.c-loader {
  animation-delay: -150ms;
  color: $c-black;
  font-size: 10px;
  left: 50%;
  left: calc(50% - #{$loader-size / 2});
  margin: 0 auto;
  overflow: visible;
  position: relative;
  text-indent: -9999em;
  top: 40%;

  .c-reveal__loading & {
    display: block;
    left: 50%;
    position: absolute;
    top: 30%;
    transform: translate(-50%, -50%);
  }

  &:before,
  &:after {
    @include loading-dot;
  }

  &:before {
    animation-delay: -300ms;
    left: -(1.5 * $loader-size);
  }

  &:after {
    animation-delay: 300ms;
    left: 1.5 * $loader-size;
  }

  &__label {
    @include loading-dot;
    display: block;
    font-size: 0;
    left: 0;
    line-height: 0;
  }
}