/*
 * Query Pagination follows the compact REUI metric while preserving the SGGW
 * color, focus and icon contracts. The selectors also normalize pagination
 * blocks saved before this stylesheet existed.
 */

.wp-block-query-pagination.wp-block-query-pagination {
	--sggw-pagination-control-size: 32px;
	--sggw-pagination-gap: 2px;
	--sggw-pagination-icon-gap: 6px;
	--sggw-pagination-radius: 4px;
	align-items: center;
	column-gap: var(--sggw-pagination-gap);
	flex-wrap: wrap;
	row-gap: var(--sggw-pagination-gap);
}

.wp-block-query-pagination-numbers {
	align-items: center;
	column-gap: var(--sggw-pagination-gap);
	display: inline-flex;
	margin: 0;
	row-gap: var(--sggw-pagination-gap);
}

.wp-block-query-pagination
	:is(
		.wp-block-query-pagination-previous,
		.wp-block-query-pagination-next,
		.page-numbers
	) {
	align-items: center;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--wp--custom--component--navigation--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	justify-content: center;
	line-height: var(--wp--custom--typography--line-height--medium);
	text-decoration: none;
	text-transform: none;
	transition: color 150ms ease;
}

.wp-block-query-pagination
	:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	block-size: var(--sggw-pagination-control-size);
	color: var(--sggw-link-foreground);
	display: inline-flex;
	min-block-size: var(--sggw-pagination-control-size);
	min-inline-size: 0;
	padding: 0;
	text-decoration-color: currentColor;
	text-decoration-line: var(--sggw-link-decoration-rest);
	text-decoration-skip-ink: auto;
	text-decoration-thickness: var(--sggw-link-decoration-thickness);
	text-underline-offset: var(--sggw-link-underline-offset);
	white-space: nowrap;
}

.wp-block-query-pagination
	:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):visited {
	color: var(--sggw-link-foreground);
}

.wp-block-query-pagination .page-numbers {
	block-size: var(--sggw-pagination-control-size);
	border: var(--wp--custom--line--width) solid transparent;
	border-radius: var(--sggw-pagination-radius);
	display: inline-flex;
	inline-size: var(--sggw-pagination-control-size);
	min-block-size: var(--sggw-pagination-control-size);
	min-inline-size: var(--sggw-pagination-control-size);
	padding: 0;
	transition: background-color 150ms ease, color 150ms ease;
}

.wp-block-query-pagination
	:is(
		.wp-block-query-pagination-previous-arrow,
		.wp-block-query-pagination-next-arrow
	) {
	block-size: var(--sggw-icon-size-small);
	color: currentColor;
	display: inline-block;
	flex: 0 0 auto;
	font-size: 0;
	inline-size: var(--sggw-icon-size-small);
	line-height: var(--sggw-icon-size-small);
	text-decoration: none;
	vertical-align: middle;
}

.wp-block-query-pagination
	:is(
		.wp-block-query-pagination-previous-arrow,
		.wp-block-query-pagination-next-arrow
	)::before {
	block-size: var(--sggw-icon-size-small);
	color: currentColor;
	content: var(--sggw-icon-glyph-caret-right);
	display: inline-block;
	font-family: var(--sggw-icon-font-family);
	font-size: var(--sggw-icon-size-small);
	font-style: normal;
	font-weight: var(--sggw-icon-font-weight-regular);
	inline-size: var(--sggw-icon-size-small);
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.wp-block-query-pagination .wp-block-query-pagination-previous-arrow {
	margin-inline-end: var(--sggw-pagination-icon-gap);
}

.wp-block-query-pagination .wp-block-query-pagination-next-arrow {
	margin-inline-start: var(--sggw-pagination-icon-gap);
}

.wp-block-query-pagination .wp-block-query-pagination-previous-arrow::before {
	transform: scaleX(-1);
}

:dir(rtl)
	.wp-block-query-pagination
	.wp-block-query-pagination-previous-arrow::before {
	transform: none;
}

:dir(rtl)
	.wp-block-query-pagination
	.wp-block-query-pagination-next-arrow::before {
	transform: scaleX(-1);
}

.wp-block-query-pagination .page-numbers.dots {
	color: var(--sggw-text-muted);
	cursor: default;
	pointer-events: none;
}

.wp-block-query-pagination
	:is(.page-numbers.current, [aria-current="page"]) {
	background-color: var(--wp--custom--component--navigation--background-pressed);
	color: var(--wp--custom--component--navigation--foreground);
	cursor: default;
}

.wp-block-query-pagination a:focus:not(:focus-visible) {
	outline: none;
}

.wp-block-query-pagination a:focus-visible {
	outline: var(--wp--custom--line--focus-ring-width) solid var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset-compact);
}

.wp-block-query-pagination
	:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):focus-visible {
	text-decoration-line: var(--sggw-link-decoration-interactive);
}

.wp-block-query-pagination
	.page-numbers:not(.current):not([aria-current="page"]):focus-visible:not(:active) {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--hover),
		transparent
	);
}

@media (hover: hover) {
	.wp-block-query-pagination
		:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
		color: var(--sggw-link-foreground);
		text-decoration-line: var(--sggw-link-decoration-interactive);
	}

	.wp-block-query-pagination
		.page-numbers:not(.current):not([aria-current="page"]):hover {
		background-color: color-mix(
			in srgb,
			var(--sggw-text) var(--wp--custom--state-layer--hover),
			transparent
		);
		color: var(--wp--custom--component--navigation--foreground);
	}
}

.wp-block-query-pagination
	:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):active {
	color: var(--sggw-link-foreground);
	text-decoration-line: var(--sggw-link-decoration-interactive);
}

.wp-block-query-pagination
	.page-numbers:not(.current):not([aria-current="page"]):active {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--pressed),
		transparent
	);
	color: var(--wp--custom--component--navigation--foreground);
}

@media (max-width: 639px) {
	.wp-block-query-pagination
		:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		column-gap: 0;
		font-size: 0;
		inline-size: var(--sggw-pagination-control-size);
		line-height: 0;
		min-inline-size: var(--sggw-pagination-control-size);
		padding: 0;
	}

	.wp-block-query-pagination
		:is(
			.wp-block-query-pagination-previous-arrow,
			.wp-block-query-pagination-next-arrow
		) {
		margin-inline: 0;
	}
}

@media (forced-colors: active) {
	.wp-block-query-pagination
		:is(
			.wp-block-query-pagination-previous,
			.wp-block-query-pagination-next,
			.page-numbers
		) {
		background-color: Canvas;
		border-color: transparent;
		color: LinkText;
		forced-color-adjust: none;
	}

	.wp-block-query-pagination
		:is(.page-numbers.current, [aria-current="page"]) {
		background-color: Highlight;
		border-color: Highlight;
		color: HighlightText;
	}

	.wp-block-query-pagination
		:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		text-decoration-line: underline;
	}

	.wp-block-query-pagination
		.page-numbers:not(.current):is(:hover, :focus-visible, :active) {
		background-color: Highlight;
		border-color: Highlight;
		color: HighlightText;
	}

	.wp-block-query-pagination a:focus-visible {
		outline-color: Highlight;
	}

	.wp-block-query-pagination .page-numbers.dots {
		background-color: Canvas;
		border-color: transparent;
		color: CanvasText;
	}
}