/**
 * core/query-pagination block styles.
 *
 * Hand-written and enqueued as-is from the `$block_styles` map in
 * functions.php; there is no build step for this file, so edit it directly and
 * keep the properties logical (`margin-inline`, `padding-inline`) -- nothing
 * under assets/css/ passes through rtlcss.
 *
 * These rules came out of assets/scss/woocommerce/_wc-blocks.scss, where the
 * query pagination shared one selector list with the comments pagination, the
 * classic `paginate_links()` markup and `wp_link_pages()`. Only the query
 * pagination is a block we can hang a stylesheet off, so that is what moved;
 * the other three keep their copy in the SCSS, which is why the two files
 * still read alike. Every page that paints this block -- the shop archive,
 * product search, the blog -- loads this file and nothing else does.
 *
 * The block renders three children, and only the middle one is guaranteed:
 *
 *   nav.wp-block-query-pagination
 *     > a.wp-block-query-pagination-previous     omitted on the first page
 *     > div.wp-block-query-pagination-numbers    > a/span.page-numbers
 *     > a.wp-block-query-pagination-next         omitted on the last page
 *
 * Two things follow from that shape and both are fixed here.
 *
 * The previous and next links are anchors while the numbers are boxed 42x48
 * pills, so left to themselves the three sit on different centre lines. Core's
 * flex layout centres the row on its cross axis, but the rules that moved here
 * pushed `margin-bottom: 8px` onto the two anchors and sized them `auto`,
 * which tipped them back off it. That margin is gone and the anchors carry the
 * numbers' height, so all three agree whatever the label wraps to.
 *
 * The first page has no previous link at all -- core's render callback returns
 * an empty string -- so the row jumps sideways between page 1 and page 2.
 * `eride_query_pagination_disabled_previous()` in functions.php renders the
 * gap as a real, inert `.is-disabled` element instead; the styling for it is
 * below, beside the live links it has to match.
 */

/*
 * The space above the row, and only that. The class is doubled for specificity
 * and for nothing else: the nav is a flow child of the product collection, so
 * global styles reach it as `:root :where(.is-layout-flow) > *` and set
 * `margin-block-start` to the theme's 1.2rem block gap. That is one class's
 * worth of weight, printed after this file, so a single class here loses to it
 * and the row sits 19px under the grid instead of the 36px it wants. The rule
 * is kept out of the nest below so the doubling does not travel to every
 * selector in the file.
 */

.wp-block-query-pagination.wp-block-query-pagination {
	margin-block-start: 36px;
}

/*
 * Everything else. The row's `display`, `flex-wrap`, `align-items`,
 * `justify-content` and gap are all the block's own layout support, printed
 * later in the head than this file, so none of them is ours to set.
 */

.wp-block-query-pagination {

	.wp-block-query-pagination-numbers {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		margin: 0;
	}

	.page-numbers,
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.6;
		border-radius: 15px;
		border: 1px solid transparent;
		color: var(--wp--preset--color--gray-100);
	}

	.page-numbers {
		width: 42px;
	}

	/*
	 * The current page is a span, never an anchor, so it takes the border
	 * outright and needs no hover or focus guard against the rule below.
	 */
	.page-numbers.current {
		border-color: var(--wp--preset--color--gray-100);
	}

	/*
	 * The previous and next links are labelled, so they size to their text
	 * rather than to the numbers' 42px square -- only the height is shared.
	 */
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		gap: 8px;
		padding-inline: 14px;

		&,
		&:hover,
		&:focus {
			background-color: transparent;
		}

		.is-arrow-arrow,
		.is-arrow-chevron {
			margin-inline: 0;
			font-size: 18px;
			line-height: 1;
		}
	}

	a.page-numbers:hover,
	a.wp-block-query-pagination-previous:hover,
	a.wp-block-query-pagination-next:hover {
		border-color: var(--wp--preset--color--gray-100);
		color: var(--wp--preset--color--gray-100);
	}

	/*
	 * The stand-in for the missing previous link. It is not an anchor, so it
	 * takes no hover or focus treatment -- it is here to hold the row's shape
	 * and to say the direction exists but leads nowhere.
	 */
	.wp-block-query-pagination-previous.is-disabled {
		color: var(--wp--preset--color--gray-1000);
		cursor: default;
		pointer-events: none;
	}
}