<script lang="ts">
	interface Props {
		html: string;
	}

	let { html }: Props = $props();
</script>

<article class="markdown-doc">
	{@html html}
</article>

<style>
	.markdown-doc :global(.doc-h1) {
		font-size: 1.75rem;
		font-weight: 800;
		line-height: 1.25;
		margin: 0 0 1rem;
		color: var(--color-base-content);
	}

	.markdown-doc :global(.doc-h2) {
		font-size: 1.35rem;
		font-weight: 700;
		margin: 2.5rem 0 0.75rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
		color: var(--color-base-content);
		scroll-margin-top: 5rem;
	}

	.markdown-doc :global(.doc-h3) {
		font-size: 1.1rem;
		font-weight: 700;
		margin: 1.75rem 0 0.5rem;
		color: var(--color-base-content);
		scroll-margin-top: 5rem;
	}

	.markdown-doc :global(p) {
		margin: 0.75rem 0;
		line-height: 1.7;
		color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
	}

	.markdown-doc :global(ul),
	.markdown-doc :global(ol) {
		margin: 0.75rem 0;
		padding-left: 1.35rem;
		line-height: 1.7;
		color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
	}

	.markdown-doc :global(li) {
		margin: 0.35rem 0;
	}

	.markdown-doc :global(strong) {
		font-weight: 700;
		color: var(--color-base-content);
	}

	.markdown-doc :global(hr) {
		margin: 2rem 0;
		border: none;
		border-top: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
	}

	.markdown-doc :global(.doc-table-wrap) {
		margin: 1rem 0;
		overflow-x: auto;
		border-radius: 0.75rem;
		border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
	}

	.markdown-doc :global(.doc-table) {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
	}

	.markdown-doc :global(.doc-table th),
	.markdown-doc :global(.doc-table td) {
		padding: 0.65rem 0.85rem;
		text-align: left;
		border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
	}

	.markdown-doc :global(.doc-table th) {
		background: color-mix(in oklab, var(--color-base-200) 80%, transparent);
		font-weight: 600;
		white-space: nowrap;
	}

	.markdown-doc :global(.doc-table tr:last-child td) {
		border-bottom: none;
	}

	.markdown-doc :global(.doc-link) {
		color: var(--color-primary);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.markdown-doc :global(.doc-pre) {
		margin: 1rem 0;
		overflow-x: auto;
		border-radius: 0.75rem;
		background: var(--color-base-200);
		padding: 1rem;
		font-size: 0.8rem;
		line-height: 1.5;
	}

	.markdown-doc :global(pre code) {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}
</style>
