// @import './index.less';

@select-prefix-cls: ~'@{ant-prefix}-select';

/**
 * Do not merge `height` & `line-height` under style with `selection` & `search`,
 * since chrome may update to redesign with its align logic.
 */

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

// =========================== Overflow ===========================
.@{select-overflow-prefix-cls} {
	// flex-wrap: nowrap;
	// overflow: hidden;
	gap: 4px 0px;
	margin: 2px 0;
}

.@{select-prefix-cls}-multiple {
	// 在overflow item多于收索框时才出现的阴影。
	// .@{select-overflow-prefix-cls}-with-shadow {
	// 	&::after {
	// 		content: '';
	// 		position: absolute;
	// 		right: 0;
	// 		box-shadow: inset fade(@black, 20%) -8px 0 8px -8px;
	// 		width: 100%;
	// 		height: 100%;
	// 		z-index: 1;
	// 		pointer-events: none;
	// 	}
	// }

	.@{select-prefix-cls}-selector {
		padding-left: 4px !important;
		height: auto !important;
	}

	// ======================== Selections ========================

	//tag之间的间距
	.@{select-prefix-cls}-selection-overflow-item {
		margin-right: calc(@component-interval-base / 2);
	}

	.@{select-prefix-cls}-selection-item {
		border-radius: @border-radius-base;
		height: @tag-height-m;
		line-height: @tag-height-m;
		padding: 0 @tag-padding-md;

		&-content {
			margin-right: @component-interval-base;
		}

		&-remove {
			color: @font-color-caption;
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			font-size: @font-size-sm;

			&::after {
				content: '';
				position: absolute;
				border-radius: 50%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				z-index: -1;
			}
		}

		&:hover .@{select-prefix-cls}-selection-item-remove {
			&::after {
				background-color: @gray-10;
			}
		}
	}

	// Modified from 'antd/lib/select/style/multiple.less';
	// ============================================================
	// ==                          Size                          ==
	// ============================================================
	.select-size(@suffix, @input-height, @item-height, @item-margin-end) {
		@merged-cls: ~'@{select-prefix-cls}@{suffix}';

		&.@{merged-cls} {
			@select-selection-height: @input-height - @input-padding-vertical-base * 2;
			@select-height-without-border: @input-height - @border-width-base * 2;

			&:not(.@{select-prefix-cls}-customize-input) .@{select-prefix-cls}-selector {
				height: @input-height;
			}

			.@{select-prefix-cls}-selector::after {
				line-height: @select-selection-height;
			}

			.@{select-prefix-cls}-selection-item {
				height: @item-height;
				line-height: @item-height;
				margin-top: 0;
				margin-bottom: 0;
				border: none;
				background-color: @tag-default-bg;
			}

			.@{select-prefix-cls}-selection-search {
				height: @item-height;
				line-height: @item-height;

				&-input,
				&-mirror {
					height: @item-height;
					line-height: @select-selection-height - @border-width-base * 2;
				}
			}
		}
	}

	.select-size('', @select-multiple-item-height, 24px, 4px);
	.select-size('-lg', @select-multiple-item-height-lg, 32px, 8px);
	.select-size('-sm', @select-multiple-item-height-sm, 20px, 4px);
	.select-size('-xs', @select-multiple-item-height-xs, 20px, 4px);

	&.@{select-prefix-cls} {
		&-sm .@{select-prefix-cls}-selection-overflow-item,
		&-xs .@{select-prefix-cls}-selection-overflow-item {
			margin-right: calc(@component-interval-base / 2);
		}
	}

	// ============================================================
	// ==                     Item Icon Size                     ==
	// ============================================================
	.item-icon-size(@suffix, @item-remove-icon-size, @item-remove-icon-margin) {
		@merged-cls: ~'@{select-prefix-cls}@{suffix}';

		&.@{merged-cls} {
			.@{select-prefix-cls}-selection-item {
				margin-right: 0;
				padding-inline-end: @item-remove-icon-margin;
			}

			.@{select-prefix-cls}-selection-item-remove {
				font-size: @item-remove-icon-size;
				.@{icon-prefix-cls} {
					height: @item-remove-icon-size;
					font-size: @item-remove-icon-size;
				}

				&:after {
					width: @item-remove-icon-size + 4px;
					height: @item-remove-icon-size + 4px;
				}
			}
		}
	}

	.item-icon-size('', 12px, 6px);
	.item-icon-size('-lg', 14px, 6px);
	.item-icon-size('-sm', 12px, 4px);
	.item-icon-size('-xs', 12px, 4px);

	&.@{select-prefix-cls}-sm {
		.@{select-prefix-cls}-selection-placeholder {
			left: 12px;
		}
	}

	//disabled
	&.@{select-prefix-cls}-disabled {
		.@{select-prefix-cls}-selection-item {
			background-color: @normal-color;
		}
	}
}

.@{select-prefix-cls}-dropdown {
	.@{select-prefix-cls}-item-option-flex-wrapper {
		display: flex;
	}

	.@{select-prefix-cls}-item-option-prefix-icon-wrapper {
		position: relative;
		margin-right: @padding-xs;
	}

	.@{select-prefix-cls}-item-option-checkbox {
		pointer-events: none;

		.@{checkbox-prefix-cls}-inner {
			background: transparent;
		}
	}

	.@{select-prefix-cls}-item-option-checkbox-checked {
		pointer-events: none;
		display: none;
		position: absolute;
		top: 0;
		left: 0;
	}

	.@{select-prefix-cls}-item-option-selected {
		.@{select-prefix-cls}-item-option-checkbox-checked {
			display: inline-flex;
		}
	}

	.@{checkbox-prefix-cls}-wrapper + .@{checkbox-prefix-cls}-wrapper {
		margin-left: 0;
	}
}