.selectize-control {
	--border-radius  : 4px;

	&.em-selectize:not(.always-open, .multidropdown), &.em-selectize-autocomplete:not(.always-open, .multidropdown) {
		input, input:focus, input:focus {
			width: auto !important;
			border: 0 !important;
			outline: 0 !important;
			height: auto !important;
			padding: 0 !important;
			margin: 0 !important;
			border-radius: 0 !important;
			background: none !important;
		}
		.selectize-input {
			border-radius: var(--border-radius) !important;
			width: 100% !important;
			min-height: 38px !important;
			padding: 6px 30px 6px 10px !important; /* The 6px vertically centers text on FF, ignored by Webkit */
			@include input-select-toggle(16px, 16px, var(--icon-chevron-down));
			&.focus:not(:focus) {
				border : 1px solid var(--border-color-softer) !important;
				box-shadow: none !important;
			}
			&.focus.dropdown-active {
				border: 1px solid var(--accent-color) !important;
				box-shadow: none !important;
				border-bottom : 0 !important;
				border-radius : var(--border-radius) var(--border-radius) 0 0 !important;
				&:after {
					margin-top:-8px;
					transform: rotate(180deg);
				}
			}
			&:not(.has-items) {
				input {
					width: calc(100% - 40px) !important;
				}
			}
		}
		&.selectize-control {
			margin-bottom: 15px !important; // mimick pixelbones select
		}
	}

	&.em-selectize, &.em-selectize-autocomplete {
		&.multi.plugin-remove_button {
			.item {
				background: #dff4fd;
				border : 1px solid #97dbf9;
				color : #0095c3;
				padding-left: 8px;

				a.remove {
					color: inherit !important;
					background-color: inherit !important;
				}
			}
		}
		.selectize-dropdown {
			width: calc(100%) !important;
			left : 0 !important;
			top : calc(100% - 3px) !important;
			border-radius: 0 0  var(--border-radius) var(--border-radius);
			border: 1px solid var(--accent-color) !important;
			border-top: 0 !important;
			background-color: var(--background-color-inputs) !important;
			box-shadow: none !important;
			margin-bottom : 0 !important;
			border-top: 0 !important;
		}
	}

	&.no-search {
		.selectize-input {
			position : absolute !important;
			opacity : 0 !important;
			pointer-events : none !important;
		}
	}

	&.em-selectize-autocomplete {
		.selectize-input:after {
			display: none !important;
		}
		&.loading .selectize-input {
			@include input-select-toggle(26px, 26px,  var(--icon-spinner));
		}
		.selectize-dropdown-content > div {
			padding: 3px 0.75rem;
		}
	}
	&.em-selectize.always-open, &.em-selectize.multidropdown {
		.selectize-input {
			border: 0 !important;
			padding: 0 !important;

			&.focus {
				border: 0 !important;
				box-shadow: none !important;
			}
			input{
				border: 1px solid #cdcdcd !important;
				border-radius: var(--border-radius);
				padding : 5px;
				width : 100%;
				@include input-icon( var(--icon-magnifying-glass) );
				margin:10px 0 0 !important;
				opacity: 1 !important;
				position: static !important;

				&:focus {
					border: 1px solid #cdcdcd !important;
				}
			}
			&:after {
				display: none !important;
			}
		}
	}

	&.em-selectize.always-open {
		.selectize-input {
			width: 100% !important;
			margin: 0 !important;
		}
		.selectize-dropdown {
			width: 100% !important;
			position: static !important;
		}
		.selectize-dropdown {
			border : none !important;
			.selectize-dropdown-content {
				overflow-y: visible;
				overflow-x: visible;
				max-height: none;
			}
		}
	}

	&.em-selectize.multidropdown {
		width : 100%;
		border : 1px solid var(--border-color-softer) !important;
		background-color: var(--background-color-inputs) !important;
		border-radius: 4px !important;
		cursor: pointer;
		max-height: 40px;
		overflow: visible;

		&.dropdown-active {
			height: 100px;
		}

		.selectize-dropdown {
			width : calc(100% + 2px) !important;
			left : -1px !important;

			.selectize-dropdown-content {
				overflow-y: scroll;
				overflow-x: visible;
				max-height: 500px;
			}
		}

		.em-selectize-placeholder {
			display : block;
			width: 100%;
			height: 38px;
			font-size: 16px;
			color : #888;
			padding: 8px 30px 8px 10px;
			@include input-select-toggle(16px, 16px, var(--icon-chevron-down));
			&:after {
				// override the mixin
				top : 20px !important;
			}
			span.placeholder-count {
				border-radius: 5px;
				color: #fff;
				background: #999;
				font-size: 14px;
				padding: 2px 6px;
				margin: 0px 10px 0px 0;
				display: inline-block;
				text-align: center;

				span {
					display : inline-block;
					&.clear-selection {
						display: none;
						visibility : hidden;
					}
				}

				a.remove {
					color: inherit !important;
					background-color: inherit !important;
					border-right : 1px solid #ccc;
					display : inline-block;
					padding: 0 5px 0 2px;
					margin-right: 5px;
					font-size: 12px;
					text-decoration : none;
					&:hover {
						text-decoration : none;
					}
				}
				&:hover {
					> span:not(.clear) {
						display : none;
						visibility : hidden;
					}
					> span.clear-selection {
						display : inline-block;
						visibility : visible;
					}
				}
			}
		}

		&.dropdown-active {
			border: 1px solid var(--accent-color) !important;
			border-radius : 4px 4px 0 0 !important;

			.em-selectize-placeholder:after {
				margin-top: -8px;
				transform: rotate(180deg);
			}
			&.no-options {
				border-radius : var(--border-radius) !important;
				.selectize-dropdown {
					display : block !important;
				}
			}
			.selectize-dropdown {
				opacity : 1;
				pointer-events: all;
			}
		}

		/* allow tabability of control input which resides in the dropdown for multidropdown, to prevent jarring of content below on open/close */
		.selectize-dropdown {
			display : block !important;
			opacity : 0;
			pointer-events: none;
		}


		&:not(.dropdown-active) > .selectize-input {
			opacity : 0;
			position: absolute;
			z-index : -1;
			pointer-events : none;
		}

		.selectize-input {
			width : calc(100% - 20px) !important;
			margin: 0 10px 5px !important;
			.item {
				display: none;
				visibility : hidden;
			}
		}
	}
	&.em-selectize.always-open {
		.selectize-dropdown {
			display: block !important;
			visibility: visible !important;
		}
	}

	&.em-selectize.checkboxes {
		.selectize-dropdown {
			div.option {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(25px, max-content));
				align-items: baseline;
				> span:first-child {
					display: inline-block;
					width: 15px;
					height: 15px;
					border: 1px solid #ccc;
					border-radius : 2px;
					margin: -4px 5px 0 0;
					vertical-align: middle;
				}

				&.selected {
					color: #0095c3;
					background-color: transparent;
					&.active {
						background-color: #e9ecef;
					}

					> span:first-child {
						background : var(--icon-checkmark) 50% 50% white no-repeat;
						background-size: 12px 12px;
					}
				}
			}
		}
	}
}