// General navigation styling

// navigation list styling
.secondary-navigation ul,
.main-navigation ul {
	list-style: none;
	margin: 0;
}

// hide the primary navigation until it's needed
.primary-menu {
	display: none;
}

// hide the secondary menu by default at mobile sizes
// this is usually the secondary menu but could also be the primary menu if placed there
#site-header-secondary-menu,
.site-header-wrap .site-header-menu {
	display: none;
}

// If the navigation appears next to the site branding, remove padding etc.
.site-branding + .site-header-menu .main-navigation {
	padding-left: 0;
	padding-right: 0;
}

// Allow the main navigation to wrap underneath the site branding when necessary at smaller resolutions.
.site-header-wrap {
	flex-wrap: wrap;
}

// Main navigation styling

.main-navigation a {
	display: block;
	line-height: 1.5;
	font-size: $nav-font-size;
	color: $nav-color;
	position: relative;
	z-index: 3;
	&::before{
		content: '';
		width: 0;
        height: 1px;
        bottom: 0;
        position: absolute;
        left: auto;
        right: 0;
        z-index: -1;
        -webkit-transition: width .6s cubic-bezier(.25, .8, .25, 1) 0s;
        transition: width .6s cubic-bezier(.25, .8, .25, 1) 0s;
        background: currentColor;
	}
	&:hover::before{
		width: 100%;
	    left: 0;
	    right: auto;
	}
}

.secondary-navigation .menu {
	.menu-item a{
		position: relative;
		z-index: 3;
		&::before{
			content: '';
			width: 0;
	        height: 1px;
	        bottom: 0;
	        position: absolute;
	        left: auto;
	        right: 0;
	        z-index: -1;
	        -webkit-transition: width .6s cubic-bezier(.25, .8, .25, 1) 0s;
	        transition: width .6s cubic-bezier(.25, .8, .25, 1) 0s;
	        background: currentColor;
		}
		&:hover::before{
			width: 100%;
		    left: 0;
		    right: auto;
		}
	}
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	color: $nav-active-color;
}

.main-navigation a:hover {
	color: $nav-hover-color;
}

.main-navigation li {
	position: relative;
	margin-bottom: 0;
}

.main-navigation ul ul {
	display: none;
}

.main-navigation li.current-menu-item > a::before {
	content: "";
    width: 100%;
    height: 1px;
    bottom: 0;
    position: absolute;
    left: 0;
    right: auto;
    z-index: -1;
    transition: width .6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background: currentColor;
}

// Leave right margin for the button.
.main-navigation .menu-item-has-children > a {
	margin: 0;
	padding-right: 2rem;
}

// If cart icon is moved to the primary navigation, center it.
.primary-menu li.checkout {
    align-self: center;

	.nav-cart-text {
		display: none;
	}
}

@media #{$nav-sm-max}{

	// Show the menus when there is no JS, or when they have been toggled.
	.no-js .main-navigation ul ul {
		display: block;
	}

	// Add padding top and bottom at mobile sizing.
	.main-navigation.toggled .primary-menu {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.main-navigation a {
		padding-left: 2rem;
		padding-right: 2rem;
	}

}

// Show desktop nav.
@media #{$screen-sm}{

	.main-navigation .primary-menu {
        display: flex;

        // Allow the nav items to wrap onto the next line.
        flex-wrap: wrap;

		margin-left: -1rem; // line up the UL with the logo/site title.
	}

	// Add right margin so the navigation doesn't get too close.
	.site-branding {
		margin-right: 2rem;
	}

	.site-header-menu {
		display: block;
	}

	#site-header-secondary-menu,
	.site-header-wrap .site-header-menu {
		display: block;
	}

	// Sub-menu.
	.main-navigation .sub-menu a {
		padding: $sub-menu-padding;
		color: $nav-sub-color;
	}

	.main-navigation .sub-menu .current-menu-item a {
		color: $nav-sub-active-color;
        background: $nav-sub-background-active-color;

		&:hover {
			color: $nav-sub-active-hover-color;
	        background: $nav-sub-background-active-hover-color;
		}
	}

	.site-header-menu .main-navigation {
		margin: 0 auto;
		max-width: $main-nav-max-width;
		padding: 0 2rem;
	}

	.main-navigation li {
		border: 0;
	}

	.main-navigation a {
		outline-offset: -8px;
		padding: $nav-sm-padding $nav-md-padding;
		white-space: nowrap;
	}

	.main-navigation li:hover > a {
		color: $nav-hover-color;
	}

	.secondary-navigation a {
		padding: $nav-secondary-md-padding;
	}

	// sub-menus
	.main-navigation .sub-menu li:hover > a,
	.main-navigation .sub-menu li:focus-within > a,
	.main-navigation .sub-menu li.focus > a {
		color: $nav-sub-hover-color;
		background-color: $nav-sub-background-hover-color;
	}

	.main-navigation ul ul {
		display: block;
		float: left;
		margin: 0;
		position: absolute;
		left: -999em;
		opacity: 0;
		visibility: hidden;
		z-index: 99999;
		top: 100%;
		background: $nav-sub-background-color;
	}

	.main-navigation ul ul li:first-child > a {
		margin-top: 0.375rem;
	}

	.main-navigation ul ul li:last-child > a {
		margin-bottom: 0.375rem;
	}

	.main-navigation li:hover > ul,
	.main-navigation li:focus-within > ul,
	.main-navigation li.focus > ul {
		left: 0;
		opacity: 1;
		top: 100%;
		visibility: visible;
	}

	.main-navigation ul ul ul {
		top: -0.375rem;
		left: 100%;
	}

	.main-navigation ul ul li:first-child ul {
		top: -0.375rem;
	}

	.main-navigation ul ul ul:before,
	.main-navigation ul ul ul:after {
		border: 0;
	}

	.main-navigation ul ul li {
		background: $nav-sub-background-color;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li:focus-within > ul,
	.main-navigation ul ul li.focus > ul {
		left: 100%;
		top: -0.375rem;
	}

	.main-navigation ul ul li:first-child:hover > ul,
	.main-navigation ul ul li:first-child.focus > ul {
		top: -0.375rem;
	}

	.main-navigation ul ul a {
		white-space: normal;
		width: 15em;
		font-size: $nav-sub-font-size;
		line-height: 1.5;
	}

	.main-navigation .menu-item-has-children > a:after {
		content: "\f431";
		position: absolute;
		right: 0.625em;
		top: 50%;
		margin-top: -8px;
	}

	.main-navigation ul ul .menu-item-has-children > a {
		padding-right: 2.0625em;
	}

	// Rotate the down error so it becomes a right arrow.
	.main-navigation ul ul .menu-item-has-children > a:after {
		transform: rotate(-90deg);
		top: 50%;
		margin-top: -8px;
		right: 0.5625em;
	}

}
