[data-service-status-host]:not([hidden]) {
  position: fixed;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-default, #d4d4d8);
  border-radius: 0.5rem;
  background: var(--color-surface-elevated, #ffffff);
  color: var(--color-text-secondary, #52525b);
  font:
    400 0.875rem/1.5 system-ui,
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

[data-service-status-host][data-service-status-state="down"]:not([hidden]) {
  gap: 0.5rem;
  border: 2px solid var(--color-status-warning-dark, #b45309);
  background: var(--color-status-warning-light, #fef3c7);
  color: var(--color-status-warning-dark, #7c2d12);
  font-weight: 600;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
}

[data-service-status-host][data-service-status-state="down"]::before {
  content: "\26A0\FE0F";
  text-decoration: none;
}

[data-service-status-host]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}