@import 'variables.less';

figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
	border: @border-thumbinner-screen;
	border-bottom: 0;  // No border to figcaption
	background-color: @background-color-thumbinner-screen;

	> :not( figcaption ) .mw-file-element {
		border: @border-thumbimage-screen;
		background: @background-color-thumbimage-screen;
	}

	> figcaption {
		border: @border-thumbinner-screen;
		border-top: 0;
		background-color: @background-color-thumbinner-screen;

		/* In mw-core the font-size is duplicated, 94% in thumbinner
		 * and again 94% in thumbcaption. 88.4% for font size of the
		 * caption results in the same behavior. */
		font-size: 88.4%;  // @font-size-thumbinner-screen * @font-size-thumbcaption-screen
	}
}

.mw-image-border .mw-file-element {
	border: @border-thumbborder-screen;
}

figure[ typeof~='mw:File/Thumb' ] {
	> figcaption::before {
		content: '';
		width: 15px;
		height: 11px;

		// Default where page content language is not set
		// Allow to flip
		margin: 0 0 0 3px;
		float: right;

		// Defaults for page content language

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

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

	> .mw-file-description,
	> .mw-file-magnify {
		display: block;
		position: relative;

		&::after {
			content: '';
			width: 15px;
			height: 11px;
			position: absolute;
			bottom: -11px;

			// Default where page content language is not set
			// Allow to flip
			right: 6px;
			background-image: @background-image-magnify-ltr;

			// Defaults for page content language

			.mw-content-ltr & {
				/* @noflip */
				right: 6px;
				/* @noflip */
				left: auto;
				/* @noflip */
				background-image: @background-image-magnify-ltr;
			}

			.mw-content-rtl & {
				/* @noflip */
				right: auto;
				/* @noflip */
				left: 6px;
				/* @noflip */
				background-image: @background-image-magnify-rtl;
			}
		}
	}
}