@layer components {
  /* ========================================================================
     FLASH MESSAGE CONTAINER
     ======================================================================== */

  .flash-container {
    max-width: var(--main-width);
    margin-inline: auto;
    padding-block-start: var(--space-sm);
    padding-inline: var(--main-padding);
  }

  /* ========================================================================
     FLASH MESSAGE COMPONENT
     ======================================================================== */

  .flash-message {
    max-width: 28rem;
    display: block;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-weight-semibold);
    animation: slideIn var(--duration-normal) var(--ease-out-bounce);
  }

  .flash-message.alert-success {
    background-color: oklch(var(--lch-success-lightest));
    color: var(--color-positive);
  }

  .flash-message.alert-error {
    background-color: oklch(var(--lch-error-lightest));
    color: var(--color-negative);
  }

  .flash-message a {
    text-decoration: underline;
    color: inherit;
    font-weight: var(--font-weight-bold);
  }

  .flash-message a:hover {
    opacity: 0.8;
  }

  .flash-message a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ========================================================================
     ANIMATIONS
     ======================================================================== */

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}