@import '../../../../themes/storefront/assets/css/sass/utils/variables';
@import '../../../../themes/storefront/assets/css/sass/vendors/font-awesome/variables';

.storefront-hamburger-menu-active {
	.shm-close {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	 .storefront-hamburger-menu-active {
		.main-navigation {
			ul {
				li {
					a {
						padding: .857em 1.387em;
					}
				}
			}

			.handheld-navigation,
			div.menu {
				position: fixed;
				top: 0;
				left: -80%;
				width: 80%;
				height: 100%;
				transition: left 0.2s;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
				-webkit-transition: left 0.2s;
				-moz-transition: left 0.2s;
				-ms-transition: left 0.2s;
				-o-transition: left 0.2s;
				transition: left 0.2s;
				z-index: 9999;
				display: block !important;
				border-right: 1px solid rgba(255,255,255,.2);

				> ul {
					margin-top: .53em;
				}
			}

			&.toggled {
				button.menu-toggle {
					&:before {
						transform: translateY(-4px);
					}

					&:after {
						transform: translateY(4px);
					}

					span:before {
						opacity: 1;
					}
				}

				.handheld-navigation,
				div.menu {
					left: 0;
					box-shadow: 0 0 2em rgba(0,0,0,.7);
				}
			}
		}

		.shm-close {
			display: block;
			background-color: rgba(0,0,0,.5);
			cursor: pointer;
			overflow: hidden;
			font-weight: bold;
			border-bottom: 1px solid rgba(255,255,255,.2);

			&:before {
				font-family: "FontAwesome";
				font-weight: 400;
				content: '\f00d';
				margin-right: 1em;
				display: inline-block;
				padding: .857em 0 .857em 1.387em;
			}
		}

		.site-header-cart {
			.cart-contents {
				right: 2.618em;
			}
		}

		&.admin-bar {
			.main-navigation {
				.handheld-navigation,
				div.menu {
					padding-top: 32px;
				}
			}
		}
	}
}

.storefront-2-3 {
	&.storefront-hamburger-menu-active {
		.main-navigation {
			.shm-close {
				&:before {
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					content: fa-content( $fa-var-times );
				}
			}
		}
	}
}

@media screen and (max-width: 782px) {
	.storefront-hamburger-menu-active {
		&.admin-bar {
			.main-navigation {
				.handheld-navigation,
				div.menu {
					padding-top: 46px;
				}
			}
		}
	}
}