1.mw-highlight {
2	unicode-bidi: embed;
3
4	pre {
5		/* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor)
6		instead of the browser-default value of 8 */
7		-moz-tab-size: 4;
8		tab-size: 4;
9		// Position .linenos relative to this container.
10		// Do not put this on the main container as it is 100%
11		// and causes it to stack above floated elements (T272853)
12		position: relative;
13	}
14
15	/* Avoid displaying double borders for nested 'code' elements.
16	   Before we started using the 'code' tag for inline code snippets,
17	   <code><syntaxhighlight enclose=none ...>...</syntaxhighlight></code>
18	   was a common pattern. Continue supporting it in existing content. */
19	code code& {
20		background-color: transparent;
21		border: 0;
22		padding: 0;
23	}
24
25	/* The nested pre already has a background. T126010 */
26	div& {
27		background-color: inherit;
28	}
29
30	/*
31	 * Don't show a red border around syntax errors. This behavior may be useful
32	 * in code editors, but it is not useful in a wiki environment, especially
33	 * given the longstanding habit of using an existing, mostly-compatible lexer
34	 * to highlight a language for which no lexer exists.
35	 */
36	.err {
37		border: 0;
38	}
39
40	/* Highlight background of whole lines, not just text in them */
41	.hll {
42		display: block;
43	}
44
45	&-lines pre,
46	.content &-lines pre { // Increase specificty over mobile selectors
47
48		.mw-content-ltr& {
49			/* @noflip */
50			padding-left: 3.5em;
51			/* @noflip */
52			box-shadow: inset 2.75em 0 0 #f0f0f0;
53
54			.hll {
55				/* @noflip */
56				margin-left: -3.5em;
57				/* @noflip */
58				padding-left: 3.5em;
59			}
60		}
61
62		/* stylelint-disable-next-line no-descending-specificity */
63		.mw-content-rtl& {
64			/* @noflip */
65			padding-right: 3.5em;
66			/* @noflip */
67			box-shadow: inset -2.75em 0 0 #f0f0f0;
68
69			/* stylelint-disable-next-line no-descending-specificity */
70			.hll {
71				/* @noflip */
72				margin-right: -3.5em;
73				/* @noflip */
74				padding-right: 3.5em;
75			}
76		}
77	}
78
79	.linenos {
80		position: absolute;
81		box-sizing: border-box;
82		width: 2.75em;
83		background: none;
84		color: #72777d;
85		white-space: pre;
86
87		.mw-content-ltr& {
88			/* @noflip */
89			left: 0;
90			/* @noflip */
91			text-align: right;
92			/* @noflip */
93			margin-right: 4px;
94		}
95
96		.mw-content-rtl& {
97			/* @noflip */
98			right: 0;
99			/* @noflip */
100			text-align: left;
101			/* @noflip */
102			margin-left: 4px;
103		}
104
105		&:before {
106			content: attr( data-line );
107		}
108	}
109
110	a:hover .linenos,
111	.hll a .linenos {
112		color: #333;
113	}
114}
115