/* Shared CSS page for general VSCode-generated Markdown HTML. Forms a complete package without need for any additional CSS or JS. */
@import "styles/fonts.css";
@import "styles/katex.css";
@import "styles/markdown.css";
@import "styles/theme.css";
@import "styles/vscode.css";

/* Variables to be redefined by the client for custom styling. More in `theme.css`. */
:root,
:host {
	--silver-paragraph-spacing: 2em;
	--silver-paragraph-indent: 0ch;
	--silver-line-height: 1.5;
	--silver-hr-content: "❄";
	--silver-transition-time: 0;
	--silver-editor-font-size: 1.1875em;
}

html {
	margin: 0;
	padding: 0;
}

:host,
body {
	display: block;
	width: calc(100% - 4em);
	max-width: 80ch;
	margin: 0;
	padding: 2em max(2em, 50% - 40ch);
	overflow-x: hidden;

	/* Default to the same as .serif */
	font-family: "Latin Modern Roman 10", KaiTi, "Noto Emoji", serif;
	font-size: var(--silver-editor-font-size);
	line-height: var(--silver-line-height);
	color: var(--silver-foreground-color);
	background-color: var(--silver-background-color);

	/* Transitions should be applied to other elements but it is not very important. */
	transition: color var(--silver-transition-time),
		background-color var(--silver-transition-time);
}

/* Printing. Preferred-color-scheme is automatically set to light by the browser printing procedure. Styles on `:host,body` are usually not read. */
/* Page numbers and background colors not supported in Firefox yet. */
@media print {
	@page {
		size: A4 portrait;
		margin: 1in;

		color: var(--silver-foreground-color);
		background-color: var(--silver-background-color);
		font-size: 0.75em;

		@bottom-right-corner {
			font-family: "Latin Modern Roman 10", KaiTi, "Noto Emoji", serif;

			/* Not actually horizontally center sometimes, for some reason, but it looks okay. */
			text-align: center;

			vertical-align: center;
			content: counter(page) "/" counter(pages);
		}
	}

	:host,
	body {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;

		font-size: 12pt;
	}

	p {
		overflow-x: hidden;
	}

	.silver-page-break {
		clear: both;
		break-after: page;
	}
}
