@import (reference) '../../style/themes/index';

@input-prefix-cls: ~'@{ant-prefix}-input';
@icon-prefix-cls: ~'@{ant-prefix}-icon';
@input-affix-suffix-margin: 8px;
.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon {
	color: @font-color-caption;
	position: relative;

	&:hover {
		color: @gray-100;
		&:after {
			opacity: 1;
		}
	}
	&::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;
	}
	&-has-suffix {
		margin: 0 0 0 @input-affix-suffix-margin;
	}
}

.@{input-prefix-cls}-success {
	.@{ant-prefix}-input-suffix {
		color: @success-color!important;
		.@{iconfont-css-prefix} {
			color: @success-color!important;
		}
	}
}

.@{input-prefix-cls}-loading {
	.@{ant-prefix}-input-suffix {
		color: @primary-color;
	}
}

// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
	padding: 0 !important;
	border: 0 !important;

	.@{icon-prefix-cls}.@{input-prefix-cls}-clear-icon-hidden {
		visibility: unset;
	}

	.@{ant-prefix}-input-clear-icon {
		position: absolute;
		right: 9px;
		z-index: 1;
	}
}