// ----------------------------------------------------------------------------
// Button styling
// ----------------------------------------------------------------------------

.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
	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: 1px solid @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,
	&.mw-ui-checked {
		background-color: @activeColor;
		border-color: @activeColor;
		box-shadow: none;
	}

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

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