// 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 rgba($inputBorderFocus, (20/100));
		outline: 0;
		outline: thin dotted \9;
	}

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

	.vicon {
		position: absolute;
		z-index: 2;
		@include right($rtl, 0); top: 0; bottom: -1px;
		padding: 4px;
		border-left: 1px solid $inputBorder;
		background: $white;
		font-size: 8px;
		color: mix(#000000, $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: unquote("alpha(opacity=0)"); // IE 7, 8
	}

	&:hover {
		border-color: mix(#000000, $inputBorder, 25%);

		&.cs-focus {
			border-color: $inputBorderFocus;
    	box-shadow: 0 0 5px rgba($inputBorderFocus, (20/100));
			outline: 0;
			outline: thin dotted \9;
		}
	}

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

		.vicon {
			border: none;
		}
	}
}