@tailwind base;
@tailwind components;
@tailwind utilities;

::selection {
	background-color: #47a3f3;
	color: #fefefe;
}

:root {
	--sh-class: #2d5e9d;
	--sh-identifier: #354150;
	--sh-sign: #8996a3;
	--sh-string: #007f7a;
	--sh-keyword: #e02518;
	--sh-comment: #a19595;
	--sh-jsxliterals: #6266d1;
}

@media (prefers-color-scheme: dark) {
	:root {
		--sh-class: #4c97f8;
		--sh-identifier: white;
		--sh-keyword: #f47067;
		--sh-string: #0fa295;
	}
}

html {
	min-width: 360px;
}

.prose .anchor {
	@apply absolute invisible no-underline;

	margin-left: -1em;
	padding-right: 0.5em;
	width: 80%;
	max-width: 700px;
	cursor: pointer;
}

j .prose a {
	@apply transition-all decoration-neutral-400 dark:decoration-neutral-600 underline-offset-2 decoration-[0.1em];
}

.prose .anchor:after {
	@apply text-neutral-300 dark:text-neutral-700;
	content: "#";
}

.prose *:hover > .anchor {
	@apply visible;
}

.prose pre {
	@apply bg-neutral-50 dark:bg-neutral-900 rounded-lg overflow-x-auto border border-neutral-200 dark:border-neutral-900;
}

.prose code {
	@apply px-1 py-0.5 rounded-lg;
}

.prose pre code {
	@apply p-0;
	border: initial;
	line-height: 1.5;
}

.prose code span {
	@apply font-medium;
}

.prose img {
	/* Don't apply styles to next/image */
	@apply m-0;
}

.prose h2,
h3,
h4 {
	@apply font-medium tracking-tighter !important;
}

.prose strong {
	@apply font-medium;
}

.prose > :first-child {
	/* Override removing top margin, causing layout shift */
	margin-top: 1.25em !important;
	margin-bottom: 1.25em !important;
}

pre::-webkit-scrollbar {
	display: none;
}

pre {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

/* Remove Safari input shadow on mobile */
input[type="text"],
input[type="email"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.prose .tweet a {
	text-decoration: inherit;
	font-weight: 500;
}

table {
	display: block;
	max-width: fit-content;
	overflow-x: auto;
	white-space: nowrap;
}

.prose .callout > p {
	margin: 0 !important;
}

.title {
	text-wrap: balance;
}

@media print {
	body,
	html {
		width: 100%;
		margin-top: 10px;
		padding: 0;
		background-color: #ffffff; /* Ensures a white background */
	}

	.no-print {
		display: none; /* Hides elements with the 'no-print' class during printing */
	}

	/* Adjust the font size, visibility, or other properties for print */
	h1,
	h2,
	h3 {
		font-size: 12pt; /* Example: Change heading sizes */
		color: #000000; /* Ensure black text for better print visibility */
	}
	.margin-10 {
		margin-top: 30px;
	}
	.page-break {
		page-break-before: always; /* Forces a page break before the element */
	}
}
