/**
 * Image variation: Code Editor
 *
 * Dark VSCode-like chrome with a sidebar suggestion area on the inline-start.
 * Designed for code-screenshot images. Alt text should be the actual code
 * content or a summary — the chrome is decorative.
 *
 * Implementation: outer wrapper paints the dark background and sidebar.
 * The sidebar area is a thin solid stripe on the inline-start; the image
 * sits to the inline-end side. Layout uses CSS Grid so the sidebar +
 * image align cleanly without needing extra DOM.
 *
 * @package PostFormatsBlockThemes
 * @since 2.1.0
 */

.wp-block-image.is-style-code-editor {
	display: inline-grid;
	grid-template-columns: 2.25rem 1fr;
	max-width: 100%;
	/* Skeuomorph: editor chrome stays dark on any palette. */
	background: var(--pfbt-code-editor-bg, #1e1e1e);
	color: var(--pfbt-code-editor-fg, #fafafa);
	border-radius: var(--wp--preset--border-radius--sm, 0.375rem);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--large, 0 10px 30px rgba(0, 0, 0, 0.12));
	position: relative;
	padding-block-start: 2rem;
}

.wp-block-image.is-style-code-editor::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2rem;
	background: rgba(255, 255, 255, 0.05);
	border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-image.is-style-code-editor::after {
	content: "";
	grid-column: 1;
	grid-row: 1;
	background: rgba(0, 0, 0, 0.2);
	border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-image.is-style-code-editor img {
	grid-column: 2;
	grid-row: 1;
	display: block;
	width: 100%;
	min-width: 0;
}

.wp-block-image.is-style-code-editor figcaption {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--wp--preset--spacing--small, 0.75rem) var(--wp--preset--spacing--medium, 1.5rem);
	background: rgba(0, 0, 0, 0.25);
	border-block-start: 1px solid rgba(255, 255, 255, 0.08);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--pfbt-code-editor-fg, #fafafa);
}

@media print {
	.wp-block-image.is-style-code-editor {
		background: transparent;
		color: currentColor;
		border: 1px solid currentColor;
		box-shadow: none;
	}
	.wp-block-image.is-style-code-editor::before,
	.wp-block-image.is-style-code-editor::after {
		display: none;
	}
}