// stylelint-disable max-nesting-depth, selector-max-specificity, number-max-precision
.hamburger {
	$this: &;

	@extend %button-reset;

	&:not(.is-always-visible) {
		@include media(desktop up) {
			display: none;
		}
	}

	display: flex;
	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0.25rem;

	border: none;
	background: none;

	cursor: pointer;

	&:hover {
		#{$this}__icon {
			&--border {
				opacity: 1;
			}

			&--top {
				transform: rotate(0) translate3d(0, -2%, 0) scale3d(1, 1, 1);
			}

			&--btm {
				transform: rotate(0) translate3d(0, 2%, 0) scale3d(1, 1, 1);
			}
		}
	}

	&:active {
		#{$this}__icon {
			&--border {
				opacity: 1;
				transform: scale3d(0.9, 0.9, 1);
			}
		}
	}

	&__icon {
		width: 2.5rem;
		height: 2.5rem;

		&--top,
		&--mid,
		&--btm {
			transition: {
				property: transform;
				duration: 0.3s;
				timing-function: ease-out;
			}
		}

		&--border {
			transition: {
				property: transform, opacity;
				duration: 0.3s;
				timing-function: ease-out;
			}
		}

		&--border,
		&--top,
		&--btm {
			transform-origin: 50% 50%;
		}

		&--mid {
			transform-origin: 25% center;
			transform: scale3d(1, 1, 1);
		}
	}

	// Open state.
	@mixin es-hamburger-open-state {
		#{$this}__icon {
			&--top {
				transform: rotate(45deg) translate3d(0, 20%, 0) scale3d(1, 1, 1);
			}

			&--mid {
				transform: scale3d(0, 1, 1);
			}

			&--btm {
				transform: rotate(-45deg) translate3d(0, -20%, 0) scale3d(1, 1, 1);
			}
		}

		&:hover {
			#{$this}__icon {
				&--top {
					transform: rotate(45deg) translate3d(0, 20%, 0) scale3d(1.125, 1, 1);
				}

				&--btm {
					transform: rotate(-45deg) translate3d(0, -20%, 0) scale3d(1.125, 1, 1);
				}
			}
		}
	}

	@supports selector(:has(*)) {
		body:has(.drawer[aria-expanded='true']) & {
			@include es-hamburger-open-state;
		}
	}

	@supports not selector(:has(*)) {
		&.is-menu-open {
			@include es-hamburger-open-state;
		}
	}
}