/**
 * Code block styles.
 *
 * Loaded only on pages where a Code block is rendered (and in the
 * editor), via highrise_enqueue_block_styles() in functions.php.
 *
 * The colours, font, padding and corners are set in theme.json. This
 * file adds the parts of the mockup's code window that theme.json cannot
 * express: the title bar with its three dots, and the shadow.
 */
.wp-block-code {
	/* Soft shadow below the window, Ink at 50%, as in the mockup. */
	box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent);

	/* Long lines scroll inside the window rather than breaking the layout. */
	overflow-x: auto;

	/* Lets the language label (::after, below) be placed in the title bar. */
	position: relative;
}

/* Keep each line of code on one line, so the code keeps its shape. */
.wp-block-code code {
	white-space: pre;
	overflow-wrap: normal;
}

/**
 * The window title bar.
 *
 * A ::before is stretched across the top of the block by using negative
 * margins equal to the block's padding (spacing size 50, set in
 * theme.json), with a faint bottom border.
 *
 * The three dots are drawn as three radial gradients on its background,
 * so no extra HTML is needed. Each gradient is an 11px circle, positioned
 * 18px apart, starting at the left padding.
 */
.wp-block-code::before {
	content: "";
	display: block;
	height: 39px;
	margin: calc(-1 * var(--wp--preset--spacing--50)) calc(-1 * var(--wp--preset--spacing--50)) var(--wp--preset--spacing--50);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
	background-image:
		radial-gradient(circle closest-side, #ff5f57 96%, transparent 100%), /* Red. */
		radial-gradient(circle closest-side, #febc2e 96%, transparent 100%), /* Yellow. */
		radial-gradient(circle closest-side, #28c840 96%, transparent 100%); /* Green. */
	background-size: 11px 11px;
	background-repeat: no-repeat;
	background-position:
		var(--wp--preset--spacing--40) center,
		calc(var(--wp--preset--spacing--40) + 18px) center,
		calc(var(--wp--preset--spacing--40) + 36px) center;
}

/**
 * The language label.
 *
 * When a language is picked in the block's sidebar, the Syntax-highlighting
 * Code Block plugin adds a data-shcb-language-name attribute to the block
 * (for example "PHP"). This shows that name at the right-hand end of the
 * title bar, opposite the three dots, like the file type in a code editor.
 *
 * The text after the slash is the alternative text for screen readers. It
 * is empty because the plugin already gives screen readers the language,
 * so the name is not read out twice. If no language is picked, the
 * attribute is missing and nothing is shown.
 */
.wp-block-code[data-shcb-language-name]::after {
	content: attr(data-shcb-language-name);
	content: attr(data-shcb-language-name) / "";
	position: absolute;
	top: 0;
	right: var(--wp--preset--spacing--40);
	height: 39px; /* Matches the title bar height. */
	line-height: 39px;
	color: #565c7e; /* Muted, to match the line numbers. */
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/**
 * Syntax highlighting.
 *
 * The Syntax-highlighting Code Block plugin wraps each part of the code
 * in a span with an hljs-* class (hljs-keyword, hljs-string and so on).
 * Its own stylesheet is turned off in functions.php, so the rules below
 * do two jobs: they restore the plugin's layout rules that we still need,
 * and they colour the code to match the mockup.
 *
 * Plain text inherits the block's Mist text colour from theme.json.
 */

/* Token colours, taken from the code window in the mockup. */
.wp-block-code :is(.hljs-keyword, .hljs-built_in, .hljs-literal, .hljs-type, .hljs-selector-tag) {
	color: #7d93ff; /* Soft blue. */
}

.wp-block-code :is(.hljs-title, .hljs-section, .hljs-name, .hljs-attr, .hljs-selector-class, .hljs-selector-id) {
	color: var(--wp--preset--color--mint);
}

.wp-block-code :is(.hljs-string, .hljs-number, .hljs-regexp, .hljs-symbol) {
	color: #f2b8a2; /* Peach. */
}

.wp-block-code :is(.hljs-comment, .hljs-quote, .hljs-meta, .hljs-punctuation) {
	color: #565c7e; /* Muted. */
}

.wp-block-code :is(.hljs-variable, .hljs-params, .hljs-template-variable) {
	color: var(--wp--preset--color--mist);
}

/**
 * Line layout.
 *
 * When line numbers or highlighted lines are used, the plugin adds the
 * shcb-code-table class and puts each line in a .shcb-loc element. These
 * rules lay the code out as a table so the numbers sit in their own
 * column and line up with each line.
 */
.wp-block-code .shcb-code-table {
	display: table;
	width: 100%;
}

.wp-block-code .shcb-code-table > .shcb-loc {
	display: table-row;
}

.wp-block-code .shcb-code-table > .shcb-loc > span {
	display: table-cell;
}

/**
 * Line numbers.
 *
 * Turned on per block with "Show line numbers" in the block's sidebar.
 * A CSS counter numbers each line, shown as 01, 02 and so on with
 * decimal-leading-zero, as in the mockup. user-select: none stops the
 * numbers being copied along with the code.
 */
.wp-block-code .shcb-line-numbers {
	counter-reset: line;
}

.wp-block-code .shcb-line-numbers > .shcb-loc {
	counter-increment: line;
}

.wp-block-code .shcb-line-numbers > .shcb-loc::before {
	content: counter(line, decimal-leading-zero);
	display: table-cell;
	width: 1%; /* Shrink the column to fit the numbers. */
	padding-inline-end: 16px;
	color: #565c7e; /* Muted, to match comments. */
	text-align: right;
	user-select: none;
}

/**
 * Highlighted lines.
 *
 * Lines picked in the block's "Highlighted lines" setting are output as
 * <mark> elements. They get a Navy Light background instead of the
 * browser's yellow highlight.
 */
.wp-block-code mark.shcb-loc {
	background-color: var(--wp--preset--color--navy-light);
	color: inherit;
}

/* Let long lines wrap when "Wrap lines" is turned on for the block. */
.wp-block-code code.shcb-wrap-lines {
	white-space: pre-wrap;
}

/**
 * The language label.
 *
 * The plugin adds a label naming the language for screen readers. It is
 * hidden visually but kept available to assistive technology.
 */
.wp-block-code .shcb-language {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}