.multiselect {
	width: 100%;
	position: relative;

	.control.is-loading::after {
		top: .75rem;
	}

	&.has-search-results .input-wrapper {
		border-radius: $radius $radius 0 0;
		border-color: $primary !important;
		background: $white !important;

		&, &:focus-within {
			border-bottom-color: $grey-lighter !important;
		}
	}

	.input-wrapper {
		padding: 0;
		background: $white !important;
		border-color: $grey-lighter !important;
		flex-wrap: wrap;
		height: auto;

		&:hover {
			border-color: $grey-light !important;
		}

		.input {
			display: flex;
			max-width: 100%;
			width: 100%;
			align-items: center;
			border: none !important;
			background: transparent;
			height: auto;

			&::placeholder {
				font-style: normal !important;
			}
		}

		&.has-multiple .input {
			max-width: 250px;

			input {
				padding-left: 0;
			}
		}

		&:focus-within {
			border-color: $primary !important;
			background: $white !important;
		}

		.loader {
			margin: 0 .5rem;
		}
	}

	.search-results {
		background: $white;
		border-radius: 0 0 $radius $radius;
		border: 1px solid $primary;
		border-top: none;

		max-height: 50vh;
		overflow-x: auto;
		position: absolute;
		z-index: 100;
		max-width: 100%;
		min-width: 100%;

		button {
			background: transparent;
			display: block;
			text-align: left;
			box-shadow: none;
			border-radius: 0;
			text-transform: none;
			font-family: $family-sans-serif;
			font-weight: normal;
			padding: .5rem 0;
			border: none;
			cursor: pointer;

			display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden;

			.search-result {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				padding: .5rem 1rem;
			}

			.hint-text {
				font-size: .75rem;
				color: transparent;
				transition: color $transition;
				padding: 0 .5rem;
			}

			&:focus, &:hover {
				background: $grey-lightest;
				box-shadow: none !important;

				.hint-text {
					color: $dark;
				}
			}

			&:active {
				background: $grey-lighter;
			}
		}
	}

	.assignee {
		position: relative;

		&:not(:first-child) {
			margin-left: -1.5rem;
		}

		.user img {
			border: 2px solid $white;
			margin-right: 0;
		}

		.remove-assignee {
			position: absolute;
			top: 4px;
			left: 2px;
			color: $red;
			background: $white;
			padding: 0 4px;
			display: block;
			border-radius: 100%;
			font-size: .75rem;
			width: 18px;
			height: 18px;
			z-index: 100;
		}
	}
}
