@import 'mediawiki.skin.variables.less';
@import '../mmv.mixins.less';

.mw-mmv-image {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	.unselectable;

	&.empty {
		display: none;
	}

	&.error {
		background-color: #202122;

		a,
		a:visited {
			cursor: pointer;
			color: #3472e5;
		}
	}

	.error-box {
		background: url( img/error-media-icon.svg ) no-repeat 0 0;
		background-size: 110px 110px;
		position: absolute;
		left: 50%;
		margin-left: -350px;
		top: 50%;
		margin-top: -100px;
		padding: 0 20px 0 160px;
		color: #fff;
		max-width: 520px;

		.mw-mmv-error-text {
			font-size: 48px;
		}

		.mw-mmv-error-description {
			margin-top: 30px;
			font-size: 22px;
		}
	}
}

.mw-mmv-image img {
	display: block;
	margin-right: auto;
	margin-left: auto;
	cursor: pointer;
	/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
	cursor: zoom-in;

	&.blurred {
		/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
		-webkit-filter: blur( 3px );
		/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
		filter: blur( 3px );
		opacity: 0.8;
	}

	/* Whitelist file types that are potentially transparent.
	   We don't set it for other file types because Media Viewer plugins
	   can find that undesirable (eg. 3d) */
	&.gif,
	&.png,
	&.webp,
	&.svg,
	&.tiff,
	&.tif {
		background: url( checker.png ) repeat;
	}

	&.mw-mmv-dialog-is-open {
		cursor: default;
	}

	.metadata-panel-is-open & {
		cursor: pointer;
	}
}

.mw-mmv-image.empty img {
	display: none;
}

.metadata-panel-is-open .mw-mmv-image-wrapper {
	cursor: pointer;
}