.tabs-nav {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	margin-bottom: 2em;
	position: relative;

	> li,
	> li > a {
		display: flex;
	}
	a {
		position: relative;
		z-index: 2;
		align-items: center;
		padding: 0.6em 1em;
		font-size: 1em;
		align-items: center;
		justify-content: center;
	}
	li {
		padding: 0;
		margin: 0;
		text-align: center;
		line-height: 1.5em;
		letter-spacing: inherit;
		align-items: stretch;
		justify-content: center;

		&.active a,
		a:hover,
		a:focus {
			color: var(--color-link-hover);
			background-color: transparent;
		}
	}
}

.tabs-pane {
	display: none;

	&.active {
		display: block;
	}
}

/* Nav positions */
.tabs-nav-centered {
	
	.tabs-nav {
		justify-content: center;
	}
}
.tabs-nav-justified {
	
	.tabs-nav {
		
		li {

			&,
			a {
				flex: 1 auto;
			}
		}
	}
}
.tabs-nav-spaced {

	.tabs-nav {

		li {

			+ li {
				margin-left: 8px;
			}
		}
	}
}

/* Nav Borderes */
.tabs-nav-bordered {

	.tabs-nav {
		border: 1px solid #e0e1eb;
	}
}
.tabs-nav-underlined {

	.tabs-nav {
		border-bottom: 1px solid #e0e1eb;
	}
}
.tabs-nav-items-bordered {

	.tabs-nav {

		li {
			font-size: 12px;
			border: 1px solid #E1E1E1;
		}
		a {
			padding: em(15, 12) em(44, 12);
			margin: -1px;
		}
	}
}

/* Nav Stats */
.tabs-nav-filled {

	.tabs-nav {

		a {
			padding: 1.15em 2.8em;
			background-color: rgba(#000, 0.07);
			color: #000;
		}
	}

	&.tabs-content-filled {

		.tabs-nav {

			a {
				background: none;
			}
		}
	}
}
.tabs-nav-active-filled {

	.tabs-nav {

		li {

			&.active a,
			a:hover {
				background-color: #e0e1eb;
			}
		}
	}
}
.tabs-nav-active-underlined {

	.tabs-nav {

		li {
			position: relative;
			overflow: hidden;
			
			&:after {
				content: '';
				display: inline-block;
				width: 100%;
				height: 3px;
				position: absolute;
				bottom: -1px;
				left: 0;
				z-index: 0;
				pointer-events: none;
				background-color: var(--color-primary);
				transition: transform 0.3s;
				transform: scaleY(0);
				transform-origin: center bottom;
			}
			&.active:after,
			&:hover:after {
				transform: scaleY(1);
			}
		}
	}
}
.tabs-nav-shadowed {
	
	.tabs-nav {
		box-shadow: 0 10px 50px rgba(#000, 0.05);
	}
}

/* Contens Stats */
.tabs-contents-shadowed {

	.tabs-nav {
		margin: 0;
	}
	.tabs-content {
		padding: 40px 30px em(20);
		background-color: #fff;
		box-shadow: 0 20px 50px rgba(#000, 0.07);
	}
}
.tabs-content-filled {
	
	.tabs-nav {
		margin-bottom: 0;
	}
	.tabs-content {
		padding: 30px 40px;
		background-color: #ECECEC;
	}
}

/* Nav Icons */
.tabs-nav-icon {
	margin-right: 0.65em;
	font-size: 26px;
}

/* Nav Size */
.tabs-nav-sm {

	.tabs-nav {

		li {
			margin-left: 35px;
			margin-right: 35px;
		}
		a {
			padding: 0.05em 0;
		}
	}
}
.tabs-nav-lg {

	.tabs-nav {

		a {
			padding: 1.2em 2em;
		}
	}
}

// Side nav
.tabs-nav-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: stretch;

	.tabs-nav,
	.tabs-content {
		flex: 1 auto;
	}
	.tabs-nav {
		width: 26.5%;
		padding: 35px 0 30px;
		flex-direction: column;
		flex-wrap: inherit;
		align-items: flex-start;
		justify-content: flex-start;

		a {
			width: 100%;
			flex: 1 auto;
			padding: 9px 40px;
			justify-content: flex-start;

			&:after {
				content: '';
				display: inline-block;
				width: 4px;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				transform: scaleX(0);
				transform-origin: right center;
				background-color: currentColor;
				transition: transform 0.3s;
			}

			&:hover {

				&:after {
					transform: scaleX(1);
				}
			}
		}
		li {
			width: 100%;
			justify-content: flex-start;
			font-size: 16px;
			text-align: left;
			transition: font-weight 0.3s;

			&.active {
				font-weight: 700;

				a {

					&:after {
						transform: scaleX(1);
					}
				}
			}
		}
		.tabs-nav-title {
			padding: 0 40px;
			margin-bottom: 20px;

			h6 {
				margin: 0;
				color: #5A5A5A;
			}
		}
	}
	.tabs-content {
		width: 73.5%;
		padding: 30px;
	}
}

.tabs-nav-side-alt {

	.tabs-nav {
		width: 31.6%;

		li {
			border-bottom: 1px solid #F0F0F0;
			font-size: 20px;
			font-weight: 600;
			
			a {
				padding: 1.15em em(45, 20);
				flex-direction: column;
				align-items: flex-start;
				color: #100F26;

				&:after {
					content: '\f105';
					width: auto;
					height: auto;
					position: absolute;
					top: 1.15em;
					left: 0;
					background: none;
					opacity: 0;
					font-family: fontAwesome;
					transform: translateX(-8px);
					transition: transform 0.3s, opacity 0.3s;
					transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
				}
				span {
					margin-top: 0.65em;
					font-size: em(15, 20);
					line-height: em(26, 15);
					font-weight: 400;
				}
			}

			&.active a,
			a {

				span {
					color: #84898F;
				}
			}
			
			&.active,
			&:hover {

				a {

					&:after {
						opacity: 1;
						transform: translateX(0);
					}
				}
			}
			&.active {
				font-weight: 600;

				a {
					color: var(--color-primary);
				}
			}

		}
	}
	.tabs-content {
		width: 68.4%;
	}
}

.tabs-nav-side-block {

	.tabs-nav {

		li {
			border: none;
			border-radius: 6px;
			background-color: #fff;
			font-size: 21px;
			font-weight: 500;
			box-shadow: 0 10px 33px rgba(#000, 0.05);
			
			&:before {
				content: '';
				display: inline-block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: inherit;
				background-color: var(--color-primary);
				opacity: 0;
				transform: scale(0.97, 0.95);
				transition: transform 0.45s cubic-bezier(.2,.95,.2,1), opacity 0.45s cubic-bezier(.2,.95,.2,1);
			}
			&:not(:last-child) {
				margin-bottom: 1.7em;
			}
			a {
				padding-left: 30px;
				padding-right: 30px;

				&:after {
					content: none;
				}
				span {
					margin-top: 0.5em;
					opacity: 0.65;
					font-size: em(15, 21);
					color: inherit;
				}
			}

			&.active,
			&:hover {

				&:before {
					opacity: 1;
					transform: scale(1);
				}
				a {
					color: #fff;

					span {
						color: inherit;
					}
				}
			}
			&.active {
				font-weight: 500;
			}
		}
	}
}