/* Lenis must be disabled if this is enabled */
/* @media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
} */

/* Apply custom scrollbar to nested scroll bars on page (including code blocks) */
pre.astro-code,
[data-rehype-pretty-code-figure] pre code {
	@apply scrollbar-thin overflow-x-auto;
}

/* Override DaisyUI code wrapper/window component to match website colors */
.mockup-code {
	&::before {
		box-shadow:
			1.4em 0 0 theme("colors.prim.space"),
			2.8em 0 0 theme("colors.prim.space"),
			4.2em 0 0 theme("colors.prim.space") !important;
	}

	pre::before {
		content: none !important;
	}
}

/* Override Astro's Code component default styles */
.site-code-style pre {
	/* See CodeFile.astro component for reference style */
	@apply text-sm py-3 px-5 rounded-xl !bg-prim-space;
}

/** Code block */
[data-rehype-pretty-code-figure] pre code {
	@apply bg-prim-space overflow-x-auto !py-3 !px-5;
}

/* Inline code */
[data-rehype-pretty-code-figure] > code {
	@apply bg-prim-space overflow-x-auto;
}

/* Fix for "txt" (plaintext) code not appearing on dark background after rehype-pretty-code upgrade */
[data-rehype-pretty-code-figure] code[data-language="txt"] {
	color: #dbdcde;
}
/* Fix for more conflicts between Tailwind prose styling and rehype-pretty-code */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
	opacity: 0;
}

pre {
	tab-size: 2;
}

/* Override default styles (I think mostly applied by DaisyUI?) */
[data-rehype-pretty-code-figure] pre {
	padding: 0; /* Assign padding to code element instead */
	background-color: transparent !important; /* Assign this from parent element instead. */

	& > code {
		background-color: transparent !important; /* Assign this from parent element instead. */
	}

	[data-highlighted-chars] {
		padding: 0.06rem 0.125rem;
		margin: 0 -0.125rem;
		border: 1.5px solid theme("colors.prim.info");
		background-color: theme("colors.prim.info/0.3");
		width: 100%;
		height: 100%;
		border-radius: 0.5rem;
	}

	code {
		counter-reset: line;
	}

	code[data-line-numbers] > [data-line]::before {
		counter-increment: line;
		content: counter(line);

		/* Other styling */
		display: inline-block;
		width: 1rem;
		margin-right: 1rem;
		text-align: right;
		color: theme("colors.gray.600");
	}

	code[data-line-numbers-max-digits="2"] > [data-line]::before {
		width: 2rem;
	}

	code[data-line-numbers-max-digits="3"] > [data-line]::before {
		width: 3rem;
	}

	span[data-highlighted-line] {
		background-color: theme("colors.prim.info/0.3");
		border-left: 2px solid theme("colors.prim.info");
		margin-left: -6px;
		padding-left: 4px;
	}
}

pre.mermaid {
	background-color: transparent !important;
}
