// -------------------------------------------------------------------
// :: MULTI-SELECT
// -------------------------------------------------------------------

.o-multiselect {
	margin-bottom: 1.5em;
	position: relative;

	.o-multiselect__field-holder {
		@extend %__input;
		overflow: hidden;
		min-height: 3em;
		position: relative;

		&--focus {
			border-color: $border-color-active;
		}
	}

	label {
		font-family: $font-family-bold;
		font-weight: bold;
		font-size: rem($font-size-medium);
		margin-bottom: rem(4px);
		display: block;
		color: $dark-extra;

	}

	.o-multiselect__input {
		display: inline-block;
		min-width: 100px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		position: relative;

		&--placeholder {
			color: $medium;
		}
	}

	[contenteditable]:focus {
		outline: 0 solid transparent;
	}

	span.icon-arrow-down {
		position: absolute;
		top: 50%;
		right: 14px;
		margin-top: -14px;
	}

	span.icon-arrow-down {
		transition: all 0.5s ease-in-out;
	}

	&--open {
		span.icon-arrow-down {
			transform: rotate(180deg);
		}
	}

	.o-multiselect__options {
		position: absolute;
		top: 102%;
		left: 0;
		right: 0;
		height: auto;
		background: $white;
		z-index: $z-index-higher;
		padding: 0 1rem;
		box-shadow: $box-shadow;
		border: 1px solid darken($light, 10%);
		border-radius: rem(5px);

		ul {
			list-style: none;
			padding: 0.1rem 0;
			margin: 0;

			li {
				padding: 0.2rem 0;
				margin: 0;
				border-bottom: 1px solid darken($light, 10%);

				&:last-child {
					border-bottom: none;
				}

				a {
					text-decoration: none;
					color: $dark-extra;
					display: block;
					line-height: 2;
					padding: 0.3rem 1rem;
				}
			}

			li:hover,
			.o-multiselect_option--selected {
				a {
					background: darken($light, 8%);

				}
			}
		}
	}

}