// Custom select

.custom-select {
	position: relative;
	display: inline-block;
	height: @baseLineHeight;
	overflow: hidden;
	padding: 4px;
	border: 1px solid @inputBorder;
	background: @white;
	vertical-align: middle;
	border-radius: @borderRadiusXs;

	&.cs-focus {
		border-color: @inputBorderFocus;
    box-shadow: 0 0 5px fade(@inputBorderFocus, 20%);
		outline: 0;
		outline: thin dotted \9;
	}

	label {
		position: absolute;
		z-index: 1;
		.left(@rtl, 0); top: 0;
		.right(@rtl, 2em); bottom: 0;
		padding: 4px;
		line-height: @baseLineHeight;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.vicon {
		position: absolute;
		z-index: 2;
		.right(@rtl, 0); top: 0; bottom: -1px;
		padding: 4px;
		border-left: 1px solid @inputBorder;
		background: @white;
		font-size: 8px;
		color: shade(@inputBorder, 50%);
		line-height: 2.3em;
	}

	select {
		position: absolute;
		z-index: 3;
		left: 0; top: 0;
		min-width: 100%;
		height: 100%;
		padding: 0;
		cursor: pointer;
		opacity: 0;

		filter: ~"alpha(opacity=0)"; // IE 7, 8
	}

	&:hover {
		border-color: shade(@inputBorder, 25%);

		&.cs-focus {
			border-color: @inputBorderFocus;
    	box-shadow: 0 0 5px fade(@inputBorderFocus, 20%);
			outline: 0;
			outline: thin dotted \9;
		}
	}

	.input-append & {
		.margin-left(@rtl, -1px);

		.vicon {
			border: none;
		}
	}
}