/*  -----------------------------------------------------------------------------------------------
    Header Style 2
    @package v.1.0.0
--------------------------------------------------------------------------------------------------- */

&.header-style-2
{
	padding: 0;
	border-bottom: 0;
	
	.wrapper
	{
		@include media('<=tablet')
		{
			-webkit-justify-content: space-between;
			        justify-content: space-between;
		}

		.site-search-button-disabled &
		{
			@include media('<=tablet')
			{
				justify-content: center;
			}
		}
	}
	
	.header-row-1,
	.header-row-2
	{
		width: 100%;
		@extend .flex-item;
	}

	.header-row-2
	{
		-webkit-justify-content: center;
		        justify-content: center;
	    
	    .main-navigation
	    {
	    	@include media('<=tablet')
	    	{
	    		display: none;
	    	}
	    }
	}

	.header-row-1
	{
		padding: 12px 0;
		@include elements_padding_on_sides;
		
		.site-offcanvas-opener
		{
			flex: 1;
			margin-right: 24px;
			display: flex;

			#offcanvas-navigation-open
			{
				@extend .flex-item;
			}
			
			#offcanvas-navigation-open
			{
				.site-offcanvas-button-disabled &
				{
					@include media('>=tablet')
					{
						display: none;
					}
				}
			}

			
			@include media('<=tablet')
			{
				flex: initial;
			}

			.site-search-button-disabled &
			{
				@include media('<=tablet')
				{
					position: absolute;
					left: 0;
				}
			}
		}

		.social-navigation
		{
			@include media('<=tablet')
			{
				flex: initial;
			}

			.nav--social
			{
				@include media('<=desktop')
				{
					display: none;
				}
			}

			.site-search-opener
			{
				.site-offcanvas-button-disabled &
				{
					@include media('<=tablet')
					{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translate(0, -50%);
					}
				}

			}
		}
		
		a,
		button
		{
			display: flex;
		}

		svg
		{
			width: 24px;
			height: 24px;
		}
	}

	.header-row-2
	{
		.main-navigation
		{
			-webkit-justify-content: center;
			        justify-content: center;
		}
	}

	.header-row-1,
	.header-row-2
	{
		border-bottom: 	1px solid $grey;
	}
	
}