.fx-list-pagination {
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.fx-list-pagination__pages {
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem !important;
}

.fx-list-pagination__page,
.fx-list-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.75rem;
	letter-spacing: 0;
	line-height: 1;
}

.fx-list-pagination__page {
	border: 1px solid transparent;
	color: var(--muted-foreground);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.fx-list-pagination__page:hover,
.fx-list-pagination__page:focus-visible {
	border-color: color-mix(in oklab, var(--accent) 45%, transparent);
	background: color-mix(in oklab, var(--accent) 8%, transparent);
	color: var(--accent);
	outline: none;
}

.fx-list-pagination__page.is-current {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--primary-foreground);
	text-decoration: none;
}

.fx-list-pagination__ellipsis {
	min-width: 1.25rem;
	color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
}

.fx-list-pagination__control {
	flex: 0 0 auto;
	min-height: 2.25rem;
	border-radius: 999px;
	padding: 0 0.75rem;
	white-space: nowrap;
}

.fx-list-pagination__control:hover,
.fx-list-pagination__control:focus-visible {
	background: color-mix(in oklab, var(--foreground) 6%, transparent);
	outline: none;
}

.fx-list-pagination__control.is-disabled {
	opacity: 0.45;
}

@media (max-width: 640px) {
	.fx-list-pagination {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.fx-list-pagination__pages {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 0.75rem;
	}

	.fx-list-pagination__control--prev {
		grid-column: 1;
		justify-self: start;
	}

	.fx-list-pagination__control--next {
		grid-column: 2;
		justify-self: end;
	}
}