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

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

// All buttons start with `.mw-ui-button` class, modified by other classes.
// It can be any element.  Due to a lack of a CSS reset, the exact styling of
// the button depends on what type of element is used.
// There are two kinds of buttons, the default is a "Call to Action" with an obvious border
// and there is a quiet kind without a border.
//
// Styleguide 2.

// Neutral button styling
//
// These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
//
// Markup:
// <div>
//   <button class="mw-ui-button">.mw-ui-button</button>
// </div>
// <div>
//   <button class="mw-ui-button" disabled>.mw-ui-button</button>
// </div>
//
// Styleguide 2.1.
.mw-ui-button {
	background-color: @colorGray15;
	color: @colorButtonText;
	// Container layout
	display: inline-block;
	.box-sizing( border-box );
	min-width: 4em;
	max-width: 28.75em; // equivalent to 460px, @see T95367
	margin: 0;
	padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
	border: @border-width-base @border-style-base @border-color-base;
	border-radius: @borderRadius;
	// Inherit the font rather than apply user agent stylesheet (T72072)
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	// Disable weird iOS styling
	-webkit-appearance: none;
	// IE 6 & 7 hack
	// https://stackoverflow.com/a/5838575/365238
	*display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
	zoom: 1;
	// Ensure that buttons and inputs are nicely aligned when they have differing heights
	vertical-align: middle;
	// Interaction styling
	cursor: pointer;

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

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

	&:focus {
		background-color: @background-color-base;
		// Make sure that `color` isn't inheriting from user-agent styles
		color: @colorButtonText;
		border-color: @colorProgressive;
		box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
		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: @colorGray1;
		border-color: @colorGray7;
		box-shadow: none;
	}

	&:disabled {
		background-color: @colorGray12;
		color: @colorBaseInverted;
		border-color: @colorGray12;
		cursor: default;

		// Make sure disabled buttons don't have hover and active states
		&:hover,
		&:active {
			background-color: @colorGray12;
			color: @colorBaseInverted;
			box-shadow: none;
			border-color: @colorGray12;
		}
	}

	// `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
	&:not( :disabled ) {
		.transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
	}

	// Styling for specific button types
	// -----------------------------------------

	// Quiet buttons
	//
	// Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow.
	// Its use is  not recommended on mobile/tablet due to lack of hover state.
	//
	// Markup:
	// <div>
	//   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
	// </div>
	//
	// Styleguide 2.1.1.
	&.mw-ui-quiet,
	&.mw-ui-quiet.mw-ui-progressive,
	&.mw-ui-quiet.mw-ui-destructive {
		background-color: transparent;
		// Quiet buttons all start gray, and reveal
		// progressive/destructive color on hover and active.
		color: @colorButtonText;
		border-color: transparent;

		&:hover {
			background-color: transparent;
			color: @colorButtonTextHighlight;
			border-color: transparent;
			box-shadow: none;
		}

		&:active {
			background-color: transparent;
			color: @colorButtonTextActive;
			border-color: transparent;
		}

		&:focus {
			background-color: transparent;
			color: @colorButtonText;
			border-color: transparent;
			box-shadow: none;
		}

		&:disabled,
		&:disabled:hover,
		&:disabled:active {
			background-color: transparent;
			color: @colorDisabledText;
			border-color: transparent;
		}
	}

	// Progressive buttons
	//
	// Use progressive buttons for actions which lead to a next step in the process.
	//
	// Markup:
	// <div>
	//   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
	// </div>
	//
	// Styleguide 2.1.2.
	&.mw-ui-progressive {
		.button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );

		&.mw-ui-quiet {
			color: @colorProgressive;

			&:hover {
				background-color: transparent;
				color: @colorProgressiveHighlight;
			}

			&:active {
				color: @colorProgressiveActive;
			}

			&:focus {
				background-color: transparent;
				color: @colorProgressive;
			}
		}
	}

	// Destructive buttons
	//
	// Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
	// This should not be used for cancel buttons.
	//
	// Markup:
	// <div>
	//   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
	// </div>
	//
	// Styleguide 2.1.3.
	&.mw-ui-destructive {
		.button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );

		&.mw-ui-quiet {
			color: @colorDestructive;

			&:hover {
				background-color: transparent;
				color: @colorDestructiveHighlight;
			}

			&:active {
				color: @colorDestructiveActive;
			}

			&:focus {
				background-color: transparent;
				color: @colorDestructive;
			}
		}
	}

	// Big buttons
	//
	// Not all buttons are equal. You can emphasise certain actions over others
	// using the mw-ui-big class.
	//
	// Markup:
	// <div>
	//   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
	// </div>
	//
	// Styleguide 2.1.4.
	&.mw-ui-big {
		font-size: 1.3em;
	}

	// Block buttons
	//
	// Some buttons might need to be stacked.
	//
	// Markup:
	// <div>
	//   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
	// </div>
	// <div>
	//   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
	// </div>
	//
	// Styleguide 2.1.5.
	&.mw-ui-block {
		display: block;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

input.mw-ui-button,
button.mw-ui-button {
	// Buttons in Firefox have extra height
	&::-moz-focus-inner {
		margin-top: -1px;
		margin-bottom: -1px;
	}
}

a.mw-ui-button {
	text-decoration: none;

	// This overrides an underline declaration on a:hover and a:focus in
	// commonElements.css, which the class alone isn't specific enough to do.
	&:hover,
	&:focus {
		text-decoration: none;
	}
}

// Button groups
//
// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
//
// Markup:
// <div class="mw-ui-button-group">
//   <div class="mw-ui-button is-on">A</div>
//   <div class="mw-ui-button">B</div>
//   <div class="mw-ui-button">C</div>
//   <div class="mw-ui-button">D</div>
// </div><div style="clear:both"></div>
//
// Styleguide 2.2.
.mw-ui-button-group {
	& > * {
		min-width: 48px;
		border-radius: 0;
		float: left;

		&:first-child {
			border-top-left-radius: @borderRadius;
			border-bottom-left-radius: @borderRadius;
		}

		&:not( :first-child ) {
			border-left: 0;
		}

		&:last-child {
			border-top-right-radius: @borderRadius;
			border-bottom-right-radius: @borderRadius;
		}
	}

	& .is-on .button {
		cursor: default;
	}
}