@import "variables";
.b-select {
	position: relative;
	font-size: 14px;
	line-height: 20px;
	.b-select__head {
		position: relative;
		@include border-radius(3px);
		.b-select-item {
			padding-right: 24px;
			&:hover {
				background: $color_gray_70;
			}
		}
		.fa {
			position: absolute; top: 50%; right: 8px;
			font-size: 18px;
			@include transform(translateY(-50%));
		}
	}
	.b-select__body {
		background: #e6e6e6;
		position: absolute; left: 0;
		z-index: 9999;
		overflow: hidden;
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		display: none;
		min-width: 100%;
		max-height: 400px;
		color: $color_dark;
		@include border-radius(3px);
		@include transition();
		.b-select-item {
			color: $color_dark;
		}
	}
	.b-select-item {
		border: 0;
		position: relative;
		display: block;
		padding: 8px 8px 8px 40px;
		img {
			position: absolute; top: 50%; left: 8px;
			display: block;
			width: 20px;
			height: 16px;
			margin-top: -8px;
			@include border-radius(2px);
			@include box-shadow(0 0 4px rgba(0, 0, 0, 0.25));
		}
		&.current {
			background: $color_gray_20;
		}
		&:hover {
			background: $blue;
			color: $white;
			cursor: pointer;
		}
	}

	&.top {
		.b-select__body {
			bottom: 100%;
			margin-bottom: 2px;
		}
	}
	&:not(.top){
		.b-select__body {
			top: 100%;
			margin-top: 2px;
		}
	}

	&.in {
		.b-select__body {
			display: block;
			visibility: visible;
			opacity: 1;
		}
	}

	&.dark {
		.b-select__head {
			border: 1px solid $color_gray_50;
		}
		.b-select__body {
			border: 1px solid $color_gray_10;
			@include box-shadow(0 0 8px rgba(0,0,0,.2));
		}
	}
}