const TRANSITION_TIME = 300;

function showSection(section) {
	for (const section of document.getElementsByTagName("section")) {
		hideElements(section);
	}

	showElements(`#${section}-section`);
}

function hideElements() {
	for (const input of arguments) {
		const elem = input instanceof Element ? input : document.querySelector(input);

		if (getComputedStyle(elem).display === "none")
			continue;

		elem.style.opacity = "0";
		elem.dataset.oldDisplay = getComputedStyle(elem).display;

		setTimeout(() => {
			elem.style.display = "none";
		}, TRANSITION_TIME);
	}
}

function showElements() {
	setTimeout(() => {
		for (const input of arguments) {
			const elem = input instanceof Element ? input : document.querySelector(input);

			elem.style.opacity = "0";

			elem.style.display = elem.dataset.oldDisplay || "block";
			elem.dataset.oldDisplay = null;

			setTimeout(() => {
				elem.style.opacity = "1";
			}, 10);
		}
	}, TRANSITION_TIME);
}