@import '~bootstrap/scss/_functions';
@import '~bootstrap/scss/_variables';
@import '~bootstrap/scss/mixins/_breakpoints';
@import '~bootstrap/scss/mixins/_box-shadow.scss';
@import "assets/css/abstracts/custom-variables.scss";

.select2-container--default {
	.select2-selection--single {
		border-color: $input-border-color;

		.select2-selection__rendered {
			line-height: 34px;
			font-size: 14px;
            padding-right: 0;
            width: calc(100% - 20px);
		}

		.select2-selection__arrow {
			height: 34px;
		}
	}

	.select2-selection--multiple {
		border-color: $input-border-color;

		.select2-selection__choice {
			white-space: normal;
		}

		.select2-selection__rendered {
			padding: 0 10px;
		}
	}
}

.select2-container--default.select2-container--focus {
	.select2-selection--multiple {
		border-color: $input-focus-border-color;
		outline: 0;
        box-shadow: $input-focus-box-shadow;
	}
}

.select2-container {
    max-width: 100%;

    .select2-search__field::placeholder {
        color: $input-placeholder-color;
        opacity: 1;
    }

    // Ensure the dropdown can be shown in modals as well
    // See BT-4567 for further details
    &.select2-container--open {
        z-index: 12000;
    }

	.select2-selection--single,
	.select2-selection--multiple {
		min-height: 37px;
		height: auto;
        max-height: 250px;
        overflow: auto;
	}

	.select2-search--inline {
        width: 100%;

		.select2-search__field {
            margin-top: 6px;
            width: 100% !important;
		}
	}

	.select2-choice.select2-choice {
	    background-color: #fafafa;
	    border: 1px solid $input-border-color;
	}
}

.input-group {
	.select2-container {
		.select2-selection--single,
		.select2-selection--multiple {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right: 0;
		}
	}

	cla-sugre-picker,
	.input-group-addon  ~ .select2-container {
		.select2-selection--single.select2-selection--single,
		.select2-selection--multiple.select2-selection--multiple {
			border-radius: 4px;
			border: 1px solid $input-border-color;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}

}

/* select 2 user picker */
.user-picker-select {
	.select2-container-multi {
		.select2-choices {
			border-color: $input-border-color;
			-webkit-border-radius: 	3px;
			-moz-border-radius: 	3px;
			border-radius: 			3px;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			-moz-box-shadow: 	inset 0 1px 1px rgba(0, 0, 0, 0.075);
			box-shadow: 		inset 0 1px 1px rgba(0, 0, 0, 0.075);

			li {
				float: none;
			}

			.select2-search-field input {
				line-height: 25px;
			}

			.select2-search-choice {
				margin: 3px;
				background: $white;
				border-color: $white;
				float: none;
				padding: 3px 5px 3px 3px;
			}
		}

		.select2-search-choice-close {
			left: auto;
		}
	}
}

.select2-drop.select2-drop {
    border: 1px solid rgba(0,0,0,0.2);
    border-top: 0;
}

.select2-results {

	.select2-highlighted.select2-highlighted {
 	    background: var(--theme-primary-color, $blue-500);
        color: var(--theme-primary-color-contrast, #FFFFFF);
	}

}

.multi-picker--browse {
	padding: 7px 12px;
}

//Media query for small support device width
@media only screen and (max-width: 360px ) {
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        max-width: 219px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
