// 
// Multi-Select
// ------------------------------


// Base

.Select.is-multi {

	// control: reduce padding to allow for items
	.Select-control {
		padding: 
			@select-padding-vertical - @select-item-gutter - @select-item-padding-vertical - 1
			@select-padding-horizontal * 3 + 22
			@select-padding-vertical - @select-item-gutter - @select-item-padding-vertical - 1
			@select-padding-horizontal - @select-item-gutter - @select-item-padding-horizontal
	}
	
	// add margin to the input element
	.Select-input {
		vertical-align: middle;
		border: 1px solid transparent;
		margin: @select-item-gutter;
		padding: @select-item-padding-vertical 0;
	}
	
}


// Items

.Select-item {
	background-color: @select-item-bg;
	border-radius: @select-item-border-radius;
	border: 1px solid @select-item-border-color;
	color: @select-item-color;
	display: inline-block;
	font-size: @select-item-font-size;
	margin: @select-item-gutter;
}

// common
.Select-item-icon,
.Select-item-label {
	display: inline-block;
	vertical-align: middle;
}

// label
.Select-item-label {
	cursor: default;
	.border-right-radius( @select-item-border-radius );
	padding: @select-item-padding-vertical @select-item-padding-horizontal;
	
	.Select-item-label__a {
		color: @select-item-color;
		cursor: pointer;
	}
}

// icon
.Select-item-icon {
	cursor: pointer;
	.border-left-radius( @select-item-border-radius );
	border-right: 1px solid @select-item-border-color;
	
	// move the baseline up by 1px
	padding: @select-item-padding-vertical - 1 @select-item-padding-horizontal @select-item-padding-vertical + 1;

	&:hover,
	&:focus {
		background-color: @select-item-hover-bg;
		color: @select-item-hover-color;
	}
	&:active {
		background-color: @select-item-border-color;
	}
}
