/**
 * Component: numbered pagination (not designed: built from the tokens).
 * Square page links at the control size (44px touch target on mobile), the
 * current page filled in primary, previous / next as text links.
 */

.pagination {
	margin-block-start: var(--wp--preset--spacing--70);
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination .pagination__link,
.pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--control--size);
	min-block-size: var(--wp--custom--control--size);
	padding-inline: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-6);
	line-height: var(--wp--custom--line-height--h-6);
	text-decoration: none;
}

.pagination__dots {
	border-color: transparent;
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
}

.pagination a.pagination__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}

.pagination .pagination__link[aria-current="page"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
}

.pagination .pagination__link--step {
	padding-inline: var(--wp--preset--spacing--40);
	text-transform: uppercase;
}