.sp-real-code-editor-component {
	.sp-real-component-title {
		margin-bottom: 5px;
		margin-top: 0;
	}

	// Matched chrome for both paths: CodeMirror when core loads it, the bare
	// textarea when the user has syntax highlighting switched off.
	.sp-real-code-editor__textarea,
	.CodeMirror {
		border: 1px solid #d1d5db; // gray-300
		border-radius: 2px;
		font-family: Consolas, Monaco, monospace;
		font-size: 13px;
		line-height: 1.5;
	}

	.CodeMirror {
		height: auto;
	}

	.CodeMirror-scroll {
		min-height: 180px;
	}
}

.sp-real-code-editor {
	.CodeMirror-scroll {
		overflow: hidden !important;
	}
}

// Opt-in resizing through the browser's native grip: the fallback textarea
// keeps its own; CodeMirror's wrapper (overflow: hidden from core) qualifies
// for CSS resize too. min/max keep the drag within sane bounds.
.sp-real-code-editor--resizable {

	.sp-real-code-editor__textarea,
	.CodeMirror {
		resize: vertical;
		min-height: 70px;
		max-height: 1000px;
	}

	// The 180px scroller floor above suits auto-height editors only; with a
	// smaller/dragged height it leaves empty scrollable space below the last line.
	.CodeMirror-scroll {
		min-height: 0;
	}
}