.spinner {
  display: inline-flex;
  @include justify-content(space-around);
  position: relative;
  vertical-align: middle;
  width: 30px;
  height: 6px;
  text-align: center;

  i.spinner__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: $gray;

    @include animation(pulse .85s infinite ease-in-out);

    &.spinner__dot--one {
      @include animation-delay(-0.2s);
    }

    &.spinner__dot--two {
      @include animation-delay(-0.1s);
    }
  }

  &.spinner--inverted {

    i.spinner__dot {
      background: #fff;
    }
  }

  .btn--saving & {
    width: 18px;
    margin-right: 8px;
    opacity: .6;

    i.spinner__dot {
      width: 3px;
      height: 3px;
    }
  }
}

@include keyframes(pulse) {
  0%, 80%, 100% {
    opacity: 0;
    transform: scale(.8);
  } 40% {
    opacity: 1;
    transform: scale(1);
  }
}