/*
 * Citizen
 *
 * Module: mediawiki.skinning.content.media-screen
 * Version: REL1_43
 */

figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ],
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
	> .mw-file-description {
		display: inline-block;
		overflow: hidden;

		.mw-file-element,
		source {
			contain: strict;
			transition: var( --transition-hover );
			transition-property: transform;

			// Prevent constraining image width in tables
			table & {
				max-width: none;
			}
		}

		// Add affordance to replace magnify icon
		&:hover:not( .lazy ):not( .new ) {
			.mw-file-element,
			source {
				transform: var( --transform-image-hover );
			}
		}
	}
}

figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
	> .mw-file-description,
	> span:first-child {
		display: block;
		border-radius: var( --border-radius-base );
	}

	// Broken file styles
	> a:first-child:not( .mw-file-description ) {
		&:hover {
			color: var( --color-inverted-primary );
			background-color: var( --color-progressive--hover );
		}

		&:active {
			color: var( --color-inverted-primary );
			background-color: var( --color-progressive--active );
		}

		&.new {
			padding: var( --space-sm );
			border: var( --border-width-base ) solid var( --border-color-interactive );
			border-style: dashed;

			&:hover {
				background-color: var( --color-destructive--hover );
			}

			&:active {
				background-color: var( --color-destructive--active );
			}
		}
	}
}

body.skin--responsive .mw-parser-output {
	.noresize figure,
	figure.noresize {
		img.mw-file-element,
		source {
			max-width: none;
		}
	}
}