$border-radius: 1ex;

/* -------------------------------------------------- */

.parse-error {
	background: red;
	color: yellow;
}

/* -------------------------------------------------- */

$header-height: 2em;

h1 {
	text-align: center;
	margin: 0;
	border-bottom: 1px solid black;
}

h2, h3 {
	position: sticky;
	background: white;
	display: block;
	z-index: 100;
}

h2 {
	top: 0;
	height: calc($header-height + 1em)
}

h3 {
	top: $header-height;
}

/* -------------------------------------------------- */

/*
.documentation {
	display: none;
}
*/

/*
.var {
	position: relative;
}

.var .documentation {
	display: none;
	position: absolute;
	top: 2ch;
	left: 0;
	border: 1px solid black;
	background: lightblue;
	z-index: 10;
}

.var:hover .documentation {
	display: block;
}
*/

.noscript {
	display: none;
}

code.json {
	font-size: 80%;
}

:target {
	background-color: yellow;
}

.overview-list p {
	display: inline;
}

.example {
	background: lightgray;
	padding: 1em;
	border-radius: $border-radius;
}

.comment {
	/*
	border-left: 1ex;
	border-left-style: dotted;
	padding-left: 1em;
	*/
	display: inline-block;

	font-family: sans;
	font-size: 80%;

	p {
		$line-height: 1.2em;

		line-height: $line-height;
		padding-left: 20px;
		/* https://stackoverflow.com/questions/52748260/add-a-prefix-character-for-each-new-line-using-css */
		background:
			repeating-linear-gradient(
				to bottom,
				transparent 0px,
				transparent 5px,
				#000 5px,
				#000 calc(1.2em - 2px),
				transparent calc(1.2em - 2px),
				transparent 1.2em)
			4px 0/2px 100% no-repeat;
	}

	p:first-child {
		margin-top: 0;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

.alternatives {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-top: 0;

	li {
		padding: 0;
		display: inline-block;
		background-color: lightgrey;
		border-left: 1px solid black;
		border-right: 1px solid black;

		&:first-child {
			border-radius: 0 0 0 $border-radius;
			border-left: none;
		}

		&:last-child {
			border-radius: 0 0 $border-radius 0;
			border-right: none;
		}

		a {
			display: block;
			padding: 1em;
			color: black;
		}

		.selected {
			background-color: grey;
		}
	}
}

/* -------------------------------------------------- */

dl.module-index {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-row-gap: 4pt;

	dt {
		text-align: right;
		color: grey;
	}
}

/* -------------------------------------------------- */

ul.toc {
	list-style-type: none;
	padding-left: 1em;
}

.toc ul {
	padding-left: 2em;
}

/* -------------------------------------------------- */

@import "colorscheme_default";

.highlight-pygments {
	@import "highlight_pygments";
}

.highlight-andre-simon {
	@import "highlight_andre_simon";
}

.highlight-muppet {
	@import "highlight_muppet";
}

@import "breadcrumb";
@import "tabset";
@import "color-headers";
@import "sidebar";