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

/*csslint regex-selectors:false */

/*
 * 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-body-content {
	counter-reset: mw-NumberedExtLink;
}

.mw-body-content a[rel~="mw:ExtLink"]:empty:after {
	content: "[" counter( mw-NumberedExtLink ) "]";
	counter-increment: mw-NumberedExtLink;
}

/**
 * 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'] {
	margin: 0;

	a {
		border: 0;
	}

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

	&.mw-halign-left {
		/* @noflip */
		margin: .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 .5em auto;
		display: table;
		clear: none;
		float: none;
	}

	> figcaption {
		display: table-caption;
		caption-side: bottom;
		/* In mw-core the font-size is duplicated, 94% in thumbiner
		   and again 94% in thumbcaption. 88% for font size of the
		   caption results in the same behavior. */
		font-size: 88%;
		line-height: 1.4em;
		text-align: left;

		border: 1px solid #ccc;
		border-top: 0;

		/* taken from .thumbcaption, plus .thumbinner */
		padding: 1px 5px 5px;
		background-color: #f9f9f9;

		table {
			/* reset caption side for tables inside figcaptions */
			caption-side: top;
		}
	}
}

figure[typeof~='mw:Image/Thumb'],
figure[typeof~='mw:Image/Frame'] {
	display: table;
	overflow: auto;
	text-align: center;
	border: 1px solid #ccc;
	border-bottom: 0; // No border to caption
	border-collapse: collapse;
	background-color: #f9f9f9;
	// Default to right alignment. This is needed since Parsoid only specifies the
	// alignment class when the alignment is explicitly set.
	margin: .5em 0 1.3em 1.4em;
	clear: right;
	float: right;
}

figure[typeof~='mw:Image/Thumb'] > *:first-child > img,
figure[typeof~='mw:Image/Frame'] > *:first-child > img,
.mw-image-border > *:first-child > img {
	border: 1px solid #ccc;
	margin: 3px;
}

/* Hide the caption for frameless and plain floated images */
figure[typeof~="mw:Image/Frameless"] > figcaption,
figure[typeof~="mw:Image"] > figcaption { display: none }