@import "tirefire/colors";

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.dot {
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--dot-color);
  border-radius: 50%;
}

.dot::before,
.dot::after {
  animation: disabled;
}

.dot.success {
  background-color: $secondary_green;
}

.dot.analyzing {
  background-color: $black;
}

.dot.queued {
  background-color: $secondary_blue;
}

.dot.running {
  background-color: $secondary_green;
}

.dot.cancelling {
  background-color: $yellow;
}


.dot.cancelled {
  background-color: $yellow;
}

.dot.failed {
  background-color: $red;
}

.dot--active {
  animation: blink 2s infinite;
}

.dot--once {
  animation: blink 2s 1;
}

.dot--delayed {
  animation: blink 2s infinite 4s;
}

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
  }
}
