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

$tc-datalist-items-max-height: 20rem !default;
$tc-datalist-item-height: 2.5rem !default;

.tc-datalist-form {
	width: 100%;
}

.container {
	width: 100%;

	> div {
		width: 100%;
	}
}

.items-container {
	max-height: $tc-datalist-items-max-height;
	z-index: 999;

	:global(.tc-typeahead-section-container) {
		:global(.tc-typeahead-section-header) {
			border-bottom: none;
		}
	}
}

.tc-datalist-item {
	display: flex;
	align-items: center;

	.tc-datalist-item-icon {
		width: $svg-md-size;
		height: $svg-md-size;
		color: tokens.$coral-color-neutral-icon;
		margin-right: $padding-normal;
	}
}

.items {
	margin: 0;
	padding: 0;
	list-style-type: none;

	> li > div {
		display: flex;
		height: $tc-datalist-item-height;

		&:hover {
			background-color: tokens.$coral-color-neutral-background-medium;
		}
	}
}