:root {
	--hamburger-bar-width: 32px;
	--hamburger-bar-height: calc(var(--hamburger-bar-width) / 5);
	--hamburger-gap: var(--hamburger-bar-height);
	--hamburger-pad: calc(2 * var(--hamburger-bar-height));
	--hamburger-foreground: var(--color-yellow);
	--hamburger-background: white;
	--hamburger-animation-duration: 400ms;
	--hamburger-animation-timing: var(--hamburger-animation-duration) ease-in-out;
	--hambuger-height: calc(var(--hamburger-bar-height) * 3 + var(--hamburger-gap) * 2);
	--hamburger-content-safe-height: calc(2 * (var(--hambuger-height) + 2 * var(--hamburger-pad)));
	--hamburger-z-index: 10;
}

.hamburger-menu {
	--x-width: calc(var(--hambuger-height) * 1.414213562373095);
	
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	z-index: var(--hamburger-z-index);
	
	padding: var(--hamburger-pad) calc(var(--hamburger-pad) * 1.2);
	background-color: var(--color-mid-green);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	transition:
	padding var(--hamburger-animation-timing),
	box-shadow var(--hamburger-animation-timing);
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible  {
	border: 1px solid var(--hamburger-background);
	box-shadow: 0 0 0 1px var(--hamburger-foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: var(--hamburger-bar-width);
	height: var(--hamburger-bar-height);
	background-color: var(--hamburger-foreground);
	border-radius: 9999px;
	transform-origin: right center;
	transition: opacity var(--hamburger-animation-timing), width var(--hamburger-animation-timing),
	rotate var(--hamburger-animation-timing), translate var(--hamburger-animation-timing),
	background-color var(--hamburger-animation-timing);
}

.hamburger-menu input {
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}

.hamburger-menu:has(input:checked) {
	padding-left: 1px;
	box-shadow: none;
}

.hamburger-menu:has(input:checked)::before {
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--hamburger-bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--hamburger-bar-height) / 2);
}

.hamburger-menu input:checked {
	opacity: 0;
	width: 0;
}

.hamburger-menu + .sidebar {
	transition: translate var(--hamburger-animation-timing), opacity 0s linear var(--hamburger-animation-duration);
	translate: 0 100%;
	opacity: 0;
	padding: 1rem;
	background-color: var(--color-mid-green);
	border-top-left-radius: 2rem;
	border-top-right-radius: 2rem;
	color: white;
	width: 100vw;
	padding: calc(2 * (var(--hambuger-height) + 2 * var(--hamburger-pad))) var(--pad);
	min-height: max-content;
	position: fixed;
	bottom: 0;
	left: 0;
}

.hamburger-menu:has(input:checked) + .sidebar {
	translate: 0;
	opacity: 1;
	transition: translate var(--hamburger-animation-timing);
}
	
@media screen and (min-width: 768px) {
	.hamburger-menu {
		display: none;
	}
	.hamburger-menu + .sidebar {
		translate: 0;
		opacity: 1;
		padding: unset;
		background-color: transparent;
		color: unset;
		width: unset;
		min-height: unset;
		position: static;
		z-index: auto;
	}
}