@import url(~antd/lib/button/style/index-pure.less);
@import (reference) './mixin.less';
@import (reference) '../../style/themes/index.less';
@import (reference) '../../style/mixins/index.less';

@gradient-dangerous-secondary-button: linear-gradient(90deg, @red-40, @red-60, @red-70, @red-30);
@spin-prefix-cls: ~'@{ant-prefix}-spin';

.@{btn-prefix-cls} {
	letter-spacing: 1.05px;
	font-weight: @btn-font-weight;
	box-shadow: @btn-shadow;
	font-size: @btn-font-size;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	.@{iconfont-css-prefix} {
		color: inherit;
		font-size: @iconfont-size-sm;
		display: inline-flex;
	}
	> .@{iconfont-css-prefix} + span,
	> span + .@{iconfont-css-prefix},
	> .@{spin-prefix-cls} + span {
		margin-left: @margin-xss;
	}

	&.@{btn-prefix-cls}-icon-before {
		padding-left: calc(@btn-padding-horizontal-base - 2px);
	}
	&.@{btn-prefix-cls}-icon-after {
		padding-right: calc(@btn-padding-horizontal-base - 2px);
	}
}

.@{btn-prefix-cls} {
	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		color: @text-color;
		border-color: @btn-default-border;
		background-color: @white;
	}

	&:hover {
		border-color: @border-color-hover;
		background-color: @component-background-hover;
		box-shadow: @btn-shadow;
		color: @text-color;
	}

	&:not([disabled]):active {
		border-color: @border-color-hover;
		background-color: @component-background-active;
		box-shadow: @btn-shadow;
		color: @text-color;
	}

	.b-design-default-btn-disabled();
}

.@{btn-prefix-cls}-primary {
	border: 1px solid transparent!important;
	.b-design-primary-graident(
        linear-gradient(90deg, @primary-60, @primary-50),
        radial-gradient(circle, @primary-60, @primary-50),
        linear-gradient(45deg, @primary-60, @primary-40)
    );

	&.@{btn-prefix-cls}-breathing {
		&::before {
			animation: gradient-heavy 2s alternate-reverse infinite;
		}
	}

	.b-design-btn-disabled();
	&[disabled] {
		&:before,
		&:after {
			content: unset;
		}
	}
}

.@{btn-prefix-cls}-secondary {
	& > * {
		position: relative;
		z-index: 1;
	}

	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		border-color: @primary-color;
		color: @primary-color;

		.gradient-border(@gradient-secondary-button, @white);

		&::after {
			content: '';
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: @white;
			z-index: initial;
			border-radius: @border-radius-base;
			transition: background @animation-duration-base @ease-in-out;
		}
	}

	&:not([disabled]):hover {
		box-shadow: @btn-shadow;

		&::after {
			background: @primary-10;
		}
	}

	&:not([disabled]):active {
		box-shadow: @btn-shadow;

		&::after {
			background: @primary-20;
		}
	}

	&.@{btn-prefix-cls}-breathing {
		&,
		&:hover,
		&:focus,
		&:not([disabled]):active {
			.gradient-breathing-animation();
		}
	}

	.b-design-btn-bordered-disabled();
}

.@{btn-prefix-cls}-text {
	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		border-color: transparent;
		box-shadow: @btn-text-shadow;
		background: transparent;
	}

	&:hover {
		background: @component-background-hover;
	}

	&:not([disabled]):active {
		background: @component-background-active;
	}

	.b-design-btn-text-disabled();
}

