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

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

/******************** Blog header ********************/
.blog__title {
  margin-bottom: 0;
}

.blog__description {
  margin-bottom: 0.5em;
}

.blog__date {
  font-style: italic;
}

/******************** Blog card ********************/
.blog__card {
  display: block;
  border: 1px solid;
  padding: 5px;
  margin-bottom: 1ex;
}

.blog__card__title {
  display: block;
  font-size: 1.5em;
}

.blog__card__time {
  display: block;
  font-style: italic;
}

/******************** Inline code snippet ********************/
.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;
}

/******************** Codebox ********************/
.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: "[+]";
}