@import (reference) '../../styles/variables';

.fontSource() {
	font: 12px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
		'source-code-pro', monospace;
}

.jodit-source {
	position: relative;
	display: none;
	overflow: auto;
	min-height: 100%;
	flex: auto;
	background-color: var(--color-source-area);

	.jodit-source__mirror-fake {
		min-height: 100%;
	}

	* {
		.fontSource();
	}
}

.jodit-container.jodit-source__mode {
	.jodit-wysiwyg,
	.jodit-wysiwyg_iframe {
		display: none !important;
	}

	.jodit-source {
		display: block !important;
	}
}

.jodit-container.jodit_split_mode {
	.jodit-workplace {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.jodit-wysiwyg,
	.jodit-wysiwyg_iframe,
	.jodit-source {
		display: block !important;
		width: 50%;
		flex: 1;
	}
}

.jodit-source__mirror {
	z-index: 2;
	overflow: auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
	padding: var(--padding-default);
	border: 0;
	margin: 0;
	background: var(--color-source-area);
	box-shadow: none;
	color: #f0f0f0;
	line-height: 1.5;
	outline: none;
	resize: none;
	tab-size: 2em;

	.fontSource();

	white-space: pre-wrap;

	&::selection {
		background: var(--color-selection-area);
	}
}