@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

// Filter styles
$tc-filter-bar-width: 250px !default;

.filter {
	display: flex;
	height: $padding-larger;
	background-color: tokens.$coral-color-neutral-background-medium;
	padding: 0;
	border-radius: $border-radius-base;

	.search-icon {
		position: absolute;
		left: 0;
		margin: 8px 0;
		height: $svg-md-size;
		width: $padding-larger;
		fill: tokens.$coral-color-neutral-icon-weak;
	}

	> :global(.form-group) {
		margin-bottom: 0;
		display: flex;
		flex-grow: 1;

		input {
			padding-left: $padding-larger;
			padding-right: $padding-normal;
		}
	}

	.animate {
		width: $tc-filter-bar-width;
		animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.search {
		box-shadow: none;
		color: tokens.$coral-color-neutral-text;
		font-size: $font-size-base;

		&::placeholder {
			color: tokens.$coral-color-neutral-icon-weak;
		}

		&::-ms-clear {
			display: none;
		}
	}

	.remove {
		display: inline-block;
		color: tokens.$coral-color-neutral-text;
		padding: $padding-smaller;
		line-height: 1.25rem;
		height: 100%;
		position: absolute;
		right: 0;

		:global(.tc-svg-icon) {
			height: $svg-xs-size;
			width: $svg-xs-size;
			margin: 0 $padding-small;
			vertical-align: baseline;
		}
	}

	&.navbar {
		margin-top: 8px;
		margin-bottom: 8px;

		.remove {
			min-height: 1.25rem;
		}
	}
}

.highlight {
	background-color: tokens.$coral-color-warning-background;

	.search-icon,
	.search {
		fill: tokens.$coral-color-neutral-text;
	}
}

.button-docked {
	color: tokens.$coral-color-neutral-icon-weak;
}

@keyframes reveal {
	0% {
		opacity: 0;
		width: 0;
		overflow: hidden;
	}

	50% {
		opacity: 1;
	}

	100% {
		width: $tc-filter-bar-width;
	}
}