/////////////////////
// select controls
/////////////////////
.selectize {
	&-control {
		position: relative;
		&.single {
			.selectize-input,
			.selectize-input input {
				cursor: pointer;
			}
			.selectize-input {
				&.input-active,
				&.input-active input {
					cursor: text;
				}
				&:after {
					content: "\f347";
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					margin-top: 0;
					width: 12px;
					height: 36px;
					font-family: dashicons;
					border-left: 1px solid rgba(0,0,0,.06);
					line-height: 36px;
					padding: 0 3px;
				}
				&.dropdown-active:after {
					content: "\f343";
					border-left: 1px solid rgba(0,0,0,.1);
				}
				&.disabled {
					opacity: 0.5;
					background-color: #fafafa;
				}
			}
			&.rtl .selectize-input:after {
				left: 15px;
				right: auto;
			}
		}
		&.rtl .selectize-input > input {
			margin: 0 4px 0 -2px !important;
		}
		.plugin {
			&-drag_drop.multi {
				> .selectize-input {
					> div.ui-sortable-placeholder {
						visibility: visible !important;
						background: #f2f2f2 !important;
						background: rgba(0, 0, 0, 0.06) !important;
						border: 0 none !important;
						-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
						box-shadow: inset 0 0 12px 4px #ffffff;
					}
				}
			}
			&-drag_drop {
				.ui-sortable-placeholder::after {
					content: '!';
					visibility: hidden;
				}
				.ui-sortable-helper {
					-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				}
			}
			&-remove_button {
				[data-value] {
					position: relative;
					padding-right: 24px !important;
					.remove {
						z-index: 1;
						/* fixes ie bug (see #392) */
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						width: 17px;
						text-align: center;
						font-weight: bold;
						font-size: 12px;
						color: inherit;
						text-decoration: none;
						vertical-align: middle;
						display: inline-block;
						padding: 2px 0 0 0;
						border-left: 1px solid #d0d0d0;
						-webkit-border-radius: 0 2px 2px 0;
						-moz-border-radius: 0 2px 2px 0;
						border-radius: 0 2px 2px 0;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
					}
				}
				.remove:hover {
					background: rgba(0, 0, 0, 0.05);
				}
				&.active .remove {
					border-left-color: #cacaca;
				}
			}
			.disabled {
				[data-value] .remove:hover {
					background: none;
				}
				[data-value] .remove {
					border-left-color: #ffffff;
				}
			}
		}
		&.multi {
			.selectize-input {
				min-height: 36px;
				&.has-items {
					padding: 6px 8px 3px;
				}
				> div {
					cursor: pointer;
					margin: 0 3px 3px 0;
					padding: 2px 6px;
					background: #f2f2f2;
					color: #303030;
					border: 0 solid #d0d0d0;
					&.active {
						background: #e8e8e8;
						color: #303030;
						border: 0 solid #cacaca;
					}
				}
				&.disabled > div,
				&.disabled > div.active {
					color: #7d7d7d;
					background: #ffffff;
					border: 0 solid #ffffff;
				}
			}
		}
	}
	&-dropdown {
		position: absolute;
		z-index: 10;
		border: 1px solid #d0d0d0;
		background: #ffffff;
		margin: -1px 0 0 0;
		border-top: 0 none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		-webkit-border-radius: 0 0 3px 3px;
		-moz-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
		z-index: 999;
		&-header {
			position: relative;
			padding: 5px 8px;
			border-bottom: 1px solid #d0d0d0;
			background: #f8f8f8;
			-webkit-border-radius: 3px 3px 0 0;
			-moz-border-radius: 3px 3px 0 0;
			border-radius: 3px 3px 0 0;
			&-close {
				position: absolute;
				right: 8px;
				top: 50%;
				color: #303030;
				opacity: 0.4;
				margin-top: -12px;
				line-height: 20px;
				font-size: 20px !important;
				&:hover {
					color: #000000;
				}
			}
		}
		&.plugin-optgroup_columns .optgroup {
			border-right: 1px solid #f2f2f2;
			border-top: 0 none;
			float: left;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			&:last-child {
				border-right: 0 none;
			}
			&:before {
				display: none;
			}
			&-header {
				border-top: 0 none;
			}
		}
	}
	&-dropdown,
	&-input,
	&-input input {
		color: #303030;
		font-family: inherit;
		font-size: 13px;
		line-height: 18px;
		-webkit-font-smoothing: inherit;
	}
	&-input,
	&-control.single .selectize-input.input-active {
		background: #ffffff;
		cursor: text;
		display: inline-block;
	}
	&-input {
		border: 1px solid rgba(0,0,0,.1);
		padding: 8px 8px;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 1;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		&.full {
			background-color: #ffffff;
		}
		&.disabled,
		&.disabled * {
			cursor: default !important;
		}
		&.focus {
			-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
		}
		&.dropdown-active {
			-webkit-border-radius: 3px 3px 0 0;
			-moz-border-radius: 3px 3px 0 0;
			border-radius: 3px 3px 0 0;
		}
		> * {
			vertical-align: baseline;
			display: -moz-inline-stack;
			display: inline-block;
			zoom: 1;
			*display: inline;
		}
		> input {
			display: inline-block !important;
			padding: 0 !important;
			min-height: 0 !important;
			max-height: none !important;
			max-width: 100% !important;
			margin: 0 2px 0 0 !important;
			text-indent: 0 !important;
			border: 0 none !important;
			background: none !important;
			line-height: inherit !important;
			-webkit-user-select: auto !important;
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
			&::-ms-clear {
				display: none;
			}
			&:focus {
				outline: none !important;
			}
		}
		&::after {
			content: ' ';
			display: block;
			clear: left;
		}
		&.dropdown-active::before {
			content: ' ';
			display: block;
			position: absolute;
			background: #f0f0f0;
			height: 1px;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
	&-dropdown {
		[data-selectable] {
			cursor: pointer;
			overflow: hidden;
			.highlight {
				background: rgba(125, 168, 208, 0.2);
				-webkit-border-radius: 1px;
				-moz-border-radius: 1px;
				border-radius: 1px;
			}
		}
		[data-selectable],
		.optgroup-header {
			padding: 5px 8px;
		}
		.optgroup:first-child .optgroup-header {
			border-top: 0 none;
		}
		.optgroup-header {
			color: #303030;
			background: #ffffff;
			cursor: default;
		}
		.active {
			background-color: #f5fafd;
			color: #495c68;
		}
		.active.create {
			color: #495c68;
		}
		.create {
			color: rgba(48, 48, 48, 0.5);
		}
		&-content {
			overflow-y: auto;
			overflow-x: hidden;
			max-height: 200px;
		}
	}
}