.ahe-hamburger-wrap {
	display: flex;
	width: 100%;
}

.ahe-hamburger {
	--ahe-size: 48px;
	--ahe-line-width: 4px;
	--ahe-line-gap: 9px;
	--ahe-line-color: #111827;
	--ahe-line-hover-color: #2563eb;
	--ahe-line-length: calc(var(--ahe-size) * 0.68);
	--ahe-shift: calc(var(--ahe-line-gap) + var(--ahe-line-width));
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	gap: 10px;
	line-height: 1;
	padding: 0;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ahe-hamburger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ahe-hamburger__icon {
	display: inline-block;
	height: var(--ahe-size);
	position: relative;
	width: var(--ahe-size);
}

.ahe-hamburger__line {
	background: var(--ahe-line-color);
	border-radius: 999px;
	display: block;
	height: var(--ahe-line-width);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center;
	transition: background-color 180ms ease, opacity 180ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1), width 320ms cubic-bezier(.4, 0, .2, 1);
	width: var(--ahe-line-length);
}

.ahe-hamburger__line--top {
	transform: translate(-50%, calc(-50% - var(--ahe-shift)));
}

.ahe-hamburger__line--bottom {
	transform: translate(-50%, calc(-50% + var(--ahe-shift)));
}

.ahe-hamburger:hover .ahe-hamburger__line,
.ahe-hamburger.is-active .ahe-hamburger__line {
	background: var(--ahe-line-hover-color);
}

.ahe-hamburger__text {
	display: inline-block;
	line-height: 1.2;
	white-space: nowrap;
}

.ahe-effect-x.is-active .ahe-hamburger__line--top,
.ahe-effect-x-transition.is-active .ahe-hamburger__line--top {
	transform: translate(-50%, -50%) rotate(45deg);
}

.ahe-effect-x.is-active .ahe-hamburger__line--middle,
.ahe-effect-x-transition.is-active .ahe-hamburger__line--middle {
	opacity: 0;
	transform: translate(-50%, -50%) scaleX(.25);
}

.ahe-effect-x.is-active .ahe-hamburger__line--bottom,
.ahe-effect-x-transition.is-active .ahe-hamburger__line--bottom {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ahe-effect-x-transition .ahe-hamburger__line--top,
.ahe-effect-x-transition .ahe-hamburger__line--bottom {
	transition-delay: 60ms;
}

.ahe-effect-minus.is-active .ahe-hamburger__line--top,
.ahe-effect-minus.is-active .ahe-hamburger__line--bottom {
	opacity: 0;
	transform: translate(-50%, -50%) scaleX(.2);
}

.ahe-effect-plus.is-active .ahe-hamburger__line--top {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ahe-effect-plus.is-active .ahe-hamburger__line--bottom {
	opacity: 0;
	transform: translate(-50%, -50%) scaleX(.2);
}

.ahe-effect-slant.is-active .ahe-hamburger__line {
	transform: translate(-50%, -50%) rotate(-12deg);
}

.ahe-effect-slant.is-active .ahe-hamburger__line--top {
	transform: translate(-50%, calc(-50% - var(--ahe-shift))) rotate(-12deg);
	width: calc(var(--ahe-line-length) * .9);
}

.ahe-effect-slant.is-active .ahe-hamburger__line--bottom {
	transform: translate(-50%, calc(-50% + var(--ahe-shift))) rotate(-12deg);
	width: calc(var(--ahe-line-length) * .9);
}

.ahe-effect-arrow-right.is-active .ahe-hamburger__line--top,
.ahe-effect-arrow-right.is-active .ahe-hamburger__line--bottom,
.ahe-effect-arrow-left.is-active .ahe-hamburger__line--top,
.ahe-effect-arrow-left.is-active .ahe-hamburger__line--bottom,
.ahe-effect-arrow-up.is-active .ahe-hamburger__line--top,
.ahe-effect-arrow-up.is-active .ahe-hamburger__line--bottom,
.ahe-effect-arrow-down.is-active .ahe-hamburger__line--top,
.ahe-effect-arrow-down.is-active .ahe-hamburger__line--bottom {
	width: calc(var(--ahe-line-length) * .52);
}

.ahe-effect-arrow-right.is-active .ahe-hamburger__line--top {
	transform: translate(-12%, calc(-50% - var(--ahe-shift) * .34)) rotate(45deg);
}

.ahe-effect-arrow-right.is-active .ahe-hamburger__line--bottom {
	transform: translate(-12%, calc(-50% + var(--ahe-shift) * .34)) rotate(-45deg);
}

.ahe-effect-arrow-left.is-active .ahe-hamburger__line--top {
	transform: translate(-88%, calc(-50% - var(--ahe-shift) * .34)) rotate(-45deg);
}

.ahe-effect-arrow-left.is-active .ahe-hamburger__line--bottom {
	transform: translate(-88%, calc(-50% + var(--ahe-shift) * .34)) rotate(45deg);
}

.ahe-effect-arrow-up.is-active .ahe-hamburger__line--top {
	transform: translate(-72%, calc(-50% - var(--ahe-shift) * .18)) rotate(-45deg);
}

.ahe-effect-arrow-up.is-active .ahe-hamburger__line--middle {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ahe-effect-arrow-up.is-active .ahe-hamburger__line--bottom {
	transform: translate(-28%, calc(-50% - var(--ahe-shift) * .18)) rotate(45deg);
}

.ahe-effect-arrow-down.is-active .ahe-hamburger__line--top {
	transform: translate(-72%, calc(-50% + var(--ahe-shift) * .18)) rotate(45deg);
}

.ahe-effect-arrow-down.is-active .ahe-hamburger__line--middle {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ahe-effect-arrow-down.is-active .ahe-hamburger__line--bottom {
	transform: translate(-28%, calc(-50% + var(--ahe-shift) * .18)) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.ahe-hamburger,
	.ahe-hamburger__line {
		transition-duration: 1ms;
	}
}