/**
 * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
 */

/*
 * Auto-numbered external links
 * Parsoid renders those as link without content, and lets CSS do the
 * counting. This way the counting style can be customized, and counts update
 * automatically when content is modified.
 */
.mw-parser-output {
	counter-reset: mw-numbered-ext-link;
}

.mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after {
	content: '[' counter( mw-numbered-ext-link ) ']';
	counter-increment: mw-numbered-ext-link;
}

/**
 * References
 *
 * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags.
 *
 * Markup:
 * Cake is good<sup>[2]</sup>
 * The cake is a lie<span class="reference">[1]</span>
 *
 * Styleguide 1.1.
 */
span.reference {
	font-size: 80%;
	line-height: 1;
	vertical-align: super;
	unicode-bidi: -moz-isolate;
	unicode-bidi: isolate;
}

sup,
sub {
	line-height: 1;
}

/**
 * Block media items
 */
figure[ typeof*='mw:Image' ],
figure[ typeof*='mw:Video' ],
figure[ typeof*='mw:Audio' ] {
	margin: 0;

	a {
		border: 0;
	}

	&.mw-halign-right {
		/* @noflip */
		margin: 0.5em 0 1.3em 1.4em;
		/* @noflip */
		clear: right;
		/* @noflip */
		float: right;
	}

	&.mw-halign-left {
		/* @noflip */
		margin: 0.5em 1.4em 1.3em 0;
		/* @noflip */
		clear: left;
		/* @noflip */
		float: left;
	}

	&.mw-halign-none {
		margin: 0;
		clear: none;
		float: none;
	}

	&.mw-halign-center {
		margin: 0 auto 0.5em auto;
		display: table;
		border-collapse: collapse;
		clear: none;
		float: none;
	}

	/* Hide the caption for frameless and plain floated images */
	> figcaption {
		display: none;
	}
}

figure[ typeof~='mw:Image/Thumb' ],
figure[ typeof~='mw:Video/Thumb' ],
figure[ typeof~='mw:Audio/Thumb' ],
figure[ typeof~='mw:Image/Frame' ],
figure[ typeof~='mw:Video/Frame' ],
figure[ typeof~='mw:Audio/Frame' ] {
	display: table;
	text-align: center;
	border: 1px solid #c8ccd1;
	border-collapse: separate;
	border-spacing: 3px;
	background-color: #f8f9fa;
	width: 1px;  // From https://stackoverflow.com/a/6536025

	// Avoid !important
	&.mw-halign-center {
		border-collapse: separate;
	}

	// Default to right alignment. This is needed since Parsoid only specifies the
	// alignment class when the alignment is explicitly set.
	margin: 0.5em 0 1.3em 1.4em;
	clear: right;
	float: right;

	> *:first-child {
		> img,
		> video {
			border: 1px solid #c8ccd1;
			background: #fff;
		}
	}

	> figcaption {
		display: block;

		/* In mw-core the font-size is duplicated, 94% in thumbiner
		 * and again 94% in thumbcaption. 88.4% for font size of the
		 * caption results in the same behavior. */
		font-size: 88.4%;
		line-height: 1.4em;
		text-align: left;

		/* taken from .thumbcaption, plus .thumbinner */
		padding: 3px;
	}
}

figure[ typeof*='mw:Image/Thumb' ],
figure[ typeof*='mw:Video/Thumb' ],
figure[ typeof*='mw:Audio/Thumb' ] {
	> a:after {
		content: '';
		width: 15px;
		height: 11px;
		margin: 3px;
		margin-bottom: 0;

		.mw-content-ltr & {
			/* @noflip */
			float: right;
			/* @noflip */
			background-image: url( images/magnify-clip-ltr.png );
			/* @noflip */
			background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
		}

		.mw-content-rtl & {
			/* @noflip */
			float: left;
			/* @noflip */
			background-image: url( images/magnify-clip-rtl.png );
			/* @noflip */
			background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
		}
	}
}

/* Same as img.thumbborder in content.css */
.mw-image-border > *:first-child {
	> img,
	> video {
		border: 1px solid #eaecf0;
	}
}

/**
 * Avoid the need to calculate paddings individually
 * https://stackoverflow.com/a/7310398
 */
.mw-gallery-traditional .gallerybox .thumb {
	&:before {
		content: '';
		vertical-align: middle;
		display: inline-block;
		height: 100%;
	}
	> * {
		vertical-align: middle;
		display: inline-block;
	}
}

/**
 * Inline media items
 */
*:first-child {
	> img,
	> video {
		.mw-valign-middle > & {
			vertical-align: middle;
		}
		.mw-valign-baseline > & {
			vertical-align: baseline;
		}
		.mw-valign-sub > & {
			vertical-align: sub;
		}
		.mw-valign-super > & {
			vertical-align: super;
		}
		.mw-valign-top > & {
			vertical-align: top;
		}
		.mw-valign-text-top > & {
			vertical-align: text-top;
		}
		.mw-valign-bottom > & {
			vertical-align: bottom;
		}
		.mw-valign-text-bottom > & {
			vertical-align: text-bottom;
		}
	}
}