/* Alert Components
 * Alert and notice styles following BEM convention
 * Using Tailwind v4 @utility with @layer components
 */

@utility alert {
  @layer components {
    @apply px-4 py-3 rounded relative mb-6;
  }
}

@utility alert--success {
  @layer components {
    @apply px-4 py-3 rounded relative mb-6 bg-green-100 border border-green-400 text-green-700;
  }
}

@utility alert--error {
  @layer components {
    @apply px-4 py-3 rounded relative mb-6 bg-red-50 text-red-500 font-medium;
  }
}

@utility alert--warning {
  @layer components {
    @apply px-4 py-3 rounded relative mb-6 bg-yellow-100 border border-yellow-400 text-yellow-700;
  }
}

@utility alert--info {
  @layer components {
    @apply px-4 py-3 rounded relative mb-6 bg-blue-100 border border-blue-400 text-blue-700;
  }
}

@utility alert--inline {
  @layer components {
    @apply py-2 px-3 mb-5 rounded-lg inline-block;
  }
}