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

@icon-prefix-cls: ~'@{ant-prefix}-icon';
@tag-folded-corner-size: 8px;
@border-width: 1px;

.@{tag-prefix-cls} {
	height: @tag-height-m;
	line-height: @tag-height-m;
	border-radius: @border-radius-base;
	border: 0px;
	margin: 0px;
	padding: 0 @tag-padding-md;
	display: inline-flex;
	align-items: center;

	&:hover {
		background: @tag-default-hover-bg;
	}
	.@{tag-prefix-cls}-close-icon {
		color: @placeholder-color;
	}
	.@{icon-prefix-cls} {
		height: @font-size-sm;
		font-size: @font-size-sm;
		color: @placeholder-color;
		display: inline-flex;
	}

	// 除关闭icon外的icon
	& .@{icon-prefix-cls}:not(&-close-icon .@{icon-prefix-cls}):not(&-checked-icon) {
		margin-right: calc(@margin-xss + 2px);
		color: @tag-default-color;
	}

	// disabled
	&-disabled {
		cursor: not-allowed;
		pointer-events: none;
		background-color: @tag-disabled-bg;

		&,
		a {
			color: @tag-disabled-color;
		}

		.@{icon-prefix-cls} {
			color: @tag-disabled-color!important;
		}
	}

	&-disabled &-close-icon {
		background-color: @tag-default-bg;
	}

	// Closeable样式
	&-closeable:hover {
		background: @tag-default-bg;

		.@{tag-prefix-cls}-close-icon {
			background-color: @component-background-active;
		}
	}

	&-close-icon,
	&-checked-icon {
		margin-left: @margin-xss !important;
		height: @font-size-sm;
		display: flex;
		margin-right: calc(@margin-xss - @tag-padding-md);
		border-radius: 100%;
		transition: all 0.1s linear;
	}

	&-xs {
		height: @tag-height-xs;
		line-height: @tag-height-xs;
		padding: 0 @tag-padding-xs;
	}

	&-sm {
		height: @tag-height-sm;
		line-height: @tag-height-sm;
		padding: 0 @tag-padding-xs;
	}

	&-lg {
		height: @tag-height-lg;
		line-height: @tag-height-lg;
		font-size: @font-size-base;
	}

	&-xs &-close-icon,
	&-xs &-checked-icon {
		margin-right: calc(@margin-xss - @tag-padding-xs);
	}

	&-sm &-close-icon,
	&-sm &-checked-icon {
		margin-right: calc(@margin-xss - @tag-padding-xs);
	}

	&-lg &-close-icon,
	&-lg &-checked-icon {
		margin-left: calc(@margin-xss + 2px) !important;
		margin-right: calc(@margin-xss + 2px - @tag-padding-md);
	}

	// checkable相关样式
	&-checkable {
		background-color: @tag-default-bg;

		.@{tag-prefix-cls}-checked-icon {
			color: @tag-checked-color;
			display: none;
		}

		&&-checked .@{tag-prefix-cls}-checked-icon {
			display: flex;
		}
	}

	&-outline {
		line-height: calc(~'@{tag-height-m} - 2px');
	}

	&-xs&-outline {
		line-height: calc(~'@{tag-height-xs} - 2px');
	}

	&-sm&-outline {
		line-height: calc(~'@{tag-height-sm} - 2px');
	}

	&-lg&-outline {
		line-height: calc(~'@{tag-height-lg} - 2px');
	}

	.make-color-classes(@i: length(@bdesign-preset-colors)) when (@i > 0) {
		.make-color-classes(@i - 1);
		@color: extract(@bdesign-preset-colors, @i);
		@lightColor: '@{color}-10';
		@lightBorderColor: '@{color}-30';
		@darkColor: '@{color}-60';
		@textColor: '@{color}-70';
		@hoverbgColor: '@{color}-20';
		@cornerColor: '@{color}-50';

		&-@{color} {
			color: @@textColor;
			background: @@lightColor;
			border-color: @@lightBorderColor;

			&:hover {
				background: @@lightColor;
				.@{tag-prefix-cls}-close-icon {
					background-color: @@hoverbgColor;
				}
			}
			.@{icon-prefix-cls},
			.@{tag-prefix-cls}-close-icon {
				color: @@cornerColor!important;
			}
		}

		&-@{color}&-outline {
			color: @@textColor;
			background: transparent !important;
			border-width: 1px;
			border-style: solid;
			border-color: @@lightBorderColor;
			.@{iconfont-css-prefix} {
				color: @@textColor;
			}

			&:hover {
				background: transparent !important;
			}
		}

		&-@{color}&-solid {
			color: @text-color-inverse;
			background: @@darkColor !important;
			border-color: @@textColor;
			.@{iconfont-css-prefix} {
				color: @white;
			}

			&:hover {
				background: @@darkColor;
			}
		}

		&-@{color}-inverse {
			color: @text-color-inverse;
			background: @@darkColor;
			border-color: @@darkColor;
		}

		&-@{color}&-checkable {
			color: @@textColor;
			background: @@lightColor;
			border-color: @@lightColor;
			&:hover {
				background-color: @@hoverbgColor;
				border-color: @@hoverbgColor;
				color: @@textColor!important;
			}
			&.@{tag-prefix-cls}-checkable-checked {
				border-color: @@lightBorderColor;
				color: @@textColor!important;

				.@{tag-prefix-cls}-diagonal-line,
				.@{tag-prefix-cls}-folded-corner {
					background: @@cornerColor;
				}
			}
		}
		&-@{color}&-disabled,
		&-@{color}&-checkable&-disabled {
			background-color: @@lightColor!important;
			border-color: @@lightColor!important;
			color: @@lightBorderColor!important;
			.@{tag-prefix-cls}-diagonal-line,
			.@{tag-prefix-cls}-folded-corner {
				background: @@lightBorderColor!important;
			}
			.@{icon-prefix-cls},
			.@{tag-prefix-cls}-close-icon {
				color: @@lightBorderColor!important;
			}
		}
	}

	.make-color-classes();

	&-white {
		color: @tag-default-color;
		background-color: @white;
		border-color: @white;
		&:hover {
			background: @white;
		}
	}
	&-white&-checkable {
		color: @tag-default-color;
		background-color: @white;
		border-color: @white;
		&:hover {
			background-color: @normal-background;
			border-color: @normal-background;
		}
		&.@{tag-prefix-cls}-checkable-checked {
			.tag-style(@primary-30, @white, @primary-50);
			&:hover {
				.tag-style(@primary-30, @primary-10, @primary-50);
			}
		}
	}
	&-white&-disabled,
	&-white&-checkable&-disabled {
		color: @disabled-color!important;
		.@{tag-prefix-cls}-diagonal-line,
		.@{tag-prefix-cls}-folded-corner {
			background: @disabled-color!important;
		}
		.@{icon-prefix-cls},
		.@{tag-prefix-cls}-close-icon {
			color: @disabled-color!important;
		}
	}
}

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

