@charset "UTF-8";

/**
 * forms-autocomplete.css 1.0.0
 *
 * Search autocomplete dropdown.
 * Variables defined in forms.css — VARS > CUSTOM.
 *
 * STRUCTURE
 * .search-autocomplete-container
 *   .autocomplete-results-container
 *     .autocomplete-results
 *       .autocomplete-group
 *         .autocomplete-group-label
 *         .autocomplete-items
 *           .autocomplete-item > .autocomplete-item-title
 *
 * STATES
 * .autocomplete-results-container.visible — open
 * .autocomplete-item.selected            — keyboard selection
 * .autocomplete-loading                  — fetching results
 * .autocomplete-empty                    — no results
 */

/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */

:root {
	--autocomplete-background: var(--bright-color);

	--autocomplete-border-color: #ddd;

	--autocomplete-group-label-color: var(--dark-color);
	--autocomplete-group-label-background: var(--light-color);


	
	--autocomplete-group-label-border-color: #eee;

	--autocomplete-item-color: var(--dark-color);
	--autocomplete-item-background: var(--bright-color);

	--autocomplete-item-hover-color: var(--dark-color);
	--autocomplete-item-hover-background: var(--accent-color);

	--autocomplete-empty-color: #999;

	--autocomplete-scrollbar-track: #f1f1f1;
	--autocomplete-scrollbar-thumb: #ccc;
	--autocomplete-scrollbar-thumb-hover: #999;
}

/* ==================================================== */
/* ==================== ANIMATIONS ==================== */
/* ==================================================== */

.autocomplete-results-container {
	transition:
	opacity var(--duration-fast) var(--ease),
	max-height var(--duration-fast) var(--ease);
}
.autocomplete-item {
	transition:
	background-color var(--duration-fast) var(--ease);
}


/* =================================================== */
/* ==================== CONTAINER ==================== */
/* =================================================== */

.search-autocomplete-container {
	position: relative;
	width: 100%;
}

.autocomplete-results-container {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	margin-top: var(--form-gap);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	background: var(--autocomplete-background);
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	filter: var(--form-filter);
}
.autocomplete-results-container.visible {
	max-height: 500px;
	overflow-y: auto;
	opacity: 1;
}


/* ================================================= */
/* ==================== RESULTS ==================== */
/* ================================================= */

.autocomplete-results {
	padding: var(--form-gap) 0;
}


/* =============================================== */
/* ==================== GROUP ==================== */
/* =============================================== */

.autocomplete-group {
	margin-bottom: var(--form-gap);
}
.autocomplete-group:last-child {
	margin-bottom: 0;
}
.autocomplete-group-label {
	font-size: var(--form-font-size);
	font-weight: var(--form-title-font-weight);
	text-transform: var(--form-title-text-transform);
	padding: var(--input-padding);
	color: var(--autocomplete-group-label-color);
	background: var(--autocomplete-group-label-background);
	/*
	border-top: 1px solid var(--autocomplete-group-label-border-color);
	border-bottom: 1px solid var(--autocomplete-group-label-border-color);*/
}
.autocomplete-group:first-child .autocomplete-group-label {
	border-top: none;
}


/* ============================================== */
/* ==================== ITEM ==================== */
/* ============================================== */

.autocomplete-item {
	display: block;
	/*color: var(--input-active-text-color);*/
	padding: var(--input-padding);
	text-decoration: none;
	cursor: pointer;
}
.autocomplete-item::after {
	display: none;
}
.autocomplete-item:hover,
.autocomplete-item.selected {
	color: var(--input-hover-text-color);
	background: var(--input-hover-background-color);
}


/* ================================================= */
/* ==================== LOADING ==================== */
/* ================================================= */

.autocomplete-loading,
.autocomplete-empty {
	padding: 1.5rem;
	text-align: center;
	/*color: var(--autocomplete-empty-color);
	font-size: .9rem;*/
}

.autocomplete-loading span::after {
	content: '...';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
	0%, 20% { content: '.'; }
	40%      { content: '..'; }
	60%, 100% { content: '...'; }
}


/* =================================================== */
/* ==================== SCROLLBAR ==================== */
/* =================================================== */

.autocomplete-results-container::-webkit-scrollbar { width: 8px; }
.autocomplete-results-container::-webkit-scrollbar-track { background: var(--autocomplete-scrollbar-track); border-radius: 0 8px 8px 0; }
.autocomplete-results-container::-webkit-scrollbar-thumb { background: var(--autocomplete-scrollbar-thumb); border-radius: 4px; }
.autocomplete-results-container::-webkit-scrollbar-thumb:hover { background: var(--autocomplete-scrollbar-thumb-hover); }


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


/* ========== @MEDIA ========== */

@media (max-width: 768px) {
	.autocomplete-results-container {
		max-width: 100vw;
		left: -1rem;
		right: -1rem;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
	.autocomplete-results-container.visible {
		max-height: 70vh;
	}
}