@import (reference) "color.less";

.btn {
	line-height: 18px;
	height: 30px;
	cursor: pointer;
	font-size: 12px;
	min-width: 90px;
	display: inline-block;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	border: 1px solid transparent;
	white-space: nowrap;
	border-radius: 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;;

	&:active:focus,
	&:active,
	&:focus {
		outline: 0;
	}

	&[disabled]:not(input) {
		background: @LightGrey;
		color: @LightDark !important;
		border: 1px solid @Grey!important;
	}
}

.btn.btn-normal{
	color: white;
	background-color: @Blue;
	border-top: 1px solid @Blue;
	border-bottom: 3px solid @Blue;
	padding: 5px 20px 3px;

	&:active,
	&:hover{
		border-bottom-color: @DarkBlue;
		color: white;
	}
	&:active{
		background-color: @DarkBlue;
		border-bottom-color: @DarkBlue;
	}

	&[disabled] {
		background: @LightGrey;
		color: @LightDark;
		padding: 5px 19px;
		border: 1px solid @Grey;
	}

	&.btn-small {
		width: 60px;
		min-width:60px;
		height: 24px;
		padding: 2px 5px 0;
	}

	&.btn-border-only {
		background: white;
		border: 1px solid @Blue;
		padding-bottom: 5px;
		color: @Blue;

		&:hover,
		&:active {
			border-color: @DarkBlue;
			color: @DarkBlue;
		}

		&[disabled] {
			background: @LightGrey;
			color: @DarkGrey;
			border-color: @DarkGrey;
		}
	}
}

.btn.btn-cancel {
	color: @LightDark;
	background: transparent;
	position: relative;

	&:before {
		content: "";
		display: inline-block;
		width: 25px;
		border-bottom: 1px solid @LightDark;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	&:hover,
	&:active {
		color: @Dark;

		&:before {
			border-bottom-color: @Dark;
		}
	}
}


.btn-tab-container {
	height: 30px;
	font-size: 0;

	.btn-tab {
		border-radius: 0;
		display: inline-block;
		padding: 0 5px;
		border: 1px solid @Grey;
		height: 28px;
		min-width: 29px;
		text-align: center;
		line-height: 28px;
		cursor: pointer;
		background: @LightGrey;

		&:not(:last-child) {
			border-right: none;
		}

		&.selected {
			color: @Blue;
			background: white;
		}

		&:hover {
			border-color: @Blue;

			& + .btn-tab {
				border-left-color: @Blue;
			}
		}
	}
}

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
	padding: 0;
	border: 0
}