.@{tag-prefix-cls} {
	position: relative;

	// Folded corner interatciton
	&-checkable {
		border-radius: @border-radius-base;
		border-width: @border-width;
		border-style: solid;
		transition: all @animation-duration-base @ease-in-out;
		.tag-corner(0px, @border-width);
		&:not(&-checked):hover {
			color: unset;
		}

		&-checked {
			.tag-corner(@tag-folded-corner-size, @border-width);
		}

		.@{tag-prefix-cls}-diagonal-line {
			display: block;
			position: absolute;
			width: calc(@tag-folded-corner-size * 1.414);
			height: @border-width;
			background: @primary-color;
			transform-origin: right center;
			transform: translate(100%, 100%) rotateZ(-45deg);
			bottom: calc(@tag-folded-corner-size - @border-width);
			right: calc(-@border-width / 2);
			transition: all @animation-duration-base @ease-in-out;
		}

		// Filled corner
		.@{tag-prefix-cls}-folded-corner {
			position: absolute;
			background: @primary-color;
			width: @tag-folded-corner-size;
			height: @tag-folded-corner-size;
			border-top-left-radius: @border-radius-base;
			clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
			bottom: -@border-width;
			right: -@border-width;
			transform: translate(100%, 100%);
			transition: all @animation-duration-base @ease-in-out;
		}

		&-checked {
			.@{tag-prefix-cls}-diagonal-line {
				// translate(2%, 0) instead of translate(0, 0) for visual seamlessness
				transform: translate(2%, 0) rotateZ(-45deg);
			}

			.@{tag-prefix-cls}-folded-corner {
				transform: translate(0, 0);
			}
		}
	}

	// size
	&-xs&-checkable {
		&-checked {
			.tag-corner(6px, @border-width);
		}

		.@{tag-prefix-cls}-diagonal-line {
			width: calc(6px * 1.414);
			bottom: calc(6px - @border-width);
		}

		.@{tag-prefix-cls}-folded-corner {
			width: 6px;
			height: 6px;
		}
	}

	&-sm&-checkable {
		&-checked {
			.tag-corner(6px, @border-width);
		}

		.@{tag-prefix-cls}-diagonal-line {
			width: calc(6px * 1.414);
			bottom: calc(6px - @border-width);
		}

		.@{tag-prefix-cls}-folded-corner {
			width: 6px;
			height: 6px;
		}
	}

	&-lg&-checkable {
		&-checked {
			.tag-corner(8px, @border-width);
		}

		.@{tag-prefix-cls}-diagonal-line {
			width: calc(8px * 1.414);
			bottom: calc(8px - @border-width);
		}

		.@{tag-prefix-cls}-folded-corner {
			width: 8px;
			height: 8px;
		}
	}

	// Color
	// Default
	&-checkable {
		&-checked:not(.@{tag-prefix-cls}-disabled) {
			color: @tag-checked-color;
		}

		.tag-style(@background-color-base, @background-color-base, @primary-50);

		&:hover {
			.tag-style(@background-color-base, @background-color-base, @primary-50);
			background: @tag-default-hover-bg;
			border-color: @tag-default-hover-bg;
		}

		&-checked {
			.tag-style(@primary-30, @primary-10, @primary-50);
		}

		&-checked:hover {
			.tag-style(@primary-30, @primary-20, @primary-50);
		}

		&-checked.@{tag-prefix-cls}-disabled,
		&-checked.@{tag-prefix-cls}-disabled:hover {
			.tag-style(@border-color-base, @tag-disabled-bg, @tag-disabled-color);
		}
	}

	// Outlined
	&-outline&-checkable {
		&-checked:not(.@{tag-prefix-cls}-disabled) {
			color: @tag-checked-color;
		}

		.tag-style(@border-color-base, @background: transparent, @fill-corner: @primary-50);

		&:hover {
			.tag-style(@border-color-hover, transparent, @primary-50);
		}

		&-checked {
			.tag-style(@primary-30, transparent, @primary-50);
		}

		&-checked:hover {
			.tag-style(@primary-30, @link-color-light, @primary-50);
		}

		&-checked.@{tag-prefix-cls}-disabled,
		&-checked.@{tag-prefix-cls}-disabled:hover {
			.tag-style(@border-color-base, transparent, @tag-disabled-color);
		}
	}

	// Solid
	&-solid&-checkable {
		color: @tag-checked-color;
		&:not(&-checked):hover {
			color: @tag-checked-color;
		}
		&-checked:not(.@{tag-prefix-cls}-disabled) {
			color: @tag-checked-color;
		}

		.tag-style(@primary-10, @background: @primary-10, @fill-corner: @primary-50);

		&:hover {
			.tag-style(@primary-30, @primary-10, @primary-50);
		}

		&-checked {
			.tag-style(@primary-30, @primary-10, @primary-50);
		}

		&-checked:hover {
			.tag-style(@primary-30, @primary-20, @primary-50);
		}

		&-checked.@{tag-prefix-cls}-disabled,
		&-checked.@{tag-prefix-cls}-disabled:hover {
			.tag-style(@border-color-base, @primary-10, @tag-disabled-color);
		}
		&.@{tag-prefix-cls}-disabled {
			&,
			a {
				color: @tag-disabled-color;
			}

			.@{icon-prefix-cls} {
				color: @tag-disabled-color!important;
			}
		}
	}

	> .@{iconfont-css-prefix} + span,
	> span + .@{iconfont-css-prefix} {
		margin-left: 0;
	}
}

//新增圆角
.@{tag-prefix-cls}-rounded {
	border-radius: calc(@tag-height-lg / 2);

	.@{tag-prefix-cls}-folded-corner,
	.@{tag-prefix-cls}-diagonal-line {
		display: none;
	}
}

//自定义颜色时icon为白色
.@{tag-prefix-cls}
	.@{iconfont-css-prefix}:not(.@{tag-prefix-cls}-close-icon
		.@{iconfont-css-prefix}):not(.@{tag-prefix-cls}-checked-icon) {
	color: @white;
}