// Tabs
//
// Tabs are handy for when you want to display a bunch of information in a small amount of space.
// 
// Styleguide 20

// Tabs
//
// Markup:
// <div class="tabs">
// 	<ul class="tab-list">
// 		<li class="tab-list-item active">Tab One</li>
// 		<li class="tab-list-item">Tab Four</li>
// 		<li class="tab-list-item">Tab Three</li>
// 	</ul>
// 	<ul class="tab-content">
// 		<li class="tab-content-item active">Tab One Content</li>
// 		<li class="tab-content-item">Tab Two Content</li>
// 		<li class="tab-content-item">Tab Three Content</li>
// 	</ul>
// </div>
// 
// Styleguide 20.1

.tabs {
	.pos(relative);
	.tab-list,
	.tab-content {
		padding: 0;

		list-style-type: none;
	}
	.tab-list {
		.tab-list-item {
			z-index: 30;

			float: left;
			padding: 10px 20px;
			margin-right: -1px;
			margin-bottom: -1px;

			cursor: pointer;

			background-color: @tab-bgcolor;
			border-color: @tab-bordercolor;
			border-style: solid;
			border-width: 1px 1px 0 1px;

			.pos(relative);
			&:hover {
				background-color: darken(@colorS2, (@pct * .2));
			}
			&:first-child {
				-moz-border-radius-topleft: 3px;
				border-top-left-radius: 3px;
			}
			&.active {
				cursor: default;

				background-color: @tab-active-bgcolor;
				border-bottom: 1px solid @tab-active-bordercolor;
				&:hover {
					background-color: @tab-active-bgcolor-hover;
				}
			}
		}
	}
	.tab-content {
		.tab-content-item {
			display: none;
			width: 100%;
			padding: 10px 20px;

			border: 1px solid @tab-content-bordercolor;
			-moz-border-radius-topleft: 0;
			border-top-left-radius: 0;
			-moz-border-radius-topright: 0;
			border-top-right-radius: 0;
			-moz-border-radius-bottomright: 3px;
			border-bottom-right-radius: 3px;
			-moz-border-radius-bottomleft: 3px;
			border-bottom-left-radius: 3px;
			> *:last-child {
				// remove any extra margin on the last item for better parent padding
				margin: 0;
			}
			&.active {
				z-index: 25;

				display: inline-block;

				background-color: @tab-active-content-bgcolor;

				.pos(relative);
			}
		}
	}
}