/*
 * StudentLife Reddit — Load More controls
 *
 * Uses the same theme variables, typography and surface language as the
 * existing dark StudentLife feed.
 */

.sl-feed-load-more {
	width: 100%;
}

.sl-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 18px 0 8px;
}

.sl-load-more-button {
	min-height: 42px;
	padding: 0 22px;
	border: 1px solid var(--sl-border, #2a343d);
	border-radius: 999px;
	background: var(--sl-surface, #151b20);
	color: var(--sl-text-soft, #c7cdd3);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.sl-load-more-button:hover {
	background: var(--sl-surface-raised, #1d252c);
	border-color: var(--sl-blue, #3367e8);
	color: var(--sl-text, #f4f5f6);
	transform: translateY(-1px);
}

.sl-load-more-button:focus-visible {
	outline: 2px solid var(--sl-blue, #3367e8);
	outline-offset: 3px;
}

.sl-load-more-button:disabled {
	cursor: default;
}

.sl-load-more-button.is-loading {
	opacity: 0.68;
	cursor: wait;
	transform: none;
}

.sl-load-more-button.is-complete {
	border-color: var(--sl-border-soft, #20282f);
	background: transparent;
	color: var(--sl-muted, #8d98a3);
	opacity: 1;
}

.sl-load-more-status {
	min-height: 16px;
	color: var(--sl-muted, #8d98a3);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
}

.sl-post-card.sl-load-more-enter {
	opacity: 0;
	transform: translateY(8px);
}

.sl-post-card.sl-load-more-enter.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
}

@media (max-width: 700px) {
	.sl-load-more-wrap {
		padding: 16px 0 6px;
	}

	.sl-load-more-button {
		width: min(100%, 320px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-load-more-button,
	.sl-post-card.sl-load-more-enter.is-visible {
		transition: none;
	}
}