/**
 * Prism colour theme for the (hijacked) core/code block.
 *
 * Token colours are driven by CSS custom properties so a single stylesheet
 * can provide the "Auto" (prefers-color-scheme), "Light" and "Dark" themes
 * selectable per block. Everything is scoped under `.rb-code` so it never
 * leaks onto other Prism instances.
 */

/* ---- Theme palettes -------------------------------------------------- */
.wp-block-code.rb-code {
	--rbc-bg: #f6f8fa;
	--rbc-fg: #1f2328;
	--rbc-border: #d0d7de;
	--rbc-comment: #6a737d;
	--rbc-punctuation: #24292e;
	--rbc-prop: #005cc5;
	--rbc-string: #22863a;
	--rbc-keyword: #d73a49;
	--rbc-operator: #b21a1a;
	--rbc-function: #6f42c1;
	--rbc-class: #6f42c1;
	--rbc-variable: #e36209;
	--rbc-selector: #22863a;
	--rbc-line-number: #9aa4af;
	--rbc-line-divider: #d0d7de;
	--rbc-highlight-bg: rgba(255, 221, 87, 0.18);
	--rbc-highlight-accent: #f1c40f;
}

/* "Auto" follows the OS/browser when no explicit theme is chosen */
@media (prefers-color-scheme: dark) {
	.wp-block-code.rb-code:not(.rb-code-theme-light) {
		--rbc-bg: #1d1f21;
		--rbc-fg: #c5c8c6;
		--rbc-border: #2d2f31;
		--rbc-comment: #7c7c7c;
		--rbc-punctuation: #c5c8c6;
		--rbc-prop: #de935f;
		--rbc-string: #b5bd68;
		--rbc-keyword: #b294bb;
		--rbc-operator: #8abeb7;
		--rbc-function: #81a2be;
		--rbc-class: #f0c674;
		--rbc-variable: #cc6666;
		--rbc-selector: #cc6666;
		--rbc-line-number: #5c6370;
		--rbc-line-divider: #2d2f31;
		--rbc-highlight-bg: rgba(255, 255, 255, 0.07);
		--rbc-highlight-accent: #f0c674;
	}
}

/* Explicit light (wins over auto/dark) */
.wp-block-code.rb-code.rb-code-theme-light {
	--rbc-bg: #f6f8fa;
	--rbc-fg: #1f2328;
	--rbc-border: #d0d7de;
	--rbc-comment: #6a737d;
	--rbc-punctuation: #24292e;
	--rbc-prop: #005cc5;
	--rbc-string: #22863a;
	--rbc-keyword: #d73a49;
	--rbc-operator: #b21a1a;
	--rbc-function: #6f42c1;
	--rbc-class: #6f42c1;
	--rbc-variable: #e36209;
	--rbc-selector: #22863a;
	--rbc-line-number: #9aa4af;
	--rbc-line-divider: #d0d7de;
	--rbc-highlight-bg: rgba(255, 221, 87, 0.18);
	--rbc-highlight-accent: #f1c40f;
}

/* Explicit dark */
.wp-block-code.rb-code.rb-code-theme-dark {
	--rbc-bg: #1d1f21;
	--rbc-fg: #c5c8c6;
	--rbc-border: #2d2f31;
	--rbc-comment: #7c7c7c;
	--rbc-punctuation: #c5c8c6;
	--rbc-prop: #de935f;
	--rbc-string: #b5bd68;
	--rbc-keyword: #b294bb;
	--rbc-operator: #8abeb7;
	--rbc-function: #81a2be;
	--rbc-class: #f0c674;
	--rbc-variable: #cc6666;
	--rbc-selector: #cc6666;
	--rbc-line-number: #5c6370;
	--rbc-line-divider: #2d2f31;
	--rbc-highlight-bg: rgba(255, 255, 255, 0.07);
	--rbc-highlight-accent: #f0c674;
}

.wp-block-code.rb-code {
	position: relative; /* required by the line-highlight plugin */
	background: var(--rbc-bg);
	color: var(--rbc-fg);
	border: 1px solid var(--rbc-border);
	border-radius: 8px;
	padding: 1em 1.25em;
	overflow: auto;
	tab-size: 4;
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
		'Liberation Mono', monospace;
	font-size: 0.875em;
	line-height: 1.6;
}

.wp-block-code.rb-code > code {
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	white-space: pre;
	tab-size: inherit;
	padding: 0;
}

/* Optional line wrapping. Works together with line numbers because the
   numbers are rendered per line (see the line-number section below). */
