// Button Groups
// 
// Button groups are just that, a button with a little more to it. Either a button containing an icon, or a few buttons attached together.
//
// Styleguide 3

// Button Groups
// 
// Markup:
// <button class="btn btn-group" tabindex="1">
//     Button
//    <div class="transport-{{modifier_class}}"></div>
// </button>
//
// .top               - Top
// .right             - Right
// .bottom            - Bottom
// .left              - Left
//
// Styleguide 3.1

// Multiple Inline Button Group
// 
// Markup:
// <span class="btn-group">
//     <button class="btn" tabindex="1">
//         Button
//     </button>
//     <button class="btn" tabindex="1">
//         Button
//     </button>
//     <button class="btn primary" tabindex="1">
//         Button
//     </button>
// </span>
//
// Styleguide 3.2

// Multiple Inline Mini Button Group
// 
// Markup:
// <span class="btn-group">
//     <button class="btn-mini" tabindex="1">
//         Button
//     </button>
//     <button class="btn-mini" tabindex="1">
//         Button
//     </button>
//     <button class="btn-mini primary" tabindex="1">
//         Button
//     </button>
// </span>
//
// Styleguide 3.3


.btn-group {
	position: relative;

	display: inline;

	white-space: nowrap;
	> .transport {
		display: inline-block;
		> .top, > .right, > .bottom, > .left {
			position: relative;
			right: -4px;

			border-width: 5px;
		}
		> .top {
			top: -2px;

			margin-top: 2.5px;
			margin-bottom: 2.5px;
		}
		> .right {
			top: 1px;

			margin-left: 2.5px;

			border-right-width: 0;
		}
		> .bottom {
			top: 4px;

			margin-top: 2.5px;
			margin-bottom: 2.5px;
		}
		> .left {
			margin-right: 2.5px;
			margin-left: 0;

			border-left-width: 0;
		}
	}
	// multiple inline buttons
	> .btn, > .btn-mini {
		&:first-child {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		+ .btn, + .btn-mini {
			margin-left: -6px;

			border-radius: 0;
		}
		&:last-child {
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}
	}
}