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

.lucid-SearchField {
	position: relative;

	.lucid-TextField {
		border-radius: @TextField-size-height / 2;
		padding: 0 @size-standard;
	}

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

	&-Icon {
		fill: @color-mediumGray;

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