@use "~admin-stylesheets/colors";

.nab-code-editor {

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

	&:not(#{&}--is-readonly) .cm-editor::before,
	&:not(#{&}--is-readonly) .cm-editor::after {
		background: colors.$nab-code-editor-background;
		padding-left: 24px;
	}

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

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

	&--with-border {
		border: 1px solid colors.$nab-border;
		border-radius: 2px;

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