// =============================================================================
// :: Settings
// =============================================================================
$hamburgerWidth: 3rem;
$hamburgerHeight: 2.4rem;

$hamburgerItemMiddleWidth: 2rem;
$hamburgerItemHeight: 0.4rem;

$delay: 0.2s;
$middle: 1.1rem;
$hover-distance: 0.25rem;
$nav-toggle-close-duration: 0.5s;

// =============================================================================
// :: Hamburger
// =============================================================================
.c-hamburger {
	position: relative;

	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;

	width: $hamburgerWidth;
	height: $hamburgerHeight;

	border: none;
	background-color: transparent;

	cursor: pointer;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-hamburger__bar,
.c-hamburger__line {
	position: absolute;

	display: block;

	width: $hamburgerWidth;
	height: $hamburgerItemHeight;

	border: none;
	border-radius: $border-radius-base;
}

.c-hamburger__bar {
	left: 0;

	background-color: $background-color-pink;

	transition:
		opacity 0.3s ease-in-out 0.1s,
		transform 0.3s cubic-bezier(0.17, 1.19, 0.22, 1.32) $delay;
}

.c-hamburger__line {
	top: calc(50% - (#{$hamburgerItemHeight} * 0.5));

	width: 50%;

	opacity: 0;
	background-color: $background-color-base;

	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-hamburger__bar--top {
	top: 0;
}

.c-hamburger__bar--middle {
	top: calc(50% - (#{$hamburgerItemHeight} * 0.5));
	left: auto;
	right: 0;

	width: $hamburgerItemMiddleWidth;
}

.c-hamburger__bar--bottom {
	bottom: 0;
}

.c-hamburger__line--top-left,
.c-hamburger__line--bottom-left {
	left: 0;

	transform-origin: right center;
}

.c-hamburger__line--top-right,
.c-hamburger__line--bottom-right {
	right: 0;

	transform-origin: left center;
}

// =============================================================================
// :: States
// =============================================================================
.c-hamburger {

	&.is-closed {

		.c-hamburger__bar {
			opacity: 0;

			transition:
				opacity 0.3s ease-in-out,
				transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		}

		.c-hamburger__bar--top {
			transform: translateY(#{$middle});
		}

		.c-hamburger__bar--bottom {
			transform: translateY(-#{$middle});
		}

		.c-hamburger__bar--middle {
			transform: scaleX(1);
		}

		.c-hamburger__line {
			opacity: 1;

			transition: transform 0.4s cubic-bezier(0.17, 1.19, 0.22, 1.32) $delay;
		}

		.c-hamburger__line--top-left,
		.c-hamburger__line--bottom-right {
			transform: rotate(45deg);
		}

		.c-hamburger__line--top-right,
		.c-hamburger__line--bottom-left {
			transform: rotate(-45deg);
		}
	}
}