@import (reference) "global";

@borderRadius: @defaultBorderRadius;
@downBorderColor: rgba(0, 0, 0, 0.3);

.ui.input.select {
	> select {
		-webkit-appearance: none;
		min-width: 40px;
		width: 100%;
		background: @inputBackground;
	}
	> .editor.placeholder:not(:focus) {
		color: #999999;
	}
}

.ui.input.drop {
	> .icon {
		pointer-events: inherit !important;
	}

	> .filter-input {
		.opacity(0%);
		width: ~'calc(100% - 2em)';
		position: absolute;
		padding: 0.709567em 0 0.709567em 1.06667em !important;
		left: 0.1em;
		top: 0.1em;
		right: 2.4333333em;
		bottom: 0.1em;
		line-height: 1.2142em;
		border-style: none !important;
		z-index: 3;
	}
	> .value-content {
		display: none;
		position: absolute;
		left: 8px;
		top: 6px;
		right: 2.5333333em;
		bottom: 6px;
		line-height: 1.2142em;
		pointer-events: none;
		list-style: none;
		white-space: nowrap;
		z-index: 4;
		overflow: hidden;

		&.placeholder {
			.opacity(30%) !important;
		}
	}
	&.filterable {
		input:not(.filter-input) {
			pointer-events: none;
		}
		&.opened {
			input {
				border-color: @downBorderColor;
			}
		}
	}
	> i.icon {
		width: 2.4em;
		cursor: pointer;
	}
	> i.icon.remove {
		display: none;
		width: 1em;
		right: 2.2em;
		z-index: 5;
	}
	&:hover:not(.readonly) {
		> i.icon.remove {
			display: block;
		}
	}
	&.readonly {
		> i.icon {
			display: none;
		}
		> .value-content {
			right: 1.16667em;
		}
		> .filter-input {
			display: none;
		}
	}
	&.opened {
		> input {
			border: 1px solid @downBorderColor;
		}
	}
	&.focused {
		> .filter-input {
			.opacity(100%);
		}
		> .value-content {
			.opacity(50%);
		}
	}
}

.ui.drop-container {
	background: @inputBackground;
	.filter-container {
		background: @inputBackground;
		padding: 0.25em;
	}
}

.ui.drop-container.dialog {
	min-width: 20em;
}

.ui.drop-box, c-drop-box {
	position: absolute;
	overflow: auto;
	box-sizing: border-box;
	border: 1px solid @downBorderColor;
	min-height: 1em;
	width: auto;
	left: -9999px;
	top: -9999px;
	overflow-x: hidden;
	background: @inputBackground;
	display: none;

	&.direction-down {
		border-radius: 0 0 @borderRadius @borderRadius;
		border-top-width: 0;
		&.x-over {
			border-radius: @borderRadius;
			border-top-width: 1px;
		}
	}
	&.direction-up {
		border-radius: @borderRadius @borderRadius 0 0;
		border-bottom-width: 0;
		&.x-over {
			border-radius: @borderRadius;
			border-bottom-width: 1px;
		}
	}
	.filter-pane {
		padding: 0.5em;
	}
}

.ui.drop-box.inverted {
	border-radius: @borderRadius;
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.dropdown-value-tip {
	position: absolute;
	z-index: 999;
	padding: 0.4em 0.75em;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.1);
	.transform(translate(-50%, -105%));
	> li {
		list-style: none;
	}
}