/**
 * Related Media module: Load More row.
 *
 * Plain CSS on purpose. assets/scss compiles to dist/styles/main.min.css and
 * that build is not runnable here, so these rules ship on their own.
 * Enqueued from inc/related-media.php.
 */

.related-media__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 5rem;
}

/* The row owns the spacing now, so the buttons inside it should not. */
.related-media__actions .related-media__button {
	margin-top: 0 !important;
}

/* $breakpoint-s */
@media (max-width: 41em) {
	.related-media__actions {
		align-items: stretch;
		flex-direction: column;
		gap: 1rem;
		margin-top: 3rem;
	}
}

/* Mid-request state. aria-disabled instead of [disabled] so the button keeps
   focus, which the theme's .button:disabled rule would otherwise not cover. */
.related-media__load-more[aria-disabled="true"] {
	cursor: wait;
	opacity: .5;
}