/*  -----------------------------------------------------------------------------------------------
    Offcanvas Navigation & Widgets
    @package v.1.0.0
--------------------------------------------------------------------------------------------------- */

.offcanvas-navigation
{	
	position: fixed;
	top: 0; 
	left: 0;
	transform: translateX(-100%);
	z-index: 10;
	width: 320px;
	height: 100%;
	background: $white;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: all .25s ease-in-out;
	box-shadow: 0 0 3px rgba($black, 0.15);
	
	.header-style-1 &,
	.header-style-2 &,
	.header-style-3 &
	{
		.topbar
		{
			display: none;
			
			@include media('<=tablet')
			{
				display: flex;
				-webkit-justify-content: space-between;
				        justify-content: space-between;
			}

			.nav
			{
				li
				{
					margin-right: 6px;
					
					
					&:last-child:not(:first-child)
					{
						margin-right: 0;
					}
				}
			}

			.wrapper
			{
				@include media('<=tablet')
				{
					flex-direction: column;
				}

				.topbar-right
				{
					.topbar-date
					{
						display: none;
					}
				}
			}
		}
	}
	
	@include media('<tablet')
	{
		width: 85%;
	}
	
	&.is-visible
	{
		opacity: 1;
		visibility: visible;
		z-index: 4;
		transform: translateX(0);
	}

	.offcanvas-content
	{
		display: flex;
		flex-direction: column;

		#offcanvas-navigation-close
		{
			display: flex;
			padding: 24px;
			-webkit-justify-content: flex-end;
			        justify-content: flex-end;
			svg
			{
				width: 24px;
				height: 24px;
			}
		}

		.woocommerce-cart-icon
		{
			padding-bottom: 24px;
			
			@media(max-width: 768px)
			{
				display: flex;
			}
			
			svg
			{
				width: 24px;
				height: 24px;
			}

			.cart-contents
			{
				display: flex;
				align-items: center;
			}

			.cart-contents-count
			{
				sup
				{
					left: 5px;
					font-weight: bold;
					left: 5px;
					background: red;
					width: 16px;
					border-radius: 100%;
					color: wheat;
					height: 16px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 10px;
				}
			}
		}

		.offcanvas-navigation-wrapper
		{
			position: relative;
			width: 100%;
			margin-bottom: 24px;
			padding: 24px;
			
			.nav--main
			{
				@extend .inline-list;
				margin-bottom: 24px;
				
				li
				{
					&.has-mega-menu
					{
						.sub-menu
						{
							li
							{
								img
								{
									display: none;
								}
							}
						}
					}
					
					&.menu-item
					{
						&:not(:last-child)
						{
							margin-bottom: 16px;
						}

						a
						{
							font-size: 18px;
							text-transform: uppercase;
							@extend .flex-item;
							-webkit-justify-content: space-between;
							        justify-content: space-between;
							
						}

						ul
						{
							list-style-type: none;
							padding: 16px 16px 0;
						}

					}


					&.menu-item-has-children
					{
						.has-submenu
						{
							@extend .flex-item;
							-webkit-justify-content: space-between;
							        justify-content: space-between;
							
							svg
							{
								width: 24px;
								height: 24px;
								display: flex;
							}

							&.open
							{
								.minus
								{
									display: block;
								}

								.plus
								{
									display: none;
								}
							}

							.minus
							{
								display: none;
							}
						}
						
						.sub-menu
						{
							display: none;
						}
					}
				}
			}

			.nav--social
			{
				@extend .flex-item;
				@extend .inline-list;
				flex-wrap: wrap;
				
				li
				{
					margin-right: 16px;
					
					&.menu-item-search
					{
						display: none;
					}

					a
					{
						.screen-reader-texts
						{
							display: none;
						}

						svg
						{
							fill: $black;
							width: 18px;
							height: 18px;
						}
					}
				}
			}
			
		}
	}
	
	.admin-bar & 
	{
		top: 32px;
		
		@include media('<=tablet')
		{
			top: 46px; 
		} 
	}

	.sidebar
	{
		padding: 24px;
	}

	.widget-area 
	{
		
		.widget.widget_media_gallery 
		{
			.gallery 
			{
				.gallery-item 
				{
					a 
					{
						img
						{
							min-height: auto;
						}
					}
				}
			}
		}
	}
}

