/*#codemirror.dark.css */
#codemirror.dark {
	--bg: #1a1a1a;
	--white: #e7e7e7;
	--blue: #73c1e8;
	--blue-light: #b7e8fe;
	--blue-dark: #73c1e8;
	--pink: #ed7b7b;
	--black: #333;
	--green: #67c06d;
	--selection: hsl(206.68deg 100% 18%);
	--selection-match: hsl(206.68deg 96.8% 17.6%);

	/* CodeMirror tag-based color variables for dark theme */
	--cm-comment: var(--grey6);
	--cm-blockComment: var(--grey8);
	--cm-variableName: var(--white);
	--cm-string: var(--blue);
	--cm-number: var(--blue);
	--cm-bool: var(--blue);
	--cm-propertyName: var(--greyF);
	--cm-null: var(--pink);
	--cm-keyword: var(--salmon);
	--cm-bracket: var(--green);
	--cm-function: var(--green);
	--cm-separator: var(--grey6);
	--cm-punctuation: var(--grey-9);
	--cm-typeName: var(--blue);
	--cm-tagName: var(--blue-light);
	--cm-attributeName: var(--grey-light);
}

#codemirror.dark .cm-gutters::after {
	background-color: #111111ee;
	/* -webkit-mask-image: linear-gradient(to right, black, black, transparent); */
	/* mask-image: linear-gradient(to right, black, black, transparent); */
}

#codemirror.dark .cm-tooltip {
	color: var(--white);
	border-radius: 5px;
	overflow: hidden;
	font-family: "Dosis", Helvetica, sans-serif;
	border: 1px solid var(--grey3);
	font-size: 16px;
	transform: translateY(1px);
}

/* Styles for the gutters (line numbers, etc.) */
#codemirror.dark .cm-gutters {
	background-color: var(--bg);
	color: var(--grey6);
}

#codemirror.dark .cm-activeLineGutter {
	background-color: var(--grey2);
}

#codemirror.dark .cm-searchMatch-selected {
	box-shadow: 0 0 0 1px inset var(--grey9);
}

#codemirror.dark .cm-selectionBackground {
	background-color: var(--grey2);
}

#codemirror.dark .cm-matchingBracket * {
	color: var(--white) !important;
}

#codemirror.dark .cmt-lineComment:hover {
	color: var(--greyA) !important;
}