@import './src/scss/_imports/_global-import';

.select2 {
	width:100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border: $input-border-width solid $input-border-color;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
	padding: 0 $input-padding-x;

}

.select2-container .select2-selection--single {
	height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
}

.select2-container .select2-selection--multiple {
	min-height: calc(#{$line-height-base * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: auto;
	top: 0;
	bottom: 0;
	right: 0.5rem;
}

.select2-dropdown {
	border-color: $input-border-color;
}

.select2-search--dropdown {
	padding: $input-padding-x;

	&:before {
		content: "\f002";
		font-family: 'Font Awesome 5 Pro';
		position: absolute;
		left: calc(1rem + #{$input-padding-x});
		top: calc(0.6rem + #{$input-padding-x});
		color: $primary-500;
	}
}

.select2-results {
	padding: $input-padding-x;
	
}

.select2-search.select2-search--dropdown:not(.select2-search--hide) + .select2-results {
	padding-top: 0;
}


.select2-container--open .select2-dropdown--above {
	box-shadow: 0px -3px 8px 0px rgba(90, 80, 105, 0.1);
	border-color: $input-focus-border-color;
}

.select2-container--open .select2-dropdown--below {
	box-shadow: 0px 3px 8px 0px rgba(90, 80, 105, 0.1);
	border-color: $input-focus-border-color;
}


.select2-container--default .select2-search--dropdown .select2-search__field {
  display: block;
  width: 100%;
  height: calc(#{$line-height-base * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
  padding: $input-padding-y $input-padding-x;
  padding-left: 2.5rem;
  font-weight: $input-font-weight;
  //line-height: calc(#{$line-height-base * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
  color: $input-color;
  background-color: $input-bg;
  background-clip: padding-box;
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;
  box-shadow: inset 0 .25rem .125rem 0 rgba(33, 37, 41, .025);

  &:focus {
  	border-color: darken($input-border-color, 10%);
  }
}

.select2-container--default .select2-results__group {
    padding: 0.5rem 0;
    color: #8e8e8e;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background: $dropdown-link-active-bg;
	color: $dropdown-link-active-color;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: $primary-500;
	color: $white;
}

.select2-selection--single,
.select2-selection--multiple,
.select2-search__field {
	transition: $input-transition;	

}


.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, 
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, 
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
	position: relative;
	z-index: 1051 + 100;
	border-color: $input-focus-border-color;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, 
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
	border-bottom-color: transparent;
	border-bottom: 0; //gets rid of the ugly gap
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, 
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
	border-top-color: transparent;
	border-top: 0; //gets rid of the ugly gap
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: $input-focus-border-color;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
	display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	padding: 0 0.5rem;
	//clear: both;
	flex-wrap: wrap;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	//margin-right: 7px;
	//margin-top: 6px;
	margin: 5px 3px;
	display: inline-flex;
	padding-right: 0;
	align-items: center;

	background: $dropdown-link-active-bg;
	border-color: $primary-400;

	color: $dropdown-link-active-color;

	.select2-selection__choice__remove {
		margin: 0;
		padding-left: 7px;
		padding-right: 7px;
		order: 1;
		font-size: 16px;
		border-left: 1px solid rgba(0,0,0,0.1);
		margin-left: 5px;

		color: lighten($primary-500, 10%);

		&:hover {
			color: $primary-500;
		}

		&:active {
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
		}
	}
}



.select2-container .select2-search--inline .select2-search__field {
	margin-top: 0;
	margin-left: 0;
	height: calc(#{$line-height-base * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
	padding: $input-padding-y 0.3rem;
	min-width:100px;
	
}

span.select2-selection.select2-selection--single,
span.select2-selection.select2-selection--multiple {
	outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
	padding: 0 15px;
	margin-right: 8px;
	font-size: 1rem;
	color: $danger-500;

	&:hover {
		color: $danger-600;
	}
}

/* this is not a permanent solution... hopefully IE will die by the time we release version 5.... */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.select2-container--default .select2-selection--single .select2-selection__clear {
		line-height: normal;
		margin-top: 8px;
	}
}

.select2-results__message {
	color: $danger-500;
}