
figure {
	margin-block: 2rem;
    margin-inline: 1rem;
    padding-bottom: 1.5rem;
}

figure > :not(figcaption) {
	margin-block: 0rem;
}

figure pre {
	margin-inline: 0;
}

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

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

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);
	margin-block-start: 4rem;
}

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

/* 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 {
	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 */
.rendered-pikchr svg path[style*='fill:none;'] {
	fill: var(--theme-bg-light) !important;
	transition: fill linear .5s;
}

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

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

/* arrow heads */
.rendered-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;
}


