@import "mediawiki.mixins";

// Variables
@iconSize: 1.4em;
@gutterWidth: 1em;

// Mixins
.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
	&.mw-ui-icon:before {
		.background-image-svg(@iconSvg, @iconPng);
	}
}

// Icons
//
// To use icons you must be using a browser that supports pseudo elements.
// This includes support for IE8.
// http://caniuse.com/#feat=css-gencontent
//
// For elements that are intended to have both an icon and text, browsers that
// do not support pseudo-selectors will degrade to text-only.
//
// However, icon-only elements do not yet degrade to text-only elements in these
// browsers.
//
// Styleguide 4.

.mw-ui-icon {
	position: relative;
	min-height: @iconSize;
	min-width: @iconSize;

	// Standalone icons
	//
	// Markup:
	// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
	// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
	//
	// Styleguide 4.1.1.
	&.mw-ui-icon-element {
		@width: @iconSize + ( 2 * @gutterWidth );

		text-indent: -999px;
		overflow: hidden;
		width: @width;
		min-width: @width;
		max-width: @width;
		&:before {
			left: 0;
			right: 0;
			position: absolute;
			margin: 0 @gutterWidth;
		}
	}

	&:before {
		background-position: 50% 50%;
		float: left;
		display: block;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
		min-height: @iconSize;
		content: '';
	}


	// Icons with text
	//
	// Markup:
	// <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
	// <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
	//
	// Styleguide 4.1.2
	&.mw-ui-icon-before {
		&:before {
			width: @iconSize;
			margin-right: @gutterWidth;
		}
	}
}

// Icons
.mw-ui-icon-ok {
	.mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
}