$totalWidth: 2.6rem;
$fetcherWidth: 2rem;
$pixSize: $fetcherWidth / 5;

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

.components-fetcher {
  padding: (($totalWidth - $fetcherWidth) / 2);
  width: ($pixSize * 5);
  height: ($pixSize * 5);

  &.fetching,
  &.processing,
  &.retrying {
    & > .dot.dot-middle {
      opacity: 0;
    }
    & > .dot:not(.dot-middle) {
      animation-name: dots;
    }
  }

  &.fetching > .dot {
    background-color: $warning;
  }
  &.processing > .dot {
    background-color: $success;
  }
  &.retrying > .dot {
    background-color: $danger;
  }

  .dot {
    position: absolute;
    margin: 0.1rem;
    width: ($pixSize - 0.1rem);
    height: ($pixSize - 0.1rem);
    border-radius: 100%;

    transition-property: opacity, background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;

    background-color: $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: (($pixSize * 2) * $num);
      $ty: (($pixSize * 2) * (floor(($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;
}
