@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;
}