.c-LoadingDots {
  @import "../configs/color";
  $gap: 3px;
  $size: 5px;
  color: _color(grey, 800);
  display: flex;
  width: ($size * 3) + ($gap * 2);

  // Modifiers
  &.is-left {
    margin-right: auto;
  }
  &.is-center {
    margin-left: auto;
    margin-right: auto;
  }
  &.is-right {
    margin-left: auto;
  }

  &__dot {
    background-color: currentColor;
    border-radius: 200%;
    display: block;
    margin-right: $gap;
    height: $size;
    width: $size;

    &:last-child {
      margin-right: 0;
    }

    &--one {
      animation: dotOne 1s ease-in-out infinite;
      animation-direction: normal;
    }
    &--two {
      animation: dotTwo 1s ease-in-out infinite;
      animation-direction: normal;
    }
    &--three {
      animation: dotThree 1s ease-in-out infinite;
      animation-direction: normal;
    }
  }

  // Animations
  @keyframes dotOne {
    0%{
      opacity: 0.4;
    }
    33.333% {
      opacity: 1;
    }
    66.6667% {
      opacity: 0.4;
    }
    100% {
      opacity: 0.4;
    }
  }

  @keyframes dotTwo {
    0%{
      opacity: 0.4;
    }
    33.333% {
      opacity: 0.4;
    }
    66.6667% {
      opacity: 1;
    }
    100% {
      opacity: 0.4;
    }
  }

  @keyframes dotThree {
    0%{
      opacity: 0.4;
    }
    33.333% {
      opacity: 0.4;
    }
    66.6667% {
      opacity: 0.4;
    }
    100% {
      opacity: 1;
    }
  }
}