/**
 * Table of contents
 *
 * - Blockquotes
 * - Code blocks
 * - Summary and Details
 *
 */

@layer components {

:root {
	--code-colour: #005491;
	--shade: rgba(0,0,0,0.03); }

@supports (color: lch(0% 0 0)) {
	:root {
		--code-colour: lch(34% 132 210); }
}

		/* Blockquotes */
blockquote {
	margin-block-end: 2em;
	margin-block-start: 2em;
	max-width: 36em;
	position: relative; }

blockquote::after,
blockquote::before {
	font-family: "Times New Roman", serif;
	font-size: 6em;
	line-height: 0.75;
	opacity: 0.1;
	position: absolute; }

blockquote::after {
	bottom: 0;
	content: close-quote;
	right: -0.2em; }

blockquote::before {
	content: open-quote;
	left: -0.4em;
	top: -0.2em; }

blockquote > p {
	margin-inline-end: 1em; }

blockquote + figcaption {
	margin-block-end: 2em;
	margin-block-start: -1.25em;
	text-align: end; }

		/* Code blocks */
code {
	line-height: 1.5; }

pre > code {
	--height: 1.25em;
	background-image: repeating-linear-gradient(transparent, transparent var(--height), var(--shade) var(--height), var(--shade) calc(var(--height) * 2));
	border-color: var(--code-colour);
	border-style: dashed;
	border-width: 1px;
	display: block;
	font-size: calc(1rem * calc(16 / 18)); /* back to 16px */
	line-height: var(--height);
	margin-block-end: 1em;
	margin-block-start: 1em;
	padding-inline-start: 0.5em;
	tab-size: 4;
	white-space: pre-wrap; }

pre > code::before {
	background-color: var(--code-colour);
	color: white;
	display: block;
	margin-inline-start: -0.5em;
	padding-inline-end: 2em;
	padding-inline-start: 1em;
	white-space: pre-wrap; }

code[data-code-type]::before {
	content: attr(data-code-type); }

code[data-label]::before {
	content: attr(data-label); }

code[data-code-type][data-label]::before {
	content: attr(data-code-type) " - " attr(data-label); }

.good {
	--code-colour: #189818; }

.bad {
	--code-colour: #981818; }

@supports (color: lch(0% 0 0)) {
	.good {
		--code-colour: lch(34% 132 132); }
	.bad {
		--code-colour: lch(34% 132 40); }
}

		/* Summary and Details */
details > :not(summary) {
	margin-inline: 2em 1em; }

details {
	position: relative; }

details:before {
	box-shadow: 0 1px 5px var(--shade);
	content: "";
	display: block;
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: var(--transition, 0); /* fallback to 0, just in case */
	z-index: -1; /* required to keep summary clickable */ }

details:hover:before,
details[open]:before {
	opacity: 1; }

summary > :first-child::before {
	content: '+';
	display: inline-block;
	font-size: 1.2em;
	font-weight: normal;
	height: 1em;
	line-height: 0.85;
	margin-inline-end: 0.3em;
	opacity: 0.5;
	text-align: center;
	transition: transform var(--transition, 0);
	width: 1em; }

details[open] > summary > :first-child::before {
	transform: rotate(45deg); }

summary {
	cursor: pointer;
	padding-inline: 1em; }

summary::-webkit-details-marker {
	display: none; }
summary::marker {
	content: ''; /* Firefox */ }

@media screen {
	:root .dark {
		--shade: rgba(255,255,255,0.1); }
}

} /* END @layer components */