/*
 * FM-14 Autosave field — app/components/ui/autosave_field_component.rb
 *
 * State is driven entirely by the wrapper's [data-autosave-state]
 * attribute (idle/dirty/saving/saved/error), toggled by
 * autosave_controller.js. Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 */

.fm-autosave-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fm-autosave-field__label-text {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.fm-autosave-field__control-wrap {
  position: relative;
}

.fm-autosave-field__spinner {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  display: flex;
  color: var(--color-ink-muted);
}

.fm-autosave-field__spinner svg {
  animation: ui-spin var(--duration-spin) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fm-autosave-field__spinner svg {
    animation: none;
  }
}

[data-autosave-state="dirty"] .fm-autosave-field__control-wrap {
  box-shadow: inset 2px 0 0 0 var(--color-accent-200);
  border-radius: var(--radius-lg);
}

[data-autosave-state="saving"] .fm-autosave-field__spinner {
  visibility: visible;
}

.fm-autosave-field__status {
  min-height: var(--text-xs--line-height, 1em);
  font-size: var(--text-xs);
}

.fm-autosave-field__status-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.fm-autosave-field__status-text--saved {
  color: var(--color-success-ink);
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

.fm-autosave-field__status-text--saved.is-fading {
  opacity: 0;
}

.fm-autosave-field__status-text--error {
  color: var(--color-danger-ink);
}