@import 'tailwindcss';

@reference './app.css';

.shiki,
.shiki span {
	/* Optional, if you also want font styles */
	font-style: var(--font-mono) !important;
}

html.dark .shiki,
html.dark .shiki span {
	color: var(--shiki-dark) !important;
	background-color: var(--shiki-dark-bg) !important;
	/* Optional, if you also want font styles */
	font-style: var(--font-mono) !important;
	font-weight: var(--shiki-dark-font-weight) !important;
	text-decoration: var(--shiki-dark-text-decoration) !important;
}

.prose {
	@apply text-foreground;

	& h1:not(.not-prose h1) {
		@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
	}

	& h2:not(.not-prose h2) {
		@apply mt-12 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
	}

	& h3:not(.not-prose h3) {
		@apply mt-12 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0;
	}

	& h4:not(.not-prose h4) {
		@apply mt-12 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0;
	}

	& h5:not(.not-prose h5) {
		@apply mt-12 scroll-m-20 text-lg font-semibold tracking-tight first:mt-0;
	}

	& h6:not(.not-prose h6) {
		@apply mt-12 scroll-m-20 text-base font-semibold tracking-tight first:mt-0;
	}

	& h1:not(.not-prose h1),
	& h2:not(.not-prose h2),
	& h3:not(.not-prose h3),
	& h4:not(.not-prose h4),
	& h5:not(.not-prose h5),
	& h6:not(.not-prose h6) {
		& + p {
			@apply mt-0;
		}
	}

	& p:not(.not-prose p) {
		@apply leading-[175%] [&:not(:first-child)]:mt-6;
	}

	& li:not(.not-prose li) {
		@apply leading-[175%];
	}

	& a:not(.not-prose a) {
		@apply text-primary font-medium underline underline-offset-4;
	}

	& blockquote:not(.not-prose blockquote) {
		@apply mt-6 border-l-2 pl-6 italic;
	}

	& table:not(.not-prose table) {
		@apply my-6 w-full overflow-y-auto;

		& thead tr {
			@apply even:bg-muted m-0 border-t p-0;
		}

		& th {
			@apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
		}

		& tbody tr {
			@apply even:bg-muted m-0 border-t p-0;
		}

		& td {
			@apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
		}
	}

	& ul:not(.not-prose ul) {
		@apply my-6 ml-6 list-disc [&>li]:mt-2;

		& p {
			@apply my-0 inline;
		}
	}

	& ol:not(.not-prose ol) {
		@apply my-6 ml-6 list-decimal [&>li]:mt-2;

		& p {
			@apply my-0 inline;
		}
	}

	& pre:not(.not-prose pre) {
		@apply bg-muted my-6 overflow-y-auto rounded-md p-4 text-sm;
	}

	& code:not(pre code):not(.not-prose code) {
		@apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
	}

	& .lead:not(.not-prose .lead) {
		@apply text-muted-foreground text-xl;
	}

	& .large:not(.not-prose .large) {
		@apply text-lg font-semibold;
	}

	& .small:not(.not-prose .small) {
		@apply text-sm leading-none font-medium;
	}

	& .muted:not(.not-prose .muted) {
		@apply text-muted-foreground text-sm;
	}

	& img:not(.not-prose img),
	& picture:not(.not-prose picture),
	& video:not(.not-prose video) {
		@apply my-6;
	}

	& picture > img:not(.not-prose picture > img) {
		@apply my-0;
	}

	& kbd:not(.not-prose kbd) {
		@apply bg-muted rounded-md px-1.5 py-0.5 text-xs font-semibold;
	}

	& hr {
		@apply my-10;
	}

	& dl:not(.not-prose dl) {
		@apply my-6;

		& dt {
			@apply mt-6 font-semibold tracking-tight first:mt-0;
		}
	}

	& details:not(.not-prose details) {
		@apply mt-6;

		& summary {
			@apply mt-6 cursor-pointer font-semibold tracking-tight;
		}

		& p {
			@apply [&:first-of-type]:mt-2;
		}
	}

	& mark:not(.not-prose mark) {
		@apply bg-yellow-300;
	}

	& small:not(.not-prose small) {
		@apply text-xs leading-none;
	}
}