.save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-armadillo-400);
}

.save-status:not([data-state]) {
  display: none;
}

.save-status::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background var(--transition-normal);
}

.save-status[data-state="saved"]::before {
  background: oklch(65% 0.15 155);
}

.save-status[data-state="unsaved"]::before {
  background: oklch(70% 0.15 85);
}

.save-status[data-state="saving"]::before {
  background: oklch(70% 0.15 85);
  animation: save-pulse 1s ease-in-out infinite;
}

.save-status[data-state="error"] {
  color: var(--color-danger);
}

.save-status[data-state="error"]::before {
  background: var(--color-danger);
}

@keyframes save-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}