/*
 * am-code — a clean code-presentation box (no syntax highlighting; that stays a
 * plugin's job if it's ever needed). Apply to a <pre>:
 *   Gutenberg  → add a "Code" block, type/paste code, then
 *                Block → Advanced → Additional CSS class(es): am-code
 *                (the Code block escapes < > & for you)
 *   Elementor  → an HTML widget with <pre class="am-code">…</pre>
 * Light by default; add --dark for a dark box.
 */

.am-code {
	margin-block: var(--am-space-500);
	padding: var(--am-space-400) var(--am-space-500);
	background-color: var(--am-color-surface-alt);
	border: 1px solid var(--am-color-border);
	border-inline-start: 3px solid var(--am-color-accent);
	border-radius: var(--am-radius-md);
	overflow-x: auto;
	font-family: var(--am-font-mono);
	font-size: var(--am-font-size-200);
	line-height: var(--am-leading-normal);
	color: var(--am-color-text);
	tab-size: 2;
}

.am-code code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
}

.am-code--dark {
	background-color: var(--am-color-code-bg);
	border-color: var(--am-color-code-bar);
	border-inline-start-color: var(--am-color-accent);
	color: var(--am-color-code-text);
}