// ============================================================================
// :: Hamburger
// ============================================================================
.a-hamburger {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: $z-index-highest + 1;

	width: 7.5rem;
	height: 7.5rem;

	transition: transform 0.3s ease-in-out, box-shadow 0s ease-in-out;

	pointer-events: none;

	&::after {

		content: "";

		position: absolute;
		bottom: 0;
		right: 0;

		display: block;

		width: 100%;
		height: 100%;

		background-color: $background-color-white;
		box-shadow: $box-shadow;
		opacity: 0;

		transform: scale(1.1);
		transform-origin: right bottom;

		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
		border-top-left-radius: 100%;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.a-hamburger__button {
	position: absolute;
	bottom: 1.2rem;
	right: 0.6rem;
	z-index: $z-index-higher;

	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 4rem;
	height: 4rem;

	padding: 0;

	border: none;
	background-color: transparent;

	cursor: pointer;

	pointer-events: auto;

	span {
		position: absolute;
		top: 50%;

		display: block;
		width: 2.8rem;
		height: 0.3rem;

		background: $background-color-white;

		transform: translateY(-50%);
		transform-origin: right center;

		pointer-events: none;

		&.a-hamburger__first {
			transform: translateY(-50%) translateY(-0.8rem) scaleX(0.6);
		}

		&.a-hamburger__middle {
			transform: scaleX(1) translateY(-50%) scaleX(0.8);

			transition: transform 0.3s ease-in-out;
		}

		&.a-hamburger__last {
			transform: translateY(-50%) translateY(0.8rem);
		}
	}
}

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

	&.is-closed {
		z-index: $z-index-highest + 2;

		pointer-events: auto;

		&::after {
			opacity: 1;

			transform: scale(1);
		}

		span {
			background: $gradient-primary;

			&.a-hamburger__first {
				transform-origin: center center;

				animation: first 0.6s ease-in-out;
				animation-fill-mode: forwards;
			}

			&.a-hamburger__middle {
				transform: scaleX(0) translateY(-50%);
				transform-origin: center center;
			}

			&.a-hamburger__last {
				transform-origin: center center;

				animation: last 0.6s ease-in-out;
				animation-fill-mode: forwards;
			}
		}
	}

	&.is-hidden {
		box-shadow: none;

		transform: translateX(10rem) translateY(10rem) scale(0.9);
	}
}

// ============================================================================
// :: ANIMATIES
// ============================================================================
@keyframes first {

	0% {
		transform-origin: center center;
		transform: translateY(-50%) translateY(0.8rem) scaleX(0.6);
	}

	30% {
		transform: translateY(-50%) scaleX(1);
	}

	100% {
		transform: translateY(-50%) rotate(-45deg);
	}
}

@keyframes last {

	0% {
		transform-origin: center center;
		transform: translateY(-50%) translateY(-0.8rem) scaleX(0.8);
	}

	30% {
		transform: translateY(-50%);
	}

	100% {
		transform: translateY(-50%) rotate(45deg);
	}
}