// Collection of hamburger mixins v1.1


// 3 bars
@mixin hamburger-simpleCross($width, $height, $duration: 0.15s) {

	// bar base pos
	.hamburger__bar {
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;

		transition: transform $duration ease;
	}

	// move individual bars to normal state
	.hamburger__bar--1 {
		transform: translate3d(0, ($height * -0.45), 0);
	}

	.hamburger__bar--2 {}

	.hamburger__bar--3 {
		transform: translate3d(0, ($height * 0.45), 0);
	}

	.hamburger--active {

		.hamburger__bar--1 {
			transform: translate3d(0, 0, 0) rotate(45deg);
		}

		.hamburger__bar--2 {
			transform: scale(0);
		}

		.hamburger__bar--3 {
			transform: translate3d(0, 0, 0) rotate(-45deg);
		}
	}
}


// 4 bars
@mixin hamburger-4BarRotateToCross($width, $height, $duration: 0.15s) {
	.hamburger {
		transition: transform $duration ease;
	}

	// bar base pos
	.hamburger__bar {
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;

		transition: transform $duration ease;
	}

	// move individual bars to normal state
	.hamburger__bar--1 {
		transform: translate3d(0, ($height * -0.45), 0) scale(1);
	}

	.hamburger__bar--4 {
		transform: translate3d(0, ($height * 0.45), 0) scale(1);
	}

	.hamburger--active {
		transform: rotate(180deg);

		.hamburger__bar--1 {
			transform: translate3d(0, 0, 0) scale(0);
		}

		.hamburger__bar--2 {
			transform: rotate(45deg);
		}

		.hamburger__bar--3 {
			transform: rotate(-45deg);
		}

		.hamburger__bar--4 {
			transform: translate3d(0, 0, 0) scale(0);
		}
	}
}

// 3 bars
@mixin hamburger-3dotsToCross($width, $height, $duration: 0.15) {
	.hamburger {
		transition: transform $duration ease-out;
	}

	.hamburger__bar--1,
	.hamburger__bar--2,
	.hamburger__bar--3 {
		position: absolute;
		top: 50%;

		width: 4px;
		height: 4px;
		margin-top: -2px;
		border-radius: 50%;
	}

	.hamburger__bar--1 {
		left: 0;
	}

	.hamburger__bar--2 {
		left: 50%;
		margin-left: -2px;
	}

	.hamburger__bar--3 {
		right: 0;
	}

	.hamburger:hover,
	.hamburger:focus {
		.hamburger__bar--1 {
			transform: translateX(-2px);
		}

		.hamburger__bar--3 {
			transform: translateX(2px);
		}
	}

	.hamburger--active {
		// transform: rotate(225deg);

		.hamburger__bar--1 {
			@include animation(hamburger-3dotsToCrossAnimation-bar1 $duration ease 0s 1 forwards);
		}

		.hamburger__bar--3 {
			@include animation(hamburger-3dotsToCrossAnimation-bar3 $duration ease 0s 1 forwards);
		}
	}

	.hamburger--deactivated {
		.hamburger__bar--1 {
			@include animation(hamburger-3dotsToCrossAnimation-bar1-back $duration ease 0s 1 forwards);
		}

		.hamburger__bar--3 {
			@include animation(hamburger-3dotsToCrossAnimation-bar3-back $duration ease 0s 1 forwards);
		}
	}


	@include keyframes(hamburger-3dotsToCrossAnimation-bar1) {
		0% {
			width: 4px;
			border-radius: 50%;
		}

		60% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(0deg);
		}

		100% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(45deg);
		}
	}

	@include keyframes(hamburger-3dotsToCrossAnimation-bar3) {
		0% {
			width: 4px;
			border-radius: 50%;
		}

		60% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(0deg);
		}

		100% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(-45deg);
		}
	}

	@include keyframes(hamburger-3dotsToCrossAnimation-bar1-back) {
		0% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(45deg);
		}

		40% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(0deg);
		}

		100% {
			width: 4px;
			border-radius: 50%;
		}
	}

	@include keyframes(hamburger-3dotsToCrossAnimation-bar3-back) {
		0% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(-45deg);
		}

		40% {
			width: $width;
			border-radius: 0%;
			transform: translateX(0) rotate(0deg);
		}

		100% {
			width: 4px;
			border-radius: 50%;
		}
	}
}