/**
 * Pagination.
 *
 * Root cause this file exists: the theme dequeues woocommerce.css, which is
 * where `nav.woocommerce-pagination { text-align: center }` and
 * `ul.page-numbers li { display: inline-block }` live. With those gone and no
 * theme rules to replace them, `ul.page-numbers` fell back to browser defaults
 * - disc bullets, a 40px indent and block-level <li> - so the page numbers
 * stacked vertically down the left edge. Nothing was overriding anything; the
 * block was simply never styled.
 *
 * Two markup shapes are covered:
 *   WooCommerce  nav.woocommerce-pagination > ul.page-numbers > li > a|span.page-numbers
 *   Core         nav.pagination > .nav-links > a|span.page-numbers   (blog, search)
 *
 * @package TheCoinShed
 */

.woocommerce-pagination,
.tcs-pagination,
nav.pagination {
	display: flex;
	justify-content: center;
	margin-block: var(--tcs-space-xl) var(--tcs-space-md);
}

/* The row itself. flex-wrap keeps a long series from overflowing on a phone. */
.woocommerce-pagination ul.page-numbers,
.tcs-pagination ul.page-numbers,
nav.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-pagination ul.page-numbers li,
.tcs-pagination ul.page-numbers li {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/*
 * Every cell is the same square whether it holds a number, an ellipsis or an
 * arrow, so the arrows sit on the same baseline and optical line as the digits.
 */
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
.tcs-pagination a.page-numbers,
.tcs-pagination span.page-numbers,
nav.pagination .nav-links a.page-numbers,
nav.pagination .nav-links span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--tcs-space-xs);
	border: var(--tcs-border);
	border-radius: var(--tcs-radius);
	background: var(--tcs-surface);
	color: var(--tcs-ink-muted);
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-regular);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.woocommerce-pagination a.page-numbers:hover,
.tcs-pagination a.page-numbers:hover,
nav.pagination .nav-links a.page-numbers:hover {
	border-color: var(--tcs-rule-strong);
	background: var(--tcs-surface-raised);
	color: var(--tcs-ink);
}

.woocommerce-pagination a.page-numbers:focus-visible,
.tcs-pagination a.page-numbers:focus-visible,
nav.pagination .nav-links a.page-numbers:focus-visible {
	outline: var(--tcs-focus-width) solid var(--tcs-focus-color);
	outline-offset: var(--tcs-focus-offset);
}

/* The page you are on. Tinted rather than filled - it is a marker, not a button. */
.woocommerce-pagination span.page-numbers.current,
.woocommerce-pagination a.page-numbers.current,
.tcs-pagination span.page-numbers.current,
nav.pagination .nav-links span.page-numbers.current {
	border-color: var(--tcs-accent);
	background: var(--tcs-accent-tint);
	color: var(--tcs-ink);
	font-weight: var(--tcs-weight-medium);
}

/* The gap marker is punctuation, not a target. */
.woocommerce-pagination span.page-numbers.dots,
.tcs-pagination span.page-numbers.dots,
nav.pagination .nav-links span.page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--tcs-ink-faint);
	min-width: 1.5rem;
	padding-inline: 0;
}

/* Arrows read as direction, not as a numeral. */
.woocommerce-pagination a.page-numbers.prev,
.woocommerce-pagination a.page-numbers.next,
.tcs-pagination a.page-numbers.prev,
.tcs-pagination a.page-numbers.next,
nav.pagination .nav-links a.page-numbers.prev,
nav.pagination .nav-links a.page-numbers.next {
	color: var(--tcs-ink);
	font-size: var(--tcs-text-md);
}

/* Core's own labelled prev/next, which carry text rather than a glyph. */
nav.pagination .nav-links .prev.page-numbers,
nav.pagination .nav-links .next.page-numbers {
	white-space: nowrap;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.woocommerce-pagination,
	.tcs-pagination,
	nav.pagination {
		margin-block: var(--tcs-space-lg) var(--tcs-space-sm);
	}

	/* Bigger targets for thumbs; the row wraps rather than scrolls sideways. */
	.woocommerce-pagination a.page-numbers,
	.woocommerce-pagination span.page-numbers,
	.tcs-pagination a.page-numbers,
	.tcs-pagination span.page-numbers,
	nav.pagination .nav-links a.page-numbers,
	nav.pagination .nav-links span.page-numbers {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
}