@import '../../style/themes/index';
@import '../../input/style/mixin.less';

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

.@{search-prefix-cls} {
	position: relative;
	&:not(&-brand) {
		border: @border-width-base @border-style-base @input-border-color;
		&:hover {
			.bd-hover();
			z-index: 2;
		}
		&:focus-within {
			.bd-active();
		}
	}

	&.@{ant-prefix}-input-breathing:focus-within {
		.gradient-breathing-animation();
	}
	.@{ant-prefix}-input {
		border: 0px !important;

		&-search-button {
			transition: all 0.3s;
			background-color: @input-bg!important;
			color: @font-color-caption;
			padding-left: 0 !important ;
			padding-right: 8px !important;
			border: 0px !important;
			display: flex;
			align-items: center;
			background-image: none;

			&:after,
			&:before {
				display: none !important;
			}

			&:hover {
				border: 1px transparent solid;
				background-color: @input-bg;
				border-width: 1px !important;
				border-left: 0 !important;
				color: @gray-base;
				background-image: none;
			}

			.@{icon-prefix-cls} {
				font-size: @input-icon-size-md;
			}
		}

		&-group-addon {
			position: relative;
			z-index: 99;
			left: 0 !important;
		}
	}
	&&-large .@{ant-prefix}-input-search-button {
		padding-right: 12px !important;
	}

	.@{ant-prefix}-input-group .@{ant-prefix}-input-affix-wrapper:not(:last-child) {
		border-right: 0;
		border: 0 !important;
	}

	&-disabled,
	&[disabled] {
		.bd-disabled() !important;
		.@{ant-prefix}-input,
		.@{ant-prefix}-input-search-button {
			.bd-disabled() !important;
		}
	}
}

//brand
.@{search-prefix-cls} {
	// &-brand {
	// 	border: @border-width-base @border-style-base transparent;
	// 	&:hover {
	// 		border: @border-width-base @border-style-base transparent;
	// 	}
	// }

	&-brand .@{ant-prefix}-input {
		&-group-addon {
			background-color: transparent !important;
		}
		&,
		&-search-button {
			background-color: @search-brand-bg-color !important;
			border-color: transparent !important;
			color: fade(@white, 80%);
			.@{icon-prefix-cls} {
				color: fade(@white, 80%) !important;
			}
		}
	}
	&-brand {
		& > .@{ant-prefix}-input-group > .@{ant-prefix}-input-group-addon:last-child {
			left: 0;
		}
		&:not(.@{ant-prefix}-input-search-disabled):hover {
			.@{ant-prefix}-input {
				background-color: @search-brand-bg-color !important;
				border-color: transparent !important;
				color: fade(@white, 80%);
			}
			&.@{ant-prefix}-input-group-wrapper {
				.@{ant-prefix}-input-group-addon .@{ant-prefix}-btn.@{ant-prefix}-input-search-button {
					background-color: @search-brand-bg-color !important;
					border-color: transparent !important;
					color: fade(@white, 80%);
				}
			}
		}
		.@{ant-prefix}-input {
			&:focus,
			&-focused {
				color: @white!important;
				background: @search-brand-bg-color !important;

				& + .@{ant-prefix}-input-group-addon {
					.@{ant-prefix}-input-search-button {
						background: @search-brand-bg-color !important;
					}
				}
			}
		}
		&.@{search-prefix-cls}-disabled,
		&.@{search-prefix-cls}[disabled] {
			background-color: transparent !important;
			.@{ant-prefix}-input,
			.@{ant-prefix}-input-search-button {
				background-color: @search-brand-disabled-bg-color!important;
				color: @search-brand-disabled-color!important;
				border-color: transparent !important;
				.@{icon-prefix-cls} {
					color: @search-brand-disabled-color !important;
				}
			}
		}
	}
}
.@{ant-prefix}-select {
	&-auto-complete&:not(&-disabled):not(&-focused):hover {
		.@{ant-prefix}-select-selector {
			background-color: transparent;
			border-color: transparent;
		}
	}
}