* {
	box-sizing: border-box;
}

.multi-select, .multi-select-plugin {	
	display: inline-block;	
	position: relative;
	
	> span {
		border: none;
		background: none;
		position: relative;
		padding: .25em .5em;
		padding-right: 1.5em;
		display: block;
		border: solid 1px #000;
		cursor: default;
		
		> .chevron {
			display: inline-block;
			transform: rotate(-90deg) scale(1, 2) translate(-50%, 0);
			font-weight: bold;
			font-size: .75em;
			position: absolute;
			top: .2em;
			right: .75em;
		}
	}
	
	> ul {
		position: absolute;
		list-style: none;
		padding: 0;
		margin: 0;
		left: 0;
		top: 100%;
		min-width: 100%;
		z-index: 1000;
		background: #fff;
		border: 1px solid rgba(0,0,0,.15);
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
		display: none;
		max-height: 320px;
		overflow-x: hidden;
		overflow-y: auto;
		
		> li {
			white-space: nowrap;
			
			&.selected {
				> label {
					background-color: LightBlue;
				}
			}
			
			&.focused {
				> label {
					background-color: DodgerBlue;
				}
			}
			
			> label {
				padding: .25em .5em;
				display: block;
				
				&:focus, &:hover {
					background-color: DodgerBlue;
				}
			}
		}
	}
	
	&.in {
		> ul {
			display: block;
		}
	}
	
	&-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
	}
}