/*
 * Links to the parts of a long text that an author split with a Page Break block (nayumi_link_pages()).
 *
 * WordPress prints each part as a link and the part on show as a span with aria-current="page"; both carry its
 * own class, post-page-numbers. Every number is a 44 px target.
 *
 * Markup: <nav class="page-links"><span class="page-links__label">Pages:</span> <a class="post-page-numbers">2</a> ...</nav>
 */
@layer components {
	.page-links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}

	.page-links__label {
		margin-inline-end: var(--space-2);
		color: var(--color-text-muted);
	}

	.page-links .post-page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--size-control-md);
		min-height: var(--size-control-md);
		padding-inline: var(--space-3);
		border: 1px solid var(--color-line-strong);
		border-radius: var(--radius-md);
		text-decoration: none;
	}

	.page-links .current {
		border-color: var(--color-primary);
		background: var(--color-primary);
		color: var(--color-text-inverse);
	}

	@media (hover: hover) {
		.page-links a.post-page-numbers:hover {
			background: var(--color-surface-tint);
		}
	}
}