@import "../mf-mixins.less";

/* reuses https://github.com/wikimedia/agora */
.button,
button,
input[type=submit] {
	display: inline-block;
	.border-radius( 3px );
	padding: ( @baseFontSize ) ( @baseFontSize * 1.25 ) ( @baseFontSize );
	line-height: 1;
	text-align: center;
	cursor: pointer;
	border: 1px #33589f solid;
	.text-with-shadow( white );
	.vertical-gradient( #3670C8, @blueBase );

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

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

	&:visited {
		color: #fff;
	}

	&:disabled,
	&:disabled.hover,
	&.disabled,
	&.disabled:hover {
		@disabledColor: lighten( desaturate( #3f77d7, 10% ), 10% );
		color: white;
		text-shadow:  none;
		.vertical-gradient( @disabledColor,@disabledColor );
		border-color: darken( @disabledColor, 5% );
	}

	&.languageSelector {
		margin-top: @headingMarginTop;
	}

	&.cancel {
		background: #999;
		border: 1px #777 solid;
	}
}

@buttonVerticalMargin: 8px;
@buttonVerticalPadding: ( @headerHeight / 2 ) - ( @buttonVerticalMargin * 2 );

.header {
	a.button {
		font-size: @baseFontSize;
		margin-top: @buttonVerticalMargin;
		margin-bottom: @buttonVerticalMargin;
		.border-radius( 0 );
		padding-top: @buttonVerticalPadding;
		padding-bottom: @buttonVerticalPadding;
		text-decoration: none;
		text-shadow: none;
		.vertical-gradient(#fff, #e9e9ea, 45%, 100%);
		color: #58595b;
		border: 1px solid #9ea0a3;
		border-right: none;
		vertical-align: middle;
		white-space: nowrap;

		&.active {
			background: #c8cacb;
			font-weight: bold;
		}

		&:first-child {
			.border-radius( 3px 0 0 3px );
			border-left: 1px solid #9ea0a3;
		}

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