.alert {
  @apply rounded-box text-base-content border-base-200 border p-4;
  --alert-bg: theme(colors.base-200);
  --alert-bg-mix: theme(colors.base-100);
  background-color: var(--alert-bg);
  &-info {
    @apply text-info-content border-info/20;
    --alert-bg: theme(colors.info);
    --alert-bg-mix: theme(colors.base-100);
  }
  &-success {
    @apply text-success-content border-success/20;
    --alert-bg: theme(colors.success);
    --alert-bg-mix: theme(colors.base-100);
  }
  &-warning {
    @apply text-warning-content border-warning/20;
    --alert-bg: theme(colors.warning);
    --alert-bg-mix: theme(colors.base-100);
  }
  &-error {
    @apply text-error-content border-error/20;
    --alert-bg: theme(colors.error);
    --alert-bg-mix: theme(colors.base-100);
  }
}
