@import '../../style/mixin';
@import '../../style/animate';

button {
	border: none;
	background: transparent;

	&:focus {
		outline: 0;
	}
}

.h-btn {
	display: inline-block;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.045);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
	position: relative;
	overflow: hidden;

	@each $type, $backgroundColor, $borderColor, $sizeColor in (default, transparent, #bfcbd9, #333), (primary, #1890ff, #1890ff, #fff), (secuess, #5cb85c, #5cb85c, #fff), (info, #5bc0de, #5bc0de, #fff), (warning, #f0ad4e, #f0ad4e, #fff), (danger, #d9534f, #d9534f, #fff), (disabled, #b5b5b5, #b5b5b5, #fff) {
		&-#{$type} {
			@if $type != default { background-color: $backgroundColor;  }
			border-color: $borderColor;
			color: $sizeColor;
		}
	}

	&-dash {
		border-style: dashed;
		border-color: #bfcbd9;
	}

	&-round {
		border-radius: 20px;
	}

	&-block {
		width: 100%;
		min-height: 44px;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	&-circle {
		@include btnCircle();
	}

	&-lager {
		@include btnSize(4, 16px);
	}

	&-small {
		@include btnSize(1.5);
	}

	&-mini {
		@include btnSize();
	}
}

.h-btn-circle.h-btn-lager {
	@include btnCircle(1.5);
}

.h-btn-group {
	.h-btn {
		border-radius: 0;

		& + .h-btn {
			border-left-color: transparent;
		}

		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}
}