/**
 * Form Auto-Save Styles
 *
 * @author Amit Haridas, ConcreteInfo
 */

/* Save indicator */
.autosave-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #9ca3af);
    min-height: 28px;
    margin-bottom: var(--spacing-2, 0.5rem);
}

.autosave-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.autosave-indicator--saving {
    color: var(--color-blue-500, #3b82f6);
}

.autosave-indicator--saved .autosave-icon {
    color: var(--color-green-500, #22c55e);
}

.autosave-indicator--restored .autosave-icon {
    color: var(--color-amber-500, #f59e0b);
}

.autosave-indicator--error .autosave-icon {
    color: var(--color-red-500, #ef4444);
}

/* Recovery banner */
.autosave-recovery-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3, 0.75rem);
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    background-color: var(--color-amber-50, #fffbeb);
    border: 1px solid var(--color-amber-200, #fde68a);
    border-radius: var(--radius-md, 0.375rem);
    margin-bottom: var(--spacing-4, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-amber-900, #78350f);
}

.dark .autosave-recovery-banner {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: var(--color-amber-700, #b45309);
    color: var(--color-amber-100, #fef3c7);
}

.autosave-recovery-actions {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
}

/* Form dirty state indicator */
[data-autosave].is-dirty {
    border-left: 3px solid var(--color-amber-400, #fbbf24);
}

[data-autosave].is-saving {
    opacity: 0.7;
    pointer-events: none;
}