//
// Nav custom
// 

// 
// Table of Contents:
// 
// Tabs Line 
// Tabs Corporate
//

// Corporate style
$tabs-corporate-color: $gray-19;
$tabs-corporate-background: transparent;
$tabs-corporate-active-color: $primary;
$tabs-corporate-active-background: $primary;
$tabs-corporate-border: #e5e7e9;

// Base styles
.tabs-custom {
	text-align: left;
	.nav-tabs {
		font-size: 0;
		line-height: 0;
		word-spacing: 0;
		border: 0;
		
		&::before,
		&::after {
			display: none;
		}
	}
	
	.nav-item {
		float: none;
		border: 0;
		cursor: pointer;
		transition: .33s all ease;
	}
	
	.nav-link {
		margin: 0;
		border-radius: 0;
		border: 0;
	}
	
	.nav-link.active {
		cursor: default;
		border: 0;
	}
}

.tab-content > .tab-pane {
	display: block;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.tab-content > .active {
	visibility: visible;
	height: auto;
	overflow: visible;
}

// Offsets
* + .tabs-horizontal.tabs-corporate {
	margin-top: 25px;
}

* + .tabs-vertical.tabs-corporate {
	margin-top: 40px;
}

@include media-breakpoint-up(md) {
	* + .tabs-vertical.tabs-corporate {
		margin-top: 60px;
	}
}

@include media-breakpoint-up(xl) {
	* + .tabs-vertical.tabs-corporate {
		margin-top: 80px;
	}
}

// Tabs line
.tabs-line {
	.nav-tabs {
		position: relative;
		margin-left: -11px;
		margin-bottom: -14px;
	}

	.nav-item {
		padding: 0 11px;
		margin-bottom: 14px;
		border-right: 1px solid $body-color;

		&:last-child {
			padding-right: 0;
			border: 0;
		}
	}
	
	.nav-link {
		padding: 0;
		font-family: $font-family-sec;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.2;
		text-transform: uppercase;
		text-align: center;
		vertical-align: middle;
		letter-spacing: .12em;

		&,
		&:active,
		&:focus {
		  color: $body-color;
		}

		&.active {
			background-color: transparent;
		}

		&:hover,
		&.active {
			color: $primary;
		}
	}
	
	* + .tab-content {
		margin-top: 33px;
	}
}

* + .tabs-line { margin-top: 20px; }

%context-dark {
	.tabs-line {
		.nav-item {
			border-color: $lightblue-1;
		}

		.nav-link {
			&,
			&:active,
			&:focus {
				color: $lightblue-1;
			}

			&:hover,
			&.active {
				color: $secondary;
			}
		}
	}
}

@media (min-width: 480px) {
  .tabs-line {
		.nav-tabs {
			margin-left: -22px;
		}

		.nav-item {
			padding: 0 22px;
		}
	}
}

@include media-breakpoint-up(md) {
	* + .tabs-line { margin-top: 35px; }
}

// Tabs corporate
.tabs-corporate {
	.nav-tabs {
		display: block;
		position: relative;
		text-align: center;
		margin-bottom: -10px;
	}
	
	.nav-item {
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
	}
	
	.nav-link {
		padding: 0;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		color: $tabs-corporate-color;
		text-align: center;
		vertical-align: middle;
		border: 0;
		letter-spacing: .05em;
		background-color: transparent;
	}
	
	.nav-link:hover,
	.nav-link.active {
		color: $tabs-corporate-active-color;
	}
	
	.tab-content {
		padding: 30px 0 0;
		color: $gray-19;
	}
}

@include media-breakpoint-up(md) {
	//
	// Horizontal tabs
	// 
	.tabs-horizontal {
		&.tabs-corporate {
			.nav-tabs {
				position: relative;
				width: 100%;
				display: block;
				text-align: center;
				border: 0;
				will-change: transform;
			}
			
			.nav-item {
				display: inline-block;
				will-change: transform;
				margin-left: 28px;
				margin-right: 28px;
			}
			
			.nav-link {
				display: block;
				position: relative;
				z-index: 1;
				padding: 0;
				border: none;
			}
			
			.nav-link.active,
			.nav-link:hover {
				color: $tabs-corporate-active-color;
				background-color: transparent;
			}
		}
	}
	
	// 
	// Vertical tabs
	// 
	.tabs-vertical {
		display: flex;
		align-items: flex-start;
		
		.nav-tabs {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			flex-shrink: 0;
			max-width: 50%;
		}
		
		.nav-item {
			border: 0;
			width: 100%;
			text-align: left;
		}
		
		.nav-link.active,
		.nav-link:hover {
		}
		
		.tab-content {
			flex-grow: 1;
		}
		
		// Tabs corporate
		&.tabs-corporate {
			.nav-tabs {
				width: auto;
				min-width: 260px;
				border: 0;
				li:last-child {
					.nav-link {
						border: none;
					}
				}
			}
			
			.nav-item {
				margin: 0;
			}
			
			.nav-link {
				position: relative;
				padding: 14px 6px;
				border: 0;
				overflow: hidden;
				text-align: left;
				border-bottom: 1px solid $gray-14;
			}
			
			.nav-item + .nav-item {
				margin-top: 2px;
			}
			
			.tab-content {
				padding: 0 0 0 30px;
			}
		}
	}
}

@include media-breakpoint-up(lg) {
	//
	// Horizontal tabs
	// 
	.tabs-horizontal {
		
		// Tabs Corporate
		&.tabs-corporate {
			.tab-content {
				padding: 45px 5px 0;
			}
		}
	}
	
	// 
	// Vertical tabs
	// 
	.tabs-vertical {
		
		// Tabs corporate
		&.tabs-corporate {
			.tab-content {
				padding: 0 0 0 45px;
			}
		}
	}
}