@import ../config

.select2-container
	width: 100% !important
	box-sizing: border-box
	display: inline-block
	margin: 0
	position: relative
	vertical-align: middle

	.select2-selection--single
		box-sizing: border-box
		cursor: pointer
		display: block
		height: 28px
		user-select: none
		-webkit-user-select: none

		.select2-selection__rendered
			display: block
			padding-left: 8px
			padding-right: 20px
			overflow: hidden
			text-overflow: ellipsis
			white-space: nowrap

		.select2-selection__clear
			position: relative

	.select2-selection--multiple
		box-sizing: border-box
		cursor: pointer
		display: block
		min-height: 40px
		user-select: none
		-webkit-user-select: none

		.select2-selection__rendered
			display: inline-block
			overflow: hidden
			padding-left: 8px
			text-overflow: ellipsis
			white-space: nowrap

	.select2-search--inline
		float: left

		.select2-search__field
			box-sizing: border-box
			border: none
			font-size: 100%
			margin-top: 5px
			padding: 0

			&::-webkit-search-cancel-button
				-webkit-appearance: none

.select2-dropdown
	background-color: $color-background-dark
	border: 1px solid $color-background
	box-shadow: 0 3px 15px rgba(black, .2)
	box-sizing: border-box
	display: block
	position: absolute
	left: -100000px
	width: 100%
	z-index: 1051
	border-bottom-left-radius: 3px
	border-bottom-right-radius: 3px

.select2-results
	display: block

.select2-results__options
	list-style: none
	margin: 0
	padding: 0

.select2-results__option
	padding: 8px 10px
	user-select: none
	-webkit-user-select: none
	&[aria-selected]
		cursor: pointer

.select2-container--open
	.select2-dropdown
		left: 0
	.select2-dropdown--above
		border-bottom: none
		border-bottom-left-radius: 0
		border-bottom-right-radius: 0
	.select2-dropdown--below
		border-top: none
		border-top-left-radius: 0
		border-top-right-radius: 0

.select2-search--dropdown
	display: block
	padding: 4px
	.select2-search__field
		padding: 4px
		width: 100%
		box-sizing: border-box
		&::-webkit-search-cancel-button
			-webkit-appearance: none
	&.select2-search--hide
		display: none

.select2-close-mask
	border: 0
	margin: 0
	padding: 0
	display: block
	position: fixed
	left: 0
	top: 0
	min-height: 100%
	min-width: 100%
	height: auto
	width: auto
	opacity: 0
	z-index: 99
	background-color: $color-background-light
	filter: alpha(opacity = 0)

.select2-hidden-accessible
	border: 0 !important
	clip: rect(0 0 0 0) !important
	height: 1px !important
	margin: -1px !important
	overflow: hidden !important
	padding: 0 !important
	position: absolute !important
	width: 1px !important

.select2-container--default
	.select2-selection--single
		border-bottom: 1px solid $color-background-dark
		cursor: text
		transition: all 150ms ease-in-out

		&:hover
			border-color: $color-text-dark-secondary

		.select2-selection__rendered
			color: $color-text
			line-height: 28px

		.select2-selection__clear
			cursor: pointer
			float: right
			font-weight: bold

		.select2-selection__placeholder
			color: $color-text-dark-secondary

		.select2-selection__arrow
			height: 26px
			position: absolute
			top: 1px
			right: 1px
			width: 20px

			b
				border-color: $color-text transparent transparent transparent
				border-style: solid
				border-width: 5px 4px 0 4px
				height: 0
				left: 50%
				margin-left: -4px
				margin-top: -2px
				position: absolute
				top: 50%
				width: 0

	&.select2-container--disabled .select2-selection--single
		background-color: $color-background
		cursor: default

		.select2-selection__clear
			display: none

	&.select2-container--open .select2-selection--single .select2-selection__arrow b
		border-color: transparent transparent #888 transparent
		border-width: 0 4px 5px 4px

	.select2-selection--multiple
		border-bottom: 1px solid $color-background-dark
		cursor: text
		transition: all 150ms ease-in-out

		&:hover
			border-color: $color-text-dark-secondary

		.select2-selection__rendered
			box-sizing: border-box
			list-style: none
			margin: 0
			padding: 0 5px
			width: 100%

		.select2-selection__placeholder
			color: #999
			margin-top: 5px
			float: left

		.select2-selection__clear
			cursor: pointer
			float: right
			font-weight: bold
			margin-top: 5px
			margin-right: 10px

		/* Selected names in the select  */
		.select2-selection__choice
			background-color: $color-background-light
			border: thin solid $color-background
			border-radius: 3px
			cursor: default
			float: left
			margin-right: 5px
			margin-top: 5px
			padding: 3px 10px
			color: $color-text

		.select2-selection__choice__remove
			color: $color-text-dark-hint
			cursor: pointer
			display: inline-block
			font-weight: bold
			margin-right: 8px
			&:hover
				color: $color-danger

	&.select2-container--focus .select2-selection--multiple
		border-bottom: 1px solid $color-primary
		box-shadow: 0 1px 0 0 $color-primary
		outline: 0

	&.select2-container--disabled
		.select2-selection--multiple
			background-color: #eee
			cursor: default

		.select2-selection__choice__remove
			display: none

	&.select2-container--open
		&.select2-container--above
			.select2-selection--single,
			.select2-selection--multiple
				border-top-left-radius: 0
				border-top-right-radius: 0

		&.select2-container--below
			.select2-selection--single,
			.select2-selection--multiple
				border-bottom-left-radius: 0
				border-bottom-right-radius: 0

	.select2-search--dropdown .select2-search__field
		border: 1px solid $color-background-dark

	.select2-search--inline .select2-search__field
		background: transparent
		border: none
		outline: 0
		box-shadow: none
		-webkit-appearance: textfield

	.select2-results > .select2-results__options
		max-height: 250px
		overflow-y: auto

	.select2-results__option
		&:last-child
			border-bottom-left-radius: 3px
			border-bottom-right-radius: 3px

		&[role=group]
			padding: 0

		&[aria-disabled=true]
			background-color: $color-background
			color: $color-text-dark-hint

		&[aria-selected=true]
			background-color: rgba($color-primary, .25)
			color: $color-text

		.select2-results__option
			padding-left: 1em

			.select2-results__group
				padding-left: 0

			.select2-results__option
				margin-left: -1em
				padding-left: 2em

				.select2-results__option
					margin-left: -2em
					padding-left: 3em

					.select2-results__option
						margin-left: -3em
						padding-left: 4em

						.select2-results__option
							margin-left: -4em
							padding-left: 5em

							.select2-results__option
								margin-left: -5em
								padding-left: 6em

	/* Hovered item from the dropdown */
	.select2-results__option--highlighted[aria-selected]
		color: lighten($color-text, 15%)

	.select2-results__group
		cursor: default
		display: block
		padding: 6px