/* Error Message Component
   ========================================================================== */

.error-message {
  inline-size: 100%;
  color: var(--color-red);
  background-color: var(--color-red-light);
  padding: var(--space-xs);
  border-radius: var(--border-radius);
  margin-block-end: var(--space-xs);

  /* Smooth entry animation when error appears */
  animation: slide-down 0.2s ease-out;

  @starting-style {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* Animation for error message appearance */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* When inside a form field group, adjust spacing */
.field:has(.error-message) {
  & .error-message {
    margin-block-start: calc(var(--space-xs) * 0.5);
  }
}

/* Multiple errors stacked */
.error-message + .error-message {
  margin-block-start: calc(var(--space-xs) * -0.5);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* Icon support for error messages */
.error-message:has(svg, [class*="icon"]) {
  display: flex;
  align-items: center;
  gap: var(--space-xs);

  & svg,
  & [class*="icon"] {
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
}

/* Dismissible error messages */
.error-message:has(.dismiss) {
  position: relative;
  padding-inline-end: calc(var(--space-xs) * 3);

  & .dismiss {
    position: absolute;
    inset-inline-end: var(--space-xs);
    inset-block-start: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: currentColor;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;

    &:hover,
    &:focus-visible {
      opacity: 1;
    }
  }
}

/* Compact variant for inline errors */
.error-message--compact {
  padding: calc(var(--space-xs) * 0.5) var(--space-xs);
  font-size: 0.875em;
}

/* Warning variant (less severe) */
.error-message--warning {
  color: var(--color-warning, oklch(60% 0.2 85));
  background-color: var(--color-warning-bg, oklch(95% 0.05 85));
}

/* Success variant (for completion states) */
.error-message--success {
  color: var(--color-success, oklch(55% 0.2 145));
  background-color: var(--color-success-bg, oklch(95% 0.05 145));
}

/* Animate out when removed */
.error-message[data-removing] {
  animation: slide-up 0.2s ease-in forwards;
}

@keyframes slide-up {
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .error-message {
    border: 2px solid currentColor;
  }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  .error-message {
    animation: none;

    @starting-style {
      opacity: 1;
      transform: none;
    }
  }

  .error-message[data-removing] {
    animation: none;
  }
}