@import "../../settings/typography";
@import "../../mixins/effects";

// Buttons
//
// Styleguide 2.

@buttonBorderRadius: 3px;

// Button styling
//
// Basic button styling to be used on desktop skins. 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.
//
// Markup:
// <div class="mw-ui-button">button.mw-ui-button</div>
//
// Styleguide 2.1.
.mw-ui-button {
	// Container layout
	display: inline-block;
	padding: 0.4em 1em 0.4em 1em;
	margin: 0;

	// IE6/IE7 hack
	// http://stackoverflow.com/a/5838575/365238
	*display: inline;
	zoom: 1;

	// Container styling
	.buttonColors();
	border-radius: @buttonBorderRadius;

	// Ensure that buttons and inputs are nicely aligned when they have differing heights
	vertical-align: middle;

	// Content styling
	text-align: center;
	text-decoration: none;

	font-weight: bold;

	// Interaction styling
	cursor: pointer;

	&:disabled,
	&.mw-ui-disabled {
		cursor: default;
	}

	// Styling for specific button types
	// -----------------------------------------
	&.mw-ui-big {
		font-size: @baseFontSize * 1.3;
	}

	&.mw-ui-block {
		display: block;
		width: 100%;
	}

	// Primary buttons
	//
	// Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
	// use mw-ui-progressive (coming soon)
	//
	// Markup:
	// <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
	//
	// Styleguide 2.1.1.
	&.mw-ui-primary {
		.buttonColors(@agoraBlue);
	}

	// Constructive buttons
	//
	// Use constructive buttons for actions which result in a final action in the process that results
	// in a change of state.
	// e.g. save changes button
	//
	// Markup:
	// <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
	//
	// Styleguide 2.1.2.
	&.mw-ui-constructive {
		.buttonColors(@agoraGreen);
	}

	// Destructive buttons
	//
	// Use destructive buttons for actions which result in the destruction of data.
	// e.g. deleting a page.
	// This should not be used for cancel buttons.
	//
	// Markup:
	// <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
	//
	// Styleguide 2.1.3.
	&.mw-ui-destructive {
		.buttonColors(@agoraRed);
	}
}

// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
// class alone isn't specific enough to do
a.mw-ui-button {
	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">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 > * {
	border-radius: 0;
	float: left;

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

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