@layer components {
  /* 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;
    }
  }
}