// Default Bootstrap stling for tabs

.nn_tabs {
	//
	// Component animations
	// --------------------------------------------------
	.fade {
		opacity: 0;
		.transition(opacity .15s linear);
		&.in {
			opacity: 1;
		}
	}

	.collapse {
		position: relative;
		height: 0;
		overflow: hidden;
		.transition(height .35s ease);
		&.in {
			height: auto;
		}
	}

	//
	// Navs
	// --------------------------------------------------
	> .nav {
		padding: 0;
		margin-left: 0;
		margin-bottom: @baseLineHeight;
		list-style: none; // Make links block level
		> li > a {
			display: block;
			&:hover {
				text-decoration: none;
				background-color: @grayLighter;
			}
		}

		// Redeclare pull classes because of specifity
		> .pull-right {
			float: right;
		}
	}

	// TABS
	// ----
	// Common styles
	.nav-tabs {
		.clearfix();
		border-bottom: 1px solid #ddd; // Give the tabs something to sit on
		> li {
			float: left;
			margin-bottom: -1px; // Make the list-items overlay the bottom border
			// Actual tabs (as links)
			> a {
				margin-right: 2px;
				padding: 8px 12px;
				line-height: @baseLineHeight;
				border: 1px solid transparent;
				.border-radius(4px 4px 0 0);
				&:hover {
					border-color: @grayLighter @grayLighter #ddd;
				}
			}
			// Active state, and it's :hover to override normal :hover
			&.active > a,
			&.active > a:hover {
				color: @gray;
				background-color: @white;
				border: 1px solid #ddd;
				border-bottom-color: transparent;
				cursor: default;
			}
		}
	}

	// TABBABLE
	// --------
	.tab-content {
		overflow: visible; // Show/hide tabbable areas
		> .tab-pane {
			.clearfix();
			display: none;
		}
		> .active {
			display: block;
		}
	}

}

.nn_tabs-responsive {

	// STACKED NAV
	// -----------

	// Stacked tabs and pills
	.nav-stacked > li {
		float: none;
	}
	.nav-stacked > li > a {
		margin-right: 0; // no need for the gap between nav items
	}

	// Tabs
	.nav-tabs.nav-stacked {
		border-bottom: 0;
	}
	.nav-tabs.nav-stacked > li > a {
		border: 1px solid #ddd;
		.border-radius(0);
	}
	.nav-tabs.nav-stacked > li:first-child > a {
		.border-top-radius(4px);
	}
	.nav-tabs.nav-stacked > li:last-child > a {
		.border-bottom-radius(4px);
	}
	.nav-tabs.nav-stacked > li > a:hover,
	.nav-tabs.nav-stacked > li > a:focus {
		border-color: #ddd;
		z-index: 2;
	}
}