body:has(#mobile-menu:popover-open) {
	overflow: hidden;

	[popovertarget='mobile-menu'] {
		rect:nth-of-type(1) {
			transform: translateY(7px) rotate(45deg);
			transform-origin: 16px 10px;
			transition:
				transform 0.2s ease,
				opacity 0.2s ease;
		}
		rect:nth-of-type(2) {
			opacity: 0;
			transition: opacity 0.2s ease;
		}
		rect:nth-of-type(3) {
			transform: translateY(-5px) rotate(-45deg);
			transform-origin: 16px 22px;
			transition:
				transform 0.2s ease,
				opacity 0.2s ease;
		}
	}
}

[popovertarget='mobile-menu'] {
	rect:nth-of-type(1) {
		transform-origin: 16px 10px;
		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}
	rect:nth-of-type(2) {
		transition: opacity 0.2s ease;
	}
	rect:nth-of-type(3) {
		transform-origin: 16px 22px;
		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}
}

#mobile-menu {
	&:popover-open {
		@starting-style {
			transform: translateY (-20px);
			opacity: 0;
		}
		transform: translateY(0);
		opacity: 1;
	}
	background-color: var(--bg-primary);
	transform: translateY(-20px);
	z-index: 10;
	opacity: 0;
	transition:
		transform 0.2s,
		opacity 0.2s,
		display 0.2s allow-discrete;
}
