// ==========================================================================
// Select2 Style
// ==========================================================================
.#{$selector} {
	.select2-container {
		width: 100% !important;
		.select2-selection--single,
		.select2-selection--multiple {
			@include material__smooth-tran(300ms);
		}
	}
	.ipt_uif_matrix {
		.select2-container {
			max-width: 200px !important;
		}
	}

	.invalid ~ .select2-container {
		.select2-selection--single,
		.select2-selection--multiple {
			border-bottom-color: $error-color;
			box-shadow: 0 1px 0 0 $input-error-color;
		}
	}
	.valid ~ .select2-container {
		.select2-selection--single,
		.select2-selection--multiple {
			border-bottom-color: $success-color;
			box-shadow: 0 1px 0 0 $input-success-color;
		}
	}

	select.ipt_uif_select {
		min-width: 300px;
		&.select2-hidden-accessible {
			min-width: 0;
		}
	}

	.select2-container--eform-material.select2-container--focus {
		.select2-selection--single,
		.select2-selection--multiple {
			border-bottom-color: $primary-color;
			box-shadow: 0 1px 0 0 $input-focus-color;
		}
	}

	// Boxy override
	&.eform-override-element-boxy {
		span.select2-container {
			border: $input-border;
			box-shadow: inset 0 1px 2px fade-out($input-border-color, 0.7),
				0 0 0 0 transparent;
			border-radius: 4px;
			background-color: $preset-bg;
			@include material__smooth-tran(200ms, box-shadow);

			// Focus
			&--focus,
			&--open {
				border: 1px solid $primary-color;
				box-shadow: inset 0 0 0 transparent,
					0 0 0 4px fade-out($primary-color, 0.9);
			}

			// Open state
			&--open {
				&.select2-container--below {
					border-bottom: 0 none;
					border-radius: 4px 4px 0 0;
				}
				&.select2-container--above {
					border-top: 0 none;
					border-radius: 0 0 4px 4px;
				}
			}

			// Override some defaults
			.select2-selection--single,
			.select2-selection--multiple {
				border: 0 none;
				box-shadow: none;
				background: transparent;
			}

			// Multibox
			.select2-selection--multiple {
				padding: 4px;
				height: calc(3em - 8px);
				min-height: calc(3em - 8px);
				.select2-search__field {
					border: 0 none;
					box-shadow: none;
					height: calc(3em - 8px);
				}
				.select2-selection__clear {
					right: 8px;
				}
				.select2-selection__choice {
					height: calc(3em - 8px);
					line-height: calc(3em - 8px);
					&:first-of-type {
						border-radius: 4px 0 0 4px;
					}
					&:last-of-type {
						border-radius: 0 4px 4px 0;
					}
				}
			}
		}
	}
}

// Boxy mod for dropdowns
.select2-container--eform-material.eform-select2-boxy {
	// Dropdown
	.select2-dropdown {
		border: 1px solid $primary-color;
		box-shadow: 0 8px 0 4px fade-out($primary-color, 0.9);
	}

	// Search
	.select2-search--dropdown {
		padding: 8px;
		.select2-search__field {
			height: 2.5em;
			line-height: 2.5em;
			border: 1px solid $primary-color;
			border-radius: 4px;
			&:focus {
				box-shadow: 0 0 0 2px fade-out($primary-color, 0.9);
			}
		}
	}
}