Less for YOOtheme Pro chosen

yoothemepro-chosen.less

.hook-form-misc() {

	@internal-form-search-image: "../../images/icons/search.svg";
	.chzn-container {
		font: inherit;
	}
	.chzn-container-single .chzn-single {
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		max-width: 100%;
		height: @form-height;
		padding: 0 @form-padding-horizontal;
		padding-right: @form-select-padding-right;
		color: @form-color;
		line-height: @form-line-height;
		border: 0 none;
		border-radius: 0;
		background: @form-background;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		.svg-fill(@internal-form-select-image, "#000", @form-select-icon-color);
		box-shadow: none;

		.hook-form;
		.hook-form-single-line;
	}
	.chzn-container-single .chzn-single > div {
		display: none;
	}

	.chzn-container-single.chzn-container-active .chzn-single {
		outline: none;
		color: @form-focus-color;
		background: @form-background;
		background-color: @form-focus-background;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		.svg-fill(@internal-form-select-image, "#000", @form-select-icon-color);
		.hook-form-focus;
	}

	.chzn-container.chzn-container-multi .chzn-choices {
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		max-width: 100%;
		min-height: @form-height;
		padding: 0 @form-padding-horizontal;
		padding-right: @form-select-padding-right;
		color: @form-color;
		line-height: @form-line-height;
		border: 0 none;
		border-radius: 0;
		background: @form-background;
		box-shadow: none;

		.hook-form;
		.hook-form-multi-line;
	}

	.chzn-container.chzn-container-multi.chzn-container-active .chzn-choices {
		outline: none;
		color: @form-focus-color;
		background: @form-background;
		background-color: @form-focus-background;
		.hook-form-focus;
	}

	.chzn-container.chzn-container-multi .chzn-choices li.search-choice {
		display: inline-block;
		padding: @label-padding-vertical @label-padding-horizontal;
		background: @label-background;
		line-height: @label-line-height;
		font-size: @label-font-size;
		color: @label-color;
		vertical-align: middle;
		white-space: nowrap;
		.hook-label;
	}

	.chzn-container.chzn-container-multi .chzn-choices li.search-choice span {
		padding-right: 15px;
	}

	.chzn-container .chzn-drop {
		background-color: @form-focus-background;
		.hook-form-focus;
	}

	.chzn-container-single .chzn-search input[type="text"] {
		height: @form-small-height;
		padding-left: @form-small-padding-horizontal;
		padding-right: @form-small-padding-horizontal;
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		max-width: 100%;
		line-height: @form-small-line-height;
		border: 0 none;
		border-radius: 0;
		background: @form-background;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		.svg-fill(@internal-form-search-image, @search-icon-color, @search-icon-color);
		.hook-form;
		.hook-form-single-line;
	}
	.chzn-container .chzn-results {
		white-space: nowrap;
		.hook-dropdown-nav;
	}
	.chzn-container .chzn-results > li > a {
		padding: @dropdown-nav-item-padding-vertical @dropdown-nav-item-padding-horizontal;
		color: @dropdown-nav-item-color;
		.hook-dropdown-nav-item;
	}
	.chzn-container .chzn-results > li:hover,
	.chzn-container .chzn-results > li:focus,
	.chzn-container .chzn-results > li.highlighted,
	.chzn-container .chzn-results > li.result-selected {
		color: @dropdown-nav-item-hover-color;
		background: inherit;
		.hook-dropdown-nav-item-hover;
	}
	.chzn-container .chzn-results > li.result-selected {
		background: @global-primary-background;
		color: @global-inverse-color;
	}
}