@import "~tfstyleguide/vars";

.tui-loader {
  .h3-text();
  color: @gray75;
}

.tui-loader-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  margin: 0 2px;
  background-color: fade(@black, 100%);
  animation: tui-loader-dot-blink 1.2s linear infinite;

  &:nth-child(3) {
    animation-delay: 0.3s;
  }
  &:nth-child(4) {
    animation-delay: 0.6s;
  }
}

@keyframes tui-loader-dot-blink {
  0% {
    background-color: fade(@gray75, 100%);
  }
  25% {
    background-color: fade(@gray75, 50%);
  }
  50% {
    background-color: fade(@gray75, 0%);
  }
  75% {
    background-color: fade(@gray75, 50%);
  }
  100% {
    background-color: fade(@gray75, 100%);
  }
}