/*
 * Copyright (c) 2016-present, Parse, LLC
 * All rights reserved.
 *
 * This source code is licensed under the license found in the LICENSE file in
 * the root directory of this source tree.
 */
@import 'stylesheets/globals.scss';

$dotSize: 8px;

.loaderDots {
  span {
    @include animation-name(blink);
    @include animation-duration(1.4s);
    @include animation-iteration-count(infinite);
    @include animation-fill-mode(both);

    display: inline-block;
    width: $dotSize;
    height: $dotSize;
    border-radius: $dotSize;
    background-color: black;
    margin: 4px;

    &:nth-child(2) {
      @include animation-delay(0.2s);
    }

    &:nth-child(3) {
      @include animation-delay(0.4s);
    }
  }
}

@include keyframes(blink) {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
