/* ベース */
.ui-alert {
  @apply rounded-md border px-4 py-3 text-sm leading-5 bg-white;
}

.ui-alert__inner {
  @apply flex items-start gap-3;
}

.ui-alert__icon {
  @apply flex items-center justify-center h-5;
}

.ui-alert__icon-circle {
  @apply h-4 w-4 rounded-full border-2 border-current;
}

.ui-alert__body {
  @apply flex flex-col gap-2 min-w-0;
}

.ui-alert__title {
  @apply m-0 font-semibold text-gray-900;
}

.ui-alert__content {
  @apply m-0 text-gray-600;
}

.ui-alert__content p {
  @apply mb-2 last:mb-0;
}

.ui-alert__close {
  @apply ml-auto border-0 bg-transparent p-0 cursor-pointer text-gray-600;
}

/* Variant: info */
.ui-alert--info {
  @apply bg-gray-50 border-gray-600;
}

.ui-alert--info .ui-alert__icon {
  @apply text-gray-600;
}

/* Variant: success */
.ui-alert--success {
  @apply bg-green-50 border-emerald-600;
}

.ui-alert--success .ui-alert__icon {
  @apply text-emerald-600;
}

/* Variant: warning */
.ui-alert--warning {
  @apply bg-yellow-50 border-amber-600;
}

.ui-alert--warning .ui-alert__icon {
  @apply text-amber-600;
}

/* Variant: error */
.ui-alert--error {
  @apply bg-red-50 border-red-600;
}

.ui-alert--error .ui-alert__icon {
  @apply text-red-600;
}

.ui-alert--error .ui-alert__title {
  @apply text-gray-900;
}