.rd-navbar-fullwidth {
	height: 80px;
	font-weight: 400;
	font-size: px-to-rem( 17px );
	background-color: $navbar-background;
	transition: height .2s, box-shadow .2s;

	.navbar-container {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: 0 23px;
		height: 100%;
	}

	.navbar-cell {
		display: flex;
		align-items: stretch;
		padding: 0 17px;
	}

	.navbar-spacer {
		display: block;
		flex-grow: 1;
	}

	.navbar-switch {
		position: relative;
		z-index: 1;
		transition: color .3s;

		&::before,
		&::after {
			transition: .25s, color 0s;
		}

		&::after {
			position: absolute;
			top: 50%;
			left: 50%;
		}

		&::after {
			content: '\e90c';
			transform: translate( -50%, -50% ) rotate(90deg)  scale(0);
			font-family: 'Intense Icons';
			opacity: 0;
		}

		&:hover {
			color: $navbar-hover;
		}

		&.active {
			&::before {
				transform: translate( -50%, -50% ) rotate(-90deg)  scale(0);
				opacity: 0;
			}

			&::after {
				transform: translate( -50%, -50% ) rotate(0deg)  scale(1);
				opacity: 1;
			}
		}
	}

	.navbar-panel {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: map-get( $container-max-widths, xl );
		width: 100%;
		padding-right: $grid-gutter-width/2;
		padding-left: $grid-gutter-width/2;
		margin-right: auto;
		margin-left: auto;
	}

	.navbar-subpanel {
		display: flex;
		align-self: center;
		margin: 0 -10px;
	}

	.navbar-subpanel-item {
		padding: 0 10px;
	}

	.navbar-button {
		display: block;
		font-size: 18px;
	}

	.navbar-action-button {
		margin: 0;
	}

	// Search
	.navbar-search {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transform: scaleX(.8);
		z-index: 1;
		display: flex;
		align-items: center;
		opacity: 0;
		pointer-events: none;
		background: $white;
		transition: .25s;
	}

	.navbar-search-container {
		flex: 1 1 870px;
		max-width: 870px;
		margin: 0 auto;
		padding: 0 15px;
	}

	.navbar-search-close {
		position: absolute;
		top: 50%;
		right: 38px;
		transform: translateY(-50%);
	}

	.navbar-search-form {
		display: flex;
		align-items: center;
	}

	.navbar-search-input {
		flex-grow: 1;
		font-size: px-to-rem( 30px );
		color: $gray-900;
		margin: 0;
		border: none;
		background: none;

		&::placeholder {
			color: $gray-900;
		}
	}

	.navbar-search-close,
	.navbar-search-btn {
		color: inherit;

		&:hover {
			color: $primary;
		}
	}

	.navbar-search-btn {
		margin-left: px-to-rem( 20px );
		font-size: px-to-rem( 28px );
	}

	.navbar-search-results {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform: scaleY(0);
		transform-origin: center top;
		display: flex;
		justify-content: center;
		padding: 60px 0 70px;
		opacity: 0;
		pointer-events: none;
		box-shadow: $navbar-shadow;
		background: $white;
		transition: .15s;

		&.rd-search-show {
			transform: scaleY(1);
			opacity: 1;
			pointer-events: auto;
		}

		&.rd-search-loading {
			.search-results {
				opacity: .5;
				pointer-events: none;
			}
		}

		.search-results {
			flex: 1 1 870px;
			max-width: 870px;
			padding: 0 15px;
		}

		.search-list {
			list-style-type: none;
		}

		.search-list-item {
			padding: 25px 0;
			margin: 0;
			border-bottom: 1px solid $gray-300;

			&:first-child {
				border-top: 1px solid $gray-300;
			}
		}

		* + p {
			margin-top: 2px
		}

		* + .search-list,
		* + .search-list-item-all {
			margin-top: 25px;
		}
	}

	&.navbar-search-active {
		.navbar-search {
			transform: scaleX(1);
			opacity: 1;
			pointer-events: auto;
		}
	}


	// Navbar stuck
	&.rd-navbar--is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 50px;
		box-shadow: $navbar-shadow;
	}

	.navbar-navigation-back {
		display: none;
	}

	// Root
	.navbar-navigation {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		right: 0;
		width: map-get( $container-max-widths, xl );
		display: flex;
		justify-content: center;
		padding: 0;
		margin: 0 -17px;
		background: $navbar-background;
		transform: translate( -50%, -100% );
		opacity: 0;
		visibility: hidden;
		transition: $transition-base;

		&::before {
			position: absolute;
			top: 0;
			left: 50%;
			height: 100%;
			transform: translateX( -50% );
			width: 101vw;
			content: '';
			background: $navbar-background;
		}
	}

	&.active {
		.navbar-navigation {
			opacity: 1;
			visibility: visible;
			transform: translate( -50%, 0% );
		}
	}

	.navbar-navigation-root-item {
		display: flex;
		align-items: center;
		padding: 0 17px;

		&.focus {
			> .navbar-navigation-root-link {
				color: $navbar-color;

				&::before {
					opacity: 1;
					width: 20px;
				}
			}
		}
	}

	.navbar-navigation-root-link {
		position: relative;
		display: block;
		line-height: 1;
		color: $navbar-color;

		&::before {
			content: '';
			position: absolute;
			top: calc(100% + 5px);
			left: 0;
			width: 4px;
			opacity: 0;
			height: 4px;
			pointer-events: none;
			transition: .2s ease-in-out;
			background: $navbar-hover;
		}

		&:hover {
			color: $navbar-color;

			&::before {
				opacity: 1;
				width: 20px;
			}
		}
	}

	.navbar-navigation-root-item.active > .navbar-navigation-root-link {
		color: $navbar-color;

		&::before {
			opacity: 1;
			width: 20px;
		}
	}


	// Dropdown
	.navbar-navigation-dropdown {
		position: absolute;
		left: -20px;
		top: 100%;
		transform: translate(0, 10%) scale(.8);
		z-index: 1;
		min-width: 220px;
		padding: 20px 15px;
		opacity: 0;
		visibility: hidden;
		background: $navbar-background;
		box-shadow: 5px 8px 28px rgba( $gray-600, 0.1 );
		transition: .2s;
	}

	.navbar-navigation-dropdown-item + .navbar-navigation-dropdown-item {
		margin-top: 5px;
	}

	.navbar-navigation-dropdown-link {
		position: relative;
		display: inline-block;
		color: $navbar-color;
		transition: .2s;

		& + .rd-navbar-submenu-toggle {
			display: block;
		}

		&:hover {
			color: $navbar-hover;

			+ .rd-navbar-submenu-toggle {
				transition: .2s .1s;
				color: $navbar-hover;
			}
		}
	}


	// Megamenu
	.navbar-navigation-megamenu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform: translateY(-10%) scale(.8);
		display: flex;
		justify-content: center;
		padding: 57px 40px 100px;
		opacity: 0;
		visibility: hidden;
		background: $navbar-background;
		box-shadow: $box-shadow;
		transition: .2s;
	}

	.navbar-navigation-megamenu-container {
		max-width: 1320px;
		width: 100%;
		padding: 0 20px;
		margin: 0 auto;
	}

	.navbar-navigation-megamenu-row {
		display: flex;
		margin: 0 -20px;
	}

	.navbar-navigation-megamenu-column {
		flex: 1 0 25%;
		padding: 0 20px;
	}

	.navbar-navigation-megamenu-heading {
		padding: 0 10px;
		font-size: px-to-rem( 24px );
		line-height: 1.2;
	}

	.navbar-navigation-megamenu-link {
		position: relative;
		display: block;
		padding: 4px 10px;
		border-radius: 4px;
		overflow: hidden;
		color: $navbar-color;
		transition: .2s;

		&::before {
			content: '';
			position: absolute;
			top: 10%;
			left: 10%;
			transform: translate(-50%,-50%);
			padding: 0;
			border-radius: 50%;
			z-index: -1;
			background: $gray-700;
			transition: padding .05s;
		}

		& + .rd-navbar-submenu-toggle {
			display: block;
		}

		&:hover {
			color: $white;

			&::before {
				padding: 110%;
				transition: padding .25s ease-in;
			}

			+ .rd-navbar-submenu-toggle {
				transition: .2s .1s;
				color: $white;
			}
		}
	}

	.navbar-navigation-megamenu-heading + .navbar-navigation-megamenu-row,
	.navbar-navigation-megamenu-heading + .navbar-navigation-megamenu-item {
		margin-top: 19px;
	}


	// Disabled
	.navbar-navigation-item-disabled {
		opacity: .5;
		pointer-events: none;
	}


	// RD Navbar elements
	.rd-navbar--has-dropdown {
		position: relative;
	}

	.rd-navbar-submenu-toggle {
		position: absolute;
		top: 7px;
		right: 6px;
		display: none;
		font-size: .8em;
		color: inherit;
		transition: .2s;

		&::before {
			content: '\e909';
			font-family: 'Intense Icons';
		}
	}

	.rd-navbar-megamenu {
		.rd-navbar-dropdown {
			transform: translate(10%, 0) scale(.8);
			left: 100%;
			top: -24px;
		}
	}

	.rd-navbar-dropdown {
		.rd-navbar-dropdown {
			transform: translate(10%, 0) scale(.8);
			left: calc( 100% + 10px );
			top: -24px; // Parent dropdown padding compensation
		}

		.rd-navbar-open-left {
			transform: translate(-10%, 0) scale(.8);
			left: auto;
			right: calc( 100% + 10px );
		}
	}

	.rd-navbar-submenu {
		&.focus,
		&.opened {
			> .navbar-navigation-dropdown {
				transform: translate(0, 0) scale(1);
				opacity: 1;
				visibility: visible;
			}

			> .navbar-navigation-megamenu {
				transform: translateY(0) scale(1);
				opacity: 1;
				visibility: visible;
			}

			> .navbar-navigation-dropdown-link,
			> .navbar-navigation-megamenu-link {
				color: $white;

				&::before {
					padding: 110%;
					transition: padding .25s ease-in;
				}
			}

			> .rd-navbar-submenu-toggle {
				color: $white;
			}
		}
	}

	// Modifiers
	&.navbar-sidebar {

	}


	// Builder Context
	[data-x-mode='true'] & {
		.navbar-navigation-root-item {
			& > .rd-navbar-submenu-toggle {
				position: static;
				display: block;
				margin-left: 6px;
				line-height: 1;

				&::before {
					content: '\e924';
				}

				&:hover {
					cursor: pointer;
				}
			}

			&.opened > .rd-navbar-submenu-toggle {
				color: $primary;
			}
		}
	}

	@include media-breakpoint-up( xxl ) {
		.navbar-panel {
			max-width: map-get( $container-max-widths, xxl );
		}

		.navbar-navigation {
			width: map-get( $container-max-widths, xxl );
		}

		&.navbar-sidebar {

		}
	}
}


.rd-navbar-fullwidth-linked {
	.rd-navbar-wrap-absolute {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;

		.rd-navbar-fullwidth {
			background-color: transparent;

			&:not( .rd-navbar--is-stuck ) {
				.navbar-logo-default {
					display: none;
				}

				.navbar-logo-inverse {
					display: block;
				}

				.navbar-switch:not(.active),
				.navbar-button:not(.active) {
					color: $white;

					&:hover {
						color: rgba( $white, .5 );
					}
				}
			}


			&.rd-navbar--is-stuck {
				background-color: $white;
			}
		}
	}
}