/**
 * MediaWiki style sheet for styles relating to thumbnails.
 * For legacy reasons this also contains the floatleft, tleft, tright and floatright classes.
 *
 * CSS that does not relate to styling thumbnails generated by the parser in a vanilla
 * MediaWiki install do not belong here.
 */

/* stylelint-disable selector-class-pattern */
@import 'variables.less';

/* Thumbnails */

div.thumbinner {
	border: @border-thumbinner-screen;
	background-color: @background-color-thumbinner-screen;
	font-size: @font-size-thumbinner-screen;
}

.thumbimage {
	background-color: @background-color-thumbimage-screen;
	border: @border-thumbimage-screen;
}

.thumbcaption {
	/* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
	border: 0;
	font-size: @font-size-thumbcaption-screen;
}

.thumbborder {
	border: @border-thumbborder-screen;
}

.magnify {
	/* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
	float: right;
	margin-left: 3px;

	a {
		display: block;
		/* Hide the text… */
		text-indent: 15px;
		white-space: nowrap;
		overflow: hidden;
		/* …and replace it with the image */
		width: 15px;
		height: 11px;
		/* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
		background-image: @background-image-magnify-ltr;
		/* Don't annoy people who copy-paste everything too much */
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
}

/* Directionality-specific styles for thumbnails - their positioning depends on content language */

/* @noflip */
.mw-content-ltr .thumbcaption {
	text-align: left;
}

/* @noflip */
.mw-content-rtl .thumbcaption {
	text-align: right;
}

/* @noflip */
.mw-content-ltr .magnify {
	margin-left: 3px;
	margin-right: 0;
	float: right;
}

/* @noflip */
.mw-content-ltr .magnify a {
	background-image: @background-image-magnify-ltr;
}

/* @noflip */
.mw-content-rtl .magnify {
	margin-left: 0;
	margin-right: 3px;
	float: left;
}

/* @noflip */
.mw-content-rtl .magnify a {
	background-image: @background-image-magnify-rtl;
}