.status {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transition: background-color 0.1s ease-in-out;
  margin-right: 0.5rem;
  cursor: pointer;
}

.status:hover {
  filter: opacity(35%);
  animation: none;
}

.ping {
  background-color: var(--bs-yellow);
  animation: ping 1.2s ease-in-out infinite both;
  cursor: wait;
}

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

.down {
  background-color: var(--bs-danger);
}

.up {
  background-color: var(--bs-success);
}

.error {
  background-color: var(--bs-danger);
  animation: error 0.6s ease-in-out infinite both;
}

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

.unknown {
  background-color: grey;
}