.@{btn-prefix-cls}-ghost {
	& > * {
		position: relative;
		z-index: 1;
	}
	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		border-color: @primary-color;
		color: @primary-color;
		background-color: transparent;
		&::after {
			content: '';
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: transparent;
			z-index: initial;
			border-radius: @border-radius-base;
			transition: background @animation-duration-base @ease-in-out;
		}
	}
	&:not([disabled]):hover {
		background: @primary-10;
	}

	&:not([disabled]):active {
		background: @primary-20;
	}

	&.@{btn-prefix-cls}-breathing {
		&:hover,
		&:focus,
		&:not([disabled]):active {
			.gradient-border(@gradient-secondary-button, @white);
			.gradient-breathing-animation();
		}
		&:not([disabled]):hover {
			&::after {
				background: @primary-10;
			}
		}

		&:not([disabled]):active {
			&::after {
				background: @primary-20;
			}
		}
	}

	.b-design-btn-ghost-disabled();
}

.@{btn-prefix-cls}-gradient {
	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		position: relative;
		color: @primary-color;

		// Gradient border trick
		.gradient-border(@gradient-secondary-button, @white);
	}

	&.@{btn-prefix-cls}-breathing {
		&,
		&:hover,
		&:focus,
		&:not([disabled]):active {
			.gradient-breathing-animation();
		}
	}

	// Background cover;
	&::before {
		content: '';
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		opacity: 0;
		// background: fade(@primary-20, 30%);
		background: ~'var(--@{ant-prefix}-primary-color-20-deprecated-f-30)';
		z-index: 0;
	}

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

	&:not([disabled]):active {
		&::before {
			// background: fade(@primary-30, 30%);
			background: ~'var(--@{ant-prefix}-primary-color-30-deprecated-f-30)';
			opacity: 1;
		}
	}

	> span {
		position: relative;
	}

	// .button-disabled(@color: @disabled-color, @background: @white, @border: @border-color-hover);
	.b-design-btn-bordered-disabled();
}

// Loading去掉before
.@{btn-prefix-cls}.@{btn-prefix-cls}-loading::before {
	display: none;
}

// Link Button
.@{btn-prefix-cls}-link {
	padding: 0 !important;
	height: initial !important;
	border: none;
	position: relative;
	line-height: 24px;
	.typography-paragraph-2();
	&.@{btn-prefix-cls}-sm {
		line-height: calc(@layout-height-2 + 2px);
	}

	&,
	&:hover,
	&:focus,
	&:not([disabled]):active {
		border-color: transparent;
		background-color: transparent;

		font-weight: 400;
		box-shadow: @btn-shadow;
	}
	& {
		color: @link-color;
	}

	&:hover,
	&:focus,
	&:not([disabled]):active {
		color: @link-hover-color;
		&.@{btn-prefix-cls}-underline::after {
			background-color: @link-hover-color;
		}
	}

	&.@{btn-prefix-cls}-underline::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		height: 1px;
		width: 100%;
		background-color: @link-color;
		transition: all @animation-duration-base @ease-in-out;
	}

	&:hover:not([disabled]) {
		color: @btn-text-hover-color;
	}

	.button-disabled(@color: @blue-30, @background: transparent, @border: transparent);

	&[disabled].@{btn-prefix-cls}-underline::after {
		background-color: @blue-30;
	}

	span {
		text-decoration: inherit;
	}
}

// Large Size
.@{btn-prefix-cls}-lg,
.@{btn-prefix-cls}-group-lg > .@{btn-prefix-cls} {
	.button-size(
      @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
	);

	.@{iconfont-css-prefix} {
		font-size: @iconfont-size-sm;
	}
	&.@{btn-prefix-cls}-icon-before {
		padding-left: calc(@btn-padding-horizontal-lg - 2px);
	}
	&.@{btn-prefix-cls}-icon-after {
		padding-right: calc(@btn-padding-horizontal-lg - 2px);
	}

	&.@{btn-prefix-cls}-text {
		&:hover,
		&:not([disabled]):active {
			box-shadow: @btn-text-shadow;
		}
	}
}

