@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables.less';

// mediawiki.ui icon specific variables
@margin-icon: 2 * @width-icon-gutter;
@width-icon--legacy: @size-icon + @margin-icon;
@size-icon--large: ( @size-icon * 1.75 ) + @margin-icon;

// Icons
//
// To use icons you must be using a browser that supports pseudo elements.
// https://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.

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

	// If an inline element has been marked as a mw-ui-icon element it must be inline-block
	span& {
		display: inline-block;
	}

	// Standalone icons
	//
	// Markup:
	// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br>
	// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br>
	// <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button>
	&.mw-ui-icon-element {
		text-indent: -999px;
		overflow: hidden;
		width: @width-icon--legacy;
		min-width: @width-icon--legacy;
		max-width: @width-icon--legacy;

		&:before {
			left: 0;
			right: 0;
			position: absolute;
			margin: 0 @width-icon-gutter;
		}

		&.mw-ui-icon-large {
			width: @size-icon--large;
			min-width: @size-icon--large;
			max-width: @size-icon--large;
			line-height: @size-icon--large;
			min-height: @size-icon--large;

			&:before {
				min-height: @size-icon--large;
			}
		}
	}

	&.mw-ui-icon-before:before,
	&.mw-ui-icon-element:before {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		float: left;
		display: block;
		min-height: @size-icon;
		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>
	&.mw-ui-icon-before {
		&:before {
			position: relative;
			width: @size-icon;
			margin-right: @width-icon-gutter;
		}
	}

	// Icons small for elements like indicators
	//
	// Markup:
	// <div class="mw-ui-icon mw-ui-icon-small mw-ui-icon-help"></div>
	&.mw-ui-icon-small:before {
		background-size: 66.67% auto; // 66.67% of 24px equals 16px
	}
}