$loading-dot-swell: 0.5em;
$loading-dot: -0.1em;
@keyframes loadingAnimation {
  0%,
  100% {
    box-shadow: 0 -3em 0 $loading-dot-swell, 2em -2em 0 $loading-dot, 3em 0 0 $loading-dot, 2em 2em 0 $loading-dot, 0 3em 0 $loading-dot, -2em 2em 0 $loading-dot-swell / 4, -3em 0 0 $loading-dot-swell / 3, -2em -2em 0 $loading-dot-swell / 2;
  }

  12.5% {
    box-shadow: 0 -3em 0 $loading-dot-swell / 2, 2em -2em 0 $loading-dot-swell, 3em 0 0 $loading-dot, 2em 2em 0 $loading-dot, 0 3em 0 $loading-dot, -2em 2em 0 $loading-dot, -3em 0 0 $loading-dot-swell / 4, -2em -2em 0 $loading-dot-swell / 3;
  }

  25% {
    box-shadow: 0 -3em 0 $loading-dot-swell / 3, 2em -2em 0 $loading-dot-swell / 2, 3em 0 0 $loading-dot-swell, 2em 2em 0 $loading-dot, 0 3em 0 $loading-dot, -2em 2em 0 $loading-dot, -3em 0 0 $loading-dot, -2em -2em 0 $loading-dot-swell / 4;
  }

  37.5% {
    box-shadow: 0 -3em 0 $loading-dot-swell / 4, 2em -2em 0 $loading-dot-swell / 3, 3em 0 0 $loading-dot-swell / 2, 2em 2em 0 $loading-dot-swell, 0 3em 0 $loading-dot, -2em 2em 0 $loading-dot, -3em 0 0 $loading-dot, -2em -2em 0 $loading-dot;
  }

  50% {
    box-shadow: 0 -3em 0 $loading-dot, 2em -2em 0 $loading-dot-swell / 4, 3em 0 0 $loading-dot-swell / 3, 2em 2em 0 $loading-dot-swell / 2, 0 3em 0 $loading-dot-swell, -2em 2em 0 $loading-dot, -3em 0 0 $loading-dot, -2em -2em 0 $loading-dot;
  }

  62.5% {
    box-shadow: 0 -3em 0 $loading-dot, 2em -2em 0 $loading-dot, 3em 0 0 $loading-dot-swell / 4, 2em 2em 0 $loading-dot-swell / 3, 0 3em 0 $loading-dot-swell / 2, -2em 2em 0 $loading-dot-swell, -3em 0 0 $loading-dot, -2em -2em 0 $loading-dot;
  }

  75% {
    box-shadow: 0 -3em 0 $loading-dot, 2em -2em 0 $loading-dot, 3em 0 0 $loading-dot, 2em 2em 0 $loading-dot-swell / 4, 0 3em 0 $loading-dot-swell / 3, -2em 2em 0 $loading-dot-swell / 2, -3em 0 0 $loading-dot-swell, -2em -2em 0 $loading-dot;
  }

  87.5% {
    box-shadow: 0 -3em 0 $loading-dot, 2em -2em 0 $loading-dot, 3em 0 0 $loading-dot, 2em 2em 0 $loading-dot, 0 3em 0 $loading-dot-swell / 4, -2em 2em 0 $loading-dot-swell / 3, -3em 0 0 $loading-dot-swell / 2, -2em -2em 0 $loading-dot-swell;
  }
}

.cssanimations.csstransitions {
  .autocomplete__loading {
    display: inline-block;
    vertical-align: middle;
    padding: 3em;
  }

  .autocomplete__loading::after {
    content: 'Loading...';
    display: block;
    color: $colour-blue;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -999em;
    overflow: hidden;
    animation: loadingAnimation 0.8s infinite linear;
    transform: translateZ(0);
  }
}

.autocomplete__field {
  position: relative;
}

.autocomplete__submit,
.autocomplete__loading {
  position: absolute;
}

.autocomplete__loading {
  font-size: 3px;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.autocomplete__submit {
  top: 0.6em;
  right: 0.5em;
}

.is-loading {
  .autocomplete__submit {
    display: none;
  }
}