.wp-block-code.rb-code.rb-code--wrap,
.wp-block-code.rb-code.rb-code--wrap > code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.wp-block-code.rb-code.rb-code--wrap {
	overflow-x: hidden;
}

.rb-code .token.comment,
.rb-code .token.prolog,
.rb-code .token.doctype,
.rb-code .token.cdata {
	color: var(--rbc-comment);
	font-style: italic;
}

.rb-code .token.punctuation {
	color: var(--rbc-punctuation);
}

.rb-code .token.property,
.rb-code .token.tag,
.rb-code .token.boolean,
.rb-code .token.number,
.rb-code .token.constant,
.rb-code .token.symbol,
.rb-code .token.deleted {
	color: var(--rbc-prop);
}

.rb-code .token.selector,
.rb-code .token.attr-name {
	color: var(--rbc-selector);
}

.rb-code .token.string,
.rb-code .token.char,
.rb-code .token.builtin,
.rb-code .token.attr-value,
.rb-code .token.inserted {
	color: var(--rbc-string);
}

.rb-code .token.operator,
.rb-code .token.entity,
.rb-code .token.url {
	color: var(--rbc-operator);
}

.rb-code .token.atrule,
.rb-code .token.keyword {
	color: var(--rbc-keyword);
}

.rb-code .token.function {
	color: var(--rbc-function);
}

.rb-code .token.class-name {
	color: var(--rbc-class);
}

.rb-code .token.regex,
.rb-code .token.important,
.rb-code .token.variable {
	color: var(--rbc-variable);
}

.rb-code .token.important,
.rb-code .token.bold {
	font-weight: 700;
}

.rb-code .token.italic {
	font-style: italic;
}

/* ---- Line numbers (custom, wrap-friendly) ---------------------------- */

/* Each logical line is wrapped in `.rb-line` by the frontend script and the
   number is drawn via a CSS counter inside the code's left padding. Because
   the number belongs to its own line box, it stays correctly aligned even
   when the line wraps onto multiple visual rows. */
.wp-block-code.rb-code.rb-code--linenums > code {
	display: block;
	position: relative;
	counter-reset: rb-line;
	padding-left: 3.5em;
	background-image: linear-gradient(
		var(--rbc-line-divider),
		var(--rbc-line-divider)
	);
	background-repeat: no-repeat;
	background-size: 1px 100%;
	background-position: 3em 0;
}

.wp-block-code.rb-code.rb-code--linenums .rb-line {
	display: block;
	min-height: 1.6em;
	counter-increment: rb-line;
}

.wp-block-code.rb-code.rb-code--linenums .rb-line::before {
	content: counter(rb-line);
	position: absolute;
	left: 0;
	width: 2.6em;
	padding-right: 0.9em;
	box-sizing: border-box;
	text-align: right;
	color: var(--rbc-line-number);
	-webkit-user-select: none;
	user-select: none;
}

.rb-code .line-highlight {
	background: var(--rbc-highlight-bg);
	box-shadow: inset 3px 0 0 var(--rbc-highlight-accent);
}

.editor-styles-wrapper .wp-block-code.rb-code > code {
	white-space: pre-wrap;
}

.rb-code__wrap {
	position: relative;
}

.rb-code__copy {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.4em 0.6em;
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s ease, background-color 0.15s ease,
		color 0.15s ease, border-color 0.15s ease;
}

.rb-code__copy:hover,
.rb-code__copy:focus-visible {
	opacity: 1;
}

.rb-code__copy svg {
	display: block;
}

.rb-code__copy-label {
	white-space: nowrap;
}

.rb-code__wrap--dark .rb-code__copy {
	color: #e6e6e6;
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.2);
}

.rb-code__wrap--dark .rb-code__copy:hover,
.rb-code__wrap--dark .rb-code__copy:focus-visible {
	background-color: rgba(255, 255, 255, 0.22);
}

.rb-code__wrap--light .rb-code__copy {
	color: #24292e;
	background-color: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.12);
}

.rb-code__wrap--light .rb-code__copy:hover,
.rb-code__wrap--light .rb-code__copy:focus-visible {
	background-color: rgba(0, 0, 0, 0.12);
}

.rb-code__copy.rb-code__copy--done {
	color: #1f9d55;
	border-color: currentColor;
	opacity: 1;
}

.rb-code__copy.rb-code__copy--error {
	color: #d64545;
	border-color: currentColor;
	opacity: 1;
}