dialog {
	/* Viewport-centered */
	position: fixed;
	z-index: 1;
	top: 0;
	bottom: 0;
	margin: auto;

	align-items: center;
	flex-direction: column;
	row-gap: 1rem;

	min-width: 20vw;
	max-width: 80vw;
	max-height: 80vh;

	padding: 1rem;
	font-size: 1.1rem;

	border: 0;
	border-radius: 15px;

	background: var(--fg-color);
	color: var(--primary-bg-color);

	&[open] { display: flex; }

	/* Common children */
	& > :is(ul, p) { overflow: auto; }
	& > form[method=dialog] {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		gap: 0.2rem;

		& > button { min-width: 5rem; }
	}

	/* Client-side messages */
	&.client-messages > p { font-weight: bolder; }

	/* (Server-side) messages */
	&.messages > ul {
		padding: 0.1rem;

		display: flex;
		flex-direction: column;
		row-gap: inherit;

		& > li {
			display: flex;
			column-gap: var(--prefix-gap);

			&.success::before { content: "✅"; }
			&.warning::before { content: "⚠️"; }
			&.error::before { content: "❌"; }
		}
	}
}


/* HTMX loading indicator */

#loading-indicator {
	position: fixed;
	z-index: 2;
	top: 8vh;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;

	--length: 3rem;
	width: var(--length);
	height: var(--length);

	padding: 0.5rem;

	border-radius: 50%;
	background-color: var(--fg-color);

	/* Text indicator */
	display: flex;
	align-items: center;
	justify-content: center;

	&::before {
		color: var(--primary-bg-color);
		content: attr(aria-label);

		font-size: 0.6rem;
		font-weight: bolder;
	}

	/* Animated indicator */
	@media (prefers-reduced-motion: no-preference) {
		content: var(--spinner);

		transition: filter 200ms ease;

		&::before {
			content: revert;
		}
	}

	/* HTMX class toggle */
	filter: opacity(0%);
	visibility: hidden;

	&.htmx-request {
		visibility: visible;
		filter: opacity(90%);
	}
}