/*
 * Step-1 relatie-selectietabel: a loading line while existing relations are fetched, and a vertical slide when
 * the table appears or disappears. initRelatieTable animates the height between 0 and the content height
 * (.is-sliding clips the overflow meanwhile), then clears it so the table can grow/shrink freely afterwards.
 */
.relatie-table-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-secondary-color);
}

/* flex would override the [hidden] attribute's display: none. */
.relatie-table-loading[hidden] {
	display: none;
}

.relatie-table-loading .fa-spinner {
	font-size: 1.5rem;
	color: var(--bs-primary-500);
}

.relatie-table-container.is-sliding {
	overflow: hidden;
	transition: height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.relatie-table-container.is-sliding {
		transition: none;
	}
}