@import "../default/theme.less";

@padding-normal: 0px 16px;
@padding-sm: 0px 14px;
@padding-xs: 0px 12px;
@min-width-normal: 80px;
@min-width-sm: 60px;
@min-width-xs: 60px;
@btn-margin-right: 10px;
@btn-margin-right-sm: 5px;
@btn-margin-right-xs: 5px;
@btn-border-height: 1px;

.border-min-width(@min-width, 14px) {
	min-width: @min-width + 8px;
}

.border-min-width(@min-width, 12px) {
	min-width: @min-width;
}

.background-color-white-color-disabled (@color) when (@color = #fff) {
	color: @disabled-text-color;
  background-color: @common-color;
	border-color: #e9e9e9;
}

.background-color-white-color-disabled (@color) when not (@color = #fff) {
	border-color: @color;
	background-color: @color;
	opacity: @opacity-disable;
}

.plx-btn {
	font-family: @font-family;
	color: @common-textcolor;
	.border-min-width(@min-width-normal, @font-size);
	letter-spacing: 1px;
	padding: @padding-normal;
	height: @btn-height;
	font-size: @font-size;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	margin-right: @btn-margin-right;
	vertical-align: middle;
	border: @btn-border-height solid @border-color-base;
	background-color: @common-color;
	border-radius: @radius;
	line-height: @btn-height - @btn-border-height * 2;
	&:hover,
	&:disabled,
	&[disabled],
	&:focus,
	&:active {
		outline: none;
		background-image: none;
		filter: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		text-shadow: none;
	}
	&:hover,
	&:focus {
    color: @btn-common-color-text-hover;
    border-color: @btn-common-color-border-hover;
		background-color: @common-color-hover;
	}
	&:active {
    color: @btn-common-color-text-click;
    border-color: @btn-common-color-border-click;
		background-color: @common-color-click;
	}
	&:disabled,
	&[disabled] {
		.background-color-white-color-disabled(@common-color);
	}
	&:disabled:hover,
	&[disabled]:hover,
	&:disabled:focus,
	&[disabled]:focus {
		.background-color-white-color-disabled(@common-color);
		cursor: not-allowed;
	}
	& .plx-btn-icon {
			font-size: 16px;
			vertical-align: text-top;
			margin-right: 3px;
	}
}

.plx-btn-primary {
	background-color: @primary-color;
	color: @scene-textcolor;
	border-color: @primary-color;
	&:hover,
	&:focus {
    color: @scene-textcolor;
		background-color: @primary-color-hover;
		border-color: @primary-color-hover;
	}
	&:active {
    color: @scene-textcolor;
		background-color: @primary-color-click;
		border-color: @primary-color-click;
	}
	&:disabled,
	&[disabled],
	&:disabled:hover,
	&[disabled]:hover,
	&:disabled:focus,
	&[disabled]:focus {
		color: @scene-textcolor;
		.background-color-white-color-disabled(@primary-color);
	}
}

.plx-btn-guide {
	background-color: @guide-color;
	color: @scene-textcolor;
	border-color: @guide-color;
	&:hover,
	&:focus {
    color: @scene-textcolor;
		background-color: @primary-color-guide-hover;
		border-color: @primary-color-guide-hover;
	}
	&:active {
    color: @scene-textcolor;
		background-color: @primary-color-guide-click;
		border-color: @primary-color-guide-click;
	}
	&:disabled,
	&[disabled],
	&:disabled:hover,
	&[disabled]:hover,
	&:disabled:focus,
	&[disabled]:focus {
		color: @scene-textcolor;
		.background-color-white-color-disabled(@guide-color);
	}
}

.plx-btn-table {
	color: @text-color;
}

.plx-btn-error {
	background-color: @error-color;
	color: @scene-textcolor;
	border-color: @error-color;
	&:hover,
	&:focus {
    color: @scene-textcolor;
		background-color: @error-color-hover;
		border-color: @error-color-hover;
	}
	&:active {
    color: @scene-textcolor;
		background-color: @error-color-click;
		border-color: @error-color-click;
	}
	&:disabled,
	&[disabled],
	&:disabled:hover,
	&[disabled]:hover,
	&:disabled:focus,
	&[disabled]:focus {
		color: @scene-textcolor;
		.background-color-white-color-disabled(@error-color);
	}
}

.plx-btn-sm {
	height: @btn-height-sm;
	padding: @padding-sm;
	.border-min-width(@min-width-sm, @font-size);
	margin-right: @btn-margin-right-sm;
	line-height: @btn-height-sm - @btn-border-height * 2;
}

.plx-btn-xs{
	height: @btn-height-xs;
	padding: @padding-xs;
	.border-min-width(@min-width-xs, @font-size);
	margin-right: @btn-margin-right-xs;
	line-height: @btn-height-xs - @btn-border-height * 2;
}

.plx-btn.dropdown-toggle {
	margin-right: 0;
	outline: none !important;
	background-image: none !important;
	filter: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
}

.plx-btn.dropdown-toggle::after {
	margin-left: 16px;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	color: darken(@border-color-base, 10%);
	margin-bottom: 1px;
}

.plx-btn-sm.dropdown-toggle::after {
	margin-left: 14px;
}

.plx-btn-xs.dropdown-toggle::after {
	margin-left: 12px;
}

.plx-btn+.dropdown-menu {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 100%;
	font-size: @font-size;
	border-radius: @radius;
	.shadow;
	& .dropdown-item {
		background-color: @component-bg;
		color: @text-color;
		font-size: @font-size;
		padding: @padding-normal;
		height: 30px;
		cursor: pointer;
		&:hover,
		&:focus,
		&:active{
			outline: none;
			background-color: @hover-bg-color;
		}
		&:disabled,
		&[disabled] {
			color: @disabled-text-color;
		}
		&:disabled:hover,
		&[disabled]:hover,
		&:disabled:focus,
		&[disabled]:focus {
			cursor: not-allowed;
			background-color: @component-bg;
		}
	}
}

.plx-btn-sm+.dropdown-menu .dropdown-item {
	padding: @padding-sm;
}
.plx-btn-xs+.dropdown-menu .dropdown-item {
	padding: @padding-xs;
}

.plx-btn-more {
	display: inline-block;
	margin-right: @btn-margin-right;
}

.plx-btn-more-sm {
	margin-right: @btn-margin-right-sm;
}

.plx-btn-more-xs {
	margin-right: @btn-margin-right-xs;
}