@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-SearchField {
	position: relative;

	.@{prefix}-TextField {
		padding-right: 28px;
		border-radius: @size-height-half-standard;
		color: @color-neutral-9;
		box-shadow: inset 0 1px 2px 0 rgba(33, 31, 31, 0.12);

		&::placeholder {
			color: @color-neutral-7;
		}

		&-is-disabled {
			box-shadow: none;
		}
	}

	&-Icon-container {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	&-Icon {
		stroke: @color-neutral-7;

		&-active {
			stroke: @color-primary;
		}

		&-is-disabled {
			opacity: 0.35;
		}
	}
}