// Select
// 
// This should take the place of the dropdown, and is our version of a select menu.
// 
// Styleguide 17

// Select
// 
// Markup:
// <div class="btn btn-group select">
//     Select
//     <div class="transport-bottom"></div>
//     <div class="{{modifier_class}}">
//         <div class="select-item">
//             <label class="select-label">Item One</label>
//             <input type="checkbox" class="select-input" />
//         </div>
//         <div class="select-item">
//             <label class="select-label">Item Two</label>
//             <input type="checkbox" class="select-input" />
//         </div>
//         <div class="select-item">
//             <label class="select-label">Item Three</label>
//             <input type="checkbox" class="select-input" />
//         </div>
//     </div>
// </div>
// 
// .select-list			- Default
// .select-list.active	- After user action
// 
// Styleguide 17.1

.select {
	.radius;

	position: relative;

	display: inline-block;
	padding: 0 15px;

	line-height: unit(@btn-font-size * 20, px);
	line-height: unit(@btn-font-size * 2, rem);

	outline: 0;
	> .transport {
		vertical-align: middle;
	}
	&-list {
		.radius;

		position: absolute;
		top: @select-position;
		right: -1px;
		z-index: 10;

		display: none;
		padding: 0;
		margin: 0;

		line-height: normal;
		list-style-type: none;

		background-color: @select-bgcolor;
		border: 1px solid @select-bordercolor;
		box-shadow: 0 1px 16px @select-boxshadow;
		&.active {
			display: inline-block;
		}
	}
	&-label {
		display: block;
		padding: 5px 15px;

		text-align: left;
		white-space: nowrap;
		cursor: pointer;
		&.active {
			background-color: lighten(@select-label-bgcolor-hover, 10%);
		}
		&:hover {
			color: @select-label-color-hover;

			background-color: @select-label-bgcolor-hover;
		}
	}
	&-input {
		.pos(absolute);

		left: -9999px;
		&:checked + .dd-label {
			color: @select-input-color;

			background-color: @select-input-bgcolor;
			&:hover {
				background-color: @select-input-bgcolor-hover;
			}
		}
	}
}