// Small Size
.@{btn-prefix-cls}-sm,
.@{btn-prefix-cls}-group-sm > .@{btn-prefix-cls} {
	.button-size(
      @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-base
	);
	.@{iconfont-css-prefix} {
		font-size: calc(@iconfont-size-sm - 2px);
	}
	&.@{btn-prefix-cls}-icon-before {
		padding-left: calc(@btn-padding-horizontal-sm - 2px);
	}
	&.@{btn-prefix-cls}-icon-after {
		padding-right: calc(@btn-padding-horizontal-sm - 2px);
	}
}

// XS Size
.@{btn-prefix-cls}-xs,
.@{btn-prefix-cls}-group-xs > .@{btn-prefix-cls} {
	.button-size(
      @btn-height-xs; @btn-padding-horizontal-xs; @btn-font-size-xs; @btn-border-radius-base
	);
	.@{iconfont-css-prefix} {
		font-size: calc(@iconfont-size-sm - 2px);
	}
	&.@{btn-prefix-cls}-icon-before {
		padding-left: calc(@btn-padding-horizontal-xs - 2px);
	}
	&.@{btn-prefix-cls}-icon-after {
		padding-right: calc(@btn-padding-horizontal-xs - 2px);
	}
}

//XL Size
.@{btn-prefix-cls}-xl,
.@{btn-prefix-cls}-group-xl > .@{btn-prefix-cls} {
	.button-size(
      @btn-height-xl; @btn-padding-horizontal-xl; @btn-font-size-xl; @btn-border-radius-base
	);
	.@{iconfont-css-prefix} {
		font-size: @iconfont-size-sm;
	}
	&.@{btn-prefix-cls}-icon-before {
		padding-left: calc(@btn-padding-horizontal-xl - 2px);
	}
	&.@{btn-prefix-cls}-icon-after {
		padding-right: calc(@btn-padding-horizontal-xl - 2px);
	}
}

// Ghost
.@{btn-prefix-cls} {
	&&-background-ghost {
		background: @btn-default-ghost-bg !important;
	}
}

//group
.@{btn-prefix-cls}-group {
	align-items: center;
}

// .@{btn-prefix-cls}-group .@{btn-prefix-cls} {
// 	&:after {
// 		display: none;
// 	}
// }

.@{btn-prefix-cls} + .@{btn-prefix-cls} {
	margin-inline-start: @component-interval-base;
}

.@{btn-prefix-cls}-dangerous {
	&:not([disabled]) {
		color: @danger-color;
	}

	//默认样式
	&:not([disabled]):hover {
		border-color: @danger-color-disabled;
		background-color: @danger-color-light;
		color: @danger-color-hover;
	}

	&:not([disabled]):active {
		border-color: @danger-color-disabled;
		background-color: @danger-color-light2;
		color: @danger-color-hover;
	}
	.button-disabled(@color: @danger-color-disabled, @background:@danger-color-light, @border: transparent);

	&.@{btn-prefix-cls}-primary {
		.b-design-primary-graident(
			linear-gradient(90deg, @red-60, @red-50),
			radial-gradient(circle, @red-60, @red-50),
			linear-gradient(45deg, @red-60, @red-40)
		);

		.button-disabled(@color: @white, @background:@danger-color-disabled, @border: transparent);
	}

	&.@{btn-prefix-cls}-secondary {
		&,
		&:hover,
		&:focus,
		&:not([disabled]):active {
			border-color: @danger-color;
			color: @danger-color;

			.gradient-border(@gradient-dangerous-secondary-button, @white);
		}
		&:not([disabled]):hover {
			box-shadow: @btn-shadow;

			&::after {
				background: @danger-color-light;
			}
		}

		&:not([disabled]):active {
			&::after {
				background: @danger-color-light2;
			}
		}

		.button-disabled(@color: @danger-color-disabled, @background:transparent, @border: @danger-color-disabled);
	}

	&.@{btn-prefix-cls}-text {
		&:not([disabled]):hover {
			border-color: transparent;
		}
		.button-disabled(@color: @danger-color-disabled, @background:transparent, @border: transparent);
	}
}