:root {
	--border-color: black;
	--alt-bg-color: #eee;
}

@media (prefers-color-scheme: dark) {
	:root {
		--border-color: white;
		--alt-bg-color: #333;
	}
}

.test__block {
	color: red;
}

.white-box {
	padding: 10px;
	background-color: white;
	display: inline-block;
}

.maxwidth-100 * {
	max-width: 100%;
}

.blog__content p code {
	background-color: var(--alt-bg-color);
	padding: 0.125em 0.25em;
	margin: 0 0.1em;
}

.disable-inline-code p code {
	background-color: inherit;
	padding: inherit;
	margin: inherit;
}

.blog__codebox {
	border: 2px solid var(--border-color);
	display: inline-block;
	margin-top: 1em; /* titlebox margin */
	vertical-align: top;
	max-width: calc(100% - 2em); /* Leave space for titlebox */
}

.blog__codebox__title {
	background-color: var(--alt-bg-color);
	border: 2px solid var(--border-color);
	padding: 0.5em 1em;
	display: inline-block;
	position: relative;
	top: -1em;
	left: 2em;
}

.blog__codebox__title p {
	padding: 0;
	margin: 0;
	display: inline;
}

.blog__codebox__title p::before {
	content: "[-]";
	color: blue;
	padding-right: 0.5em;
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
	.blog__codebox__title p::before {
		color: lightblue;
	}
}

.blog__codebox code {
	tab-size: 2;
}

.blog__codebox pre {
	position: relative;
	overflow-x: scroll;
	padding: 0 1em;
}

.blog__codebox__title + pre {
	top: -0.5em; /* even out vertical spacing */
	margin-top: 0;
}

.blog__codebox--collapsed pre {
	display: none;
}

.blog__codebox--collapsed .blog__codebox__title p::before {
	content: "[+]";
}

.blog-codeboxes__palette {
	display: table;
}

.blog-codeboxes__palette__row {
	display: table-row;
}

.blog-codeboxes__palette__row > * {
	display: table-cell;
	padding-right: 1em;
}

.blog-codeboxes__palette__row p {
	margin: 0.5em;
}