<script lang="ts">
  export let colour = 'var(--fg)';
</script>

<div class="grid" style={`--loader-colour: ${colour};`}>
  {#each Array.from({ length: 9 }) as _}
    <div></div>
  {/each}
</div>

<style lang="scss">
  .grid {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;

    div {
      position: absolute;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--loader-colour);
      animation: grid 1.2s linear infinite;
    }
  }

  @function column($i) {
    @if $i % 3 == 0 {
      @return 3;
    } @else {
      @return $i % 3;
    }
  }

  @for $i from 1 through 9 {
    .grid div:nth-child(#{$i}) {
      $row: ceil(calc($i / 3));
      $column: column($i);

      top: 6px + ($row - 1) * 20px;
      left: 6px + ($column - 1) * 20px;
      animation-delay: -0.4s * ($i - 1);
    }
  }

  @keyframes grid {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }
</style>
