/**
 * ONEsta — ページャーデザイン
 *
 * body クラス onesta-pager-{style} でバリエーション切替。
 * WordPress のデフォルト .wp-block-query-pagination を対象とする。
 */

/* === 共通ベース === */
.wp-block-query-pagination {
	gap: 0.5em;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	text-decoration: none;
	transition: background-color var(--onesta-duration), color var(--onesta-duration);
}

/* === number — 番号（デフォルト） === */
.onesta-pager-number .page-numbers {
	border: 1px solid var(--wp--preset--color--neutral-200, #e2e2e2);
	border-radius: var(--onesta-radius, 0);
	color: var(--wp--preset--color--neutral-700, #333);
	background: transparent;
}

.onesta-pager-number .page-numbers.current,
.onesta-pager-number .page-numbers:hover {
	background: var(--wp--preset--color--primary, #333);
	color: var(--wp--preset--color--neutral-50, #fff);
	border-color: var(--wp--preset--color--primary, #333);
}

/* === dot — ドット === */
.onesta-pager-dot .page-numbers {
	width: 12px;
	height: 12px;
	min-width: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-200, #e2e2e2);
	font-size: 0;
	overflow: hidden;
	text-indent: -9999px;
}

.onesta-pager-dot .page-numbers.current {
	background: var(--wp--preset--color--primary, #333);
	transform: scale(1.3);
}

.onesta-pager-dot .page-numbers.prev,
.onesta-pager-dot .page-numbers.next {
	width: auto;
	min-width: 2.5em;
	height: 2.5em;
	border-radius: var(--onesta-radius, 0);
	font-size: inherit;
	text-indent: 0;
	overflow: visible;
	background: transparent;
	border: 1px solid var(--wp--preset--color--neutral-200, #e2e2e2);
}

/* === simple — シンプル（前後のみ） === */
.onesta-pager-simple .wp-block-query-pagination-numbers {
	display: none;
}

.onesta-pager-simple .wp-block-query-pagination-previous,
.onesta-pager-simple .wp-block-query-pagination-next {
	padding: 0.5em 1.5em;
	border: 1px solid var(--wp--preset--color--neutral-200, #e2e2e2);
	border-radius: var(--onesta-radius, 0);
	text-decoration: none;
	transition: background-color var(--onesta-duration);
}

.onesta-pager-simple .wp-block-query-pagination-previous:hover,
.onesta-pager-simple .wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--primary, #333);
	color: var(--wp--preset--color--neutral-50, #fff);
	border-color: var(--wp--preset--color--primary, #333);
}