---
import Section from './Section.astro';
---

<Section>
	<div
		class="content prose mt-8 max-w-none text-base leading-8 text-black dark:prose-invert prose-code:rounded-lg prose-code:bg-stone-800 prose-code:p-1 prose-code:text-orange-600 prose-img:rounded-lg prose-img:shadow-xl dark:text-white prose-img:dark:shadow-stone-800"
	>
		<slot />
	</div>
</Section>

<style is:global>
	.content pre {
		background-color: #cdc8ff0d;
		border-radius: 0.5rem;
		font-size: 0.9rem;
	}

	.content code {
		overflow-x: auto;
	}

	.content [data-rehype-pretty-code-figure] code {
		padding: 0 !important;
	}
	.content pre > code span[data-line] {
		border-left: 0.5rem solid transparent;
		padding: 0 0.5rem;
	}

	.content pre > code span:first-of-type {
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		padding-top: 0.5rem;
	}
	.content pre > code span:last-of-type {
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.content pre > code .highlighted {
		border-left: 0.5rem solid rgba(209, 213, 219, 0.6) !important;
		background-color: rgba(229, 231, 235, 0.05);
	}
	/** 
     *  data-line-numbers will be enabled on markdown  
     *  with `showLineNumbers` meta string on it
     */
	.content pre > code[data-line-numbers] {
		counter-reset: line;
	}
	.content pre > code[data-line-numbers] > span[data-line]::before {
		counter-increment: line;
		content: counter(line);
		display: inline-block;
		margin-right: 2rem;
		width: 1rem;
		text-align: left;
		color: #7ca2dfad;
	}
	.content pre > code > span[data-line]::before {
		content: '';
		display: inline-block;
		width: 1rem;
		text-align: right;
	}

	/** 
     *  we'll need to adjust the space required 
     *  the number depending on the number of digits 
     */
	.content pre > code[data-line-numbers-max-digits='2'] > span[data-line]::before {
		width: 2rem;
	}

	.content code[data-line-numbers-max-digits='3'] > span[data-line]::before {
		width: 3rem;
	}
</style>
