figure[data-lang] {
	margin-block: 2rem;
}

figure a.view-svg {
	font-size: 0.85rem;
	font-family: var(--font-body);
}

figure[data-lang] svg {
	display: block;
	margin-inline: auto;
	margin-block: 2rem;

	/* The auto-scaling font-size from typography/*.css does bad things to a lot of SVGs.
	 * The SVGs themselves are inherently scalable, so there is no need for it here anyway. */
	font-size: 16px !important;
}

figure[data-size='medium']:has(svg) {
	margin-block: 4rem;
}

figure[data-size='large'] {
	margin-block: 6rem;
}

figure[data-size='small'] svg {
	max-width: 40rem;
	max-height: min(20rem, 50vw);
}

figure[data-size='medium'] svg {
	max-width: 60rem;
	max-height: min(40rem, 50vw);
}

figure[data-size='large'] svg {
	max-height: min(60rem, 80vw);
}

/* figure[data-lang].big {
	background: var(--theme-bg-main);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	border: 0.25rem var(--theme-line) solid;
	margin: 3rem;
}

figure[data-lang].big svg {
	max-width: none !important;
	max-height: none !important;
} */

/* figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([fill^='var']) { */
figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text {
	fill: var(--theme-text-body);
}

figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) {
	font-family: var(--font-body);
}

[data-lang='bash:samp'] samp {
	display: block;
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 0.1rem solid var(--theme-line);
}

/* === KaTeX === */

.katex-display {
	color: var(--theme-text-body);
}

.katex-display .katex {
	font-size: 1.4rem;
}

/* using "body" here to add specificity, to override styles from katex.min.css */
body .katex-display {
	margin: 2rem;
}

body figure.align-left .katex-display > .katex {
	text-align: left;
}

body figure.align-right .katex-display > .katex {
	text-align: right;
}

:not(.katex-display) > .katex {
	font-size: inherit;
	margin-inline: 0.5rem;
}

.katex span[style~='color:transparent;'] {
	user-select: none;
}

/* === Pikchr */

/* boxes */
figure[data-lang='pikchr'] svg path[style*='fill:none;'] {
	fill: var(--theme-bg-light) !important;
	transition: fill linear .5s;
}

/* lines and boxes */
figure[data-lang='pikchr'] svg path[style*='stroke:rgb(0,0,0);'] {
	stroke: var(--theme-text-body) !important;
}

/* circles */
figure[data-lang='pikchr'] svg circle[style*='stroke:rgb(0,0,0);'] {
	stroke: var(--theme-text-body) !important;
}

/* arrow heads */
figure[data-lang='pikchr'] svg polygon[style='fill:rgb(0,0,0)'] {
	fill: var(--theme-text-body) !important;
	transition: fill linear .5s;
}

/* === Bytefield === */

figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] {
	stroke-width: 2;
}

figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] {
	font-size: 14px;
}

figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] {
	font-size: 16px;
}

figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] {
	font-family: var(--font-monospace);
}

figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] {
	font-family: var(--font-body);
}

figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] {
	stroke-dasharray: 4px, 3px;
}

figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] {
	stroke-dasharray: 2px, 3px;
}