.mw-highlight {
	/* All supported programming languages are written left-to-right */
	/* @noflip */
	direction: ltr;
	unicode-bidi: embed;
	position: relative;

	pre {
		/* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor)
		instead of the browser-default value of 8 */
		-moz-tab-size: 4;
		-o-tab-size: 4;
		tab-size: 4;
	}

	/* Avoid displaying double borders for nested 'code' elements.
	   Before we started using the 'code' tag for inline code snippets,
	   <code><syntaxhighlight enclose=none ...>...</syntaxhighlight></code>
	   was a common pattern. Continue supporting it in existing content. */
	code code& {
		background-color: transparent;
		border: 0;
		padding: 0;
	}

	/* The nested pre already has a background. T126010 */
	div& {
		background-color: inherit;
	}

	/*
	 * Don't show a red border around syntax errors. This behavior may be useful
	 * in code editors, but it is not useful in a wiki environment, especially
	 * given the longstanding habit of using an existing, mostly-compatible lexer
	 * to highlight a language for which no lexer exists.
	 */
	.err {
		border: 0;
	}

	/* Highlight background of whole lines, not just text in them */
	.hll {
		display: block;
	}

	&-lines pre,
	.content &-lines pre { // Increase specificty over mobile selectors
		padding-left: 3.5em;
		box-shadow: inset 2.75em 0 0 #f0f0f0;

		.hll {
			margin-left: -3.5em;
			padding-left: 3.5em;
		}
	}

	.linenos {
		position: absolute;
		left: 0;
		box-sizing: border-box;
		width: 2.75em;
		text-align: right;
		margin-right: 4px;
		background: none;
		color: #333;
		white-space: pre;
		/* Make line numbers non copyable */
		/* TODO: This only exists for cached output and should be removed eventually */
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;

		&:before {
			content: attr( data-line );
		}
	}

	/* To interact better with the 'display: block' above, doesn't affect other uses */
	/* @noflip */
	&.mw-content-ltr .linenos {
		float: left;
	}

	/* @noflip */
	&.mw-content-rtl .linenos {
		float: right;
	}

	a:hover .linenos {
		color: #808080;
	}
}