@use "~admin-stylesheets/colors";

.nab-code-editor {

	.cm-editor::before,
	.cm-editor::after {
		padding: 4px 8px;
		color: colors.$color__text-disabled;
		box-sizing: border-box;
		font-family: monospace;
	}

	&:not(#{&}--is-readonly) .cm-editor::before,
	&:not(#{&}--is-readonly) .cm-editor::after {
		background: linear-gradient(
			to right,
			#f5f5f5 0,
			#f5f5f5 18px,
			#ddd 18px,
			#ddd 19px,
			#fff 19px,
			#fff 100%
		);
		padding-left: 24px;
	}

	.cm-editor::before {
		content: var(--nab-code-before);
	}

	.cm-editor::after {
		content: var(--nab-code-after);
	}

	&--with-border {
		border: 1px solid #949494;
		border-radius: 2px;

		&:focus-within {
			border-color: var(--wp-admin-theme-color);
		}
	}
}