.hp-reachability-status {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--hp-dark);
}

.hp-reachability-status.is-up {
  background: #1a9b4d;
}

.hp-reachability-status.is-down {
  background: var(--hp-red);
}

.hp-reachability-status.is-unavailable {
  background: #8a8a8a;
}

.hp-reachability-status.is-pending {
  background: transparent;
  border-color: #d1d1d1;
  border-top-color: var(--hp-dark);
  box-shadow: none;
  animation: hp-reachability-spin 700ms linear infinite;
}

@keyframes hp-reachability-spin {
  to {
    transform: rotate(360deg);
  }
}

.hp-footer__reachability {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: normal;
}

.hp-footer__reachability .hp-reachability-status {
  position: static;
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
}