@import 'mediawiki.skin.variables.less';

@transparentPNG: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);

.vector-icon {
	// By default use a transparent PNG. This is important for icons loaded via JavaScript, as without this
	// the icon will appear as a black square until loaded.
	// IMPORTANT: Do not remove this until the appearance menu icon (mw-ui-icon-wikimedia-appearance)
	// and table of content expand icons (.mw-ui-icon-wikimedia-expand) are render blocking
	// as without that this will result in the display of a black square and repeat of T387351.
	// FIXME: this is inconsistent with the mobile site which shows black squares for
	// icons that haven't been loaded at the wrong time or that are missing.
	// This code is incorrect. Minerva exhibits the correct behaviour.
	-webkit-mask-image: @transparentPNG;
	mask-image: @transparentPNG;
	.cdx-mixin-css-icon( 'none' );
}

/* If the class contains the string -progressive convert to a progressive icon.
This impacts language button and talk add topic. */
.vector-icon[ class*='-progressive' ] {
	background-color: @color-progressive;
}