/**
 * Vibe WP — code presentation.
 *
 * Inline code, Code blocks, the Terminal / Output block styles, the copy
 * toolbar added by assets/js/code-copy.js, and syntax colors.
 *
 * Colors come from theme.json (palette "code-*" and settings.custom.code.*),
 * so every style variation restyles code as well.
 *
 * Syntax colors: assets/js/code-syntax.js highlights Code blocks that have a
 * language with Highlight.js, whose .hljs-* classes are colored below.
 * theme.json sets eight base colors (comment, reserved, string, number,
 * operator, command, label, function); the finer ones (type, literal,
 * variable, symbol, attribute, meta, built-in, tag, section, bullet,
 * addition, deletion) fall back to them unless a style variation sets them,
 * as the GitHub variation does.
 */

:root {
	--theme-code-bg: var(--wp--preset--color--code-background, #f5f5f5);
	--theme-code-text: var(--wp--preset--color--code-foreground, #444);
	--theme-code-border: var(--wp--custom--code--border, #ccc);
	--theme-code-toolbar: var(--wp--custom--code--toolbar, #ebebeb);
	--theme-code-inline-bg: var(--wp--custom--code--inline-background, #eef0f5);
	--theme-code-inline-text: var(--wp--custom--code--inline-foreground, #3730a3);
	--theme-code-comment: var(--wp--custom--code--comment, #888);
	--theme-code-reserved: var(--wp--custom--code--reserved, royalblue);
	--theme-code-string: var(--wp--custom--code--string, #070);
	--theme-code-number: var(--wp--custom--code--number, #f60);
	--theme-code-operator: var(--wp--custom--code--operator, #e4c);
	--theme-code-command: var(--wp--custom--code--command, #399);
	--theme-code-label: var(--wp--custom--code--label, #c33);
	--theme-code-function: var(--wp--custom--code--function, #7a3db8);
	--theme-code-type: var(--wp--custom--code--type, var(--theme-code-command));
	--theme-code-literal: var(--wp--custom--code--literal, var(--theme-code-reserved));
	--theme-code-variable: var(--wp--custom--code--variable, var(--theme-code-number));
	--theme-code-symbol: var(--wp--custom--code--symbol, var(--theme-code-number));
	--theme-code-attribute: var(--wp--custom--code--attribute, var(--theme-code-operator));
	--theme-code-meta: var(--wp--custom--code--meta, var(--theme-code-operator));
	--theme-code-builtin: var(--wp--custom--code--built-in, var(--theme-code-command));
	--theme-code-tag: var(--wp--custom--code--tag, var(--theme-code-command));
	--theme-code-section: var(--wp--custom--code--section, var(--theme-code-label));
	--theme-code-bullet: var(--wp--custom--code--bullet, var(--theme-code-number));
	--theme-code-addition: var(--wp--custom--code--addition, var(--theme-code-string));
	--theme-code-deletion: var(--wp--custom--code--deletion, var(--theme-code-label));
	--theme-code-terminal-bg: var(--wp--custom--code--terminal-background, #434a54);
	--theme-code-terminal-text: var(--wp--custom--code--terminal-foreground, #e6e8ec);
	--theme-code-terminal-prompt: var(--wp--custom--code--terminal-prompt, #399);

	/* Syntax colors of the dark Terminal blocks (codeformat's light-on-dark palette), used on the site and in the editor. */
	--theme-code-term-comment: #aab3bd;
	--theme-code-term-reserved: #82aaff;
	--theme-code-term-string: #8cc152;
	--theme-code-term-number: #f78c6c;
	--theme-code-term-operator: #f07ce0;
	--theme-code-term-command: #5fd3d3;
	--theme-code-term-label: #ff7a7a;
	--theme-code-term-function: #c792ea;
	--theme-code-term-type: #5fd3d3;
	--theme-code-term-literal: #82aaff;
	--theme-code-term-variable: #f78c6c;
	--theme-code-term-symbol: #f78c6c;
	--theme-code-term-attribute: #f07ce0;
	--theme-code-term-meta: #f07ce0;
	--theme-code-term-builtin: #5fd3d3;
	--theme-code-term-tag: #5fd3d3;
	--theme-code-term-section: #ff7a7a;
	--theme-code-term-bullet: #f78c6c;
	--theme-code-term-addition: #8cc152;
	--theme-code-term-deletion: #ff7a7a;
}

/* ---------- Inline code ---------- */

:not(pre) > code,
:not(pre) > kbd {
	padding: 0.1em 0.35em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	color: var(--theme-code-inline-text);
	background: var(--theme-code-inline-bg);
	border-radius: var(--wp--custom--radius--sm, 3px);
	overflow-wrap: anywhere;
}

/* ---------- Code blocks ---------- */

.wp-block-code {
	padding: 1rem 1.25rem;
	overflow-x: auto;
	border: 1px solid var(--theme-code-border);
	tab-size: 4;
}

/* Scroll long lines instead of wrapping them, so code keeps its shape. */
.wp-block-code code {
	display: block;
	padding: 0;
	font: inherit;
	color: inherit;
	white-space: pre;
	overflow-wrap: normal;
	background: none;
}

/* Opt-in wrapping: "Wrap long lines" in the Code block's settings adds the "is-wrapped" class. */
:is(.wp-block-code.is-wrapped, .code-block.is-wrapped > .wp-block-code) code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/*
 * File name header in the editor (code-filename.js) and on the site without
 * JavaScript. With JavaScript, code-copy.js moves it into the toolbar instead.
 */
:not(.code-block) > .wp-block-code[data-filename]::before {
	content: attr(data-filename);
	display: block;
	margin: -1rem -1.25rem 1rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--theme-code-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--theme-code-toolbar);
	border-bottom: 1px solid var(--theme-code-border);
}

/* Wrapper and toolbar added by code-copy.js. */
.code-block {
	overflow: hidden;
	background: var(--theme-code-bg);
	border: 1px solid var(--theme-code-border);
	border-radius: var(--wp--custom--radius--md, 3px);
}

.code-block > .wp-block-code {
	margin: 0;
	border: 0;
	border-radius: 0;
}

.code-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.5rem;
	padding: 0.25rem 0.5rem 0.25rem 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--theme-code-comment);
	background: var(--theme-code-toolbar);
	border-bottom: 1px solid var(--theme-code-border);
}

.code-language {
	font-weight: 600;
	letter-spacing: 0.03em;
}

.code-filename {
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	color: var(--theme-code-text);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* With a file name, the language becomes a quieter tag beside it. */
.code-filename + .code-language {
	flex-shrink: 0;
	font-weight: 400;
}

.code-filename + .code-language:empty {
	display: none;
}

.code-copy {
	margin-left: auto;
	min-height: 2rem;
	padding: 0.25rem 0.75rem;
	font: inherit;
	color: var(--theme-code-text);
	background: transparent;
	border: 1px solid var(--theme-code-border);
	border-radius: var(--wp--custom--radius--sm, 3px);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition, 180ms ease);
}

.code-copy:hover {
	background: var(--theme-code-bg);
}

.code-copy:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- Terminal and Output block styles ---------- */

/*
 * Terminal blocks are dark in every style variation, so they get a light-on-dark palette of their own.
 * Shell languages count as Terminal too (code-copy.js marks their wrapper; the rule below covers the editor).
 */
.wp-block-code.is-style-terminal,
.wp-block-code:not(.is-style-output):is(.language-bash, .language-bat, .language-batch, .language-cmd, .language-console, .language-dos, .language-powershell, .language-ps1, .language-pwsh, .language-sh, .language-shell, .language-unix, .language-zsh),
.code-block--terminal {
	--theme-code-text: var(--theme-code-terminal-text);
	--theme-code-bg: var(--theme-code-terminal-bg);
	--theme-code-border: #5a626e;
	--theme-code-toolbar: #39404a;
	--theme-code-comment: var(--theme-code-term-comment);
	--theme-code-reserved: var(--theme-code-term-reserved);
	--theme-code-string: var(--theme-code-term-string);
	--theme-code-number: var(--theme-code-term-number);
	--theme-code-operator: var(--theme-code-term-operator);
	--theme-code-command: var(--theme-code-term-command);
	--theme-code-label: var(--theme-code-term-label);
	--theme-code-function: var(--theme-code-term-function);
	--theme-code-type: var(--theme-code-term-type);
	--theme-code-literal: var(--theme-code-term-literal);
	--theme-code-variable: var(--theme-code-term-variable);
	--theme-code-symbol: var(--theme-code-term-symbol);
	--theme-code-attribute: var(--theme-code-term-attribute);
	--theme-code-meta: var(--theme-code-term-meta);
	--theme-code-builtin: var(--theme-code-term-builtin);
	--theme-code-tag: var(--theme-code-term-tag);
	--theme-code-section: var(--theme-code-term-section);
	--theme-code-bullet: var(--theme-code-term-bullet);
	--theme-code-addition: var(--theme-code-term-addition);
	--theme-code-deletion: var(--theme-code-term-deletion);
	--theme-code-terminal-prompt: #5fd3d3;
}

.wp-block-code.is-style-terminal,
.wp-block-code:not(.is-style-output):is(.language-bash, .language-bat, .language-batch, .language-cmd, .language-console, .language-dos, .language-powershell, .language-ps1, .language-pwsh, .language-sh, .language-shell, .language-unix, .language-zsh),
.code-block--terminal,
.code-block--terminal > .wp-block-code {
	color: var(--theme-code-terminal-text);
	background: var(--theme-code-terminal-bg);
}

.code-block--terminal .code-language::before {
	content: "❯ ";
	color: var(--theme-code-terminal-prompt);
}

.code-block--terminal .code-filename + .code-language::before {
	content: none;
}

.wp-block-code.is-style-output,
.code-block--output {
	border-style: dashed;
}

.wp-block-code.is-style-output,
.code-block--output > .wp-block-code {
	color: var(--theme-code-comment);
	background: transparent;
}

.code-block--output {
	background: transparent;
}

/* ---------- Syntax colors ---------- */

/* Highlight.js classes, one rule per theme color (the groups match GROUPS in assets/js/code-syntax.js). */

/* Comments. */
:where(pre, code) :is(.hljs-comment, .hljs-code, .hljs-formula, .hljs-quote) {
	font-style: italic;
	font-weight: 400;
	color: var(--theme-code-comment);
}

/* Keywords, and "this" / "self". */
:where(pre, code) :is(.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-template-variable, .hljs-variable.language_) {
	color: var(--theme-code-reserved);
}

/* Types. */
:where(pre, code) :is(.hljs-type) {
	color: var(--theme-code-type);
}

/* true, false, null. */
:where(pre, code) :is(.hljs-literal) {
	color: var(--theme-code-literal);
}

/* Strings and regular expressions. */
:where(pre, code) :is(.hljs-string, .hljs-regexp, .hljs-link) {
	color: var(--theme-code-string);
}

/* Numbers. */
:where(pre, code) :is(.hljs-number) {
	color: var(--theme-code-number);
}

/* Variables. */
:where(pre, code) :is(.hljs-variable) {
	color: var(--theme-code-variable);
}

/* Symbols. */
:where(pre, code) :is(.hljs-symbol) {
	color: var(--theme-code-symbol);
}

/* Operators. */
:where(pre, code) :is(.hljs-operator) {
	color: var(--theme-code-operator);
}

/* Attributes, properties in data files, CSS selectors. */
:where(pre, code) :is(.hljs-attr, .hljs-attribute, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id) {
	color: var(--theme-code-attribute);
}

/* Preprocessor lines, shebangs, prompts. */
:where(pre, code) :is(.hljs-meta) {
	color: var(--theme-code-meta);
}

/* Built-in functions and objects. */
:where(pre, code) :is(.hljs-built_in) {
	color: var(--theme-code-builtin);
}

/* Tag names and CSS element selectors. */
:where(pre, code) :is(.hljs-name, .hljs-selector-tag, .hljs-selector-pseudo) {
	color: var(--theme-code-tag);
}

/* Function and class names. */
:where(pre, code) :is(.hljs-title) {
	color: var(--theme-code-function);
}

/* Headings (Markdown) and sections. */
:where(pre, code) :is(.hljs-section) {
	color: var(--theme-code-section);
}

/* List bullets. */
:where(pre, code) :is(.hljs-bullet) {
	color: var(--theme-code-bullet);
}

/* Added lines (diffs). */
:where(pre, code) :is(.hljs-addition) {
	color: var(--theme-code-addition);
}

/* Removed lines (diffs). */
:where(pre, code) :is(.hljs-deletion) {
	color: var(--theme-code-deletion);
}

/* Template-string substitutions are plain code. */
:where(pre, code) .hljs-subst {
	color: var(--theme-code-text);
}

/* Highlighted syntax is bold (comments stay regular italic), so syntax is not conveyed by color alone. */
:where(pre, code) [class^="hljs-"]:not(.hljs-comment, .hljs-quote, .hljs-emphasis, .hljs-punctuation, .hljs-subst, .hljs-params) {
	font-weight: 700;
}

:where(pre, code) .hljs-emphasis {
	font-style: italic;
}

/* codeformat classes, in markup pasted into older posts. Scoped to pre/code: .comment and .string would otherwise clash with WordPress classes. */
:where(pre, code) :is(.comment, .comment > *) {
	font-style: italic;
	font-weight: 400;
	color: var(--theme-code-comment);
}

:where(pre, code) :is(.var_blue, .reserved) {
	color: var(--theme-code-reserved);
}

:where(pre, code) :is(.var_green, .string) {
	color: var(--theme-code-string);
}

:where(pre, code) :is(.var_orange, .number) {
	color: var(--theme-code-number);
}

:where(pre, code) :is(.var_magenta, .operator) {
	color: var(--theme-code-operator);
}

:where(pre, code) :is(.var_teal, .command) {
	color: var(--theme-code-command);
}

:where(pre, code) :is(.var_purple, .function) {
	color: var(--theme-code-function);
}

:where(pre, code) :is(.var_red, .label) {
	color: var(--theme-code-label);
}

:where(pre, code) :is(.var_bold, .var_blue, .var_green, .var_orange, .var_magenta, .var_teal, .var_purple, .var_red, .reserved, .string, .number, .command, .operator, .function, .label) {
	font-weight: 700;
}

/* Colors while editing (assets/js/code-syntax-editor.js). Highlights only support colors, not weight or style. */
::highlight(vibe-wp-comment) {
	color: var(--theme-code-comment);
}

::highlight(vibe-wp-reserved) {
	color: var(--theme-code-reserved);
}

::highlight(vibe-wp-type) {
	color: var(--theme-code-type);
}

::highlight(vibe-wp-literal) {
	color: var(--theme-code-literal);
}

::highlight(vibe-wp-string) {
	color: var(--theme-code-string);
}

::highlight(vibe-wp-number) {
	color: var(--theme-code-number);
}

::highlight(vibe-wp-variable) {
	color: var(--theme-code-variable);
}

::highlight(vibe-wp-symbol) {
	color: var(--theme-code-symbol);
}

::highlight(vibe-wp-operator) {
	color: var(--theme-code-operator);
}

::highlight(vibe-wp-attribute) {
	color: var(--theme-code-attribute);
}

::highlight(vibe-wp-meta) {
	color: var(--theme-code-meta);
}

::highlight(vibe-wp-builtin) {
	color: var(--theme-code-builtin);
}

::highlight(vibe-wp-tag) {
	color: var(--theme-code-tag);
}

::highlight(vibe-wp-function) {
	color: var(--theme-code-function);
}

::highlight(vibe-wp-section) {
	color: var(--theme-code-section);
}

::highlight(vibe-wp-bullet) {
	color: var(--theme-code-bullet);
}

::highlight(vibe-wp-addition) {
	color: var(--theme-code-addition);
}

::highlight(vibe-wp-deletion) {
	color: var(--theme-code-deletion);
}

/* Terminal blocks while editing: code-syntax-editor.js uses these for Terminal blocks and shell languages. */
::highlight(vibe-wp-term-comment) {
	color: var(--theme-code-term-comment);
}

::highlight(vibe-wp-term-reserved) {
	color: var(--theme-code-term-reserved);
}

::highlight(vibe-wp-term-string) {
	color: var(--theme-code-term-string);
}

::highlight(vibe-wp-term-number) {
	color: var(--theme-code-term-number);
}

::highlight(vibe-wp-term-operator) {
	color: var(--theme-code-term-operator);
}

::highlight(vibe-wp-term-function) {
	color: var(--theme-code-term-function);
}

::highlight(vibe-wp-term-type) {
	color: var(--theme-code-term-type);
}

::highlight(vibe-wp-term-literal) {
	color: var(--theme-code-term-literal);
}

::highlight(vibe-wp-term-variable) {
	color: var(--theme-code-term-variable);
}

::highlight(vibe-wp-term-symbol) {
	color: var(--theme-code-term-symbol);
}

::highlight(vibe-wp-term-attribute) {
	color: var(--theme-code-term-attribute);
}

::highlight(vibe-wp-term-meta) {
	color: var(--theme-code-term-meta);
}

::highlight(vibe-wp-term-builtin) {
	color: var(--theme-code-term-builtin);
}

::highlight(vibe-wp-term-tag) {
	color: var(--theme-code-term-tag);
}

::highlight(vibe-wp-term-section) {
	color: var(--theme-code-term-section);
}

::highlight(vibe-wp-term-bullet) {
	color: var(--theme-code-term-bullet);
}

::highlight(vibe-wp-term-addition) {
	color: var(--theme-code-term-addition);
}

::highlight(vibe-wp-term-deletion) {
	color: var(--theme-code-term-deletion);
}