@import "~./zul/less/_header.less";

.z-chosenbox {
	display: inline-block;
	border: 1px solid @inputBorderColor;
	.borderRadius(@baseBorderRadius);
	line-height: normal;
	background: @inputBackgroundColor;
	overflow: hidden;
	padding: @chosenboxPadding;
	min-height: @chosenboxMinHeight;
	vertical-align: bottom;

	&-focus {
		border-color: @inputFocusBorderColor;
	}

	&-item {
		display: inline-block;
		border: 1px solid @chosenboxItemBorderColor;
		.borderRadius(@baseBorderRadius);
		margin: @chosenboxItemMargin;
		padding: @chosenboxItemPadding;
		background-color: @chosenboxItemBackgroundColor;
		vertical-align: middle;
		position: relative;
		white-space: nowrap;
		cursor: pointer;

		&-content {
			.fontStyle(@baseContentFontFamily, @chosenboxItemSize, normal, @chosenboxItemColor);
			display: inline-block;
			padding: @chosenboxItemContentPadding;
			margin-right: @chosenboxItemContentMarginRight;
			float: left;
		}

		&-focus {
			background-color: @chosenboxItemFocusBackgroundColor;
		}
	}

	&-button {
		.iconFontStyle(@chosenboxIconSize, @chosenboxItemColor);
		.size(@chosenboxIconSize, @chosenboxIconSize);
		line-height: @chosenboxIconSize;
		text-align: center;
		position: absolute;
		right: @chosenboxButtonPositionRight;
		top: @chosenboxButtonPositionTop;
	}

	&-input {
		.fontStyle(@baseContentFontFamily, @inputTextSize, normal, @inputColor);
		.displaySize(inline-block, @chosenboxInputWidth, @chosenboxInputHeight);
		border: 0 !important;
		padding: 1px 4px 2px 8px;
		background: transparent !important;
		outline: 0;
		.boxShadow('none');
	}

	&-disabled {
		border-color: @chosenboxItemDisabledBorderColor;
		background: @disabledBackgroundColor;

		.z-chosenbox-item {
			cursor: default;
			border-color: @chosenboxItemDisabledBorderColor;
			background-color: @chosenboxItemDisabledBackgroundColor;
		}

		.z-chosenbox-item-content {
			color: @chosenboxItemDisabledColor;
			margin-right: 0;
		}

		.z-chosenbox-button {
			display: none;
		}
	}

	&-textcontent {
		font-family: @baseContentFontFamily;
		font-size: @fontSizeMedium;
		display: none;
		white-space: nowrap;
	}

	&-popup {
		.fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @comboPopupItemColor);
		display: block;
		border: 1px solid @comboPopupBorderColor;
		.borderRadius(@baseBorderRadius);
		padding: @chosenboxPopupPadding;
		background: @popupBackgroundColor;
		position: absolute;
		overflow: auto;

		&-hidden {
			display: none;
		}
	}

	&-shadow {
		.boxShadow('0 3px 6px 0 rgba(0,0,0,0.16), 0 2px 4px 0 rgba(0,0,0,0.24)');
	}

	&-option {
		cursor: pointer;
		padding: @chosenboxOptionPadding;
		min-height: @chosenboxOptionMinHeight;
		.borderRadius(@baseBorderRadius);

		&:hover, &-hover {
			background: @chosenboxPopupHoverBackgroundColor;
		}
	}

	&-empty {
		color: @disabledColor;
		padding: @chosenboxOptionPadding;
		min-height: @chosenboxOptionMinHeight;

		&-creatable {
			color: @inputColor;
			padding-top: 2px;
			cursor: pointer;
		}
	}

	&-select {
		display: inline-block;
		min-width: 100%;
	}

	&-create {
		.iconFontStyle(@chosenboxCreateIconSize, @chosenboxCreateIconColor);
		.size(@chosenboxCreateIconSize, @chosenboxCreateIconSize);
		margin-right: 2px;
		&:before {
			content: '\f067'; // z-icon-plus
		}
	}

	&-inplace {
		width: 100%;
		height: 100%;
		font-style: normal;
		display: inline-block;
		font-size: 18px;
		padding: 4px;
	}

	&-hide {
		display: none;
	}
}
