/*------------------------------------
  Navigation Behavior (Overlay)
------------------------------------*/

body.u-main-nav--overlay {
	&-left,
	&-right {
		.u-main-nav__overlay {
			overflow: hidden;
		}
	}

	&-right {
		.u-main-nav {
			&--overlay {
				@include px-to-rem(right, -300px);
			}
			&__overlay {
				right: 100%;
			}
		}
		&.u-main-nav--overlay-opened {
			.u-main-nav {
				&--overlay {
					right: 0;
				}
				&__overlay {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
	&-left {
		.u-main-nav {
			&--overlay {
				@include px-to-rem(left, -300px);
			}
			&__overlay {
				left: 100%;
			}
		}
		&.u-main-nav--overlay-opened {
			.u-main-nav {
				&--overlay {
					left: 0;
				}
				&__overlay {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
}

.navbar-collapse.u-main-nav--overlay {
	position: fixed;
	top: 0;
	height: 100%;
	z-index: 5;

	margin: 0 !important;
	@include px-to-rem(width, 300px);;
	align-items: flex-start !important;

	.navbar-nav {
		width: 100%;
		flex-direction: column;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.dropdown-menu {
		position: static;
		width: 100%;
	}

	.u-main-nav__list-wrapper {
		margin-left: 0;
		margin-right: 0;
		@include px-to-rem(padding, 30px 10px);
		width: 100%;
		height: 100%;

		.navbar-nav {
			@include px-to-rem(padding, 10px);
		}
	}
}