/**
 * MediaWiki style sheet for styles relating to thumbnails.
 *
 * 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 'mediawiki.skin.variables.less';
@import 'content.variables.less';
@import 'mediawiki.mixins.less';

/* Thumbnails */

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

.thumbimage {
	background-color: @background-color-base-fixed;
	border: 1px solid @border-color-subtle;
}

.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-width-base @border-style-base #eaecf0;
}

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

	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 */
		.user-select( none );
	}

	/* Directionality-specific styles for thumbnails - their positioning depends on content language */
	.mw-content-ltr & {
		/* @noflip */
		float: right;

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

	.mw-content-rtl & {
		/* @noflip */
		float: left;

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