// mixins for button
// ------------------------
.button-size(@height; @padding-horizontal; @font-size; @border-radius) {
	@padding-vertical: max((round(((@height - @font-size * @line-height-base) / 2) * 10) / 10) - @border-width-base, 0);
	height: @height;
	padding: @padding-vertical ceil(@padding-horizontal * 2.5);
	font-size: calc(@font-size + 2);
	border-radius: @border-radius;
}

.button-color(@color; @background; @border) {
	color: @color;
	box-shadow: inset 0 0 0 2px @border;
	& when not(@background = null) {
		background: @background;
	}
	// http://stackoverflow.com/a/17253457
	> a:only-child {
		color: currentcolor;

		&::after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: transparent;
			content: '';
		}
	}
}

.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
	&[disabled] {
		&,
		&:hover,
		&:focus,
		&:active {
			opacity: 0.25;
			text-shadow: none;
			cursor: default;
			&,
			> * {
				pointer-events: none;
			}
		}
	}
}

.button-variant-primary(@color; @background; @backgroundHover; @backgroundActive) {
	.button-color(@color; @background; transparent;);
	.button-disabled();

	&:not([disabled]):hover {
		.button-color(@color; @backgroundHover; transparent;);
	}
	&:not([disabled]):focus,
	&:not([disabled]):active {
		.button-color(@color; @backgroundActive; transparent;);
	}
}

.button-variant-other(@color; @background; @border) {
	.button-color(@color; @background; @border);
	.button-disabled();

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		.button-color(@white; @color; @border);
	}
}

/* .button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
	.button-color(@color; null; @border);
	text-shadow: none;

	&:hover,
	&:focus {
		& when (@border = transparent) {
			& when (@theme = dark) {
				.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
			}
			& when (not (@theme = dark) and not (@theme = variable)) {
				.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
			}
			& when (@theme = variable) {
				.button-color(@borderActive; transparent; transparent);
			}
		}
		& when not (@border = transparent) {
			& when (@theme = dark) {
				.button-color(~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `);
			}
			& when (not (@theme = dark) and not (@theme = variable)) {
				.button-color(~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `);
			}
			& when (@theme = variable) {
				.button-color(@borderHover; transparent; @borderHover);
			}
		}
	}

	&:active {
		& when (@border = transparent) {
			& when (@theme = dark) {
				.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
			}
			& when (not (@theme = dark) and not (@theme = variable)) {
				.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
			}
			& when (@theme = variable) {
				.button-color(@borderActive; transparent; transparent);
			}
		}
		& when not (@border = transparent) {
			& when (@theme = dark) {
				.button-color(~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `);
			}
			& when (not (@theme = dark) and not (@theme = variable)) {
				.button-color(~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `);
			}
			& when (@theme = variable) {
				.button-color(@borderActive; transparent; @borderActive);
			}
		}
	}
	.button-disabled();
} */

.button-group-base(@btnClassName) {
	position: relative;
	display: inline-flex;
	> .@{btnClassName},
	> span > .@{btnClassName} {
		position: relative;

		&:hover,
		&:focus,
		&:active {
			z-index: 2;
		}

		&[disabled] {
			z-index: 0;
		}
	}
	.@{btnClassName}-icon-only {
		font-size: @font-size-base;
	}
}
// Base styles of buttons
// --------------------------------------------------
.btn() {
	position: relative;
	display: inline-block;
	font-weight: bold;
	white-space: nowrap;
	text-align: center;
	background-image: none;
	border: none; // @btn-border-width @btn-border-style transparent;
	box-shadow: none;
	cursor: pointer;
	transition: all 0.2s @ease-in-out;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	.button-size(@btn-height-base; @btn-padding-horizontal-base; @font-size-base; @btn-border-radius-base);
	> .@{iconfont-css-prefix} {
		line-height: 1;
	}

	&,
	&:not([disabled]):active,
	&:not([disabled]):focus {
		outline: 0;
	}

	&:not([disabled]):hover {
		text-decoration: none;
	}

	&:not([disabled]):active {
		outline: 0;
		box-shadow: none;
	}

	&[disabled] {
		cursor: default;

		> * {
			pointer-events: none;
		}
	}

	&-lg {
		.button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base);
	}

	&-sm {
		.button-size(@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm);
	}
}
// primary button style
.btn-primary() {
	.button-variant-primary(@white; @dbk-primary; @dbk-primary; @dbk-primary;);
	background-image: linear-gradient(90deg, @dbk-primary 0%, #2e9cc7 100%);

	&:not([disabled]):hover {
		background-image: linear-gradient(90deg, #2e9cc7 0%, @dbk-primary 100%);
	}
}
// secondary button style
.btn-secondary() {
	.button-variant-other(@dbk-secondary; transparent; @dbk-secondary;);
}
// default button style
.btn-default() {
	.button-color(@dbk-primary; transparent; @dbk-primary;);
	.button-disabled();

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		.button-color(@primary-color-hover; @white; @primary-color-hover;);
	}
}
// text button style
.btn-text() {
	.button-variant-other(@dbk-primary, transparent, transparent);
	.button-disabled();

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		color: @dbk-secondary;
		background: transparent;
		box-shadow: none;
	}
}
// link button style
.btn-link() {
	.button-variant-other(@dbk-primary, transparent, transparent);
	.button-disabled();
	> span {
		text-decoration: underline;
	}

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		color: @dbk-secondary;
		background: transparent;
		box-shadow: none;
		> span {
			text-decoration: underline;
		}
	}
}

