@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';

@placeholderBackgroundColor: @grayLightest;

// Only applies to mobile Minerva. For this reason these rules should likely be moved to
// `mobile.init.styles` either as a skin style or default style.
.lazy-image-placeholder {
	background-color: @placeholderBackgroundColor;

	// If the placeholder itself is inside an inline element do not use block
	// See https://phabricator.wikimedia.org/T143558
	// and https://phabricator.wikimedia.org/T144567
	li &,
	span & {
		display: inline-block;
	}

	// The image placeholder for shouldn't show for no-js devices
	.client-nojs & {
		display: none;
	}

	// In order to avoid reflows placeholder needs to be inline-block
	// Otherwise display block will always take up the full line
	// instead of allowing text before and after
	// see T146298
	display: inline-block;
	// See T199351#6370886
	vertical-align: middle;
}

.content {
	a > .lazy-image-placeholder {
		// make sure that images in articles don't cause a horizontal scrollbar
		// on small screens
		max-width: 100% !important;
	}
}

@media print {
	.lazy-image-placeholder {
		page-break-inside: avoid;
	}
}