.CodeMirror,
.snippet-form textarea {
	inline-size: 100%;
	font-family: monospace;
}

.CodeMirror-sizer {
	min-block-size: 300px !important;
	box-sizing: border-box;
	padding-block-end: 1.5em !important;

	&::after {
		position: absolute;
		inset-block-end: 0;
	}

	.snippet-form.php-snippet & {
		padding-block-end: 0 !important;

		&::before {
			content: '<?php';
		}
	}

	.snippet-form.css-snippet & {
		&::before {
			content: '<style>';
		}

		&::after {
			content: '</style>';
		}
	}

	.snippet-form.js-snippet & {
		&::before {
			content: '<script>';
		}

		&::after {
			content: '</script>';
		}
	}

	.snippet-form.html-snippet & {
		&::before {
			content: '<!-- begin content -->';
		}

		&::after {
			content: '<!-- end content -->';
		}
	}
}

.snippet-editor {
	position: relative;
}

.snippet-editor-help {
	inset-inline-end: 5px;
	inset-block-start: 5px;
	position: absolute;

	td {
		&:first-child {
			padding-inline-end: 0.5em;
		}

		@media (width >= 512px) {
			white-space: nowrap;
		}
	}
}

.mac-keyboard-shortcut {
	text-align: end;

	kbd {
		font-family: inherit;
		padding: 0;
		margin: 0;
	}
}

.pc-keyboard-shortcut {
	display: inline-flex;
	align-items: center;
	gap: 3px;

	kbd {
		font-family: inherit;
		margin: 0;
		padding-block: 0;
		padding-inline: 2px;
	}
}