/* experience_editor/save_indicator.css – Animated save confirmation badge */

.save-indicator {
  position: fixed;
  top: var(--space-6);
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3) var(--space-1-5) var(--space-2);
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid color-mix(in srgb, var(--status-success) 25%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.06);
}

.save-indicator--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.save-indicator__icon {
  font-size: 18px;
  color: var(--status-success);
}

.save-indicator--visible .save-indicator__icon {
  animation: save-check-pop var(--duration-slow) var(--ease-spring);
}

@keyframes save-check-pop {
  0% { transform: scale(0.4); opacity: 0.2; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}