// Mediawiki.ui button mixins for MediaWiki (deprecated)
//
// Helper mixins used to create button styles. This file is importable
// by all LESS files via `@import 'mediawiki.ui/mixins.buttons.less';`.

/* stylelint-disable selector-class-pattern */

// Default button mixin.
.mw-ui-button() {
	// Container layout
	display: inline-block;
	.box-sizing( border-box );
	margin: 0;
	border: @border-base;
	border-radius: @border-radius-base;
	cursor: pointer;
	// Ensure that buttons and inputs are nicely aligned when they have differing heights
	vertical-align: middle;
	// Inherit the font rather than apply user agent stylesheet (T72072)
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.28571429em;
	text-align: center;
	// Disable weird iOS styling
	-webkit-appearance: none;

	&:not( .mw-ui-icon-element ) {
		min-height: 32px;
		min-width: 4em;
		max-width: 28.75em; // equivalent to 460px, @see T95367
		padding: 5px 12px;
	}
}

// Mixin for button interaction states.
.mw-ui-button-states() {
	&:not( :disabled ) {
		// Add `transition`s exclusively on enabled buttons.
		.transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );

		// Make sure that `color` isn't inheriting from user-agent styles
		&:visited {
			color: @color-base;
		}

		&:hover {
			background-color: @background-color-base;
			color: @color-base--hover;
			border-color: @colorGray10;
		}

		&:focus {
			// Make sure that `color` isn't inheriting from user-agent styles
			color: @color-base;
			border-color: @border-color-base--focus;
			box-shadow: @box-shadow-primary--focus;
			outline-width: 0;

			// Remove the inner border and padding in Firefox.
			&::-moz-focus-inner {
				border-color: transparent;
				padding: 0;
			}
		}

		&:active,
		&.is-on {
			background-color: @colorGray12;
			color: @color-base--active;
			border-color: @colorGray7;
			box-shadow: none;
		}
	}

	&:disabled {
		background-color: @colorGray12;
		color: @color-base--inverted;
		border-color: @colorGray12;
		cursor: default;
	}
}

// Primary buttons mixin.
.mw-ui-button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
	&:not( :disabled ) {
		background-color: @bgColor;
		color: #fff;
		// border of the same color as background so that light background and
		// dark background buttons are the same height and width
		border-color: @bgColor;

		&:hover {
			background-color: @highlightColor;
			border-color: @highlightColor;
		}

		&:focus {
			box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
		}

		&:active,
		&.is-on {
			background-color: @activeColor;
			border-color: @activeColor;
			box-shadow: none;
		}
	}

	&:disabled {
		background-color: @colorGray12;
		color: #fff;
		border-color: @colorGray12;
	}
}