.input {
	padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
	border-radius: var(--mantine-radius-default);
	cursor: pointer;
	min-height: 32px;
	display: flex;
	align-items: center;
	width: 100%;
	text-align: left;
	transition: border-color 0.2s ease;
	background-color: light-dark(
			var(--mantine-color-input-1),
			var(--mantine-color-input-9)
	);
	border: 1px solid var(--mantine-color-border-4);
	color: var(--mantine-color-inputFg-5);
}

.dropdown {
	background-color: light-dark(
			var(--mantine-color-input-1),
			var(--mantine-color-input-9)
	);
	color: var(--mantine-color-inputFg-5);
}

.searchInput {
	background-color: light-dark(
			var(--mantine-color-input-1),
			var(--mantine-color-input-9)
	);
	border: 1px solid var(--mantine-color-border-4);
	color: var(--mantine-color-inputFg-5);
}

.option {
	padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
	cursor: pointer;
	border-radius: var(--mantine-radius-sm);
	background-color: transparent;
	border: none;
	width: 100%;
	text-align: left;
	transition: background-color 0.2s ease;


	&:hover {
		background-color: var(--mantine-primary-color-light-hover);
	}
}

.optionActive {
	background-color: light-dark(
		var(--mantine-color-gray-1),
		var(--mantine-color-dark-6)
	);

	&:hover {
		background-color: light-dark(
				var(--mantine-color-gray-3),
				var(--mantine-color-dark-4)
		);
	}
}

.pillInclude {
	background-color: light-dark(
		var(--mantine-color-green-1),
		var(--mantine-color-green-9)
	);
	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
	border: 1px solid
		light-dark(var(--mantine-color-green-3), var(--mantine-color-green-7));
	font-size: var(--mantine-font-size-xs);
}

.pillExclude {
	background-color: light-dark(
		var(--mantine-color-red-1),
		var(--mantine-color-red-9)
	);
	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
	border: 1px solid
		light-dark(var(--mantine-color-red-3), var(--mantine-color-red-7));
	font-size: var(--mantine-font-size-xs);
}

.pillRemove {
	color: inherit;
	opacity: 0.7;

	&:hover {
		opacity: 1;
	}
}

.hint {
	border-top: 1px solid var(--mantine-color-border-5);
}