@import url(~antd/lib/button/style/mixin.less);

// 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}-xl {
		.square(@btn-square-size-xl);
		.button-size(@btn-square-size-xl; 0; @btn-square-only-icon-size-xl; @btn-border-radius-base);

		& > * {
			font-size: @btn-square-only-icon-size-xl;
		}
	}
	&.@{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;
		}
	}
	&.@{btnClassName}-xs {
		.square(@btn-square-size-xs);
		.button-size(@btn-square-size-xs; 0; @btn-square-only-icon-size-xs; @btn-border-radius-base);

		& > * {
			font-size: @btn-square-only-icon-size-xs;
		}
	}
}
.b-design-default-btn-disabled() {
	.button-disabled(@color:@disabled-color, @background: @disabled-bg, @border: transparent);
}

.b-design-btn-disabled() {
	.button-disabled(@color: @white, @background: @primary-30, @border: transparent);
}

.b-design-btn-bordered-disabled() {
	.button-disabled(@color:  @primary-30, @background: transparent, @border: @primary-20);
}

.b-design-btn-text-disabled() {
	.button-disabled(@color: @disabled-color, @background: transparent, @border: transparent);
}

.b-design-btn-ghost-disabled() {
	.button-disabled(@color: @primary-30, @background: transparent, @border: @primary-20);
}

// B-Design gradient primary
// .b-design-primary-graident(@default-background, @hover-background, @active-background) {
// 	&,
// 	&:hover,
// 	&:focus,
// 	&:not([disabled]):active {
// 		// background-color: @btn-primary-bg;
// 		background: @default-background;
// 		color: @white;
// 		border: none;

// 		// Hover background
// 		&::before {
// 			content: '';
// 			position: absolute;
// 			display: block;
// 			top: 0;
// 			left: 0;
// 			right: 0;
// 			bottom: 0;
// 			opacity: 0;
// 			z-index: 0;
// 			background-size: 250%;
// 			background: @hover-background;
// 			animation: gradient-heavy 2s alternate-reverse infinite;
// 			transition: all 0.2s ease-out;
// 		}

// 		// Active background
// 		&::after {
// 			content: '';
// 			position: absolute;
// 			border-radius: inherit;
// 			top: 0;
// 			left: 0;
// 			right: 0;
// 			bottom: 0;
// 			opacity: 0;
// 			z-index: 0;
// 			background: @active-background;
// 			filter: saturate(2.5);
// 			pointer-events: none;
// 			transition: all 0.2s ease-out;
// 		}

// 		&:not([disabled]):hover {
// 			&::before {
// 				opacity: 1;
// 			}
// 		}

// 		&:not([disabled]):active {
// 			&::before {
// 				opacity: 0;
// 			}

// 			&::after {
// 				opacity: 1;
// 			}
// 		}

// 		> span {
// 			position: relative;
// 			z-index: 1;
// 		}
// 	}
// }

.b-design-primary-graident(@default-background, @hover-background, @active-background) {
	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		// background-color: @btn-primary-bg;
		// background: @default-background;
		background: @default-background padding-box, @default-background border-box;
		color: @white;
		border: none;

		// Hover background
		&::before {
			content: '';
			position: absolute;
			display: block;
			top: -1px;
			left: -1px;
			width: calc(100% + 2px);
			height: calc(100% + 2px);
			opacity: 0.2;
			z-index: 1;
			background: @hover-background;
			background-size: 250%;
			transition: all 0.2s ease-out;
		}

		// Active background
		&::after {
			content: '';
			position: absolute;
			border-radius: inherit;
			top: -1px;
			left: -1px;
			right: 0;
			bottom: 0;
			opacity: 0;
			z-index: 0;
			width: calc(100% + 2px);
			height: calc(100% + 2px);
			background: @active-background;
			filter: saturate(2.5);
			pointer-events: none;
			transition: all 0.2s ease-out;
		}

		&:not([disabled]):hover {
			&::before {
				opacity: 1;
			}
		}

		&:not([disabled]):active {
			&::before {
				opacity: 0.2;
			}

			&::after {
				opacity: 1;
			}
		}

		> span {
			position: relative;
			z-index: 1;
		}
	}
}