@utility alert {
	/* override the border style of Tailwind CSS Typography plugin */
	border-width: var(--border);
	border-color: var(--alert-border-color, var(--color-base-200));
	@layer daisyui.l1.l2.l3 {
		border-style: solid;
		--alert-border-color: var(--color-base-200);
		@apply rounded-box text-base-content grid items-center gap-4 px-4 py-3;
		background-color: var(--alert-color, var(--color-base-200));
		justify-content: start;
		justify-items: start;
		grid-auto-flow: column;
		grid-template-columns: auto;
		text-align: start;
		font-size: 0.875rem;
		line-height: 1.25rem;
		box-shadow:
			0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,
			0 1px
				color-mix(
					in oklab,
					color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200)))
						calc(var(--depth) * 20%),
					#0000
				),
			0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
		&:has(:nth-child(2)) {
			grid-template-columns: auto minmax(auto, 1fr);
		}
	}
}

@utility alert-info {
	@layer daisyui.l1.l2 {
		@apply text-info-content;
		--alert-border-color: var(--color-info);
		--alert-color: var(--color-info);
	}
}

@utility alert-success {
	@layer daisyui.l1.l2 {
		@apply text-success-content;
		--alert-border-color: var(--color-success);
		--alert-color: var(--color-success);
	}
}

@utility alert-warning {
	@layer daisyui.l1.l2 {
		@apply text-warning-content;
		--alert-border-color: var(--color-warning);
		--alert-color: var(--color-warning);
	}
}

@utility alert-error {
	@layer daisyui.l1.l2 {
		@apply text-error-content;
		--alert-border-color: var(--color-error);
		--alert-color: var(--color-error);
	}
}
@utility alert-notice {
	@layer daisyui.l1.l2 {
		@apply text-notice-content;
		--alert-border-color: var(--color-notice);
		--alert-color: var(--color-notice);
	}
}
@utility alert-alert {
	@layer daisyui.l1.l2 {
		color: var(--color-alert-content);
		--alert-border-color: var(--color-alert);
		--alert-color: var(--color-alert);
	}
}

@utility alert-outline {
	@layer daisyui.l1 {
		@apply bg-transparent;
		color: var(--alert-color);
		box-shadow: none;
		background-image: none;
	}
}
@utility alert-dash {
	@layer daisyui.l1 {
		@apply bg-transparent;
		color: var(--alert-color);
		border-style: dashed;
		box-shadow: none;
		background-image: none;
	}
}

@utility alert-vertical {
	@layer daisyui.l1.l2 {
		justify-content: center;
		justify-items: center;
		grid-auto-flow: row;
		grid-template-columns: auto;
		text-align: center;
		&:has(:nth-child(2)) {
			grid-template-columns: auto;
		}
	}
}

@utility alert-horizontal {
	@layer daisyui.l1.l2 {
		justify-content: start;
		justify-items: start;
		grid-auto-flow: column;
		grid-template-columns: auto;
		text-align: start;
		&:has(:nth-child(2)) {
			grid-template-columns: auto minmax(auto, 1fr);
		}
	}
}