.admonition {
	@apply my-4 rounded-sm px-4 py-3 text-[--tw-prose-body] prose-p:my-2 prose-pre:my-4;
	@apply border-l-4 border-[--admonition-border];
	@apply bg-[--admonition-bg];

	@apply [--shiki-background:theme(colors.white/0.2)];
	@apply dark:[--shiki-background:theme(colors.black/0.2)];

	--tw-prose-body: theme(colors.light);
	--tw-prose-headings: theme(colors.light);
	--tw-prose-lead: theme(colors.light);
	--tw-prose-links: var(--admonition-text);
	--tw-prose-bold: theme(colors.light);
	--tw-prose-counters: theme(colors.light);
	--tw-prose-bullets: var(--admonition-border);
	--tw-prose-hr: var(--admonition-border);
	--tw-prose-quotes: theme(colors.light);
	--tw-prose-quote-borders: var(--admonition-border);
	--tw-prose-code: theme(colors.light);
	--tw-prose-pre-code: theme(colors.light);
	--tw-prose-pre-bg: var(--shiki-background);
	--tw-prose-th-borders: var(--admonition-border);
	--tw-prose-td-borders: var(--admonition-border);
}

.admonition pre {
	@apply border border-[--admonition-border] bg-[--shiki-background];
}

.admonition-title {
	@apply flex items-center space-x-2 text-lg font-semibold;
}

.admonition-title * {
	color: var(--admonition-text);
}

.admonition-icon {
	@apply inline-block size-6 bg-current;
	mask-image: var(--admonition-icon);
}

.admonition-note {
	--admonition-bg: theme(colors.blue.600 / 0.1);
	--admonition-border: theme(colors.blue.600 / 0.4);
	--admonition-text: theme(colors.blue.950);
	--admonition-icon: url(lucide-static/icons/info.svg);
}

.admonition-tip {
	--admonition-bg: theme(colors.green.600 / 0.1);
	--admonition-border: theme(colors.green.600 / 0.4);
	--admonition-text: theme(colors.green.950);
	--admonition-icon: url(lucide-static/icons/lightbulb.svg);
}

.admonition-info {
	--admonition-bg: theme(colors.purple.600 / 0.1);
	--admonition-border: theme(colors.purple.600 / 0.4);
	--admonition-text: theme(colors.purple.950);
	--admonition-icon: url(lucide-static/icons/message-square-warning.svg);
}

.admonition-warning {
	--admonition-bg: theme(colors.yellow.600 / 0.1);
	--admonition-border: theme(colors.yellow.600 / 0.4);
	--admonition-text: theme(colors.yellow.950);
	--admonition-icon: url(lucide-static/icons/triangle-alert.svg);
}

.admonition-danger {
	--admonition-bg: theme(colors.red.600 / 0.1);
	--admonition-border: theme(colors.red.600 / 0.4);
	--admonition-text: theme(colors.red.950);
	--admonition-icon: url(lucide-static/icons/octagon-alert.svg);
}

@media (prefers-color-scheme: dark) {
	.admonition-note {
		--admonition-bg: theme(colors.blue.500 / 0.1);
		--admonition-border: theme(colors.blue.500 / 0.6);
		--admonition-text: theme(colors.blue.100);
	}

	.admonition-tip {
		--admonition-bg: theme(colors.green.500 / 0.1);
		--admonition-border: theme(colors.green.500 / 0.6);
		--admonition-text: theme(colors.green.100);
	}

	.admonition-info {
		--admonition-bg: theme(colors.purple.500 / 0.1);
		--admonition-border: theme(colors.purple.500 / 0.6);
		--admonition-text: theme(colors.purple.100);
	}

	.admonition-warning {
		--admonition-bg: theme(colors.yellow.500 / 0.1);
		--admonition-border: theme(colors.yellow.500 / 0.6);
		--admonition-text: theme(colors.yellow.100);
	}

	.admonition-danger {
		--admonition-bg: theme(colors.red.500 / 0.1);
		--admonition-border: theme(colors.red.500 / 0.6);
		--admonition-text: theme(colors.red.100);
	}
}