/* Commerce7 Template - Header Navigation Toggle */

.header__navigation-toggle{
	color: $navigation-toggle-menu-color;
	cursor: pointer;
	padding: 0 0 0 .25rem;
	position: relative;
	text-transform: uppercase;
	align-self: flex-end;
    margin-left: auto;
    border: 1px solid transparent !important;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-36px);
    z-index: 11;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	@media #{$large-up}{
		display: none;
	}

	.c7-cart-open & {
		z-index: 0;
	}

	.show-mobile-nav & span{
		background: none;

		&:before, &:after{
			transition-delay: 0s, 200ms;
		}

		&:before{
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);

			top: 0;
		}

		&:after{
			transform: rotate(-45deg);

			bottom: 0;
		}
	}

	span{
		transition: background 0s 200ms;

		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		background: $navigation-toggle-menu-color;
		display: block;
		position: relative;
		height: 1px;
		width: 1.125rem;
		margin-left: 10px;

		&:before, &:after{
			transition-duration: 200ms, 200ms;
			transition-delay: 200ms, 0s;

			background: $navigation-toggle-menu-color;
			content: "";
			height: 1px;
			position: absolute;
			left: 0;
			width: 100%;
		}

		&:before{
			transition-property: top, transform;

			top: -5px;
		}

		&:after{
			transition-property: bottom, transform;

			bottom: -5px;
		}
	}

	&:hover{
		background: none;
	    border: 0;
	    color: #fff;
	}
}