@use '../scss/_variables.scss' as *;

// The main container
.adpresso-multiselect, .adpresso-token-input {
	position: relative;
	width: 100%;
}

.adpresso-multiselect__control, .adpresso-token-input__control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: $space-2;
	padding: $space-2;
	background-color: $color-white;
	border: $border-small solid $color-icon;
	border-radius: $radius-sm;
	min-height: 38px;
	cursor: text;
	box-sizing: border-box;
	transition: border-color 0.2s ease;

	&:focus-within {
		border-color: $color-primary;
		box-shadow: 0 0 0 1px $color-primary;
	}
}

.adpresso-multiselect__token, .adpresso-token-input__token {
	display: inline-flex;
	align-items: center;
	gap: $space-2;
	padding: $space-1 $space-3;
	background-color: $color-primary;
	color: $color-white;
	border-radius: $radius-md;
	font-size: 0.9em;
	font-weight: 500;


}

// The x button to remove a token.
.adpresso-multiselect__token-remove, .adpresso-token-input__token-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: none;
	background-color: rgba($color-white, 0.2);
	color: $color-white;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 0;
	margin-left: $space-1;

	&:hover {
		background-color: rgba($color-white, 0.4);
	}
}

// The text input
.adpresso-multiselect__input, .adpresso-token-input__input {
	flex-grow: 1;
	border: none;
	background: transparent;
	padding: $space-1;
	min-width: 100px;
	font-size: 1em;

	&:focus {
		outline: none;
	}
}

// The Dropdown menu
.adpresso-multiselect__dropdown, .adpresso-token-input__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 4px;
	padding: 0;
	list-style: none;
	background-color: $color-white;
	border: 0.12em solid $color-divider;
	border-radius: $radius-sm;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	max-height: 250px;
	overflow-y: auto;
	z-index: 1000;
}

.adpresso-multiselect__option, .adpresso-token-input__option {
	padding: $space-3 $space-4;
	cursor: pointer;
	transition: background-color 0.1s ease;

	&:hover {
		background-color: $color-divider;
	}
}

.adpresso-multiselect__dropdown .adpresso-token-input__dropdown {
	.is-loading,
	.is-empty {
		padding: $space-3 $space-4;
		color: $color-icon;
		font-style: italic;
	}
}