.multi-input-container {
	position: relative;
}

.multi-input-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 4px;
	border-radius: 4px;
	background-color: var(--background-color);
	min-height: 32px;
	padding: 0 0.5em;
	cursor: text;
	font-family: var(--app-font-family);
	border: 1px solid var(--border-color);

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

	& .multi-input-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		width: 100%;
		padding-top: 0.4em;
		padding-bottom: 0.2em;
	}

	& .multi-input-wrapper {
		flex-basis: 100%;
		min-width: 120px;
		position: relative;
		display: flex;
		align-items: center;
		gap: 2px;

		/* Suggestions dropdown positioning */
		& .suggestions {
			position: fixed;
		}

		/* Override embedded child input styles */
		& .async-dropdown-container {
			position: static;
			width: 100%;
		}

		& .async-dropdown-input,
		& .basic-input {
			border: none !important;
			outline: none !important;
			background: transparent;
			height: auto;
			min-height: unset;
			padding: 0;
			box-shadow: none;

			&:focus {
				outline: none !important;
				border: none !important;
			}
		}
	}
}