@import '../../style/themes/index';
@import '../../style/mixins/index.less';

@icon-prefix-cls: ~'@{ant-prefix}-tag';

.tag-corner(@corner-size, @border-width: 1px) {
	clip-path: polygon(
		/* first outer rect */ calc(100% + @border-width / 2) calc(100% + @border-width / 2),
		calc(100% + @border-width / 2) 0,
		0 0,
		0 calc(100% + @border-width / 2),
		/* return to first outer triangle */ calc(100% + @border-width / 2) calc(100% + @border-width / 2),
		calc(100% + @border-width / 2) calc(100% + @border-width / 2),
		calc(100% - @corner-size - @border-width / 2) calc(100% + @border-width / 2),
		calc(100% + @border-width / 2) calc(100% - @corner-size - @border-width / 2),
		calc(100% + @border-width / 2) calc(100% + @border-width / 2)
	);
}

.tag-style(@border, @background, @fill-corner) {
	border-color: @border;
	background: @background;

	.@{tag-prefix-cls}-diagonal-line {
		background: @border;
	}

	.@{tag-prefix-cls}-folded-corner {
		background: @fill-corner;
	}
}