.ea-status {
  margin: 0;
  padding: .75rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  font-size: .9375rem;
  line-height: 1.5;
}

.ea-status--error,
.ea-status.is-error,
.ea-status[data-state="error"] {
  border-color: var(--color-danger-border);
  background: var(--color-danger-surface);
  color: var(--color-danger-text);
}

.ea-status--warning,
.ea-status[data-state="warning"] {
  border-color: var(--color-warning-border);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}

.ea-status--success,
.ea-status.is-success,
.ea-status[data-state="success"] {
  border-color: var(--color-success-border);
  background: var(--color-success-surface);
  color: var(--color-success-text);
}

.ea-status--info,
.ea-status[data-state="info"] {
  border-color: var(--color-info-border);
  background: var(--color-info-surface);
  color: var(--color-info-text);
}

.ea-status--inline {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.ea-status--inline.is-error,
.ea-status--inline[data-state="error"] {
  background: transparent;
  color: var(--color-danger);
}

.ea-status--inline.is-success,
.ea-status--inline[data-state="success"] {
  background: transparent;
  color: var(--color-success);
}

.ea-status--inline[data-state="warning"] {
  background: transparent;
  color: var(--color-warning-text);
}

.ea-status--inline[data-state="info"] {
  background: transparent;
  color: var(--color-info-text);
}

.ea-status[data-state="loading"] {
  border-color: var(--color-info-border);
  background: var(--color-info-surface);
  color: var(--color-info-text);
}

.ea-status--inline[data-state="loading"] {
  background: transparent;
  color: var(--color-text-muted);
}

.ea-status[data-state="loading"]::before {
  content: "";
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: var(--space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.08em;
  animation: ea-spin .8s linear infinite;
}

.ea-spinner,
.button-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-2);
  border: 2px solid rgba(255, 255, 255, .38);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -.125em;
  animation: ea-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .ea-spinner,
  .button-spinner,
  .ea-status[data-state="loading"]::before {
    animation: none;
  }
}