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

&.header-style-3
{
	@include elements_padding_on_sides;
	
	.header-left
	{
		flex: 1;
		@extend .flex-item;
		margin-right: 24px;
		
		@include media('<=tablet')
		{
			margin-right: 0;
		}
		
		.site-search-button-disabled &
		{
			@include media('<=tablet')
			{
				margin-right: 0;
			}
		}

		.site-offcanvas-button-disabled &
		{
			@include media('<=tablet')
			{
				margin-right: 0;
				display: flex;
				justify-content: center;
			}

			.site-offcanvas-opener
			{
				@include media('<=tablet')
				{
					position: absolute;
					left: 0;
				}
			}
		}
		
		.site-offcanvas-opener
		{
			margin-right: 24px;
			
			.site-offcanvas-button-disabled &
			{
				@include media('>=semi-huge')
				{
					display: none;
				}
			}
		
		}
		
	}

	.social-navigation
	{
		@include media('<=tablet')
		{
			flex: inherit;
			margin-left: 0;
		}

		.site-search-button-disabled &
		{
			@include media('<=tablet')
			{
				display: none;
			}
		}

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

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

			@include media('<=desktop')
			{
				margin-left: 24px;
			}
		}
	}

	.main-navigation
	{
		-webkit-justify-content: center;
		        justify-content: center;
	    flex: 2;
	    
	   @include media('<=semi-huge')
    	{
    		display: none;
    	}
	}
}