/* ==================================
   #LOADER
   ================================== */

/* Component
   ========================================================================== */

.au-c-loader {
  display: block;
}

// .au-p- = private class
.au-p-c-loading-animation {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 1.8rem;
}

// TODO: Remove this once we drop support for the "old" AuLoader setup
.au-c-loader__animation {
  display: block;
  position: relative;
  width: 3rem + $au-unit;
  height: 3rem + $au-unit;

  .au-c-loader--small & {
    width: 3rem;
    height: 3rem;
  }

  .au-c-loader--large & {
    width: 3rem + $au-unit-large;
    height: 3rem + $au-unit-large;
  }
}

.au-p-c-loading-animation,
// TODO: Remove this once we drop support for the "old" AuLoader setup
.au-c-loader__animation {
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 2rem), -50%);
    width: 0.4rem;
    height: 0.4rem;
    background-color: transparent;
    border-radius: 50%;
    box-shadow:
      1rem 0 var(--au-white),
      2rem 0 var(--au-white),
      3rem 0 var(--au-white);
    animation: loader-wave infinite 1s linear;
  }
}

@keyframes loader-wave {
  0%,
  100%,
  60% {
    box-shadow:
      1rem 0 var(--au-gray-600),
      2rem 0 var(--au-gray-600),
      3rem 0 var(--au-gray-600);
  }
  10% {
    box-shadow:
      1rem -0.3rem var(--au-gray-600),
      2rem 0 var(--au-gray-600),
      3rem 0 var(--au-gray-600);
  }
  20% {
    box-shadow:
      1rem -0.6rem var(--au-gray-600),
      2rem -0.3rem var(--au-gray-600),
      3rem 0 var(--au-gray-600);
  }
  30% {
    box-shadow:
      1rem -0.3rem var(--au-gray-600),
      2rem -0.6rem var(--au-gray-600),
      3rem -0.3rem var(--au-gray-600);
  }
  40% {
    box-shadow:
      1rem 0 var(--au-gray-600),
      2rem -0.3rem var(--au-gray-600),
      3rem -0.6rem var(--au-gray-600);
  }
  50% {
    box-shadow:
      1rem 0 var(--au-gray-600),
      2rem 0 var(--au-gray-600),
      3rem -0.3rem var(--au-gray-600);
  }
}