// FIXME: Deprecate this in favour of mediawiki.ui
@import "mediawiki.mixins.less";
@import "minerva.variables.less";
@import "minerva.mixins.less";

// Buttons
//
// Styleguide 2.

.button,
button,
input[type=submit] {
	display: inline-block;
	border-radius: 3px;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	margin: 0;
}

.content,
// FIXME: buttons need a clean up, probably we should have more than one class
// for them, .panel is here only for .inline styling, remove if cleaned up
.panel,
// FIXME: deprecate .buttonBar when new overlays in stable
.buttonBar {

	// Button styling within containers content, panel or buttonBar
	//
	// Buttons inside the main content element look like this:
	//
	// Markup:
	// <div class="content panel buttonBar">
	//  <button>button</button>
	// </div>
	//
	// Styleguide 2.1.
	.button,
	button,
	input[type=submit] {
		padding: .8em 1.2em;
		text-align: center;
		border: 1px #33589f solid;
		color: white;
		.vertical-gradient( #3670C8, @blueBase );

		&:hover {
			.vertical-gradient( #4c84da, #3f77d7 );
		}

		&:active {
			.vertical-gradient( #2d5ea9, #2a549c );
		}

		&:visited {
			color: #fff;
		}

		&:disabled {
			@disabledColor: lighten( desaturate( #3f77d7, 15% ), 10% );
			color: lighten( #3f77d7, 30% );;
			.vertical-gradient( @disabledColor,@disabledColor );
			border-color: darken( @disabledColor, 5% );
		}

		// Inline buttons
		//
		// Add the inline class to buttons to push them together
		//
		// Markup:
		// <div class="content">
		//  <button class="inline button">button 1</button>
		//  <button class="inline button">button 2</button>
		// </div>
		//
		// Styleguide 2.1.1.
		&.inline {
			display: inline;
			padding: 0;
			line-height: inherit;
			color: #002bb8;
			background: none;
			border: none;
			text-shadow: none;

			&:hover {
				text-decoration: underline;
			}
		}

		// Wide buttons
		//
		// Buttons inside drawer can be made to be as wide as possible by applying the wide class.
		//
		// Markup:
		// <div class="content">
		//   <div class="wide button">wide button</div>
		// </div>
		//
		// Styleguide 2.1.2.
		&.wide {
			display: block;
		}
	}
}


// Header buttons
//
// Buttons inside headers look different to those inside content areas.
//
// Styleguide 2.2.

// FIXME: Generic rule needed
.content-header,
.header {
	// Header buttons
	//
	// Markup:
	// <div class="header">
	//  <button>button 1</button>
	//  <button>button 2</button>
	// </div>
	//
	// Styleguide 2.2.1.
	.button,
	button,
	input[type=submit] {
		// 2 is top and bottom border
		line-height: @headerElementHeight - 2;
		padding: 0 1.25em;
		text-decoration: none;
		.vertical-gradient(#fff, #e9e9ea, 45%, 100%);
		color: #58595b;
		border: 1px solid #9ea0a3;
	}

	// Button bars
	//
	// The button-bar class only applies inside a content-header or header.
	// The button-bar class must be used to center buttons.
	//
	// Markup:
	// <div class="content-header">
	//  <ul class="button-bar">
	//    <li><button>button 1</button></li><li>
	//      <button>button 2</button></li><li>
	//      <button>button 3</button></li>
	//  </ul>
	// </div>
	//
	// Styleguide 2.2.2.
	.button-bar {
		text-align: center;

		li {
			display: inline-block;
			// When the label is bold e.g. active, we need to ensure they still line up
			vertical-align: middle;

			.button, button {
				border-radius: 0;
				border-right: none;

				&:disabled {
					color: #9ea0a3;
				}
			}

			&:active {
				.button, button {
					.vertical-gradient(#c8cacb, #e9e9ea);
				}
			}

			// Active buttons
			//
			// Use the active class on a button-bar item to highlight it as active.
			//
			// Markup:
			// <div class="header">
			//  <ul class="button-bar">
			//    <li><button>button 1</button></li><li class="active">
			//      <button>button 2</button></li><li>
			//      <button>button 3</button></li>
			//  </ul>
			// </div>
			//
			// Styleguide 2.3.1.
			&.active {
				.button, button {
					background: #c8cacb;
					font-weight: bold;
				}
			}

			&:first-child {
				.button, button {
					border-radius: 3px 0 0 3px;
				}
			}

			&:last-child {
				.button, button {
					border-radius: 0 3px 3px 0;
					border-right: 1px solid #9ea0a3;
				}
			}
		}
	}
}