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

@import './single.less';
@import './multiple.less';
@import (reference) '../../input/style/mixin.less';

@select-prefix-cls: ~'@{ant-prefix}-select';
@select-arrowx-margin-lg: 12px;
@select-arrowx-margin: 8px;

@select-height-without-border: @select-single-item-height - 2 * @border-width-base;

.@{select-prefix-cls} {
	font-size: @font-size-md;
	&:not(&-customize-input) &-selector {
		background-color: @select-background;
		border-color: @select-border-color;
		height: @select-single-item-height;

		.@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
			border-color: @primary-color;
			box-shadow: none;
		}
	}

	&:not(&-disabled):not(&-focused):hover &-selector {
		box-shadow: none;
		.bd-hover();
		//tag的icon
		.@{select-prefix-cls}-selection-item {
			.@{iconfont-css-prefix} {
				color: @font-color-caption;
			}
			&:hover {
				.@{iconfont-css-prefix} {
					color: @text-color;
				}
			}
		}
	}
	//disabled
	&-disabled &-arrow,
	&-disabled &-clear,
	&-disabled &-selection-placeholder {
		color: @input-disabled-color;
	}

	// ======================== Selection ========================
	// ========================== Arrow ==========================
	&-arrow,
	&-clear {
		color: @font-color-caption;
		width: @select-icon-font-size;
		height: @select-icon-font-size;
		margin-top: 0 !important;
		top: calc((@select-single-item-height - @select-icon-font-size) / 2);
		font-size: @select-icon-font-size;
		right: @select-arrowx-margin;
	}
	&-arrow {
		transition: transform 0.3s;
	}
	//打开状态
	&-open:not(&-show-search) &-arrow {
		transform: rotate(180deg);
	}

	&-allow-clear &-clear {
		background-color: @select-clear-background;
		border-radius: 100%;
		&::after {
			content: '';
			width: calc(100% + 4px);
			height: calc(100% + 4px);
			background: @component-background-hover;
			border-radius: 100%;
			position: absolute;
			top: -2px;
			left: -2px;
			z-index: -1;
			opacity: 0;
			transition: all 0.3s ease-out;
		}
		&:hover {
			// background: @component-background-hover;
			&:after {
				opacity: 1;
			}
		}
	}

	&-lg &-arrow,
	&-lg &-clear {
		width: @select-icon-font-size-lg;
		height: @select-icon-font-size-lg;
		// margin-top: (-@select-icon-font-size-lg / 2);
		top: calc((@select-single-item-height-lg - @select-icon-font-size-lg) / 2);
		font-size: @select-icon-font-size-lg;
		right: @select-arrowx-margin-lg;
	}

	&-sm &-arrow,
	&-sm &-clear {
		right: 8px;
		top: calc((@select-single-item-height-sm - @select-icon-font-size-sm) / 2);
	}

	&-xs &-arrow,
	&-xs &-clear {
		right: 8px;
		top: calc((@select-single-item-height-xs - @select-icon-font-size-xs) / 2);
	}

	// ========================== Clear ==========================
	&-clear {
		background: none;
	}

	// ========================== Popup ==========================
	&-dropdown {
		box-shadow: @dropdown-shadow;
		border-radius: @border-radius-container;
		font-size: @font-size-sm;

		.rc-virtual-list-scrollbar.rc-virtual-list-scrollbar-show {
			display: block !important;
			width: 4px !important;
			right: 4px !important;

			.rc-virtual-list-scrollbar-thumb {
				background-color: @gray-20 !important;
			}
		}
	}

	// ========================= Options =========================

	// ========================= suffix  prefix=========================
	// .@{select-prefix-cls}-selection-placeholder,
	.@{select-prefix-cls}-selection-prefix,
	.@{select-prefix-cls}-selection-search-suffix {
		color: @heading-color;
	}

	&-item-group {
		color: @font-color-caption;
	}

	// =========== Option ===========
	&-item-option {
		//带checkbox带上下居中
		&-content {
			display: flex;
			align-items: center;
		}

		&-selected:not(&-disabled) {
			// color: @select-item-selected-color;
			color: inherit;
		}
		&-grouped {
			padding-left: @control-padding-horizontal;
		}
	}

	// ============================================================
	// ==                          Size                          ==
	// ============================================================
	&-lg {
		font-size: @font-size-base;
	}

	&-sm,
	&-xs {
		font-size: @font-size-sm;
	}

	.select-size(@suffix, @input-height, @padding-left, @padding-right) {
		@merged-cls: ~'@{select-prefix-cls}@{suffix}';

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

			.@{select-prefix-cls}-selection-placeholder {
				left: @padding-left;
				padding-right: 0;
			}
		}
	}

	.select-size('', @select-single-item-height, @select-selector-padding-left, @select-selector-padding-right);
	.select-size('-lg', @select-single-item-height-lg, @select-selector-padding-left-lg, @select-selector-padding-right-lg);
	.select-size('-sm', @select-single-item-height-sm, @select-selector-padding-left-sm, @select-selector-padding-right-sm);
	.select-size('-xs', @select-single-item-height-xs, @select-selector-padding-left-xs, @select-selector-padding-right-xs);

	// ========================= Selector with Show Arrow =========================

	&-single:not(&-customize-input).@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
		right: @select-icon-font-size + @select-selector-padding-right * 2;

		.@{select-prefix-cls}.@{select-prefix-cls}-lg& {
			right: @select-icon-font-size-lg + @select-selector-padding-right-lg * 2;
		}

		.@{select-prefix-cls}.@{select-prefix-cls}-sm& {
			right: @select-icon-font-size-sm + @select-selector-padding-right-sm * 2;
		}

		.@{select-prefix-cls}.@{select-prefix-cls}-xs& {
			right: @select-icon-font-size-xs + @select-selector-padding-right-xs * 2;
		}
	}

	&:not(&-customize-input).@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector {
		padding-right: @select-icon-font-size + @select-selector-padding-right + @select-arrowx-margin;

		.@{select-prefix-cls}.@{select-prefix-cls}-lg& {
			padding-right: @select-icon-font-size-lg + @select-selector-padding-right-lg + @select-arrowx-margin-lg;
		}

		.@{select-prefix-cls}.@{select-prefix-cls}-sm& {
			padding-right: @select-icon-font-size-sm + @select-selector-padding-right-sm + @select-arrowx-margin;
		}

		.@{select-prefix-cls}.@{select-prefix-cls}-xs& {
			padding-right: @select-icon-font-size-xs + @select-selector-padding-right-xs + @select-arrowx-margin;
		}
	}
}