/* Gemeinsame Dropdown-Styles für PromiseSelect und AutocompleteInput */

.async-dropdown-container {
	position: relative;
}

.async-dropdown-input-wrapper {
	position: relative;
	width: 100%;
}
.async-dropdown-icons {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: none;
}

.async-dropdown-input {
	padding-right: 32px;
	cursor: pointer;
	height: 32px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	user-select: none;

	&:focus {
		outline: 2px solid var(--app-font-color);
		outline-offset: -2px;
	}

	&.disabled {
		background-color: var(--gray-tertiary);
		color: var(--gray-secondary);
		cursor: not-allowed;
		border-color: var(--gray-secondary);
	}

	&.open {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	&.open-upwards {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}
}

.async-dropdown-list {
	position: fixed;
	z-index: 9999;
	max-height: 200px;
	overflow-y: auto;
	background-color: var(--background-color);
	border: 2px solid var(--app-font-color);
	border-top: none;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.35),
		0 4px 8px rgba(0, 0, 0, 0.25);
	list-style: none;
	margin: 0;
	padding: 0;
	transform: translateY(-3px);
	font-size: 0.8rem;

	&.open-upwards {
		border-top: 2px solid var(--app-font-color);
		border-bottom: none;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow:
			0 -12px 24px rgba(0, 0, 0, 0.35),
			0 -4px 8px rgba(0, 0, 0, 0.25);
		transform: translateY(3px);
	}
}

.async-dropdown-option {
	padding: 8px 12px;
	cursor: pointer;
	color: var(--app-font-color);
	transition: background-color 0.15s ease;
	border-bottom: 1px solid var(--border-color);

	&:last-child {
		border-bottom: none;
	}

	&:hover {
		background-color: var(--background-highlight-color);
	}

	&.selected {
		background-color: var(--app-primary-color);
		color: white;
	}

	&.placeholder {
		color: var(--gray-primary);
		font-style: italic;
	}

	&.selected.placeholder {
		background-color: var(--gray-tertiary);
		color: var(--gray-primary);
	}

	&.focused {
		background-color: var(--background-highlight-color);
		outline: 2px solid var(--app-primary-color);
		outline-offset: -2px;
	}

	&.focused.selected {
		outline: 2px solid white;
	}

	& strong {
		font-weight: 600;
		/* color: var(--app-primary-color); */
	}
}

/* Scrollbar styling for dropdown */
.async-dropdown-list::-webkit-scrollbar {
	width: 6px;
}

.async-dropdown-list::-webkit-scrollbar-track {
	background: var(--gray-tertiary);
}

.async-dropdown-list::-webkit-scrollbar-thumb {
	background: var(--gray-secondary);
	border-radius: 3px;
}

.async-dropdown-list::-webkit-scrollbar-thumb:hover {
	background: var(--gray-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.async-dropdown-list {
		max-height: 150px;
	}

	.async-dropdown-option {
		padding: 10px 12px;
	}
}