.nav-main {
	@include box-shadow;
	background-color: $white;
	margin-bottom: 25px;
	position: relative;
	z-index: 0;
	width: 100%;

	// transition-out
	transition: z-index 0ms 250ms;

	&:hover {
		// switch z-index to prevent invoking sublist outside of nav
		z-index: $z-high;

		// transition-in
		transition: z-index 0ms 0ms;
	}
}

.nav-main__list {
	display: flex;
	margin: auto;
	max-width: $max-width;
	justify-content: center;
	flex-direction: row;
}

.nav-main__item {
	@include hover-flip;
	display: inline-block;
	flex-grow: 1;
	position: relative;

	.fa-angle-down {
		font-weight: bold;
		margin-left: 5px;
	}

	&:hover {
		.nav-main__item-title {
			color: $red;
		}
	}
}

.nav-main__item-title {
	background-color: $white;
	display: block;
	height: 60px;
	line-height: 60px;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;

	span {
		position: relative;

		// &:before {
		//   background-color: $red;
		//   content: '';
		//   position: absolute;
		//   top: 37px;
		//   left: 0;
		//   width: 100%;
		//   height: 6px;
		//   transition: top 200ms;
		// }

		// TODO: add class to active section (backend)
		.nav-main__item:active & {
			&:before {
				top: 34px;
			}
		}
	}
}

.nav-main__sublist {
	@include flyout($hover-selector: '.nav-main__item');
    left: -8px;
    pointer-events: none;

	// .fa-caret-up
	&:before {
		display: block;
		text-align: center;
		color: $white;
		font-size: 40px;
		line-height: 12px;
	}
}

.nav-main__sublist-item {
	background-color: $white;
	padding: 10px;
	text-align: center;
	@include text-cta;
	text-transform: uppercase;

	&:first-child {
		padding-top: 20px;
	}

	&:last-child {
		padding-bottom: 20px;
	}
}

.nav-main__sublist-link {
	display: block;
	color: $gray-dark;
	cursor: pointer;

	// TODO: add class to active page (backend)
	&:active,
	&:hover {
		color: $red;
	}
}
