@use '@talend/design-tokens/lib/tokens' as tokens;

$search-icon-offset: 1.125rem;
$search-input-left-offset: 2rem;
$search-input-right-offset: 3.75rem;

.adv-search {
	position: relative;
	width: inherit;
	height: inherit;

	.adv-search-filter-icon {
		position: absolute;
		z-index: tokens.$coral-elevation-layer-standard-front;
		top: tokens.$coral-spacing-m;
		left: tokens.$coral-spacing-s;
	}

	&-error {
		margin-left: tokens.$coral-spacing-xs;
		color: tokens.$coral-color-danger-text;
	}

	.adv-search-input {
		box-shadow: none;
		color: tokens.$coral-color-neutral-text-weak;
		height: tokens.$coral-sizing-m;
		line-height: tokens.$coral-sizing-m;
		margin: tokens.$coral-spacing-xs tokens.$coral-spacing-xs;
		padding-left: $search-input-left-offset;
		padding-right: $search-input-right-offset;
		width: calc(100% - 1.25rem);

		&.has-error {
			box-shadow: inset 0 -0.125rem 0 tokens.$coral-color-danger-border;
		}

		// sass-lint:disable-next-line no-vendor-prefixes
		&::-ms-clear {
			display: none;
		}
	}

	&-buttons {
		position: absolute;
		top: tokens.$coral-spacing-xs;
		right: tokens.$coral-spacing-m;
	}
}