/* // ghost button style
.btn-ghost() {
	.button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}
// dashed button style
.btn-dashed() {
	.button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
	border-style: dashed;
} */
// danger button style
.btn-danger() {
	.button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active);
}
// danger secondary button style
.btn-danger-secondary() {
	.button-variant-other(@dbk-error; transparent; @dbk-error;);
}
// danger default button style
.btn-danger-default() {
	.button-color(@dbk-error, transparent, @dbk-error);
	.button-disabled();

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		.button-color(@dbk-error, @dbk-gray-100, @dbk-error);
	}
}
// danger text button style
.btn-danger-text() {
	.button-variant-other(@dbk-error, transparent, transparent);
	.button-disabled();

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		.button-color(@error-color-active; transparent; transparent);
	}
}
// danger link button style
.btn-danger-link() {
	.button-color(@error-color, transparent, transparent);
	.button-disabled();

	&:not([disabled]):hover,
	&:not([disabled]):focus,
	&:not([disabled]):active {
		.button-color(@error-color-active; transparent; transparent);
	}
}
// link button disabled style
.btn-href-disabled() {
	&,
	&:hover,
	&:focus,
	&:active {
		opacity: 0.25;
		text-shadow: none;
		cursor: default;
		&,
		> * {
			pointer-events: none;
		}
	}
}
// round button
.btn-round(@btnClassName: btn) {
	.button-size(@btn-circle-size; (@btn-circle-size / 2) ; @font-size-base; @btn-circle-size);
	&.@{btnClassName}-lg {
		.button-size(@btn-circle-size-lg; (@btn-circle-size-lg / 2) ; @btn-font-size-lg; @btn-circle-size-lg);
	}
	&.@{btnClassName}-sm {
		.button-size(@btn-circle-size-sm; (@btn-circle-size-sm / 2) ; @font-size-base; @btn-circle-size-sm);
	}
}
// square button: the content only contains icon
.btn-square(@btnClassName: btn) {
	.square(@btn-square-size);
	.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
	& > * {
		font-size: @btn-square-only-icon-size;
	}
	&.@{btnClassName}-lg {
		.square(@btn-square-size-lg);
		.button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
		& > * {
			font-size: @btn-square-only-icon-size-lg;
		}
	}
	&.@{btnClassName}-sm {
		.square(@btn-square-size-sm);
		.button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
		& > * {
			font-size: @btn-square-only-icon-size-sm;
		}
	}
}
// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
	min-width: @btn-height-base;
	padding-right: 0;
	padding-left: 0;
	text-align: center;
	border-radius: 50%;
	&.@{btnClassName}-lg {
		min-width: @btn-height-lg;
		border-radius: 50%;
	}
	&.@{btnClassName}-sm {
		min-width: @btn-height-sm;
		border-radius: 50%;
	}
}
// Horizontal button groups style
.btn-group(@btnClassName: btn) {
	.button-group-base(@btnClassName);
	.@{btnClassName} + .@{btnClassName},
	.@{btnClassName} + &,
	span + .@{btnClassName},
	.@{btnClassName} + span,
	> span + span,
	& + .@{btnClassName},
	& + & {
		margin-left: -1px;
	}
	.@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
		border-left-color: transparent;
	}
	.@{btnClassName} {
		border-radius: 0;
	}
	> .@{btnClassName}:first-child,
	> span:first-child > .@{btnClassName} {
		margin-left: 0;
	}
	> .@{btnClassName}:only-child {
		border-radius: @btn-border-radius-base;
	}
	> span:only-child > .@{btnClassName} {
		border-radius: @btn-border-radius-base;
	}
	> .@{btnClassName}:first-child:not(:last-child),
	> span:first-child:not(:last-child) > .@{btnClassName} {
		border-top-left-radius: @btn-border-radius-base;
		border-bottom-left-radius: @btn-border-radius-base;
	}
	> .@{btnClassName}:last-child:not(:first-child),
	> span:last-child:not(:first-child) > .@{btnClassName} {
		border-top-right-radius: @btn-border-radius-base;
		border-bottom-right-radius: @btn-border-radius-base;
	}
	&-sm {
		> .@{btnClassName}:only-child {
			border-radius: @btn-border-radius-sm;
		}
		> span:only-child > .@{btnClassName} {
			border-radius: @btn-border-radius-sm;
		}
		> .@{btnClassName}:first-child:not(:last-child),
		> span:first-child:not(:last-child) > .@{btnClassName} {
			border-top-left-radius: @btn-border-radius-sm;
			border-bottom-left-radius: @btn-border-radius-sm;
		}
		> .@{btnClassName}:last-child:not(:first-child),
		> span:last-child:not(:first-child) > .@{btnClassName} {
			border-top-right-radius: @btn-border-radius-sm;
			border-bottom-right-radius: @btn-border-radius-sm;
		}
	}
	& > & {
		float: left;
	}

	& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
		border-radius: 0;
	}
	& > &:first-child:not(:last-child) {
		> .@{btnClassName}:last-child {
			padding-right: 8px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
	& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
		padding-left: 8px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}