@use "sass:math";

$total-width: 2.6rem;
$fetcher-width: 2rem;
$pix-size: math.div($fetcher-width, 5);

.invisible .components-fetcher {
  display: none;
}

.components-fetcher {
  padding: math.div($total-width - $fetcher-width, 2);
  width: ($pix-size * 5);
  height: ($pix-size * 5);

  &.fetching,
  &.processing,
  &.retrying {
    & > .dot.dot-middle {
      opacity: 0;
    }

    & > .dot:not(.dot-middle) {
      animation-name: dots;
    }
  }

  &.fetching > .dot {
    background-color: var(--bs-warning);
  }

  &.processing > .dot {
    background-color: var(--bs-success);
  }

  &.retrying > .dot {
    background-color: var(--bs-danger);
  }

  .dot {
    position: absolute;
    margin: 0.1rem;
    width: ($pix-size - 0.1rem);
    height: ($pix-size - 0.1rem);
    border-radius: 100%;
    transition-property: opacity, background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    background-color: var(--bs-white);
    animation-duration: 0.9s;
    animation-iteration-count: infinite;
    opacity: 0;

    &.visible {
      opacity: 1;
    }

    $num: 0;

    @for $i from 1 through 9 {
      @if $i % 3 == 1 {
        $num: 0;
      }

      $tx: (($pix-size * 2) * $num);
      $ty: (($pix-size * 2) * (math.floor(math.div(($i - 1), 3))));

      &:nth-of-type(#{$i}) {
        transform: translate($tx, $ty);
      }

      $num: $num + 1;
    }

    &:nth-of-type(1) {
      animation-delay: (0.1s);
    }

    &:nth-of-type(2) {
      animation-delay: (0.2s);
    }

    &:nth-of-type(3) {
      animation-delay: (0.3s);
    }

    &:nth-of-type(6) {
      animation-delay: (0.4s);
    }

    &:nth-of-type(9) {
      animation-delay: (0.5s);
    }

    &:nth-of-type(8) {
      animation-delay: (0.6s);
    }

    &:nth-of-type(7) {
      animation-delay: (0.7s);
    }

    &:nth-of-type(4) {
      animation-delay: (0.8s);
    }
  }
}

@keyframes dots {
  0%,
  40%,
  100% {
    opacity: 0;
  }

  70% {
    opacity: 1;
  }
}

.components-fetcher-icon {
  min-height: 2.6rem;
  vertical-align: middle;
}
