/* app/assets/stylesheets/components/alerts.css */

.alert {
  @apply flex items-start gap-3 rounded-lg border px-4 py-3 text-sm font-medium
         leading-5 w-full;
}

.alert-soft {
  @apply shadow-none;
}

.alert-solid {
  @apply text-white;
}

.alert-dismissible {
  @apply pr-12 relative;
}

.alert-title {
  @apply block font-semibold;
}

.alert-body {
  @apply block;
}

.alert-actions {
  @apply mt-3 flex items-center gap-2;
}

.alert-icon {
  @apply shrink-0 text-base leading-none mt-0.5;
}

.alert-close {
  @apply absolute top-3 right-3 inline-flex items-center justify-center rounded-md
         border border-transparent p-1 text-current opacity-70 transition-opacity;
}

.alert-close:hover {
  @apply opacity-100;
}

.alert-blue { @apply border-blue-600; }
.alert-green { @apply border-green-600; }
.alert-gray { @apply border-gray-600; }
.alert-yellow { @apply border-yellow-500; }
.alert-orange { @apply border-orange-600; }
.alert-purple { @apply border-purple-600; }
.alert-red { @apply border-red-600; }
.alert-white { @apply border-gray-300; }

.alert-soft.alert-blue { @apply bg-blue-50 border-blue-200 text-blue-800; }
.alert-soft.alert-green { @apply bg-green-50 border-green-200 text-green-800; }
.alert-soft.alert-gray { @apply bg-gray-50 border-gray-200 text-gray-800; }
.alert-soft.alert-yellow { @apply bg-yellow-50 border-yellow-200 text-yellow-800; }
.alert-soft.alert-orange { @apply bg-orange-50 border-orange-200 text-orange-800; }
.alert-soft.alert-purple { @apply bg-purple-50 border-purple-200 text-purple-800; }
.alert-soft.alert-red { @apply bg-red-50 border-red-200 text-red-800; }
.alert-soft.alert-white { @apply bg-white border-gray-200 text-gray-700; }

.alert-solid.alert-blue { @apply bg-blue-600 border-blue-600; }
.alert-solid.alert-green { @apply bg-green-600 border-green-600; }
.alert-solid.alert-gray { @apply bg-gray-700 border-gray-700; }
.alert-solid.alert-yellow { @apply bg-yellow-500 border-yellow-500; }
.alert-solid.alert-orange { @apply bg-orange-600 border-orange-600; }
.alert-solid.alert-purple { @apply bg-purple-600 border-purple-600; }
.alert-solid.alert-red { @apply bg-red-600 border-red-600; }
.alert-solid.alert-white { @apply bg-white border-gray-300 text-gray-700; }