/**
 * No.05 ページネーション（pagination）／数字ボタン（btn-square）。
 *
 * Figma: nav__pagenation（949:22444）／ btn--square icon=pagenation（30:467）
 * - 幅 100%。prev 左 / 数字中央 / next 右。
 * - btn-square: data-state=hover|current（未指定＝初期・灰枠）。
 * - 初期のみ hover（invert + text-move through-up）。current / hover は属性なし。
 */

/* --- btn-square（ページ数字） --- */

.pagination__link {
	--hover-invert-a: var(--wp--preset--color--base-white);
	--hover-invert-b: var(--wp--preset--color--logo-blue);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-width: var(--wp--custom--border-width--thin);
	border-color: var(--wp--preset--color--line-grey);
	background-color: var(--hover-invert-a);
	color: var(--wp--preset--color--base-black);
	font-family: var(--wp--preset--font-family--en-sans, sans-serif);
	font-size: var(--wp--preset--font-size--text-sm);
	font-weight: var(--wp--custom--font-weight--light, 300);
	line-height: 1.25;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	overflow: hidden;
}

/* theme.json の a:hover underline を打ち消し（.wp-element-button ではないため対象になる） */
a.pagination__link:focus {
	text-decoration: none;
}

.pagination__link:focus {
	outline: none;
}

.pagination__link .pagination__label {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
}

.pagination__link .pagination__label-text {
	display: block;
}

/* hover: 塗り（hover 相当の静止表示） */
.pagination__link[data-state="hover"] {
	border-color: var(--wp--preset--color--logo-blue);
	background-color: var(--wp--preset--color--logo-blue);
	color: var(--wp--preset--color--base-white);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	cursor: default;
}

/* current: 青枠・青文字（選択中・hover なし） */
.pagination__link[data-state="current"] {
	border-color: var(--wp--preset--color--logo-blue);
	background-color: var(--wp--preset--color--base-white);
	color: var(--wp--preset--color--logo-blue);
	font-weight: var(--wp--custom--font-weight--medium, 500);
	cursor: default;
}

/*
 * 初期表示の invert: .pagination__link の静止 color/bg より特異度を上げる。
 * text-move（through-up）は hover.css 側。
 */

/* --- pagination --- */

.pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	width: 100%;
	box-sizing: border-box;
	gap: var(--wp--custom--atom--rg, 0.5rem);
}

.pagination__prev {
	justify-self: start;
}

.pagination__next {
	justify-self: end;
}

.pagination__page {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem; /* 10px（Figma） */
	justify-self: center;
}

.pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1rem;
	font-family: var(--wp--preset--font-family--en-sans, sans-serif);
	font-size: 1.25rem;
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1.25;
	color: var(--wp--preset--color--base-black);
}

/*
 * prev/next: Figma は line-grey 枠＋黒文字（primary の青枠を上書き）。
 * hover は invert + bg-slide + through-left/right。
 * 静止時 color の特異度が高いため、hover 時の text invert をここで上書きする。
 */
.pagination__prev .wp-block-button,
.pagination__next .wp-block-button {
	margin: 0;
}

.pagination__prev .wp-block-button.is-style-outline .btn,
.pagination__next .wp-block-button.is-style-outline .btn,
.pagination__prev .wp-block-button.is-style-primary .btn,
.pagination__next .wp-block-button.is-style-primary .btn,
.pagination__prev .wp-block-button.is-style-outline .wp-block-button__link,
.pagination__next .wp-block-button.is-style-outline .wp-block-button__link,
.pagination__prev .wp-block-button.is-style-primary .wp-block-button__link,
.pagination__next .wp-block-button.is-style-primary .wp-block-button__link,
.pagination__prev .btn[data-variant="outline"],
.pagination__next .btn[data-variant="outline"] {
	--hover-invert-a: var(--wp--preset--color--base-white);
	--hover-invert-b: var(--wp--preset--color--logo-blue);
	min-width: 7.75rem; /* 124px（Figma） */
	max-width: 15.25rem; /* button-max xxs */
	border-color: var(--wp--preset--color--line-grey);
	color: var(--wp--preset--color--base-black);
}

.pagination__prev .wp-block-button.is-style-outline .btn[data-state="disabled"],
.pagination__next .wp-block-button.is-style-outline .btn[data-state="disabled"],
.pagination__prev .wp-block-button.is-style-primary .btn[data-state="disabled"],
.pagination__next .wp-block-button.is-style-primary .btn[data-state="disabled"],
.pagination__prev .btn[data-variant="outline"][data-state="disabled"],
.pagination__next .btn[data-variant="outline"][data-state="disabled"],
.pagination__prev .wp-block-button.is-style-outline .btn:disabled,
.pagination__next .wp-block-button.is-style-outline .btn:disabled,
.pagination__prev .wp-block-button.is-style-primary .btn:disabled,
.pagination__next .wp-block-button.is-style-primary .btn:disabled,
.pagination__prev .btn[data-variant="outline"]:disabled,
.pagination__next .btn[data-variant="outline"]:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* :focus-visible（常時有効） */
a.pagination__link:focus-visible {
	text-decoration: none;
}

.pagination__link:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.pagination__link[data-hover-bg="invert"]:focus-visible {
	background-color: var(--hover-invert-b);
	border-color: var(--hover-invert-border, var(--hover-invert-b));
}

.pagination__link[data-hover-text="invert"]:focus-visible {
	color: var(--hover-invert-a);
}

.pagination__prev .wp-block-button.is-style-outline .btn[data-hover-text="invert"]:focus-visible,
.pagination__next .wp-block-button.is-style-outline .btn[data-hover-text="invert"]:focus-visible,
.pagination__prev .wp-block-button.is-style-primary .btn[data-hover-text="invert"]:focus-visible,
.pagination__next .wp-block-button.is-style-primary .btn[data-hover-text="invert"]:focus-visible,
.pagination__prev .btn[data-variant="outline"][data-hover-text="invert"]:focus-visible,
.pagination__next .btn[data-variant="outline"][data-hover-text="invert"]:focus-visible {
	color: var(--hover-invert-a);
}

@media (hover: hover) and (pointer: fine) {
	a.pagination__link:hover {
		text-decoration: none;
	}

	.pagination__link[data-hover-bg="invert"]:hover {
		background-color: var(--hover-invert-b);
		border-color: var(--hover-invert-border, var(--hover-invert-b));
	}

	.pagination__link[data-hover-text="invert"]:hover {
		color: var(--hover-invert-a);
	}

	.pagination__prev .wp-block-button.is-style-outline .btn[data-hover-text="invert"]:hover,
	.pagination__next .wp-block-button.is-style-outline .btn[data-hover-text="invert"]:hover,
	.pagination__prev .wp-block-button.is-style-primary .btn[data-hover-text="invert"]:hover,
	.pagination__next .wp-block-button.is-style-primary .btn[data-hover-text="invert"]:hover,
	.pagination__prev .btn[data-variant="outline"][data-hover-text="invert"]:hover,
	.pagination__next .btn[data-variant="outline"][data-hover-text="invert"]:hover {
		color: var(--hover-invert-a);
	}

}