/**
 * Query pagination block.
 */

.wp-block-query-pagination {
	gap: 0.5rem;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers,
.wp-block-query-pagination > a,
.wp-block-query-pagination .page-numbers {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: var(--wp--custom--radius--pill);
	min-inline-size: 2.5rem;
	justify-content: center;
	padding: 0.4375rem 0.875rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Breathing room between the last result and the pager, and between the pager
   and whatever follows it. Set here as well as in theme.json so the rhythm
   survives a pager dropped into a custom query loop. */
.wp-block-query-pagination {
	flex-wrap: wrap;
	margin-block: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--40);
	row-gap: 0.75rem;
}

/* Previous / Next sit at the outer edges when both are present. */
.wp-block-query-pagination > .wp-block-query-pagination-next:last-child {
	margin-inline-start: auto;
}

/* On a coloured band the pager borrows the surrounding text colour. */
.has-surface-dark-background-color .wp-block-query-pagination a,
.has-surface-dark-background-color .wp-block-query-pagination .page-numbers,
.has-contrast-background-color .wp-block-query-pagination a,
.has-contrast-background-color .wp-block-query-pagination .page-numbers {
	border-color: currentColor;
	color: currentColor;
}

.has-surface-dark-background-color .wp-block-query-pagination a:hover,
.has-surface-dark-background-color .wp-block-query-pagination a:focus,
.has-contrast-background-color .wp-block-query-pagination a:hover,
.has-contrast-background-color .wp-block-query-pagination a:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}