<template>
  <div class="loading-spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<style scoped lang="scss">
@import 'styles/helpers';

// copied from https://loading.io/css/ updated for scalability

.loading-spinner {
  display: inline-block;
  position: relative;
  width: var(--spinner-size, 80px);
  height: var(--spinner-size, 80px);
  --calculated-dot-size: calc(var(--spinner-size, 80px) * 0.0875); // 7px is 8.75% of 80px

  div {
    animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: calc(var(--spinner-size, 80px) / 2) calc(var(--spinner-size, 80px) / 2);
  }

  div:after {
    content: ' ';
    display: block;
    position: absolute;
    width: var(--calculated-dot-size);
    height: var(--calculated-dot-size);
    border-radius: 50%;
    background: var(--spinner-color, $color-brand);
    margin: calc(var(--calculated-dot-size) / -2) 0 0 calc(var(--calculated-dot-size) / -2);
  }

  div:nth-child(1) {
    animation-delay: -0.036s;
  }

  div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }

  div:nth-child(2) {
    animation-delay: -0.072s;
  }

  div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }

  div:nth-child(3) {
    animation-delay: -0.108s;
  }

  div:nth-child(4) {
    animation-delay: -0.144s;
  }

  div:nth-child(5) {
    animation-delay: -0.18s;
  }

  div:nth-child(6) {
    animation-delay: -0.216s;
  }

  div:nth-child(7) {
    animation-delay: -0.252s;
  }

  div:nth-child(8) {
    animation-delay: -0.288s;
  }

  div:nth-child(1):after {
    top: calc(var(--spinner-size, 80px) * 0.7875);
    left: calc(var(--spinner-size, 80px) * 0.7875);
  }

  div:nth-child(2):after {
    top: calc(var(--spinner-size, 80px) * 0.85);
    left: calc(var(--spinner-size, 80px) * 0.7);
  }

  div:nth-child(3):after {
    top: calc(var(--spinner-size, 80px) * 0.8875);
    left: calc(var(--spinner-size, 80px) * 0.6);
  }

  div:nth-child(4):after {
    top: calc(var(--spinner-size, 80px) * 0.9);
    left: calc(var(--spinner-size, 80px) * 0.5);
  }

  div:nth-child(5):after {
    top: calc(var(--spinner-size, 80px) * 0.8875);
    left: calc(var(--spinner-size, 80px) * 0.4);
  }

  div:nth-child(6):after {
    top: calc(var(--spinner-size, 80px) * 0.85);
    left: calc(var(--spinner-size, 80px) * 0.3);
  }

  div:nth-child(7):after {
    top: calc(var(--spinner-size, 80px) * 0.7875);
    left: calc(var(--spinner-size, 80px) * 0.2125);
  }

  div:nth-child(8):after {
    top: calc(var(--spinner-size, 80px) * 0.7);
    left: calc(var(--spinner-size, 80px) * 0.15);
  }
}
@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
