//
// Navs
// --------------------------------------------------


// BASE CLASS
// ----------

.nav {
  margin-left: 0;
  margin-bottom: @baseLineHeight;
  list-style: none;
}

// Make links block level
.nav > li > a {
  display: block;
}
.nav > li > a:hover {
  text-decoration: none;
  background-color: @grayLighter;
}



// TABS
// -------------

.tabs {
    display: grid;
}

.tabs input[type="radio"] {
	position: absolute;
	top: 0;
	left: -9999px;
	display: none;
}

// Actual tabs
.tabs label {
	grid-row-start: 1;
	color: #555;
	margin: 0 2px -1px 0;
	line-height: @baseLineHeight;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	padding: 5px;
	&:hover {
		border-color: @grayLighter @grayLighter #ddd;
	}
}
[id^="tab"]:checked + label {
	color: @gray;
	background-color: @white;
	border-color: #ddd #ddd transparent #ddd;
	z-index: 1;
}

// TABBABLE
// --------

.tab-content {
	grid-column-start: 1;
	grid-row-start: 2;
	visibility: hidden;
}

[id^="tab"]:checked + label + .tab-content {
	visibility: visible;
}