@import "../common/_md_colors.scss";
@import "../common/variables_mixins";

.select2-container--default {
	.select2-search--dropdown .select2-search__field {
		border-color: $border-color;
		border-radius: 4px;
		transition: all 140ms $easing;
		@include respond-below(medium) {
			@include font-size(16px);
			padding: 6px 8px;
		}
		&:focus {
			border-color: $input-on-color;
			outline: none;
		}
	}
	.select2-selection--single {
		border-color: $border-color;
		height: 40px;
		outline: none;
		border-radius: 4px 4px 0 0;
		border-width: 0 0 1px 0;
		.select2-selection__clear {
			text-indent: -9999em;
			width: 16px;
			font-size: 0;
			margin-right: 8px;
			&:after {
				font-weight: normal;
				@include font-size(18px);
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				content: '\F156';
				font-family: $mdFont;
				color: $text-color-secondary;
			}
		}
		.select2-selection__rendered {
			line-height: 40px;
			@include font-size(14px);
		}
		.select2-selection__arrow {
			height: 38px;
			b {
				margin-left: -6px;
			}
		}
	}
	.select2-selection--multiple {
		min-height: 40px;
		border-color: $border-color;
		border-radius: 4px !important;
		transition: all 140ms ease;
		.select2-selection__rendered {
			padding: 0 6px;
		}
		.select2-selection__choice {
			background: material-color('grey','200');
			color: $text-color-primary;
			margin: 8px 4px 0 0;
			@include font-size(14px);
			height: 28px;
			line-height: 28px;
			border: none;
			padding: 0 4px 0 12px;
			border-radius: 16px;
			.select2-selection__choice__remove {
				float: right;
				margin: 0 0 0 4px;
				font-size: 0;
				position: relative;
				width: 24px;
				height: 100%;
				overflow: hidden;
				font-weight: 400;
				&:after {
					@include font-size(20px);
					position: absolute;
					top: 0;
					left: 2px;
					display: block;
					content: '\F156';
					font-family: $mdFont;
					color: $text-color-secondary;
					transition: all 140ms ease;
				}
				&:hover {
					&:after {
						color: $text-color-primary;
					}
				}
			}
		}
	}
	&.select2-container--focus .select2-selection--multiple {
		border-color: $input-on-color;
	}
	.select2-search--inline {
		padding: 0 8px;
		.select2-search__field {
			margin: 8px 0 0;
			@include font-size(14px);
			line-height: 28px;
		}
	}
	.select2-results__option--highlighted[aria-selected] {
		background: $hover-color;
		color: $text-color-primary;
	}
	.select2-results__option{
		@include font-size(14px);
		&[aria-selected=true] {
			background: $theme-color;
			color: $white;
			display: none;
		}
	}
	.select2-results > .select2-results__options {
		overflow-x: hidden;
	}
}

.select2-search--dropdown .select2-search__field {
	padding: 6px 4px;
}

.select2-container {
	z-index: $z-index-header - 100;
	body.uk-modal-page & {
		z-index: $z-index-modal + 100;
	}
	@include respond-below('medium') {
		z-index: $z-index-sidebar - 100;
	}
	&--open,
	&--focus {}
}
.select2-dropdown {
	border-color: $border-color;
	box-shadow: 0 3px 6px rgba(0,0,0,.2);
	transform-origin: 50% 0;
}

.select2-results__option {
	padding: 8px;
}

// custom template
.select2-search__flags {
	overflow: hidden;
	display: flex;
	align-items: center;
	> [class*='flag-'] {
		margin-right: 8px;
	}
}
.select2-selection__flag {
	overflow: hidden;
	display: flex;
	align-items: center;
	> [class*='flag-'] {
		margin-right: 8px;
		margin-top: -2px;
	}
}

.uk-form-danger {
	+ .select2-container--default .select2-selection--single {
		border-color: $danger-color;
	}
}

.select2-wrapper-danger {
	.select2-container--default .select2-selection--single {
		border-color: $danger-color;
		.select2-selection__placeholder {
			color: $danger-color;
		}
	}
}

.select2-wrapper-success {
	.select2-container--default .select2-selection--single {
		border-color: $success-color;
	}
}

.uk-modal-page {
	.select2-container {
		z-index: $z-index-modal + 100;
	}
}