/* https://codepen.io/bramus/pen/MWxLjEo */

@layer reset, layout;

@layer syntax-highlighting {
	/* From prism.css */
	::highlight(parameter) {
		color: #1a1a1a;
	}

	::highlight(comment),
	::highlight(prolog),
	::highlight(doctype),
	::highlight(cdata) {
		color: slategray;
	}

	::highlight(punctuation) {
		color: #999;
	}

	::highlight(property),
	::highlight(tag),
	::highlight(boolean),
	::highlight(number),
	::highlight(constant),
	::highlight(symbol),
	::highlight(deleted),
	::highlight(class-name) {
		color: #905;
	}

	::highlight(selector),
	::highlight(attr-name),
	::highlight(string),
	::highlight(char),
	::highlight(builtin),
	::highlight(inserted) {
		color: #690;
	}

	::highlight(operator),
	::highlight(entity),
	::highlight(url) {
		color: #a67f59;
		background: hsla(0, 0%, 100%, 0.5);
	}

	::highlight(atrule),
	::highlight(attr-value),
	::highlight(keyword) {
		color: #07a;
	}

	::highlight(function) {
		color: #dd4a68;
	}

	::highlight(regex),
	::highlight(important),
	::highlight(variable) {
		color: #e90;
	}

	::highlight(important),
	::highlight(bold) {
		font-weight: bold;
        background-color: rgba(0, 0, 0, 1);
        color: white;
	}

	::highlight(italic) {
		font-style: italic;
	}

	::highlight(entity) {
		cursor: help;
	}
}

@layer layout {
	@layer general {
		html {
			font-family: sans-serif;
		}
		body {
			padding: 3rem 0 10rem;
			width: 90%;
			max-width: 50em;
			margin: 0 auto;
		}
		h2 {
			margin-top: 2em;
		}
		a {
			color: #0000aa;
			text-decoration: none;
			&:hover {
				color: blue;
			}
		}
	}

	@layer code {
		script[visible],
		style[visible],
		pre {
			display: block;
			white-space: pre;
			border: 1px solid #dedede;
			padding: 1em;
			background: #fafafa;
			font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
				Liberation Mono, monospace;
			overflow-x: auto;
			border-left: 0.4em solid cornflowerblue;
			tab-size: 2;
			color: #1a1a1a;
			line-height: 1.6;
		}

		code:not(pre code), /* output:not(code:has(output) output) */ {
			background: #f7f7f7;
			border: 1px solid rgb(0 0 0 / 0.2);
			padding: 0.1rem 0.3rem;
			margin: 0.1rem 0;
			border-radius: 0.2rem;
			display: inline-block;
		}
	}

	@layer warning {
		.warning {
			display: none;
			box-sizing: border-box;
			padding: 1em;
			margin: 1em 0;
			border: 1px solid #ccc;
			background: rgba(255 255 205 / 0.8);
		}

		.warning > :first-child {
			margin-top: 0;
		}

		.warning > :last-child {
			margin-bottom: 0;
		}

		.warning a {
			color: blue;
		}
		.warning--info {
			border: 1px solid #123456;
			background: rgb(205 230 255 / 0.8);
		}
		.warning--alarm {
			border: 1px solid red;
			background: #ff000010;
		}
	}
}

@layer reset {
	* {
		box-sizing: border-box;
	}
	html,
	body {
		margin: 0;
		padding: 0;
	}
}