//@import "../../../abstracts/abstracts";

div[type="source-code-editor"] {
	width: 100%;
	float: left;
	border: 2px solid $source-code-editor-border-color;
	border-radius: 0 0 10px 10px;
	background: $source-code-editor-background-color;
	overflow-y: auto;
	position: relative;
	resize: vertical;

	.cm-keyword {
		font-weight: 400;
		// color: #0000ff !important;
		color: $source-code-editor-keyword-text-color !important;
		font-weight: bold;
	}
	.cm-builtin {
		// color: black !important;
		// font-weight: bold;
		font-weight: 400; 
		color: $source-code-editor-builtin-text-color !important;
	}
	.cm-tag {
		color: $source-code-editor-tag-text-color;
	}
	.cm-property {
		color: $source-code-editor-property-text-color;
	}
	.cm-atom {
		color: $source-code-editor-atom-text-color;
	}
	.cm-number {
		color: $source-code-editor-number-text-color;
	}
	.cm-bracket {
		color: $source-code-editor-bracket-text-color;
	}
	.cm-attribute {
		color: $source-code-editor-attribute-text-color;
	} 
	// pre.CodeMirror-line {
	// 	width: calc(100% - 24px);
	// 	margin-left: 29px !important;
	// }
	// pre.CodeMirror-line-like {
	// 	width: calc(100% - 24px);
	// 	margin-left: 29px !important;
	// }
	.CodeMirror {
		height: auto;
		min-height: 34px;
		background: $source-code-editor-background-color;
	}
	.CodeMirror-lines {
		color: $source-code-editor-default-text-color !important;
		padding: 0 !important;
	}
	.cm-comment {
		// color: #008000 !important;
		color: $source-code-editor-comment-text-color !important;
	}
	.cm-string {
		// color: #01957b !important;
		color: $source-code-editor-string-text-color !important;
	}
	.CodeMirror-scrollbar-filler {
		background: $source-code-editor-line-number-background-color;
	}
	.CodeMirror-gutters {
		background: $source-code-editor-line-number-background-color;
		border: 0;
	}
	.CodeMirror-linenumber {
		background: $source-code-editor-line-number-background-color;
		color: $source-code-editor-line-number-text-color;
	}
	.CodeMirror-cursor {
		border-left: 2px solid $source-code-editor-cursor-color;
	}
	.CodeMirror-selected {
		background-color: $source-code-editor-selected-background-color !important;
		opacity: 1;
		.cm-comment {
			color: $source-code-editor-selected-text-color !important;
		}
	}
	.CodeMirror-selectedtext {
		color: $modal-input-color !important;
	}
	.cm-variable {
		.CodeMirror-selected {
			color: $modal-input-color !important;
		}
	}
}