@layer components {
  .flash-messages {
    @apply fixed top-4 right-4 z-50 space-y-2 max-w-md;
  }

  .flash-message {
    @apply flex items-center justify-between p-4 rounded-lg shadow-lg border-l-4;
    animation: slideIn 0.3s ease-out;
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .flash-notice {
    @apply bg-green-50 border-green-500 text-green-900;
  }

  .flash-alert, .flash-error {
    @apply bg-red-50 border-red-500 text-red-900;
  }

  .flash-info {
    @apply bg-blue-50 border-blue-500 text-blue-900;
  }

  .flash-content {
    @apply flex items-center gap-3;
  }

  .flash-icon {
    @apply text-2xl font-bold;
  }

  .flash-text {
    @apply font-semibold;
  }

  .flash-close {
    @apply ml-4 text-2xl font-bold opacity-50 hover:opacity-100 transition-opacity cursor-pointer;
  }
}