$tf-datalist-items-background-color: $white !default;
$tf-datalist-items-shadow-color: $shadow !default;
$tf-typeahead-input-width: 260px !default;
$tf-typeahead-items-focus-background-color: shade($tf-datalist-items-background-color, 5) !default;
$tf-typeahead-no-result-color: $silver !default;

.tf-datalist {
	display: flex;
	align-items: center;
	width: 100%;

	.toggle {
		position: absolute;
		right: 5px;
		pointer-events: none;
	}

	.container {
		width: 100%;

		> div {
			width: 100%;
		}
	}

	.items-container {
		position: absolute;
		margin-top: $padding-smaller;
		top: 100%;
		right: 0;
		left: 0;
		max-height: 70vh;
		min-width: $tf-typeahead-input-width;
		font-size: 1.5rem;
		background-color: $tf-datalist-items-background-color;
		border-radius: $border-radius-base;
		box-shadow: 0 1px 3px 0 $tf-datalist-items-shadow-color;
		overflow-y: auto;
		z-index: 999;
	}

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

		> li > div {
			padding: $padding-smaller;
		}
	}
}