/**
* MediaWiki UI icons specification 2.0
*
* Applies the MinervaNeue icon styles, adding more mobile-friendly
* features like increased touch-area sizes and highlights.
*
* - mw-ui-icon = base class. 20px square with icon.
* - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states.
* - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text.
*   Labels should be placed in a separate element beside the icon.
*
*/

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

// == Icons ==
@icon-touch-area-sm: 32; // This is also used for touch areas at DESKTOP resolutions.
@icon-touch-area-md: 44;
@font-size-browser: 16; // Assumed browser default of `16px`.
// Medium icon
@icon-glyph-size-md: 20;
@icon-size-md: unit( ( @icon-glyph-size-md / @font-size-browser ), em );
@icon-padding-md: unit( ( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser ), em );

// Includes 2px mw-ui-button border
@icon-padding-md-button: unit( ( ( @icon-touch-area-md - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser ), em );
// At desktop resolution the icon touch area will shrink from @icon-touch-area-md to @icon-touch-area-sm
@icon-padding-md-button--desktop: unit( ( ( @icon-touch-area-sm - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser ), em );

// Colors
@icon-color: @color-subtle;
@margin-icon-md-labelled: 6px;

/**
* Mixin for a pseudo-element with a background image.
*/
.mixin-background-square( @size ) {
	// Sizing properties
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	// In case display: block is overridden and display gets set to `flex`
	// because of inheritance T233521.
	min-width: @size;
	min-height: @size;

	// Background properties.
	background-repeat: no-repeat;
	// Using static value instead of `background-size: contain` because of T233521#5545513.
	background-size: @size @size;
	background-position: center;
}

/**
* A standalone 20px square with screen-reader text. Contains a :before element
* to house the icon as a background image. Total size is increased with padding via
* `box-sizing: content-box`. This separates control over size of icon vs the size of
* the touch-area.
*/
.mw-ui-icon {
	// reset font-size so the "em" value is relative to the more
	// predictable rem font size ...and no rems because we can't have nice things.
	font-size: initial;

	// sizing
	position: relative;
	display: inline-block;

	// this is important for increasing the size via padding. Overrides `.view-border-box *`.
	/* stylelint-disable declaration-no-important */
	box-sizing: content-box !important;
	width: @icon-size-md;
	height: @icon-size-md;

	// Guarding against flex-box variability.
	min-width: @icon-size-md;
	min-height: @icon-size-md;
	flex-basis: @icon-size-md;
	/* stylelint-enable declaration-no-important */

	// alignment
	vertical-align: middle;
	line-height: 0;

	// Overflow ellipsis.
	.text-overflow( @visible: false );

	// resetting styles for <button> elements
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	margin: 0;
	padding: 0;

	&:not( .mw-ui-button ) {
		border: 0;
	}

	&::before {
		.mixin-background-square( @icon-size-md );
	}

	// Use `not` selector to ensure we don't add space for machine readable markup. More info: T307233
	& + span:not( :empty ) {
		// Margin is added to separate accompanying text.
		margin-left: @margin-icon-md-labelled;
	}
}

.mw-ui-icon-element {
	border-radius: @border-radius-base;
	padding: @icon-padding-md;
	// Override line-height applied by `.mw-ui-button`.
	line-height: 0;
	transition: background-color @transition-duration-base;

	&.mw-ui-button {
		padding: @icon-padding-md-button;
	}
	// Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text.
	color: transparent;

	&:focus,
	&:active,
	&:visited {
		color: transparent;
	}

	// In desktop these icons shrink in size as touch area no longer important.
	@media ( min-width: @min-width-breakpoint-desktop ) {
		&.mw-ui-button {
			padding: @icon-padding-md-button--desktop;
		}
	}
}

.mw-ui-icon-before {
	width: auto;
	max-width: 100%;

	&::before {
		// sizing
		display: inline-block;
		font-size: initial;
		width: auto;
		min-width: @icon-size-md;
		min-height: @icon-size-md;

		// alignment. Margin is added to separate accompanying text.
		margin-right: @margin-icon-md-labelled;
		vertical-align: middle;
	}

	span {
		vertical-align: middle;
	}
}

@media all and ( min-width: @min-width-breakpoint-desktop ) {
	.mw-ui-icon-with-label-desktop {
		// stylelint-disable-next-line declaration-no-important
		color: @icon-color !important;
		width: auto;
		line-height: inherit;
		flex-basis: auto;
		// Special case outside of standard buttons styling due to surrounding
		// interface elements, see T237019.
		// stylelint-disable-next-line declaration-no-important
		font-weight: 500 !important;

		&:hover,
		&:focus,
		&:active,
		&:visited {
			color: @icon-color;
			text-decoration: none;
		}

		&::before {
			width: auto;
			display: inline-block;
			// Don't use `@icon-padding-md` as we are adjacent to text.
			margin-right: @margin-icon-md-labelled;
			// Seems to be more visually centered than `middle`.
			vertical-align: text-bottom;
		}
	}
}